欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS模板編譯的實(shí)現(xiàn)詳情

 更新時(shí)間：2022年07月19日 16:54:46   作者：??阿海丶?  
這篇文章主要介紹了JS模板編譯的實(shí)現(xiàn)詳情，編譯是一種格式變成另一種格式的過程。編譯會(huì)導(dǎo)致好的結(jié)果，比如書寫簡(jiǎn)單的代碼，編譯出來復(fù)雜的代碼；或者提高代碼的使用性能

前言

編譯是一種格式變成另一種格式的過程。編譯會(huì)導(dǎo)致好的結(jié)果，比如書寫簡(jiǎn)單的代碼，編譯出來復(fù)雜的代碼；或者提高代碼的使用性能。

這里只聊聊模板編譯。

模板編譯的簡(jiǎn)單實(shí)現(xiàn)

寫一個(gè)最簡(jiǎn)單的模板

<p>Hello, {{name}}!</p>

這個(gè)模板用數(shù)據(jù){name: "world"}渲染后的結(jié)果是：

<p>Hello, world!</p>

解決方法：最簡(jiǎn)單的方案，正則替換就行了

const compile = function(template, data) {
  return template.replace(/{{(.+?)}}/g, (match, key) => data[key])
}

const template = "<p>Hello, I'm {{name}}! {{age}} years old!</p>"
const data = {
  name: "hayes",
  age: 18
}
const result = compile(template, data)
console.log(result); // <p>Hello, I'm hayes! 18 years old!</p>

缺點(diǎn)很明顯，除了正則替換字段，其他啥都干不了，

來看看簡(jiǎn)單的嵌套需求：

模板:

<p>Hello, I'm {{user.name}}! {{user.age}} years old!</p>

渲染數(shù)據(jù);

const data = {
  user: {
    name: "hayes",
    age: 18
  }
}

現(xiàn)在再使用上面的方法，就失效了。還用正則的話，會(huì)很難做。因?yàn)樾枰稣Z法/詞法分析，來看看大括號(hào)內(nèi)寫的是什么了。

模板編譯

其實(shí)對(duì)于上述的模板，也可以使用如下方式來寫：

const compile = function(data) {
  return `<p>Hello, I'm ${data.name}! ${data.age} years old!</p>`
}

好處：只需一次編譯，之后再使用就只需要直接填充數(shù)據(jù)即可。而且也方便支持data.user.name這種形式。

工具：使用new Function生成函數(shù)

生成一個(gè)函數(shù)，傳入x和 y，執(zhí)行return x + y來獲得求和的功能

const fn = new Function("x", "y", "return x + y");

打印fn，可以看到輸出的內(nèi)容如下：

? anonymous(x,y) {
return x + y
}

1、構(gòu)建模板生成函數(shù)

傳入模板字符串，通過new Function方式返回一個(gè)新函數(shù)。新函數(shù)接收一個(gè)obj對(duì)象

const compile = function(template) {
  // 模板字符串
  let result = "";
  // ...
  return new Function("obj", result);
}

2、正則替換

把{{xxx}}找出來，替換為obj.xxx

const compile2 = function(template) {
  // 模板字符串
  let result = template.replace(/{{(.+?)}}/g, (match, key) => {
    return `obj.${key}`
  });
  result = `return "${result}"`;
  return new Function("obj", result);
}
const template2 = "<p>Hello, I'm {{user.name}}! {{user.age}} years old!</p>"
const render2 = compile2(template2)
console.log(render2);

此時(shí)，函數(shù)打印如下：

? anonymous(obj
) {
return "<p>Hello, I'm obj.user.name! obj.user.age years old!</p>"
}

我們需要把字符串中的obj.user.name和obj.user.age變成動(dòng)態(tài)的。

修改一下正則

const compile2 = function(template) {
  // 模板字符串
  let result = template.replace(/{{(.+?)}}/g, (match, key) => {
    return `" + obj.${key} + "`  // 前后添上加號(hào)
  });
  result = `return "${result}"`;
  return new Function("obj", result);
}
const template2 = "<p>Hello, I'm {{user.name}}! {{user.age}} years old!</p>"
const render2 = compile2(template2)
console.log(render2);

再來看看函數(shù)的打?。?/strong>

? anonymous(obj
) {
return "<p>Hello, I'm " + obj.user.name + "! " + obj.user.age + " years old!</p>"
}

最終代碼：

const compile = function(template) {
  // 模板字符串
  let result = template.replace(/{{(.+?)}}/g, (match, key) => {
    return `" + obj.${key} + "`
  });
  result = `return "${result}"`;
  return new Function("obj", result);
}
const template = "<p>Hello, I'm {{user.name}}! {{user.age}} years old!</p>"
const render = compile(template)

const data = {
  user: {
    name: "hayes",
    age: 18
  }
}
const result = render(data)
console.log(result); // <p>Hello, I'm hayes! 18 years old!</p>

渲染結(jié)果：

"<p>Hello, I'm hayes! 18 years old!</p>"

到此這篇關(guān)于JS模板編譯的實(shí)現(xiàn)詳情的文章就介紹到這了,更多相關(guān)JS模板編譯 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論