序
html在前端一直被認為是最簡單的，但又容易被忽略，在單頁面開發中，通常被當作字串保存在變數中，把它單純作為一層渲染層來使用，但是，他擁有XML的結構，還擁有保存資料的功能，如果把相關的資料放在html上，而不是單獨的在js中另外創建一個資料結構去存盤，會大大減少js的代碼量，
我非常追崇用最原始的html去構建頁面，這樣子可以構建最直接，最符合用戶直覺的頁面，而且是與框架無關的，然而使用純html來構建復雜的單頁面的模板就會非常的力不從心，根據資料和html模板來生成html的模板引擎技術就應運而出了，市面也有很多的優秀的前端html模板引擎，使用方便但不容易擴展，因此需要開發一個符合自己開發習慣的html模板來配合日常開發的使用，主要遵從一下兩點
- html模板引擎生成的html必須要標準的html，且不應該在元素上增加可有可無的屬性，這一點非常重要，特別在除錯頁面的時候，能準確的定位問題并去修改，這樣能減少一些不確定性；
- 應該以滿足功能為先，追求性能為次，有時候為了某個功能需要消耗很大的性能，但是功能如果是必不可少的，也應該先實作，后期再進行優化處理，
需求
由資料和html模板來生成符合要求的html，這要求模板引擎擁有簡單的資料分析功能，我們這里的資料一般都是切換頁面時候，上一個頁面傳過來的或者是后端傳回來的資料，功能主要有：
- 最基礎的資料替換；
- 擁有資料過濾功能，即資料轉換；
- 簡單的判斷陳述句和簡單的邏輯判斷；
- 簡單的回圈陳述句；
- 上面的情況雜糅在一起，比如多重回圈混合多重判斷，
實作思路
-
資料替換可以很容易用正則運算式來替換，如下代碼
// str代表html模板，obj代表資料， // 比如obj = { a: 1, c: { b: 2 } }, str = <div>{{a}}{{c.b}}</div>, 也可以支持多級 // 也要支持簡單的變數 obj = { a: 1, c: { b: 2, a: 3 }, s: "b" } str = <div>{{c.[s]}}</div> function getProperty(obj, str) { str = str.replace(/\[(.*?)\]/g, function (item, match) { return getProperty(obj, match); }) var tempArray = str.split("."); var property = obj[tempArray[0]], i = 1, len = tempArray.length; while (len - i >= 1) { property = property[tempArray[i]]; i++; } return property; } -
資料過濾，如下代碼
// 存在app.filter = {objToStr: function (obj) { return Object.keys(obj).join(";"); }} // 有obj = { a: {a: 1, b: 2, c: 3 } }, str = <div>{{a | objToStr}}</div> function getProperty(obj, str, target) { str = str.replace(/\[(.*?)\]/g, function (item, match) { return getProperty(obj, match, target); }) var strArray = str.split("|").map(function (item) { return item.replace(/\s+/g, ""); }) var tempArray = strArray[0].split("."); var property = obj[tempArray[0]], i = 1, len = tempArray.length; while (len - i >= 1) { property = property[tempArray[i]]; i++; } var filterStr = strArray[1]; if (filterStr) { var app = target._getApp(); if (filterStr in app.filter) property = app.filter[filterStr](property); } return property; } 注：后續支持 {{a | objToString:xxx,bbb,ccc}} objToFilter : function (obj, a1, a2, a3) { } // a1: xxx, a2: bbb, a3: ccc -
簡單的邏輯判斷
var compare = { "==": function (left, right) { return left == right; }, "!=": function (left, right) { return left != right; }, ">=": function (left, right) { return left >= right; }, "<=": function (left, right) { return left <= right; }, "<": function (left, right) { return left < right; }, ">": function (left, right) { return left > right; } };首先將str根據情況分成若干個情況的簡單陳述句，然后判斷哪個情況符合并將該陳述句渲染出來，
a == 1{{else}}a != 1{{/if}}
比如 obj = { a: 1 } str = {{if a == 1}}
將html分成a == 1和a != 1,然后根據上面的邏輯判斷選擇渲染
具體代碼實作略， -
簡單的回圈陳述句
與邏輯判斷類似，將回圈內的陳述句提取出來，然后分別根據不同的索引進行渲染，最后將它們拼接起來
a: {{a}}; c: {{c}}{{/each}}
比如 obj = { a: [ {a: 2, c: 3}, { a: 3, c: 4 }], c: 2 }, str = {{each a}}
它會分成兩組分別為{index: 1, a: 2, c: 3}, {index: 2, a: 3, c: 4 }渲染兩次a: {{a}}; c: {{c}}并把
拼接起來，這里存在一個問題，如果要參考回圈外的{ c: 2 }, 卻被里面的c覆寫了，因此引入了第二種
a: {{item.a}}; c: {{c}}{{/each}}
str = {{each item as a}}
它的渲染物件分別為 { item: { a: 2, c: 3, index: 1}, c: 2 }, { item: { a: 3, c: 4, index: 2}, c: 2 }還有一種情況，陣列內的元素不是物件，比如 obj = { a: [3, 2 ] };
里面會把它轉化為 { a: [ { index: 1, content: 3}, { index: 2, content: 3}]}具體實作代碼略，
-
上訴的4種情況都可以用簡單的正則運算式來進行替換，選取符合規格的資料進行填充和拼接，對于多重回圈，比如
{{each item as a}}{{each obj as item.b}}obj.c{{/each}}{{/each}}或者更多回圈，僅僅通過正則運算式，無法精確的匹配具有對應的多層{{each}}{{/each}}, 只能通過字串匹配，將他們一層一層的剝離開來，所幸的是他們都是一一對應的，
多重判斷也能通過這樣的邏輯進行匹配，最終把它們還原相應的字串對于多重回圈和多重判斷混合在一起，我們優先處理清除回圈的陳述句，然后清除判斷陳述句，最后來處理其它的，這是因為每個回圈陳述句，自定義了一個作用域，如果先處理判斷陳述句，將會賦值失敗，最后的代碼如下
function render(str, obj, target) { var that = target || this; obj = obj || that.data; if (!isEach) str = filterEach(str, obj, that); // 消除each相關陳述句 if (!isIf) str = filterIf(str, obj, that); // 消除if相關陳述句 var pattern = /{?{{\s*[a-zA-Z_$\[\]][\w$\[\]]*(\.[a-zA-Z_$\[\]][\w$\[\]]*)*\s*(\|\s*[a-zA-Z_$\[\]][\w$\[\]]*)*\s*}}}?/g; var newStr = str.replace(pattern, function (match) { if (ELSE.test(match)) return match; var isdecode = match.indexOf("{{{") > -1; // 是否要轉義 var len = isdecode ? 3 : 2; return getProperty(obj, match.slice(len, -len).replace(/^\s+|\s+$/g, ""), that, !isdecode); }); return newStr; }
其它應用
上面講解了html模板引擎原理，可以通過renderHTML(str, obj)來進行渲染，同時如果使用以下方法也會間接呼叫這個方法：
- innerHTML(dom, str, feeback, obj);
- insertAdjacentHTML(dom, str, pos, feeback, obj);
- outerHTML(dom, str, feeback, obj);
上面的obj如果未傳，會默認是Page實體物件的data， feeback代表將html插入到頁面后的回呼方法，這是一異步程序，需要考慮到下面一篇的組件介紹，html是一種資料的結構，同時也應該能是一種渲染的表達，它不應該被特定的框架所特有，將最原始的html直接放在瀏覽器就能顯示，因此獲得頁面的html，讓它可以被各個頁面都能無障礙使用，給Page的原型方法添加一個getHTML方法，他將回傳一個HTML，這個html是最原始的html，不帶任何模板痕跡的，
如何給頁面傳資料，只有通過app.render(pagename, isReplace, option); 這里的option就是傳給新頁面的資料，這里的pagename可以是個url，或通過頁面配置匹配到對應的pagename，并將url的附加資訊提取出來，復制到新的頁面里當引數pagename是url且帶有資料，option也帶有相同key的資料的時候，option會覆寫url上的資料如果url在頁面配置中找不到，會跳到404頁面或500頁面，
-
url支持如下的傳資料方式
比如是這樣的一個頁面配置 { name: "second", url: "/second", js: "/public/second/second.js", title: "次頁" }
通過呼叫 app.render("/second?a=4&c=5") 等同于 app.render("second", false, { a: 4, c: 5 }); -
比如一個頁面配置{ name: "second", url: "/detail/:id", js: "/public/second/second.js", title: "次頁" };
通過呼叫 app.render("/detail/123")相當于 app.render("second", false, { id: 123 });
如果同時存在上面兩種情況，后一種會覆寫前一種
另外的在單頁面中，a鏈接元素會跳轉到外鏈，可能會導致回不到該頁面上，因此通過改變它的事件，統一將它導航到單頁面的配置頁面中，如果不存在，將會跳轉到404或者500頁面，代碼如下：
window.addEventListener("click", function (ev) {
var a = Component.getNodeName(ev.target, "A"); // 獲取是否是a鏈接或者是它的子節點
if (a) {
var url = a.getAttribute("href");
if (url && url.indexOf("http") === -1) {
ev.preventDefault(); // 阻止默認行為，阻止冒泡
ev.stopPropagation();
that.render(url, a.target === "_self"); // 跳轉頁面
}
}
}, true);
案例地址
下篇準備
在介紹組件Component之前，將代碼做一下調整，將Page大部分處理轉到HtmlProto上，然后Page物件繼承HtmlProto， HtmlProto代表著存在html的物件，所有帶html渲染的物件都是繼承HtmlProto物件，在這里只有Component和Page，因為它們有很多共同之處，
由于Page針對的是業務邏輯，必要的ajax操作只能在Page物件中使用，HtmlProto擁有最簡單的獲取頁面的功能，Component物件也只繼承最簡單的獲取頁面的功能，
總結
主要介紹了html模板引擎的實作原理和應用，并在案例中說明簡單的用法，還介紹了切換頁面的資料傳遞，
推廣
底層框架開源地址：https://gitee.com/string-for-100w/string
演示網站: https://www.renxuan.tech/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/172611.html
標籤：JavaScript
下一篇：9.組件原理詳解