#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:
\将下一个字符标记为一个特殊字符、或一个原义字符、或一个 向后引用、或一个八进制转义符。例如，'n' 匹配字符 "n"。'\n' 匹配一个换行符。序列 '\' 匹配 "" 而 "(" 则匹配 "("。String.prototype.replace()第二个传入的参数支持 String 或 Function
当第二个参数为方法时，如果第一个参数为正则表达式，该方法的传入的第一个参数为匹配的子串，第二个参数则为正则表达式匹配的字符串，例如 HTML 文本为 {{ msg }}，在上文中的 markToken 则接收了 {{ msg }} , msg 为他的第一、二个参数。
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 模版中需要绑定的数据，然后在 data 对象中初始化数据模型后移除 bindingMark，再通过Object.defineProperty()方法覆盖对应属性的 getter/setter ，在 setter 中通过bindings[variable].value = e.textContent = newVal的方式达到数据与视图层双向绑定的目的。 -
Knowledge:
Object.defineProperty(object, peroperty, descriptor)Function.prototype.call(thisArgument, ...Args)
