avalonJS-源码阅读(一)
写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-源码阅读(一)的更多相关文章
- 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 ...
随机推荐
- Day24-part1-原生Ajax
参考老师博客:http://www.cnblogs.com/wupeiqi/articles/5703697.html 主要讲了:发数据的3种方式以及上传文件的3种方式.(后续需要总结) 一,原生Aj ...
- MT【160】格点
(2017年清华大学 THUSSAT) 把不超过实数 $x$ 最大整数记为 $[x]$,任取互质且不小于 3 的正奇数 $m,n$,令$$I=\sum_{i=1}^{\frac{m-1}{2}}\l ...
- 解题:APIO/CTSC 2007 数据备份
题面 用双向链表把相邻两项的差串起来,用大根堆维护价值,每次贪心取最大的$x$.取完之后打标记删掉$pre[x]$和$nxt[x]$,之后用$val[pre[x]]+val[nxt[x]]-val[x ...
- 解题:JSOI 2007 重要的城市
题面 考虑一个点$x$,如果某两个点$u,v$间的所有最短路都经过$x$,那么$x$肯定是重要的.这个题$n$比较小,所以我们直接跑floyd,在过程中记录 当发生松弛时,我们具体讨论: 如果这个长度 ...
- D. Vitya and Strange Lesson Codeforces Round #430 (Div. 2)
http://codeforces.com/contest/842/problem/D 树 二进制(路径,每个节点代表一位) #include <cstdio> #include < ...
- git<add的作用>
git add是个多功能的命令 1,跟踪: git add:跟踪当前目录下所有文件 git add <filename>:跟踪文件<filename> 2,暂存已修改的文件: ...
- 【Asp.net入门5-01】SportsStore:一个真实的应用程序
- php与Git下基于webhook的自动化部署
前言 2018年第一篇文章,没啥技术含量,权当笔记 我们一般都会用git或者svn来管理我们的代码 每次代码更新后还要手动的去把服务器上的代码也更新一遍 项目小了还好 项目大了着实浪费时间 要是服务器 ...
- PhantomJS的替代品--无头浏览器(Headless Chrome)
在使用PhantomJS时候,出现提示: UserWarning: Selenium support for PhantomJS has been deprecated, please use hea ...
- day2 程序流程控制
流程控制:1.调用方法.调用方法将导致控制流程离开当前方法,转移到被调用的方法 2.选择.java中有两种做出选择的机制:if/else语句和switch语句.三目运算符可以看作是if/else的一个 ...