在 FIS 中，集成了百度前端模板

有好久没有写博客了，大概是因为工作太忙，加上要不断地学习，所以忘记了。。。

进入正题。。。

fis内置了百度前端模板baiduTempate，在编译过程中，会预编译生成对应文件，不需要线上编译，提高页面运行效率。所谓的预编译，开始我也是比较模糊，所以问了一些前端同事再加上自己工作体会便明白了，这里我写下个人的理解，若有不妥之处，还请大家多多指点。

使用fis构建工具时，在 JS 代码中，通过 __inline 方式进行编译处理前端模板。同时规定以 tmpl 为后缀的文件为前端模板，使用方式：

//编译前
var auditTemplate = __inline(‘./audit.tmpl‘);

audit.tmpl代码片段如下

<%if (ad_list && ad_list.length) {%>
    <%for (var i=0; i < ad_list.length; i++) {%>
        <tr>
            <td>
                <span data-node="auditId" data-id="<%=ad_list[i].id %>"><%=ad_list[i].id %></span>
            </td>
            <td>
                <a href="/ad/<%=ad_list[i].id %>" target="_blank"><%=ad_list[i].name %></a>
            </td>
            <td><%=ad_list[i].advertiser %></td>
            <td><%=ad_list[i].inventory_type %></td>
            <td><%=ad_list[i].status %></td>
            <td>
                <a href="/audit/audit_ad_detail/?ad_id=<%=ad_list[i].id %>" target="_blank" class="btn btn-default">审核</a>
                <a href="javascript:;" data-node="abandonBtn" target="_blank" class="abandon-btn btn btn-default">释放</a>
            </td>
        </tr>
    <%}%>
<%}%>

fis工具编译后的代码则为一个函数 如下：

//编译后
var auditTemplate = function(obj){
    var __t,__p=‘‘,__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,‘‘);};
    with(obj||{}){
        __p+=‘ ‘;
        if (ad_list && ad_list.length) {
            __p+=‘\n    ‘;
            for (var i=0; i < ad_list.length; i++) {
                __p+=‘\n<tr>\n<td>\n<span data-node="auditId" data-id="‘+((__t=(ad_list[i].id ))==null?‘‘:__t)+‘">‘+((__t=(ad_list[i].id ))==null?‘‘:__t)+‘</span>\n</td>\n<td>\n<a href="/ad/‘+((__t=(ad_list[i].id ))==null?‘‘:__t)+‘" target="_blank">‘+((__t=(ad_list[i].name ))==null?‘‘:__t)+‘</a>\n</td>\n<td>‘+((__t=(ad_list[i].advertiser ))==null?‘‘:__t)+‘</td>\n<td>‘+((__t=(ad_list[i].inventory_type ))==null?‘‘:__t)+‘</td>\n<td>‘+((__t=(ad_list[i].status ))==null?‘‘:__t)+‘</td>\n<td>\n<a href="/audit/audit_ad_detail/?ad_id=‘+((__t=(ad_list[i].id ))==null?‘‘:__t)+‘" target="_blank" class="btn btn-default">审核</a>\n<a href="javascript:;" data-node="abandonBtn" target="_blank" class="abandon-btn btn btn-default">释放</a>\n</td>\n </tr>\n‘;
            }
        __p+=‘\n‘;
        }
        __p+=‘‘;
    }
    return __p;
};

而如上过程则是在parser单文件编译过程中完成的。

所谓parser编译阶段是指：源文件通过一个个fis插件管道处理之后生成新的文件，可以将其它语言编译为标准的js和css，比如将前端模板、coffee-script编译为js，将less、sass编译为css。处理baiduTemplate的插件为fis-parser-bdtmpl ，通过编译器将模板编译为js文件，如上代码片段编译为一个js函数。 这就是fis内置baiduTemplate后期运用原理。如有不妥，请多多指教。。。