教程地址

找到了這個地址,看了看

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


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

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

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是一個string對象,本來就有著replace這個方法 string對象 string對象 replace方法 了解一下

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

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

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

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

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

    ${ template }

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

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