ES6-模板編譯函數(shù)問題

教程地址

找到了這個(gè)地址,看了看

const evalExpr = /<%=(.+?)%>/g;//(.+?)相當(dāng)于是匹配一行的內(nèi)容
//這個(gè)是從'<%='開始到'%>'結(jié)束,如果中間換行了不會(huì)匹配,例如 <%=val%>那么val就是被匹配到的值
const expr = /<%([\s\S]+?)%>/g;//([\s\S]+?)可以匹配多行
//這個(gè)是從'<%'開始到'%>'結(jié)束,換行了也會(huì)繼續(xù)匹配到


//兩個(gè)表達(dá)式的后面/g,相當(dāng)于是參數(shù),g表示著全局,就是只要符合這個(gè)匹配條件的都會(huì)匹配到
//emmmmmmmmm我覺得我表達(dá)得可能不是很清楚...   .  + ? \s \S可以去翻一下正則的手冊(cè)了解一下

parse傳參數(shù)為什么要這么傳,這個(gè)就是由你的模板決定的了,

let template = `
<ul>
  <% for(let i=0; i < data.length; i++) { %>
    <li><%= data[i] %></li>
  <% } %>
</ul>
`;
//data.supplies.length 修改成data.length   data.supplies[i],修改成data[i]  這樣你就可以傳入數(shù)組了
console.log(parse(["broom", "mop", "cleaner"]));

template為什么不用定義聲明？啥意思,沒懂

為什么它還有方法.replace？template是一個(gè)string對(duì)象,本來就有著replace這個(gè)方法 string對(duì)象 string對(duì)象 replace方法 了解一下

不是很懂template那段寫的是什么意思？
這個(gè)主要就是替換了

template = template
    .replace(evalExpr, '`); \n  echo( $1 ); \n  echo(`')
    .replace(expr, '`); \n $1 \n  echo(`');
    
//咋說呢emmmm,我們拆開一下,先看看上面的string對(duì)象 replace方法,主要就是替換文本
template = template.replace(evalExpr, '`); \n  echo( $1 ); \n  echo(`');
//evalExpr = /<%=(.+?)%>/g;  前面已經(jīng)知道了是替換文本中的 <%=xxxxx%>的內(nèi)容
//所以這個(gè)語(yǔ)句就是,吧template里面的所匹配到的<%=xxxxx%>的內(nèi)容替換掉
//替換成什么呢?替換成        "); \n  echo( $1 ); \n  echo("     ,里面最核心的就是$1了
//$1表示與 regexp(evalExpr 正則表達(dá)式) 中的第 1 到第 99 個(gè)子表達(dá)式相匹配的文本。(我copy w3c的)
//也就是(.+?)表示的內(nèi)容,對(duì)就是 xxxxx 那玩意
//然后我的文本(<%=xxxxx%>)就變成了        "); \n  echo( xxxxx  ); \n  echo("
//返回這個(gè)文本,template又被賦值了,進(jìn)入下一個(gè)

template = template.replace(expr, '`); \n $1 \n  echo(`');
//同上啊,這回只是 <%([\s\S]+?)%> 變成了 "`); \n xxxxx  \n  echo(`"
//上面的單引號(hào)我都換成了雙引號(hào),'和`看得有點(diǎn)亂....

template = 'echo(`' + template + '`);';//文本相加,這個(gè)應(yīng)該很容易看懂吧
let script =
    `(function parse(data){
    let output = "";

    function echo(html){
      output += html;
    }

    ${ template }

    return output;
  })`;
//也是文本合成
return output; //返回這一串合成的代碼

我覺得樓主可以用調(diào)試功能,這樣可以看到每一個(gè)變量的每一步變化過程,再不濟(jì)用console.log()也不錯(cuò)