輸出變量的界定符
interpolate : /<%=([\s\S]+?)%>/g,
// 需要將HTML輸出為字符串(將特殊符號轉換為字符串形式)的界定符
escape : /<%-([\s\S]+?)%>/g
};
var noMatch = /.^/;
// escapes對象記錄了需要進行相互換轉的特殊符號與字符串形式的對應關系, 在兩者進行相互轉換時作為索引使用
// 首先根據字符串形式定義特殊字符
var escapes = {
'\\' : '\\',
"'" : "'",
'r' : '\r',
'n' : '\n',
't' : '\t',
'u2028' : '\u2028',
'u2029' : '\u2029'
};
// 遍歷所有特殊字符字符串, 并以特殊字符作為key記錄字符串形式
for(var p in escapes)
escapes[escapes[p]] = p;
// 定義模板中需要替換的特殊符號, 包含反斜杠, 單引號, 回車符, 換行符, 制表符, 行分隔符, 段落分隔符
// 在將字符串中的特殊符號轉換為字符串形式時使用
var escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g;
// 在將字符串形式的特殊符號進行反轉(替換)時使用
var unescaper = /\\(\\|'|r|n|t|u2028|u2029)/g;
// 反轉字符串中的特殊符號
// 在模板中涉及到需要執行的JavaScript源碼, 需要進行特殊符號反轉, 否則如果以HTML實體或字符串形式出現, 會拋出語法錯誤
var unescape = function(code) {
return code.replace(unescaper, function(match, escape) {
return escapes[escape];
});
};
// Underscore模板解析方法, 用于將數據填充到一個模板字符串中
// 模板解析流程:
// 1. 將模板中的特殊符號轉換為字符串
// 2. 解析escape形式標簽, 將內容解析為HTML實體
// 3. 解析interpolate形式標簽, 輸出變量
// 4. 解析evaluate形式標簽, 創建可執行的JavaScript代碼
// 5. 生成一個處理函數, 該函數在得到數據后可直接填充到模板并返回填充后的字符串
// 6. 根據參數返回填充后的字符串或處理函數的句柄
// -------------------
// 在模板體內, 可通過argments獲取2個參數, 分別為填充數據(名稱為obj)和Underscore對象(名稱為_)
_.template = function(text, data, settings) {
// 模板配置, 如果沒有指定配置項, 則使用templateSettings中指定的配置項
settings = _.defaults(settings || {}, _.templateSettings);
// 開始將模板解析為可執行源碼
var source = "__p+='" + text.replace(escaper, function(match) {
// 將特殊符號轉移為字符串形式
return '\\' + escapes[match];
}).replace(settings.escape || noMatch, function(match, code) {
// 解析escape形式標簽 <%- %>, 將變量中包含的HTML通過_.escape函數轉換為HTML實體
return "'+\n_.escape(" + unescape(code) + ")+\n'";
}).replace(settings.interpolate || noMatch, function(match, code) {
// 解析interpolate形式標簽 <%= %>, 將模板內容作為一個變量與其它字符串連接起來, 則會作為一個變量輸出
return "'+\n(" + unescape(code) + ")+\n'";
}).replace(settings.evaluate || noMatch, function(match, code) {
// 解析evaluate形式標簽 <% %>, evaluate標簽中存儲了需要執行的JavaScript代碼, 這里結束當前的字符串拼接, 并在新的一行作為JavaScript語法執行, 并將后面的內容再次作為字符串的開始, 因此evaluate標簽內的JavaScript代碼就能被正常執行
return "';\n" + unescape(code) + "\n;__p+='";
}) + "';\n";
if(!settings.variable)
source = 'with(obj||{}){\n' + source + '}\n';
source = "var __p='';" + "var print=function(){__p+=Array.prototype.join.call(arguments, '')};\n" + source + "return __p;\n";
// 創建一個函數, 將源碼作為函數執行體, 將obj和Underscore作為參數傳遞給該函數
var render = new Function(settings.variable || 'obj', '_', source);
// 如果指定了模板的填充數據, 則替換模板內容, 并返回替換后的結果
if(data)
return render(data, _);
// 如果沒有指定填充數據, 則返回一個函數, 該函數用于將接收到的數據替換到模板
// 如果在程序中會多次填充相同模板, 那么在第一次調用時建議不指定填充數據, 在獲得處理函數的引用后, 再直接調用會提高運行效率
var template = function(data) {
return render.call(this, data, _);
};
// 將創建的源碼字符串添加到函數對象中, 一般用于調試和測試
template.source = 'function(' + (settings.variable || 'obj') + '){\n' + source + '}';
// 沒有指定填充數據的情況下, 返回處理函數句柄
return template;
};
// 支持Underscore對象的方法鏈操作, 可參考 wrapper.prototype.chain
_.chain = function(obj) {
return _(obj).chain();
};
// Underscore對象封裝相關方法
// ---------------
// 創建一個包裝器, 將一些原始數據進行包裝
// 所有的undersocre對象, 內部均通過wrapper函數進行構造和封裝
// Underscore與wrapper的內部關系:
// -內部定義變量_, 將Underscore相關的方法添加到_, 這樣就可以支持函數式的調用, 如_.bind()
// -內部定義wrapper類, 將_的原型對象指向wrapper類的原型
// -將Underscore相關的方法添加到wrapper原型, 創建的_對象就具備了Underscore的方法
// -將Array.prototype相關方法添加到wrapper原型, 創建的_對象就具備了Array.prototype中的方法
// -new _()時實際創建并返回了一個wrapper()對象, 并將原始數組存儲到_wrapped變量, 并將原始值作為第一個參數調用對應方法
var wrapper = function(obj) {
// 原始數據存放在包裝對象的_wrapped屬性中
this._wrapped = obj;
};
// 將Underscore的原型對象指向wrapper的原型, 因此通過像wrapper原型中添加方法, Underscore對象也會具備同樣的方法
_.prototype = wrapper.prototype;
// 返回一個對象, 如果當前Underscore調用了chain()方法(即_chain屬性為true), 則返回一個被包裝的Underscore對象, 否則返回對象本身
// result函數
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
