avalonJS-源码阅读（二）
上一篇文章讲述的avalon刷页面所用到的几个函数。这篇则是主要讲avalon对刷DOM刷出来的avalon自定义属性如何处理的。 目录[-]
avalon页面处理（2）
数据结构
解析avalon标签
parseExpr
parseExprProxy
函数介绍
createCache
小结
附录
测试demo avalon页面处理（2） 上一篇文章讲述的avalon刷页面所用到的几个函数。这篇则是主要讲avalon对刷DOM刷出来的avalon自定义属性如何处理的。 数据结构 看js代码最头疼的就是数据流转时的数据结构变化。 //attr bindings
//例如 <div ms-dbclick-_abc='func'></div>
{
type:$string,//也就是ms-...后面的信息，例如 ms-duplex 则为 type:duplex,注意，游览器事件（event）如click,mousemove等统一为type:on
param:$string//"_abc"
element:$node//当前节点
name:$string//ms-dbclick-_abc
value:$string//func
priority:$Num//优先级。
//"if": 10,
//"repeat": 90,
//"widget": 110,
//"each": 1400,
//"with": 1500,
//"duplex": 2000,
//"on": 3000
//值越大优先级越高
}
//text bindings 从上一篇拉过来
{
type: "text|html",//类型
node: node,//替换后的element
nodeType: 3,//节点类型
value: token.value,
filters: token.filters
replaceNodes:$array//[node]
//token 为scanExpr的返回值
}
//text token
{
value:$string//具体值
expr:$boolean//是不是在{{...}}内
filters:$array|void 0 //过滤器
}
//bindingHandlers data
{
handlerName:$name//被bindingHandlers中哪个方法执行了解析。由于href src等都通过attr来处理，所以通过bindings 的type属性不可靠
evaluator:$func//由parseExpr 生成的函数。
...//上面 的text bindings 和attr bindings
} 解析avalon标签 有了数据结构后，看源码就稍微轻松些了。解析标签的功能主要存在bindingHandlers对象内。bindingHandler主要是对avalon标签进行分类和按实际情况进行处理，就像做javascript UI 插件一样。他所用到两个很重要的函数分别是parseExprProxy和parseExpr。
parseExpr parseExpr的主要作用是根据ms-what、{{what}}、vmodule和先前定义的filters等生成Function，并存储在evaluator下（参看bindingHandlers data数据结构）。下面是各种生成后的 function整理。 //简单的绑定个属性 例如 ms-href={{name}}
function anonymous(vm1399087422863_0/**/) {
'use strict';
var name = vm1399087422863_0.name
return name;
}
//带有filter的，例如 {{name | uppercase}}
function anonymous(vm1399088892713_0,filters1399088892713/**/) {//filters1399088892713 会将所有现有filters作为key/value传递进来
'use strict';
var name = vm1399088892713_0.name
var ret1399088892713 = name
if(filters1399088892713.uppercase){
try{
ret1399088892713 = filters1399088892713.uppercase(ret1399088892713)
}catch(e){}
} return ret1399088892713
}
//ms-duplex='name'
function anonymous(vm1399091173121_0/**/) {
'use strict';
return function(vvv){
var name = vm1399091173121_0.name;
if(!arguments.length){
return name
}
vm1399091173121_0.name= vvv;
}
} //ms-on ms-click="click"
function anonymous(vm1399093434491_0/**/) {
'use strict';
var click = vm1399093434491_0.click
if(avalon.openComputedCollect) return ;
return click;
} 上面是三个分支（第一个function和第二个function属于同一分支）最基本的例子，复杂一些的也基本是以此做基础衍生出来的，自己可以尝试着看着以上代码写一些复杂点的function出 来，并和avalon生成的做对比。parseExpr在生成function的时候会涉及缓存生成函数和缓存函数的uniId生成。
缓存的源码和测试demo会在后面写上。
parseExprProxy parseExprProxy主要作用是通过调用parseExpr 生成function，然后进行相应的dom订阅。它还帮助parseExpr处理了类似ms-href='http://{{abc}}ff{{abd}}'的分支。至于如何dom订阅， 不属于本篇的范畴。
函数介绍
createCache createCache：创建固定大小缓存,直接拿来收藏好了。 function createCache(maxLength) {
var keys = [] function cache(key, value) {
if (keys.push(key) > maxLength) {
delete cache[keys.shift()]
}
return cache[key] = value;
}
return cache;
} var c= createCache(256);
//c("key","value")//value
//c("key")//value 小结 这篇篇幅较短，avalon关于DOM处理 ms-， {{...}}核心除了parseExpr函数外，还有bindingHandlers对象，而看这个代码真如看javascript UI 插件一样，没多大激情（当然，写的话就费 劲了），所以就不去细细讲述了。
附录
测试demo <!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="avalon.js"></script>
</head>
<body>
<div ms-controller="nihao">
<a ms-href='{{name}}'>abc</a>
{{name|uppercase}}
<input type='text' ms-duplex='name'/>
<button ms-click='click'>button</button>
<a ms-href='http://abc/{{name}}'>test parseExprProxy</a>
</div>
<script>
avalon.define("nihao", function(vm) {
vm.name='nihao'
vm.cla=true
vm.click=function(){
console.log("click!");
return
}
})
</script>
</body>
</html>
avalonJS-源码阅读（二）的更多相关文章
- xxl-job源码阅读二（服务端）
1.源码入口 xxl-job-admin是一个简单的springboot工程,简单翻看源码,可以很快发现XxlJobAdminConfig入口. @Override public void after ...
- Spring 源码阅读 二
程序入口: 接着上一篇博客中看完了在AnnotationConfigApplicationContext的构造函数中的register(annotatedClasses);将我们传递进来的主配置类添加 ...
- SparkConf加载与SparkContext创建（源码阅读二）
紧接着昨天,我们继续开搞了啊.. 1.下面,开始创建BroadcastManager,就是传说中的广播变量管理器.BroadcastManager用于将配置信息和序列化后的RDD.Job以及Shuff ...
- JDK源码阅读(二) AbstractList
package java.util; public abstract class AbstractList<E> extends AbstractCollection<E> i ...
- Struts2源码阅读(一)_Struts2框架流程概述
1. Struts2架构图 当外部的httpservletrequest到来时 ,初始到了servlet容器(所以虽然Servlet和Action是解耦合的,但是Action依旧能够通过httpse ...
- 【原】FMDB源码阅读（二）
[原]FMDB源码阅读(二) 本文转载请注明出处 -- polobymulberry-博客园 1. 前言 上一篇只是简单地过了一下FMDB一个简单例子的基本流程,并没有涉及到FMDB的所有方方面面,比 ...
- 【原】AFNetworking源码阅读（二）
[原]AFNetworking源码阅读(二) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇中我们在iOS Example代码中提到了AFHTTPSessionMa ...
- 【原】SDWebImage源码阅读（二）
[原]SDWebImage源码阅读(二) 本文转载请注明出处 —— polobymulberry-博客园 1. 解决上一篇遗留的坑 上一篇中对sd_setImageWithURL函数简单分析了一下,还 ...
- 34 网络相关函数(二)——live555源码阅读(四)网络
34 网络相关函数(二)——live555源码阅读(四)网络 34 网络相关函数(二)——live555源码阅读(四)网络 2)socketErr 套接口错误 3)groupsockPriv函数 4) ...
- 【 js 基础 】【 源码学习 】backbone 源码阅读（二）
最近看完了 backbone.js 的源码,这里对于源码的细节就不再赘述了,大家可以 star 我的源码阅读项目(source-code-study)进行参考交流,有详细的源码注释,以及知识总结,同时 ...
随机推荐
- 简明Python教程自学笔记——命令行通讯录
[前言]学习Python已经有一段时间了,相关的书籍资料也下载了不少,但是没有一本完整的看完,也没有编出一个完整的程序.今天下午比较清闲就把<简明Python教程>看了一遍,然后根据书里面 ...
- 构建工具-----Gradle-----安装配置
介绍 Gradle 是一款构建工具,继 Ant .Maven 之后的现代构建工具. 下载 Gradle 下面是 Gradle 的官方网站地址: Gradle l Modern Open-Source ...
- bzoj 4521: [Cqoi2016]手机号码
感觉get到了一种数位dp的新姿势,加一位表示当前要填的数有没有限制(感觉以前的写法都太蠢了). 这么写有两个地方要注意: 1.每dp到一位时需要f[i][初始状态]++,相当于这位前都是前导零(这道 ...
- [THUSC 2016] 补退选 （Trie树）
link $solution:$ $Trie$树很显然吧,那么如何去处理每次询问.对于$Trie$树的每个节点放一个$vector$表示其若有$v$个人的最小时间. #include<iostr ...
- k最近邻算法(kNN)
from numpy import * import operator from os import listdir def classify0(inX, dataSet, labels, k): d ...
- HDU 6249
Alice’s Stamps Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)To ...
- P4888 三去矩阵
P4888 三去矩阵 给出一个字符矩阵, 多次询问求以 \((x, y)\) 为中心的最长回文串长度(即横竖两种) \(l, q <= 2000\) Solution 数据范围小直接模拟即可 C ...
- VScode常见问题汇总（持续更新）
1.formatOnSave--保存后自动格式化 根据每个人安装的插件不同,可能问题原因也不同. 我个人的原因是因为JS-CSS-HTML Formatter这个插件,那么 ...
- Git之远程库与本地库交互
对于开发人员而言,有时候在公司干完会到家还得接着干,为了方便同步代码,于是乎,可通过GitHub代码托管平台实现代码云同步. GitHub账号开通.创建远程仓库及初始化等操作此处不做赘述: Git内部 ...
- appium 使用过程问题踩坑-笔记
问题1:虚拟设备选用问题 运行脚本抛出异常,创建session对象失败 排查过程:在进入cmd模式下: ①adb devices --ok ②appium-doctor --ok ③appium ...