UI層松耦合

當你能夠做到修改一個組件而不需要去更改其他組件時，你就做到了松耦合，對于多人大型系統來說，很多人參與維護代碼，松耦合對于代碼可維護性來說至關重要，你絕對希望開發人員在修改某部分代碼時不會破環其他人的代碼，

當一個大系統的每個組件的內容有了限制，就做到了松耦合，本質上講，每個組件需要保持足夠廋身來確保松耦合，組件知道的越少，就越有利于形成整個系統，

有一點需要注意：在一起作業的組件無法達到“無偶合”，在所有系統中，組件之間總要共享一些資訊來完成各自的作業，這很好理解，我們的目標是確保對一個組件的修改不會經常性地影響其他部分，

如果一個Web UI是松耦合的，則很容易測驗，和文本或者結構相關問題，通過查找HTML即可定位，當發生了樣式相關的問題你就知道出現在CSS中，最后，對于那些行為相關的問題，你直接去JavaScript中找問題所在，這種能力是Web界面的可維護性的核心部分

將JavaScript從CSS中抽離

這個內容比較老舊了，但是還是提一下，IE8和更早的瀏覽器中有一個讓人愛少恨多的功能，即CSS運算式，CSS運算式允許你將JavaScript直接插入到CSS中，這樣可以在CSS代碼中直接執行運算或其他操作，不過現在瀏覽器淘汰了這個功能，作者在這個位置踩過很深的坑，有興趣可以了解一下哦！！

將CSS從JavaScript中抽離

有時候，保持CSS和JavaScript之間清晰的分離是很有挑戰的，這兩門語言相互協作得很不錯，所以我們常常將樣式資料和JavaScript混在一起寫，通過腳本修改樣式最流行的一種方法是，直接修改DOM元素的style屬性，style屬性是一個物件，包含了可以讀取和修改的CSS屬性，比如，你可以像下面這樣修改元素里的文本顏色，

// 不好的寫法
element.style.color = 'red';

我們經常看到使用這種方法修改多個樣式屬性的代碼端，比如：

// 不好的寫法
element.style.color = 'red';
element.style.left = '10px';
element.style.top = '100px';
element.style.visibility = 'visible';

這種方法是有問題的，因為樣式資訊是通過JavaScript而非CSS來承載的，當出現樣式問題的時候，通常是先去排除CSS問題，知道最后才會來排除JavaScript的問題，

開發者修改style物件還有一種方式，給cssText屬性賦值整個CSS字串，看下面這個例子，

// 不好的寫法
element.style.cssText = "color:red; left:10px; top:100px; visibility:visible";

使用cssText屬性只是一次性設定多個值的一中快捷寫法，這種模式還是有上一個問題存在

將JavaScript從HTML中抽離

不要再HTML元素上系結事件，這樣在代碼出現問題的時候，我們就可以去JavaScript檔案中找對應的問題，這一點看起來無關緊要，但是“可預見性”會帶來更快的除錯和開發，并確定（并非猜測）從何入手除錯bug，這會讓問題解決得更快、代碼總體質量更高，

將HTML從JavaScript中抽離

從服務器加載

第一種方法就是將模板放在遠程服務器，使用XMLHttpRequest物件來獲取外部標簽，相對比多頁應用，這種方法對單頁應用帶來了更多的便攜，這種方法（從服務器中獲取模板）很容易造成XSS漏洞，需要服務器對模板檔案做適當的轉義處理，比如<和>以及雙引號等，當然前端也應當給出與之匹配的渲染規則，總之這種方法需要一攬子前后端的轉碼和解碼策略來盡可能的封堵XSS漏洞

當你需要注入大段的HTML標簽到頁面中時，使用遠程呼叫的方式加載標簽是非常有幫助的，出于性能的原因，將大量沒用的標簽存放在記憶體或者DOM中是很糟糕的做法，對于少量的標簽段，你可以考慮采用客戶端模板，

簡單客戶端模板

客戶端模板是一些帶“插槽”的標簽片段，這些“插槽"會被JavaScript程式替換為資料以保證模板的完整可用，比如，一段用來添加資料項的模板看起來像下面這樣，

<li><a href="https://www.cnblogs.com/wangzhaoyv/archive/2020/12/26/%s">%s</a></li>

這段模板中包含的%s占位符，這個位置的文本會被程式替換掉（這個格式和C語言中的sprintf()一模一樣），JavaScript程式會將這些占位符替換為真實資料，然后將結果注入DOM，

function sprintf(text) {
    var i = 1, args = arguments;
    return text.replace(/%/g, function() {
        return (i < args.length) ? args[i++] : "";
    })
}

// 用法
var result = sprintf(templateText, "/item/4", "Fourth item");

將模板文本傳入JavaScript是這個程序中的重要一環，本質上講，你一點也不希望在JavaScript中嵌入模板文本，而是將這個模板放置于他處，通常我們將模板定義在其他標簽之間，直接存放在HTML中，這樣可以被JavaScript讀取，用兩種方法都可以做到

在HTML注釋中包含模板文本（注釋是和其他元素及文本一樣的DOM節點，因此可以通過JavaScript將其提取出來）

<ul id="myList">
	<!--<li id="item%s"><a href="https://www.cnblogs.com/wangzhaoyv/archive/2020/12/26/%s">%s</a></li>-->
    <li><a href="https://www.cnblogs.com/item/1">Frist item</a></li>  
    <li><a href="https://www.cnblogs.com/item/2">Second item</a></li>
    <li><a href="https://www.cnblogs.com/item/3">Third item</a></li>
