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

avalon暴露句柄方式

(function(DOC){
...
avalon=...//没有var
...
})(document) 具体暴露句柄方式的讲解,在这里。 avalon Dom遍历 源码的末尾执行了这么avalon.ready(function(){...})一个函数,而这个函数的末尾为avalon.scan(DOC.body)于是乎,avalon开始了读body旅程。
在这旅程中,有scanNodes、scanTag、scanAttr、scanText、scanExpr、scanTemplate需要来回流转运用。在讲解读取dom之前,我们先了解下dom的组成,节点类型(document.nodeType): 节点类型(nodeType) 元素类型
1 元素element
2 属性attr
3 文本text
8 注释comments
9 文档document 我们可以通过节点类型和具体的元素标签来判定将要解析的和不会去解析的。
scanNodes 我们先看scanNodes(parentElement,vmodels)函数,他的作用是通过parentElement.firstChild``child.nextSibling遍历当前dom下的子节点,并且通过节点类型的判定,各自调用scanTag(nodeType==1)和scanText(NodeType==8 && 存在{{...}})函数。
scanTag scanTag(elem, vmodels, node),这个函数蛮有意思的,第三个参数node是作者不想进行var声明,直接写在参数里的。这个函数的作用是判定avalon执行作用域的,作用域有三类:ms-skip ms-import和 ms-controller(有优先顺序),ms-important不包含父VM,ms-controller相反会有继承效果。
当然,这时候游览器还没有执行用户自定义的avalon.defined,所以不会调用scanAttr继续旅行的。
scanText scanText(textNode, text, vmodels),顾名思义,会具体解析解析...{{...}}...的值。这样的话,就会涉及avalon filter的解析,具体解析方法放在scanExpr里面,scanText主要替换...{{...}}...为解析后的数据,并且如果有用了filter的话,会调用executeBindings进行相应的处理。
该函数会产生一个记录scanText解析结果的object。数据结构为: {
type: "text",//类型
node: node,//替换后的element
nodeType: 3,//节点类型
value: token.value,
filters: token.filters
//token 为scanExpr的返回值
} scanExpr scanExpr(str),这个函数只要知道返回的结果格式就好。
scanAttr scanAttr(elem, vmodels)这个函数super重要的,他会针对avalon封装的事件和ms-if repeat widget等做相应的处理。会在下一章连同executeBindings一块讲解。
scanTemplate scanTemplate属于模板加载,以后可能会在这里补上或者新开一篇文章单独讲解它。
小记 如果有遍历dom需求的话,上面代码可经过去除依赖处理后摘出来。基本流程:从头到脚的开始遍历,根据存放在dom attribute的值来判定业务需求和vm作用域,ms-duplex属性和{{}}做占位符,等待渲染和占位符替换。VMODELS object则存放着要渲染进页面的数据。

http://my.oschina.net/myprogworld/blog/228949

avalonJS-源码阅读(一)的更多相关文章

  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. [洛谷P4723]【模板】线性递推

    题目大意:求一个满足$k$阶齐次线性递推数列$a_i$的第$n$项. 即:$a_n=\sum\limits_{i=1}^{k}f_i \times a_{n-i}$ 题解:线性齐次递推,先见洛谷题解, ...

  2. 【CF995F】Cowmpany Cowmpensation(动态规划,拉格朗日插值)

    [CF995F]Cowmpany Cowmpensation(多项式插值) 题面 洛谷 CF 题解 我们假装结果是一个关于\(D\)的\(n\)次多项式, 那么,先\(dp\)暴力求解颜色数为\(0. ...

  3. 【转】每个 Linux 新手都应该知道的 10 个命令

    你可能认为你是 Linux 新手,但实际上并不是.全球互联网用户有 3.74 亿,他们都以某种方式使用 Linux,因为 Linux 服务器占据了互联网的 90%.大多数现代路由器运行 Linux 或 ...

  4. ActiveMQ反序列化漏洞(CVE-2015-5254)复现

      0x00 漏洞前言 Apache ActiveMQ是美国阿帕奇(Apache)软件基金会所研发的一套开源的消息中间件,它支持Java消息服务,集群,Spring Framework等.Apache ...

  5. GridView中网络图片延迟加载导致高度计算失败的问题

    在使用下拉刷新以及加载更多控件的时候,出现了列表上滚不完的现象,经过半天的分析,最后得出结论:由于图片采用了延迟加载,导致列表按照没有加载图片时候的大小进行布局,相关的加载更多控件也就傻逼了. 最终解 ...

  6. 解题:USACO12OPEN Bookshelf

    题面 从零开始的DP学习之肆 当DP方程中的一部分具有某种单调性时可以用数据结构或者预处理维护来降低复杂度 一开始没有看懂题,尴尬,后来发现题目可以简化成这个样子: 将一个序列划分为若干段,每段长度不 ...

  7. EOJ 262 润清的烦恼

    ——题目出处zhoutb2333 题解: 3e6可以带一个log 又是下取整问题.但是分块会TLE. 这样考虑,我们把式子拆成两个部分. 我们先算出来每一个x的[ai/x]项,再算出来[x/ai]项. ...

  8. Centos7.2安装tomcat+Myeclipse(遇到的一些问题与总结)+web项目实战

    工作环境:centos7.2 PS:没有耐心的同学可以直接跳到后面的安装方法,对于安装方法大多是网上的,我只是做相关收集和总结 给个tomca和Myeclipset折腾的半死,现在做一些总结1.一定要 ...

  9. servlet与tomcat的关系

    1.4   Tomcat简介 学习Servlet技术,首先需要有一个Servlet运行环境,也就是需要有一个Servlet容器,本书采用的是Tomcat. Tomcat是一个免费的开放源代码的Serv ...

  10. Zabbix应用三:Zabbix监控MySQL

    利用Zabbix自带模版监控(Template App MySQL)MySQL服务 一.添加模版: 进入zabbix页面,找到'配置'->'主机'->'模版',点击'链接指示器'后面的'选 ...