資訊專欄INFORMATION COLUMN
摘要：客戶端模板是一些帶插槽占位符的標簽片段，這些占位符會被程序模板引擎替換為數據，然后把該替換好的標簽片段插入到頁面中。
一、當需要注入大段的HTML標簽到頁面中時，應該使用服務器渲染（從服務器加載HTML標簽）
該方法將模板放置于服務器中使用XMLHttpRequest對象來獲取外部標簽（如多頁應用）
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);
}
二、客戶端模板
對于少量的標簽段，應該考慮采用客戶端模板。
客戶端模板是一些帶‘插槽’(占位符)的標簽片段，這些占位符會被JavaScript程序(模板引擎)替換為數據，然后把該替換好的標簽片段插入到頁面中。
自定義模板文本處理程序
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);
}
//調用方法
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*/,""); //去除模板文本的前導空格(因為它是在
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);
}
//調用
addItem("/item/4,"First item");
本文參考《編寫可維護的JavaScript》
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50102.html
摘要：客戶端模板是一些帶插槽占位符的標簽片段，這些占位符會被程序模板引擎替換為數據，然后把該替換好的標簽片段插入到頁面中。 一、當需要注入大段的HTML標簽到頁面中時，應該使用服務器渲染（從服務器加載HTML標簽） 該方法將模板放置于服務器中使用XMLHttpRequest對象來獲取外部標簽（如多頁應用） function loadDialog(name, oncomplete) { ...
摘要：松耦合當你能夠做到修改一個組件而不需要更改其他組件時，就做到了松耦合，松耦合對于代碼可維護性來說是至關重要的。應該使用保持和的溝通。將從中抽離在和更早版本的瀏覽器中有一個特性，即表達式。如下不好的寫法已經不再支持表達式了。 松耦合 當你能夠做到修改一個組件而不需要更改其他組件時，就做到了松耦合，松耦合對于代碼可維護性來說是至關重要的。 原則 不要使用 css 表達式。（這種方式...
摘要：最近閱讀了編寫可維護的，在這里記錄一下讀書筆記。禁止使用，，，的字符串形式。避免使用級事件處理函數。讓事件處理程序成為接觸到對象的唯一函數。檢測函數是檢測檢測函數的最佳選擇。為特定瀏覽器的特性進行測試，并僅當特性存在時即可應用特性檢測。 最近閱讀了《編寫可維護的 JavaScript》，在這里記錄一下讀書筆記。書中主要基于三個方向來講解怎么增加代碼的可維護性：編程風格、編程實踐、自動化...
閱讀 2155·2021-10-08 10:15
閱讀 1185·2019-08-30 15:52
閱讀 514·2019-08-30 12:54
閱讀 1531·2019-08-29 15:10
閱讀 2682·2019-08-29 12:44
閱讀 3008·2019-08-29 12:28
閱讀 3348·2019-08-27 10:57
閱讀 2212·2019-08-26 12:24
