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