現在前后端分離應用越來越廣泛了，后端將數據以 JSON 方式傳遞給Javascript ，前端通過渲染模板完成界面輸出。 介于傳統拼接字符串非常難以維護，JS 模板引擎因此越來越多的得到應用，如今已經出現了幾十種js模板引擎，國內各大互聯網公司也都開發了自己的 js 模板引擎。 那么 QueryPHP 提供與上述的模板引擎有何不同呢，區別那是相當地大，QueryPHP 放棄了 Javascript 本身作為模板引擎編譯，而是采用 PHP 輸出一個拼接字符串，然后根據這個字符串簡單地處理一下輸出到瀏覽器端。 1：HTML 模板中標記： ~~~ <script id="queryphp-js" type="text/html"> {{if condition="money > 5"}} Thank U ! You {{goods}} is here ! {{/if}} </script> ~~~ 2：PHP 編譯成 JS : ~~~ <script id="queryphp-js" type="text/html"> '; if( (money > 5) ) { out += ' Thank U ! You ' + (goods) + ' is here ! '; } out += ' </script> ~~~ 注意：這是 PHP 編譯后的js，這個代碼左看右看挺別扭，而且肯定無法運行，這個時候 JS 是時候出場。 3：JS 模板引擎 ~~~ /** * JS 模板引擎 * * @param string * id ID、jquery對象或者DOM * @param object * $data 數據 * @returns */ template : function(id, $data) { "use strict"; var str = 'var ', temp = [], out = ''; // 變量賦值 for ( var k in $data) { temp.push(k + " = $data['" + k + "']"); } str += temp.join(", ") + ";\n"; // 模板內容 if (typeof id == 'string') { id = $('#' + id); } else if (!(id instanceof jQuery)) { id = $(id); } str += "out += '" + id.html() + "';"; // 去掉空格和回車換行 str = str.replace(/\s+/g, ' ') // 去掉多個空格 .replace(/[\r\n]/g, ""); // 去掉回車換行 // 調試語句 str = "try { " + str + "} catch ( e ) {" + "out = '<font color=\"red\">template error, see console</font>';" + "console.log('%c Query Yet Simple','color:gray;');" + "console.log('%c '+e.code + ': ' + e.message,'color:red;');" + "}"; // 執行編譯 eval(str); return out; } ~~~ 完整過程：將 $data 數據分解到變量中去，補全字符串，去掉空格和回車，eval 一下執行。 4：測試一下 ~~~ <div id="queryphp-content"></div> <script type="text/javascript"> $(function(){ var data = { money : 10, goods : '蘋果' }; var html = $.fn.queryphp('template','queryphp-js', data); document.getElementById('queryphp-content').innerHTML = html; }); </script> ~~~ 注意：這個模板引擎已經被打包到 jquery.queryphp.js 中，所以這里用法為 $.fn.queryphp 這樣子，后面會單獨介紹，這里只做一些原理講解。 瀏覽器得到如下結果：  模板引擎編譯的 EVAL 打印如來如下： ~~~ try { var money = $data['money'] , goods = $data['goods']; out += ' '; if ((money > 5) ) { out += ' Thank U ! You ' + (goods) + ' is here ! '; } out += ' '; } catch (e) { out = '<font color="red">template error, see console</font>'; console.log('%c Query Yet Simple', 'color:gray;'); console.log('%c ' + e.code + ': ' + e.message, 'color:red;'); } ~~~ 部分 PHP 編譯器如下： ~~~ /** * Javascript 編譯器 * * 采用 Node 編譯器核心 */ // 變量及表達式 public function jsvarCompiler(&$arrTemplate) { $arrTemplate ['content'] = "' + " . $this->parseJsContent_ ( $arrTemplate ['content'] ) . " + '"; } // if 編譯器 public function ifJsCompiler(&$arrTemplate) { $this->checkNode_ ( $arrTemplate, true ); $arrAttr = $this->getNodeAttribute_ ( $arrTemplate ); $arrAttr ['condition'] = $this->parseJsContent_ ( $arrAttr ['condition'] ); $sCompiled = "'; if( {$arrAttr['condition']} ) { out += '" . $this->getNodeBody ( $arrTemplate ) . "'; } out += '"; $arrTemplate ['content'] = $sCompiled; } ~~~ OK 了，這里就是采用 PHP 和 Javascript 結合開發出來的模板引擎，比較適合特定 PHP 框架預編譯模板的場景。 > 優點：不需要 Javascript 編譯，只需要簡單處理一下拼接字符串就 OK，運行速度快。 缺點：與 PHP 綁定了，只有在某個框架下面，而且必須使用該框架提供的模板引擎。