avalonJS-源码阅读（2）
上一篇文章讲述的avalon刷页面所用到的几个函数。
这篇则是主要讲avalon
对刷DOM刷出来的avalon自定义属性如何处理的。
目录[-]
avalon页面处理（2）
数据结构
解析avalon标签
parseExpr
parseExprProxy
函数介绍
createCache
小结
附录
测试demo
上一篇文章讲述的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-源码阅读（2）的更多相关文章
- avalon源码阅读（1）
来源 写angularJS源码阅读系列的时候,写的太垃圾了. 一个月后看,真心不忍直视,以后有机会的话得重写. 这次写avalonJS,希望能在代码架构层面多些一点,少上源码.多写思路. avalon ...
- 【原】FMDB源码阅读（三）
[原]FMDB源码阅读(三) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 FMDB比较优秀的地方就在于对多线程的处理.所以这一篇主要是研究FMDB的多线程处理的实现.而 ...
- 【原】FMDB源码阅读（二）
[原]FMDB源码阅读(二) 本文转载请注明出处 -- polobymulberry-博客园 1. 前言 上一篇只是简单地过了一下FMDB一个简单例子的基本流程,并没有涉及到FMDB的所有方方面面,比 ...
- 【原】FMDB源码阅读（一）
[原]FMDB源码阅读(一) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 说实话,之前的SDWebImage和AFNetworking这两个组件我还是使用过的,但是对于 ...
- 【原】AFNetworking源码阅读（六）
[原]AFNetworking源码阅读(六) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 这一篇的想讲的,一个就是分析一下AFSecurityPolicy文件,看看AF ...
- 【原】AFNetworking源码阅读（五）
[原]AFNetworking源码阅读(五) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇中提及到了Multipart Request的构建方法- [AFHTTP ...
- 【原】AFNetworking源码阅读（四）
[原]AFNetworking源码阅读(四) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇还遗留了很多问题,包括AFURLSessionManagerTaskDe ...
- 【原】AFNetworking源码阅读（三）
[原]AFNetworking源码阅读(三) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇的话,主要是讲了如何通过构建一个request来生成一个data tas ...
- 【原】AFNetworking源码阅读（二）
[原]AFNetworking源码阅读(二) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇中我们在iOS Example代码中提到了AFHTTPSessionMa ...
- 【原】AFNetworking源码阅读（一）
[原]AFNetworking源码阅读(一) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 AFNetworking版本:3.0.4 由于我平常并没有经常使用AFNetw ...
随机推荐
- 【Coursera】Third Week(1)
The Early World-Wide-Web 关于CERN 欧洲核子研究组织,除了它为世界物理学所作出的卓越贡献,它还是世界上第一个网站,第一个网络服务器,第一个浏览器的诞生地. Robert C ...
- BZOJ 2648 kd-tree模板
学习了一下kd-tree的基本写法 http://blog.csdn.net/jiangshibiao/article/details/34144829 配合 http://www.bilibili. ...
- Codeforces Beta Round #16 div 2 C.Monitor最大公约数
C. Monitor time limit per test 0.5 second memory limit per test 64 megabytes input standard input ou ...
- webstorm注册码 永久有效！！！ 前端工程师福利
2RRJMBXW33-eyJsaWNlbnNlSWQiOiIyUlJKTUJYVzMzIiwibGljZW5zZWVOYW1lIjoi5b285bK4IHNvZnR3YXJlMiIsImFzc2lnb ...
- Android提高第九篇之GridView和SQLite实现分页表格
实现并封装一个SQL分页表格控件,不仅支持分页还是以表格的形式展示数据.先来看看本文程序运行的动画: 这个SQL分页表格控件主要分为“表格区”和“分页栏”这两部分,这两部分都是基于GridView实现 ...
- Java 常用对象-基本类型的封装类
2017-11-04 20:39:26 基本类型封装类:基本类型的封装类的好处是可以在对象中定义更多的功能方法操作该数据. 常用操作之一:用于基本数据类型与字符串的转换. 基本类型和包装类的对应: b ...
- [.NET开发] C# 如何更改Word语言设置
一般在创建或者打开一个Word文档时,如果没有进行过特殊设置的话,系统默认的输入语言的是英语输入,但是为适应不同的办公环境,我们其实是需要对文字嵌入的语言进行切换的,因此,本文将介绍如何使用Spire ...
- mysql数据库切分
一.数据的垂直切分概念:数据的垂直切分,也可以称之为纵向切分.将不同的表分散到不同的数据库主机中.一个应用系统,总体功能肯定是由很多个功能模块所组成的,而每一个功能模块所需要的数据对应到数据库中就是一 ...
- Confluence 6 获得 Active Directory 服务器证书
上面的步骤说明了如何在你的 Microsoft Active Directory服务器上安装 certification authority (CA).这一步,你需要为你的 Microsoft Act ...
- Vue自动化工具（Vue-CLI）
一.组件的概念 1.概念 组件(Component)是自定义封装的功能.在前端开发过程中,经常出现多个网页的功能是重复的,而且很多不同的网站之间,也存在同样的功能. 而在网页中实现一个功能,需要使用h ...