</ul>

這段檔案中，注釋作為串列的第一個子節點，被恰當的放置于背景關系中，下面的這段JavaScript代碼則可以將模板文本從注釋中提取出來
var myList = document.getElementById("myList"),
 templateText = myList.firstChild.nodeValue;
緊接著就將其格式化后插入DOM中，通過下面這個函式可以完成這些操作
function addItem() {
 var myList = document.getELementById("myList"),
     templateText = myList.fristChild.nodeValue,
     result = sprintf(template, url, text);
	
 div.innerHtml = result;
 myList.insertAdjacentHTML("beforeend", result);
}

// 用法
addItem("/item/4", "Fourth item");
我們給這個方法傳入一些資料資訊，用他們來處理模板文本，并用insertAdjacentHTML()將結果注入HTML，這一步操作將HTML字串轉換為一個DOM節點，并將它作為子節點插入到<ul>里

使用自定義type屬性的<sript>元素，瀏覽器會默認地將<sript>元素中的內容識別為JavaScript代碼，但是你可以通過給type賦值為瀏覽器不識別的型別，來告訴瀏覽器這不是一段JavaScript腳本
```
<script type="text/x-my-template" id = "list-item">
    <li> <a href="https://www.cnblogs.com/wangzhaoyv/archive/2020/12/26/%s">%s</a> </li>
</script>
```
你可以使用<sript>便簽的text屬性來提取模板文本，
```
var script = document.getElementById("list-item"),
    templateText = script.text;
```
這樣addItem()函式就會變成這樣
```
function addItem() {
    var myList = document.getELementById("myList"),
        script = document.getElementById("list-item"),
        templateText = script.text,
        result = sprintf(template, url, text),
        div = document.createElement("div");
	
    div.innerHtml = result.replace(/^\s*/, "");
    myList.appendChild(div.firstChild);
}

// 用法
addItem("/item/4", "Fourth item");
```
這里去掉了模板文中的前導空格，之所以會出現這個多余的前導空格，是因為模板文本總是在<script>起始標簽的下一行，如果將模板原樣注入，則會在<div>中創建一個文本節點，這個文本節點的內容就是個空格，而最后加入ul里的不是li，而是空格

復雜客戶端模板

上幾節中介紹的模板格式非常的簡單，并無太多轉義，如果你想用一些更健壯的模板，則可以考慮諸如【Handlebars】

所提出的解決方案，Handlebars是專為瀏覽器端JavaScript設計的完整的客戶端模板系統，

Handlebars中的占位符為{{}},我們將上面的模板轉化為Handlebars版本：

<li><a href="https://www.cnblogs.com/wangzhaoyv/archive/2020/12/26/{{url}}">{{ text }}</a></li>

在Handlebars模板中，占位符都標記為一個名稱，以便可以在JavaScript中設定其映射，Handlebars建議將模板嵌入HTML頁面中，并使用type屬性為“text/x-handlebars-template”的script標簽來表示，

<script type="text/x-my-template" id = "list-item">
    <li> <a href="https://www.cnblogs.com/wangzhaoyv/archive/2020/12/26/{{url}}">{{text}}</a> </li>
</script>

要想使用這個模板，你首先必須將Handlebars類別庫引入到頁面，這個類別庫會創建一個名為Handlebars的全域變數，用來將模板文本編譯為一個函式，

var script = document.getElementById("list-item"),
    templateText = script.text,
    template = Handlebars.compile(script.text);

這時候，template包含一個函式，當執行這個函式的時候，回傳一個格式化好的字串，你只需要將name和url屬性的物件傳入

var result = template({
    name:"Fourth item",
    url:"/item/4"
})

引數會自動做HTML轉義，轉義操作也是格式化的一部分，轉義是為了增強模板的安全性，并確保簡單的文本值不會破環你的標簽結構，比如，字串&會自動轉義為&，

現在將他們合并為一個單獨的函式中，

function addItem() {
    var myList = document.getELementById("myList"),
        script = document.getElementById("list-item"),
        templateText = script.text,
        template = Handlebars.compile(script.text), 
        div = document.createElement("div"),
        result;
	
    result = template({
        name:"Fourth item",
        url:"/item/4"
    })
        
    div.innerHtml = result;
    myList.appendChild(div.firstChild);
}

// 用法
addItem("/item/4", "Fourth item");

這個簡單的例子并未真正體現Handlebars的靈活性，除了簡單的占位符替換之外，Handlebars模板同樣支持一些簡單的邏輯和回圈，

{{#if items}}
<ul>
    {{#each items}}
     <li><a href="https://www.cnblogs.com/wangzhaoyv/archive/2020/12/26/{{url}}">{{text}}</a></li>
    {{/each}}
</ul>
{{/if}}

if，作為判斷，如果items里有資料才開始渲染，each回圈

// 回傳一個空字串
var result = template({
    items: []
});

// 回傳包含兩個記錄的HTML串列
var result = template({
    item:[
        {
        	text:"First item",
            url:"/item/1"
    	},
        {
        	text:"Second item",
            url:"/item/2"
    	}
    ]
})

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/240427.html

標籤：其他

上一篇：canvas--總結一

下一篇：第六章零全域變數

第五章 UI層松耦合