資訊專欄INFORMATION COLUMN
摘要：客戶端模板是一些帶插槽占位符的標(biāo)簽片段，這些占位符會(huì)被程序模板引擎替換為數(shù)據(jù)，然后把該替換好的標(biāo)簽片段插入到頁(yè)面中。
一、當(dāng)需要注入大段的HTML標(biāo)簽到頁(yè)面中時(shí)，應(yīng)該使用服務(wù)器渲染（從服務(wù)器加載HTML標(biāo)簽）
該方法將模板放置于服務(wù)器中使用XMLHttpRequest對(duì)象來(lái)獲取外部標(biāo)簽（如多頁(yè)應(yīng)用）
function loadDialog(name, oncomplete) {
var xhr = new XMLHttpRequest();
xhr.open("get", "/js/dialog/"+name, true);
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200){
var div = document.getElementById("dlg-holder");
div.innerHTML = xhr.responseText;
oncomplete();
}else {
//錯(cuò)誤處理代碼
}
};
xhr.send(null);
}
//使用YUI的API
function loadDialog(name, oncomplete) {
Y.one("#dlg-holder").log("/js/dialog/"+name,oncomplete);
}
//使用JQuery的API
function loadDialog(name, oncomplete) {
$("#dlg-holder").load("/js/dialog/"+name, oncomplete);
}
二、客戶端模板
對(duì)于少量的標(biāo)簽段，應(yīng)該考慮采用客戶端模板。
客戶端模板是一些帶‘插槽’(占位符)的標(biāo)簽片段，這些占位符會(huì)被JavaScript程序(模板引擎)替換為數(shù)據(jù)，然后把該替換好的標(biāo)簽片段插入到頁(yè)面中。
自定義模板文本處理程序
function sprintf(text){
var i=1,args=arguments;
return text.replace(/%s/g, function(){
return (i
模板文本存放位置
1.存放于HTML注釋中
...
因?yàn)樽⑨屢彩且粋€(gè)DOM節(jié)點(diǎn)，因此可以通過(guò)JS將其提取出來(lái)：
//格式化并插入DOM的方法定義
function addItem(url,text){
var mylist = document.getElementById("mylist");
var templateText = mylist.firstChild.nodeValue; //提取模板文本
var result = sprintf(templateText,url,text);
div.innerHTML = result;
mylist.insertAdjacentHTML("beforeend", result);
}
//調(diào)用方法
addItem("/item/4", "First item");
addItem("/item/4", "Second item");
2.存放于自定義type屬性的
function addItem(url,text){
var mylist = document.getElementById("mylist");
var script = document.getElementById("list-item");
var templateText = script.text; //提取模板文本
var result = sprintf(templateText,url,text);
var div = document.createElement("div");
div.innerHTML = result.replace(/^s*/,""); //去除模板文本的前導(dǎo)空格(因?yàn)樗窃?script>標(biāo)簽的下一行)
mylist.appendChild(div.firstChild);
}
使用第三方的模板系統(tǒng)（如：artTemplate-3.0、Jade、Handlebars、doT.js）
以Handlebars為例：
Handlebars建議將模板存放于
funtion addItem(url,text){
var mylist = document.getElementById("mylist"),
script = document.getElementById("list-item"),
template = Handlebars.compile(script.text), //提取模板文本,返回格式化方法
div = document.createElement("div"),
result;
result = template({text:text,url:url});
div.innerHTML = result;
mylist.appendChild(div.firstChild);
}
//調(diào)用
addItem("/item/4,"First item");
本文參考《編寫可維護(hù)的JavaScript》
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/50102.html
摘要：客戶端模板是一些帶插槽占位符的標(biāo)簽片段，這些占位符會(huì)被程序模板引擎替換為數(shù)據(jù)，然后把該替換好的標(biāo)簽片段插入到頁(yè)面中。 一、當(dāng)需要注入大段的HTML標(biāo)簽到頁(yè)面中時(shí)，應(yīng)該使用服務(wù)器渲染（從服務(wù)器加載HTML標(biāo)簽） 該方法將模板放置于服務(wù)器中使用XMLHttpRequest對(duì)象來(lái)獲取外部標(biāo)簽（如多頁(yè)應(yīng)用） function loadDialog(name, oncomplete) { ...
摘要：松耦合當(dāng)你能夠做到修改一個(gè)組件而不需要更改其他組件時(shí)，就做到了松耦合，松耦合對(duì)于代碼可維護(hù)性來(lái)說(shuō)是至關(guān)重要的。應(yīng)該使用保持和的溝通。將從中抽離在和更早版本的瀏覽器中有一個(gè)特性，即表達(dá)式。如下不好的寫法已經(jīng)不再支持表達(dá)式了。 松耦合 當(dāng)你能夠做到修改一個(gè)組件而不需要更改其他組件時(shí)，就做到了松耦合，松耦合對(duì)于代碼可維護(hù)性來(lái)說(shuō)是至關(guān)重要的。 原則 不要使用 css 表達(dá)式。（這種方式...
摘要：最近閱讀了編寫可維護(hù)的，在這里記錄一下讀書筆記。禁止使用，，，的字符串形式。避免使用級(jí)事件處理函數(shù)。讓事件處理程序成為接觸到對(duì)象的唯一函數(shù)。檢測(cè)函數(shù)是檢測(cè)檢測(cè)函數(shù)的最佳選擇。為特定瀏覽器的特性進(jìn)行測(cè)試，并僅當(dāng)特性存在時(shí)即可應(yīng)用特性檢測(cè)。 最近閱讀了《編寫可維護(hù)的 JavaScript》，在這里記錄一下讀書筆記。書中主要基于三個(gè)方向來(lái)講解怎么增加代碼的可維護(hù)性：編程風(fēng)格、編程實(shí)踐、自動(dòng)化...
閱讀 2166·2021-10-08 10:15
閱讀 1194·2019-08-30 15:52
閱讀 523·2019-08-30 12:54
閱讀 1541·2019-08-29 15:10
閱讀 2693·2019-08-29 12:44
閱讀 3015·2019-08-29 12:28
閱讀 3362·2019-08-27 10:57
閱讀 2222·2019-08-26 12:24
