#1
Commit ID: 871ed9126639c9128c18bb2f19e6afd42c0c5ad9
- Label: HTML Template Transfer
- CodeSegment:
el.innerHTML.replace(/\{\{(.*)\}\}/g, markToken)
function markToken (match, variable) {
bindings[variable] = {}
return '<span ' + bindingMark + '="' + variable +'"></span>'
}
-
Note:
通過正則全局查找雙花括號語法 {{ }} 汰具，以符合條件的字符串作 key，生成空對象镀裤，并添加至 bindings 中。 -
Knowledge:
\將下一個字符標記為一個特殊字符、或一個原義字符、或一個 向后引用夸楣、或一個八進制轉(zhuǎn)義符。例如子漩，'n' 匹配字符 "n"豫喧。'\n' 匹配一個換行符。序列 '\' 匹配 "" 而 "(" 則匹配 "("幢泼。String.prototype.replace()第二個傳入的參數(shù)支持 String 或 Function
當?shù)诙€參數(shù)為方法時紧显，如果第一個參數(shù)為正則表達式，該方法的傳入的第一個參數(shù)為匹配的子串缕棵，第二個參數(shù)則為正則表達式匹配的字符串孵班，例如 HTML 文本為 {{ msg }}，在上文中的 markToken 則接收了 {{ msg }} , msg 為他的第一招驴、二個參數(shù)篙程。
str.replace(regexp|substr, newSubstr|function)
- Label: Data Binding
- CodeSegment:
for (var variable in bindings) {
bind(variable)
}
function bind (variable) {
bindings[variable].els = el.querySelectorAll('[' + bindingMark + '="' + variable + '"]')
[].forEach.call(bindings[variable].els, function (e) {
e.removeAttribute(bindingMark)
})
Object.defineProperty(data, variable, {
set: function (newVal) {
[].forEach.call(
bindings[variable].els,
function (e) {
bindings[variable].value = e.textContent = newVal
}
)
},
get: function () {
return bindings[variable].value
}
})
}
-
Note:
先通過自定義的 bindingMark 查找 HTML 模版中需要綁定的數(shù)據(jù)，然后在 data 對象中初始化數(shù)據(jù)模型后移除 bindingMark忽匈，再通過Object.defineProperty()方法覆蓋對應(yīng)屬性的 getter/setter ，在 setter 中通過bindings[variable].value = e.textContent = newVal的方式達到數(shù)據(jù)與視圖層雙向綁定的目的矿辽。 -
Knowledge:
Object.defineProperty(object, peroperty, descriptor)Function.prototype.call(thisArgument, ...Args)
