上一篇文章讲述的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）的更多相关文章

  1. avalon源码阅读（1）

    来源 写angularJS源码阅读系列的时候,写的太垃圾了. 一个月后看,真心不忍直视,以后有机会的话得重写. 这次写avalonJS,希望能在代码架构层面多些一点,少上源码.多写思路. avalon ...

  2. 【原】FMDB源码阅读（三）

    [原]FMDB源码阅读(三) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 FMDB比较优秀的地方就在于对多线程的处理.所以这一篇主要是研究FMDB的多线程处理的实现.而 ...

  3. 【原】FMDB源码阅读（二）

    [原]FMDB源码阅读(二) 本文转载请注明出处 -- polobymulberry-博客园 1. 前言 上一篇只是简单地过了一下FMDB一个简单例子的基本流程,并没有涉及到FMDB的所有方方面面,比 ...

  4. 【原】FMDB源码阅读（一）

    [原]FMDB源码阅读(一) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 说实话,之前的SDWebImage和AFNetworking这两个组件我还是使用过的,但是对于 ...

  5. 【原】AFNetworking源码阅读（六）

    [原]AFNetworking源码阅读(六) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 这一篇的想讲的,一个就是分析一下AFSecurityPolicy文件,看看AF ...

  6. 【原】AFNetworking源码阅读（五）

    [原]AFNetworking源码阅读(五) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇中提及到了Multipart Request的构建方法- [AFHTTP ...

  7. 【原】AFNetworking源码阅读（四）

    [原]AFNetworking源码阅读(四) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇还遗留了很多问题,包括AFURLSessionManagerTaskDe ...

  8. 【原】AFNetworking源码阅读（三）

    [原]AFNetworking源码阅读(三) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇的话,主要是讲了如何通过构建一个request来生成一个data tas ...

  9. 【原】AFNetworking源码阅读（二）

    [原]AFNetworking源码阅读(二) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇中我们在iOS Example代码中提到了AFHTTPSessionMa ...

  10. 【原】AFNetworking源码阅读（一）

    [原]AFNetworking源码阅读(一) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 AFNetworking版本:3.0.4 由于我平常并没有经常使用AFNetw ...

随机推荐

  1. [SpringBoot] - 发送带附件的邮件

    <!--发送email依赖--> <dependency> <groupId>org.springframework.boot</groupId> &l ...

  2. Unity3D学习笔记（二十二）：ScrollView和事件接口

    昨天问题 InputField光标被遮挡问题:背景图片输入层级高于光标的层级,把光标弄成子物体,子物体层级高 自制的滑动框,选项怎么对齐,把Template的Pivot.y改为1 分辨率的区别:16: ...

  3. Ubuntu 14.04 安装adobe flash player

    参考: How to install flash payer in Ubuntu 14.04 LTS? [duplicate] Ubuntu 14.04 安装adobe flash player 32 ...

  4. Ubuntu 14.04下 Java通用安装方法

    参考: 解决Floodlight1.2+Mininet问题及使用安装 Ubuntu下安装JDK1.7图文详解 Ubuntu 14.04下 Java通用安装方法 1.到oracle官网下下载对应jdk包 ...

  5. 【Coursera】Seventh Week

    Application Layer:Use the services of the TCP layer Quick Review Link Layer(Ethernet):gets the data ...

  6. 51nod 1463 找朋友（线段树+离线处理）

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1463 题意: 思路: 好题! 先对所有查询进行离线处理,按照右区间排序, ...

  7. jdk、tomcat、solr环境搭建

    环境概述 1)操作系统:windows7旗舰版(64位) 2)jdk:jdk-8u131-windows-x64: 3)tomcat:apache-tomcat-9.0.0.M21 4)solr:so ...

  8. Web API过滤器

    Web API包含在操作方法执行之前或之后添加额外的逻辑的过滤器.过滤器可用于提供横切特性,比如日志记录.异常处理.性能测量.身份验证和授权等等. 过滤器可以应用于Web API控制器或一个或多个操作 ...

  9. MVC动态二级域名解析

    动态二级域名的实现: 应用场景:目前产品要实现block功能,因为工作需要实现二级域名:www.{CompanyUrl}.xxx.com 假设产品主域名入口为:www.xxx.com 公司员工管理:w ...

  10. VMware Workstation Pro12安装RedHat6.4 64位

    1.打开VM12软件,并新建一个虚拟机.   点击 下一步.  默认即可,点击 下一步.  选择 稍后安装操作系统(S). 这一项,基本上都是默认的.点击 下一步.  这里 客户机操作系统 就选择 L ...