資訊專欄INFORMATION COLUMN
摘要：客戶端模板是一些帶插槽占位符的標(biāo)簽片段，這些占位符會被程序模板引擎替換為數(shù)據(jù)，然后把該替換好的標(biāo)簽片段插入到頁面中。
一、當(dāng)需要注入大段的HTML標(biāo)簽到頁面中時，應(yīng)該使用服務(wù)器渲染（從服務(wù)器加載HTML標(biāo)簽）
該方法將模板放置于服務(wù)器中使用XMLHttpRequest對象來獲取外部標(biāo)簽（如多頁應(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 {
//錯誤處理代碼
}
};
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);
}
二、客戶端模板
對于少量的標(biāo)簽段，應(yīng)該考慮采用客戶端模板。
客戶端模板是一些帶‘插槽’(占位符)的標(biāo)簽片段，這些占位符會被JavaScript程序(模板引擎)替換為數(shù)據(jù)，然后把該替換好的標(biāo)簽片段插入到頁面中。
自定義模板文本處理程序
function sprintf(text){
var i=1,args=arguments;
return text.replace(/%s/g, function(){
return (i
模板文本存放位置
1.存放于HTML注釋中
...
因為注釋也是一個DOM節(jié)點，因此可以通過JS將其提取出來：
//格式化并插入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)空格(因為它是在
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");
本文參考《編寫可維護的JavaScript》
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/80556.html
摘要：客戶端模板是一些帶插槽占位符的標(biāo)簽片段，這些占位符會被程序模板引擎替換為數(shù)據(jù)，然后把該替換好的標(biāo)簽片段插入到頁面中。 一、當(dāng)需要注入大段的HTML標(biāo)簽到頁面中時，應(yīng)該使用服務(wù)器渲染（從服務(wù)器加載HTML標(biāo)簽） 該方法將模板放置于服務(wù)器中使用XMLHttpRequest對象來獲取外部標(biāo)簽（如多頁應(yīng)用） function loadDialog(name, oncomplete) { ...
摘要：松耦合當(dāng)你能夠做到修改一個組件而不需要更改其他組件時，就做到了松耦合，松耦合對于代碼可維護性來說是至關(guān)重要的。應(yīng)該使用保持和的溝通。將從中抽離在和更早版本的瀏覽器中有一個特性，即表達式。如下不好的寫法已經(jīng)不再支持表達式了。 松耦合 當(dāng)你能夠做到修改一個組件而不需要更改其他組件時，就做到了松耦合，松耦合對于代碼可維護性來說是至關(guān)重要的。 原則 不要使用 css 表達式。（這種方式...
摘要：最近閱讀了編寫可維護的，在這里記錄一下讀書筆記。禁止使用，，，的字符串形式。避免使用級事件處理函數(shù)。讓事件處理程序成為接觸到對象的唯一函數(shù)。檢測函數(shù)是檢測檢測函數(shù)的最佳選擇。為特定瀏覽器的特性進行測試，并僅當(dāng)特性存在時即可應(yīng)用特性檢測。 最近閱讀了《編寫可維護的 JavaScript》，在這里記錄一下讀書筆記。書中主要基于三個方向來講解怎么增加代碼的可維護性：編程風(fēng)格、編程實踐、自動化...
閱讀 2779·2023-04-26 01:47
閱讀 3591·2023-04-25 23:45
閱讀 2461·2021-10-13 09:39
閱讀 606·2021-10-09 09:44
閱讀 1789·2021-09-22 15:59
閱讀 2761·2021-09-13 10:33
閱讀 1706·2021-09-03 10:30
閱讀 656·2019-08-30 15:53
