avalon源码阅读(1)
写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) 元素类型
元素element
属性attr
文本text
注释comments
文档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的值 来判定业务需求和 v m作用域,
ms-duplex属性和 {{}} 做占位符,等待渲染和占位符替换。
VMODELS object则存 放着要 渲染进页面的数据。
avalon源码阅读(1)的更多相关文章
- 【原】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 ...
随机推荐
- [微信开发] - 微信支付 JSAPI 形式
微信官方的JSAPI文档 微信官方的JSAPI支付SDK与DEMO下载 查看JSAPI的API可以从这里看 下载了支付DEMO其实有些地方不对的,比如如果做沙盒测试的时候,需要使用getsignkey ...
- U盘中病毒了怎么办
声明: 该方案仅是我处理自己U盘的心得,如果您看到这篇文件,并使用此方法,有任何数据丢失或者损失,我概不负责 问题: U盘里面显示占用了空间,就是看不到文件,或者仅有一两个自己不认识的文件 处理方案: ...
- LA 3644 易爆物
https://vjudge.net/problem/UVALive-3644 简单的并查集题目. #include<iostream> using namespace std; + ; ...
- Jmeter 4.0 对返回Json处理
研究这个的目的是:如果返回信息是比较复杂的,需要对返回信息中数据以及数据的层级做断言 我找了一些我们的接口,层级关系都太简单了,最复杂的就是这两个了:[而且都是get接口,原来get接口还要增加测试点 ...
- Java入门:零碎的知识点
实例变量经常被称为属性 成员变量和局部变量:前者在类中定义,后者在类的方法中定义且系统不会自动赋初始值 我们创建一个对象的时候实际上执行的是无参的构造方法 静态变量 static String arr ...
- c++ primer plus 第五章 课后题答案
#include <iostream> using namespace std; int main() { ; cout << "Please enter two n ...
- node 循序渐进
1. 执行 node helloworld.js 2. http 服务器 建 server.js 文件 - node server.js 跑起来 - 浏览器访问 http://localho ...
- 在ANE插件中启动AIR开发的Android应用
在Android原生应用开发中,启动一个应用非常容易: Intent __intent = new Intent(this, YourAppActivity.class); startActivity ...
- Python 爬虫-Scrapy框架基本使用
2017-08-01 22:39:50 一.Scrapy爬虫的基本命令 Scrapy是为持续运行设计的专业爬虫框架,提供操作的Scrapy命令行. Scrapy命令行格式 Scrapy常用命令 采用 ...
- vue.js选择if(条件渲染)详解
vue.js选择if(条件渲染)详解 一.总结 一句话总结: v-if <!DOCTYPE html> <html lang="en"> <head& ...