做网站赚钱吗,wordpress 更新提示,网站的程序怎么做,建立企业网站的目的和意义MVVM试图更加清晰的讲用户界面(UI)开发从应用程序的业务逻辑与行为中心分离#xff0c;由于#xff0c;不少这样的模式的实现都须要利用声明式数据绑定来实现讲View(视图)工做从其余层分离css因此出现了一大堆自定义的声明式的语法#xff1a;html如:Avalonnode顾名思义,自定…MVVM试图更加清晰的讲用户界面(UI)开发从应用程序的业务逻辑与行为中心分离由于不少这样的模式的实现都须要利用声明式数据绑定来实现讲View(视图)工做从其余层分离css因此出现了一大堆自定义的声明式的语法html如:Avalonnode顾名思义,自定义声明语法,那么游览器自己是不能识别的那么如何游览器能过识别自定义的HTML语法它能让你讲行为关系到HTML元素或者属性上甚至能让你创造具备自定义行为的新元素呢咱们暂且讲这个过程称之为“HTML编译”吧。数组咱们先看一段HTML代码浏览器{{ w }} x {{ h }}W: H: 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开头的自定义标签还有{}插值表达式。。等等ruby声明1ms-controllerboxavalon提供ms-controller, ms-important来指定VM在视图的做用范围。好比有两个VM它们都有一个firstName属性在DIV中若是咱们用 ms-controllerVM1, 那么对于DIV里面的{{firstName}}就会解析成VM1的firstName中的值。app声明2ms-css-widthw ms-css-heighth用来处理样式框架声明3ms-clickclickavalon经过ms-on-click或ms-click进行事件绑定并在IE对事件对象进行修复并统一了全部浏览器对return false的处理dom其实就是把部分的行为操做提高到了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.scanavalon.scanavalon.scan function(elem, vmodel) {elem elem || rootvar vmodels vmodel ? [].concat(vmodel) : []scanTag(elem, vmodels)}默认从文本的根documentElement开始若是传递了第一个elem,那么就是指定了扫描的做用域了相似 jQuery( selector, [ context ] )2. 执行扫描 scanTagavalon.scanvmodels vmodels || []var a elem.getAttribute(prefix skip)var b elem.getAttribute(prefix important)var c elem.getAttribute(prefix controller)//这三个绑定优先处理其中a b cif (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. 扫描属性节点 scanAttravalon.scanfunction scanAttr(el, vmodels) {var bindings []for (var i 0, attr; attr el.attributes[i]; ) { 1if (attr.specified) { 2var isBinding falseif (attr.name.indexOf(prefix) ! -1) { 3//若是是以指定前缀命名的var type attr.name.replace(prefix, )if (type.indexOf(-) 0) { 4var args type.split(-)type args.shift()}isBinding typeof bindingHandlers[type] function 5}if (isBinding) {bindings.push({ 6type: type,args: args || [],element: el,remove: true,node: attr,value: attr.nodeValue})}}}executeBindings(bindings, vmodels)}attributes 属性返回包含被选节点属性的 NamedNodeMap。若是在文档中设置了属性值则 specified 属性返回 true.是不是avalon的HTML指示 ms-开头若是还指定了参数能找到对应的处理函数bindings 保存参数4. 执行绑定 executeBindingsavalon.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. 扫描子节点 scanNodesavalon.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方法若是是文本节点就scanText6. 扫描文本 scanTextavalon.scanfunction scanText(textNode, vmodels) {var bindings extractTextBindings(textNode)if (bindings.length) {executeBindings(bindings, vmodels)}}7.抽出文本绑定 extractTextBindingsavalon.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.filtersvar 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 htmlbinding.replaceNodes [node]}bindings.push(binding) //收集带有插值表达式的文本}documentFragment.appendChild(node)}textNode.parentNode.replaceChild(documentFragment, textNode)}return bindings}文本解析是个比较复杂的东西能够匹配不少种状况因此须要加入不少解析的规则scanExpr 就是扫描的表达式的匹配documentFragment 先把这个结构让到文档碎片中性能处理8. 表达式匹配scanExpravalon.scanfunction scanExpr(str) {var tokens [],value, start 0,stopif (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.lengthstop 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    x3   {{ h }}左右两边都是vm视图全部关联的属性中间x就是求值那么解析的规则分解3个部分组成处理数据tokens 就有3个组成对象expr: truefilters: undefinedvalue: w expr: falsevalue: x expr: truefilters: undefinedvalue: h 解析后分解成绑定的数据而后就是一次循环了 遇到条件stopScan就终止了因此总结scan无非就干了一件事扫描到指定的行为发送数据给处理函数