上一篇文章讲述的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-源码阅读（二）的更多相关文章

  1. xxl-job源码阅读二（服务端）

    1.源码入口 xxl-job-admin是一个简单的springboot工程,简单翻看源码,可以很快发现XxlJobAdminConfig入口. @Override public void after ...

  2. Spring 源码阅读 二

    程序入口: 接着上一篇博客中看完了在AnnotationConfigApplicationContext的构造函数中的register(annotatedClasses);将我们传递进来的主配置类添加 ...

  3. SparkConf加载与SparkContext创建（源码阅读二）

    紧接着昨天,我们继续开搞了啊.. 1.下面,开始创建BroadcastManager,就是传说中的广播变量管理器.BroadcastManager用于将配置信息和序列化后的RDD.Job以及Shuff ...

  4. JDK源码阅读(二) AbstractList

    package java.util; public abstract class AbstractList<E> extends AbstractCollection<E> i ...

  5. Struts2源码阅读(一)_Struts2框架流程概述

    1. Struts2架构图  当外部的httpservletrequest到来时 ,初始到了servlet容器(所以虽然Servlet和Action是解耦合的,但是Action依旧能够通过httpse ...

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

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

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

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

  8. 【原】SDWebImage源码阅读（二）

    [原]SDWebImage源码阅读(二) 本文转载请注明出处 —— polobymulberry-博客园 1. 解决上一篇遗留的坑 上一篇中对sd_setImageWithURL函数简单分析了一下,还 ...

  9. 34 网络相关函数(二)——live555源码阅读(四)网络

    34 网络相关函数(二)——live555源码阅读(四)网络 34 网络相关函数(二)——live555源码阅读(四)网络 2)socketErr 套接口错误 3)groupsockPriv函数 4) ...

  10. 【 js 基础 】【 源码学习 】backbone 源码阅读（二）

    最近看完了 backbone.js 的源码,这里对于源码的细节就不再赘述了,大家可以 star 我的源码阅读项目(source-code-study)进行参考交流,有详细的源码注释,以及知识总结,同时 ...

随机推荐

  1. Distinct Substrings SPOJ - DISUBSTR(后缀数组水题)

    求不重复的子串个数 用所有的减去height就好了 推出来的... #include <iostream> #include <cstdio> #include <sst ...

  2. CF1088F Ehab and a weird weight formula 贪心 倍增

    CF1088F Ehab and a weird weight formula 题意 给定一棵树,点有点权,其中这棵树满足除了权值最小的点外,每个点至少有一个点权小于它的相邻点. 要求你重新构建这棵树 ...

  3. BZOJ4036 [HAOI2015]按位或 【minmax容斥 + 期望 + FWT】

    题目链接 BZOJ4036 题解 好套路的题啊,,, 我们要求的,实际上是一个集合\(n\)个\(1\)中最晚出现的\(1\)的期望时间 显然\(minmax\)容斥 \[E(max\{S\}) = ...

  4. 解题：Poetize6 IncDec Sequence

    题面 差分原数列得到差分数组$dif$,这样对于$dif[2]->dif[n]$会多出来两个“空位置”$1$和$n+1$.然后区间加减就变成了使一个位置$+1$,另一个位置$-1$(可以对“空位 ...

  5. webservice的接口协议（HTTPClient 、RestTemplate HttpURLConnection）

    HTTP协议时Internet上使用的很多也很重要的一个协议,越来越多的java应用程序需要通过HTTP协议来访问网络资源. HTTPClient提供的主要功能: 1.实现了所有HTTP的方法(GET ...

  6. 并发库应用之一 & ThreadLocal实现线程范围的共享变量

    ThreadLocal用于实现线程内的数据共享,即对于相同的程序代码,多个模块在同一个线程中运行时要共享一份数据,而在另外线程中运行时又共享另外一份数据. 每个线程调用全局ThreadLocal对象的 ...

  7. nltk_29_pickle保存和导入分类器

    sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId=1005269003&am ...

  8. python中高阶函数与装饰器

    高阶函数的定义:传入参数有函数名或者返回值有内置函数名的函数. 最简单的高阶函数: def add(x, y, f):    return f(x) + f(y) add(-5, 6, abs) 常用 ...

  9. android studio run得时候 选择开启对话框

    一个项目run 调试得时候,在Android studio3.0默认得设置是运行在上一个device上,我们通过改变设置,废话不多说,上图: 然后点击这个edit config 在miscellane ...

  10. 【mybatis笔记】 resultType与resultMap的区别

    序言: 昨天做一个项目,看到很多刚开始用mybatis的同事对于resultType和resultMap的理解与使用含糊不清,这里我试图用最好理解的说法写一写,欢迎大家勘误. 两者异同: 相同点:re ...