--- theme: juejin highlight: a11y-dark --- 这是我参与8月更文挑战的第21天，活动详情查看：[8月更文挑战](https://juejin.cn/post/6987962113788493831 "https://juejin.cn/post/6987962113788493831")。 ## 关于模板关于模板，写页面的人们其实一直在用，asp.net , jsp , php, nodejs等等都有他的存在，当然那是服务端的模板。前端模板，作为前端人员肯定是多少有接触的，Handlebars.js,JsRender,Dust.js,Mustache.js,Underscore templates,Angularjs,**Vuejs,reactjs**到处都离不开模板的影子。 ## Micro-Templating解析在线测试

## Micro-Templating模板本文主要是分析一下jQuery的创始人的Micro-Templating，麻雀虽小缺五张俱全。 **到这里可别笑，说用什么jQuery的，jQuery的思想绝对是异常的优秀，霸榜十多年， React也不过是最近两年才赶超。** 先贴出作者的源码: ```javascript // Simple JavaScript Templating // John Resig - https://johnresig.com/ - MIT Licensed (function(){ var cache = {}; this.tmpl = function tmpl(str, data){ // Figure out if we're getting a template, or if we need to // load the template - and be sure to cache the result. var fn = !/\W/.test(str) ? cache[str] = cache[str] || tmpl(document.getElementById(str).innerHTML) : // Generate a reusable function that will serve as a template // generator (and which will be cached). new Function("obj", "var p=[],print=function(){p.push.apply(p,arguments);};" + // Introduce the data as local variables using with(){} "with(obj){p.push('" + // Convert the template into pure JavaScript str .replace(/[\r\t\n]/g, " ") .split("<%").join("\t") .replace(/((^|%>)[^\t]*)'/g, "$1\r") .replace(/\t=(.*?)%>/g, "',$1,'") .split("\t").join("');") .split("%>").join("p.push('") .split("\r").join("\\'") + "');}return p.join('');"); // Provide some basic currying to the user return data ? fn( data ) : fn; }; })(); ``` ### 基本原理： 1. 使用属性检查来进行缓存 2. 采用正则替换标签（赋值标签，js语句标签） 3. 使用with设置代码在对象中的作用域，主要是提升了编程体验，(当然也可以用apply,call,bind等修改函数作用域，然后通过this.prop来编写，但是体验上差一些) 4. 动态构建执行函数 5. 通过判断决定返回结果类型关于 1，3，5没有太多需要讲的，关于5，如果执行时不传入data参数，返回的执行函数，可以延迟使用，到处使用。 ### print 调试的日志输出。重点在于2和4，在这之前，先看看print，这个print申请在函数顶部，就表示在js语句的时候是可以调用呢，怎么调用呢，看看示例，至于作用么，当然是debug啊 ```html ``` 很简单： <% print('数组长度' + items.length ); %> 原理也很简单，数组p里面添加一条数据 ### 正则替换为了方便debug和备注，我调整一下原理结构 ```js (function () { var cache = {}; this.tmpl = function tmpl(str, data) { // Figure out if we're getting a template, or if we need to // load the template - and be sure to cache the result. var fn = !/\W/.test(str) ? cache[str] = cache[str] || tmpl(document.getElementById(str).innerHTML) : // Generate a reusable function that will serve as a template // generator (and which will be cached). new Function("obj", "var p=[],print=function(){p.push.apply(p,arguments);};" + // Introduce the data as local variables using with(){} "with(obj){p.push('" + // Convert the template into pure JavaScript getStr(str) + "');}return p.join('');"); // Provide some basic currying to the user return data ? fn(data) : fn; }; function getStr(str){ // 删除回车，制表，换行 str = str .replace(/[\r\t\n]/g, " "); // 替换 <% 为 \t制表符，两种情况（赋值和js代码） // 赋值：例如

==>

// js代码：例如 <% for ( var i = 0; i < items.length; i++ ) { %> ==> \t for ( var i = 0; i < items.length; i++ ) { %> str = str.split("<%").join("\t"); // 替换'为\r ，最后一步会重新替换回来 // 节点属性操作赋值使用单引号，如果不替换 ,''>' 是会报错的 //

<%=id%>

==> p.push('

',id,'

'); str = str.replace(/((^|%>)[^\t]*)'/g, "$1\r"); // 赋值解析：赋值后部分，拆分为三项，结合with，id就会成为实际的值，然后一直被push

==>

// 这里会消费掉 <%=xxx%>， // 那么剩下的 %>必然是js语句结尾的, \t必然是js语句的开头 str = str.replace(/\t=(.*?)%>/g, "',$1,'"); //js语句开始符号替换：经过上一步后，还剩余的\t，是js语句的，这里就用 ');来结束，js语句会单开p.push, str = str.split("\t").join("');"); // js语句结尾符号替换： %> 替换为 p.push, 这里把js语句内生成的字符串或者变量再push一次 str = str.split("%>").join("p.push('"); // 替换回车为\' ，恢复str.replace(/((^|%>)[^\t]*)'/g, "$1\r") 去掉的' str = str.split("\r").join("\\'"); return str; } })(); ``` 上面很有意思的是，先完全替换了\r\t，然后再用\r\t作为占位符。 \t作为<%的占位符，\r作为特定条件下'的占位符。 ### 逐步分析我们接下来按照正则替换一步异步来分析 #### 模板源码 ```js <% for ( var i = 0; i < items.length; i++ ) { %> <% if( i%2 == 0) {%>

<%=items[i].id%>:<%=items[i].name%>

<% } %> <% } %> <% print('数组长度' + items.length ); %>

<%=id%>

``` #### 第零步:等于源码,只是把\n显示出来 ```js \n <% for ( var i = 0; i < items.length; i++ ) { %> \n <% if( i%2 == 0) {%>\n

<%=items[i].id%>:<%=items[i].name%>

\n <% } %> \n <% } %>\n <% print('数组长度' + items.length ); %>\n

<%=id%>

\n ``` #### 第一步: replace(/[\r\t\n]/g, " ") 去掉回车，换行，制表 ```js <% for ( var i = 0; i < items.length; i++ ) { %> <% if( i%2 == 0) {%>

<%=items[i].id%>:<%=items[i].name%>

<% } %> <% } %> <% print('数组长度' + items.length ); %>

<%=id%>

``` #### 第二步: split("<%").join("\t") <%替换为\t ```js \t for ( var i = 0; i < items.length; i++ ) { %> \t if( i%2 == 0) {%>

\t=items[i].id%>:\t=items[i].name%>

\t } %> \t } %> \t print('数组长度' + items.length ); %>

\t=id%>

``` #### 第三步: replace(/((^|%>)[^\t]*)'/g, "$1\r") 替换需要保留的'为\r, 主要是节点属性操作 ```js \t for ( var i = 0; i < items.length; i++ ) { %> \t if( i%2 == 0) {%>

\t=items[i].id%>:\t=items[i].name%>

\t } %> \t } %> \t print('数组长度' + items.length ); %>

\r>\t=id%>

``` #### 第四步: replace(/\t=(.*?)%>/g, "',$1,'") 赋值部分替换，',$1,',实际是把赋值部分独立出来，那么push到这里的时候，就会进行运算 ```js \t for ( var i = 0; i < items.length; i++ ) { %> \t if( i%2 == 0) {%>