MVVM试图更加清晰的讲用户界面(UI)开发从应用程序的业务逻辑与行为中心分离,因为,很多这样的模式的实现都需要利用声明式数据绑定来实现讲View(视图)工作从其他层分离
所以出现了一大堆自定义的声明式的语法:
如:Avalon
- 作用域绑定(ms-controller, ms-important)
- 模板绑定(ms-include)
- 数据填充(ms-text, ms-html)
- 类名切换(ms-class, ms-hover, ms-active)
- 事件绑定(ms-on,……)
- 显示绑定(ms-visible)
- 插入绑定(ms-if)
- 双工绑定(ms-duplex,原来的ms-model)
- 样式绑定(ms-css)
- 数据绑定(ms-data)
- 布尔属性绑定(ms-checked, ms-selected, ms-readonly, ms-disabled, ms-enabled)
- 字符串属性绑定(ms-title, ms-src, ms-href……)
- 万能属性绑定(ms-attr)
- 万能绑定(ms-bind)
- 数组循环绑定(ms-each)
- 对象循环绑定(ms-with)
等等………
顾名思义,自定义声明语法,那么游览器本身是不能识别的,那么如何游览器能过识别自定义的HTML语法,它能让你讲行为关系到HTML元素或者属性上,甚至能让你创造具有自定义行为的新元素呢,我们暂且讲这个过程称之为“HTML编译”吧。
我们先看一段HTML代码
<div id='box' ms-controller="box">
<div style=" background: #a9ea00;" ms-css-width="w" ms-css-height="h" ms-click="click"></div>
<p>{{ w }} x {{ h }}</p>
<p>W: <input type="text" ms-model="w" data-event="change"/></p>
<p>H: <input type="text" ms-model="h" /></p>
</div>
avalon.define("box", function(vm) {
vm.w = 100;
vm.h = 100;
vm.click = function() {
vm.w = parseFloat(vm.w) + 10;
vm.h = parseFloat(vm.h) + 10;
}
})
avalon.scan(document.getElementById('box'));
HTML结构中充斥了大量的ms开头的自定义标签,还有{}插值表达式。。等等
声明1:
ms-controller="box"
avalon提供ms-controller, ms-important来指定VM在视图的作用范围。比如有两个VM,它们都有一个firstName属性,在DIV中,如果我们用 ms-controller="VM1", 那么对于DIV里面的{{firstName}}就会解析成VM1的firstName中的值。
声明2:
ms-css-width="w" ms-css-height="h"
用来处理样式
声明3:
ms-click="click"
avalon通过ms-on-click或ms-click进行事件绑定,并在IE对事件对象进行修复,并统一了所有浏览器对return false的处理
其实就是把部分的行为操作提升到了dom上了,然后有框架在后台给你处理好,通过加入各种自定义的属性可以让任何的HTML元素都实现这样的行为
具体看源码的执行流程:
总的来说就是匹配每一给节点上的属性,通过匹配分配到指定的bindingHandlers处理函数上,之后的处理本章不暂时不涉及
//扫描入口
avalon.scan = function(elem, vmodel)
//扫描子节点
function scanNodes(parent, vmodels, callback)
//开始扫描
function scanTag(elem, vmodels)
//扫描文本
function scanText(textNode, vmodels)
//扫描表达式
function scanExpr(str)
//扫描属性节点
function scanAttr(el, vmodels)
//抽取绑定
function executeBindings(bindings, vmodels)
//抽取文本绑定
function extractTextBindings(textNode)
看看命名就大概能猜出函数的作用了
1.入口函数 avalon.scan
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
avalon.scanavalon.scan = function(elem, vmodel) { elem = elem || root var vmodels = vmodel ? [].concat(vmodel) : [] scanTag(elem, vmodels) }
默认从文本的根documentElement开始,如果传递了第一个elem,那么就是指定了扫描的作用域了,类似 jQuery( selector, [ context ] )
2. 执行扫描 scanTag
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
avalon.scan vmodels = vmodels || [] var a = elem.getAttribute(prefix + "skip") var b = elem.getAttribute(prefix + "important") var c = elem.getAttribute(prefix + "controller") //这三个绑定优先处理,其中a > b > c if (typeof a === "string") { return } else if (b) { if (!VMODELS[b]) { return } else { vmodels = [VMODELS[b]] elem.removeAttribute(prefix + "important") } } else if (c) { var newVmodel = VMODELS[c] if (!newVmodel) { return } vmodels = [newVmodel].concat(vmodels) elem.removeAttribute(prefix + "controller") } scanAttr(elem, vmodels) //扫描特性节点 if (!stopScan[elem.tagName.toLowerCase()] && rbind.test(elem.innerHTML)) { scanNodes(elem, vmodels) }
- 依次要检测是当前元素上是否有ms-skip,ms-important,ms-controller属性,用于最开始的处理
- 如果ms-controller存在就取出vm视图模型对象
- 清除这个自定义属性
- 执行sacnAttr 属性扫描
3. 扫描属性节点 scanAttr
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
avalon.scanfunction scanAttr(el, vmodels) { var bindings = [] for (var i = 0, attr; attr = el.attributes[i++]; ) { 1 if (attr.specified) { 2 var isBinding = false if (attr.name.indexOf(prefix) !== -1) { 3 //如果是以指定前缀命名的 var type = attr.name.replace(prefix, "") if (type.indexOf("-") > 0) { 4 var args = type.split("-") type = args.shift() } isBinding = typeof bindingHandlers[type] === "function" 5 } if (isBinding) { bindings.push({ 6 type: type, args: args || [], element: el, remove: true, node: attr, value: attr.nodeValue }) } } } executeBindings(bindings, vmodels) }
attributes 属性返回包含被选节点属性的 NamedNodeMap。
如果在文档中设置了属性值,则 specified 属性返回 true.
是否是avalon的HTML指示 "ms-"开头
如果还指定了参数
能找到对应的处理函数
bindings 保存参数
4. 执行绑定 executeBindings
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
avalon.scanfunction executeBindings(bindings, vmodels) { bindings.forEach(function(data) { var flag = bindingHandlers[data.type](data, vmodels) if (flag !== false && data.remove) { //移除数据绑定,防止被二次解析 data.element.removeAttribute(data.node.name) } }) }
找到对应的类型的bindingHandlers方法,传入数据与vm对象,实现处理
移除数据绑定,防止被二次解析
5. 扫描子节点 scanNodes
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
avalon.scanfunction scanNodes(parent, vmodels, callback) { var nodes = aslice.call(parent.childNodes); callback && callback(); for (var i = 0, node; node = nodes[i++]; ) { if (node.nodeType === 1) { scanTag(node, vmodels) //扫描元素节点 } else if (node.nodeType === 3) { scanText(node, vmodels) //扫描文本节点 } } }
其实就循环处理子节点列表了,注意要过滤空文本类型
如果是元素节点就递归循环scanTag方法
如果是文本节点就scanText
6. 扫描文本 scanText
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
avalon.scanfunction scanText(textNode, vmodels) { var bindings = extractTextBindings(textNode) if (bindings.length) { executeBindings(bindings, vmodels) } }
7.抽出文本绑定 extractTextBindings
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
avalon.scanfunction extractTextBindings(textNode) { var bindings = [], tokens = scanExpr(textNode.nodeValue)//分解表达式 if (tokens.length) { while (tokens.length) { //将文本转换为文本节点,并替换原来的文本节点 var token = tokens.shift() var node = DOC.createTextNode(token.value) if (token.expr) { //如果分解的是表达式 var filters = token.filters var binding = { type: "text", node: node, args: [], element: textNode.parentNode, value: token.value, filters: filters } if (filters && filters.indexOf("html") !== -1) { avalon.Array.remove(filters, "html") binding.type = "html" binding.replaceNodes = [node] } bindings.push(binding) //收集带有插值表达式的文本 } documentFragment.appendChild(node) } textNode.parentNode.replaceChild(documentFragment, textNode) } return bindings }
文本解析是个比较复杂的东西,可以匹配很多种情况,所以需要加入很多解析的规则
scanExpr 就是扫描的表达式的匹配
documentFragment 先把这个结构让到文档碎片中,性能处理
8. 表达式匹配scanExpr
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
avalon.scanfunction scanExpr(str) { var tokens = [], value, start = 0, stop if (rexpr.test(str)) { do { var stop = str.indexOf(openTag, start) if (stop === -1) { break } value = str.slice(start, stop) if (value) { // {{ 左边的文本 tokens.push({ value: value, expr: false }) } start = stop + openTag.length stop = str.indexOf(closeTag, start) if (stop === -1) { break } value = str.slice(start, stop) if (value) { //{{ }} 之间的表达式 var leach = [] if (value.indexOf("|") > 0) { // 注意排除短路与 value = value.replace(rfilters, function(c, d, e) { leach.push(d + (e || "")) return c.charAt(0) }) } tokens.push({ value: value, expr: true, filters: leach.length ? leach : void 0 }) } start = stop + closeTag.length; } while (1); value = str.slice(start); if (value) { //}} 右边的文本 tokens.push({ value: value, expr: false }) } } return tokens }
代码很长,但是处理的东西确很简单的
比如:
"{{ w }} x {{ h }}" 一个插值表达式,那么应该如何解析
分析这个表达式,解析可以分三块
1. {{ w }}
2 x
3 {{ h }}
左右两边都是vm视图所有关联的属性,中间x就是求值
那么解析的规则,分解3个部分,组成处理数据
tokens 就有3个组成对象
- expr: true
- filters: undefined
- value: " w "
- expr: false
- value: " x "
- expr: true
- filters: undefined
- value: " h "
解析后分解成绑定的数据
然后就是一次循环了, 遇到条件stopScan就终止了
所以总结scan无非就干了一件事,扫描到指定的行为,发送数据给处理函数