来源

写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)的更多相关文章

  1. 【原】FMDB源码阅读(三)

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

  2. 【原】FMDB源码阅读(二)

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

  3. 【原】FMDB源码阅读(一)

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

  4. 【原】AFNetworking源码阅读(六)

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

  5. 【原】AFNetworking源码阅读(五)

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

  6. 【原】AFNetworking源码阅读(四)

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

  7. 【原】AFNetworking源码阅读(三)

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

  8. 【原】AFNetworking源码阅读(二)

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

  9. 【原】AFNetworking源码阅读(一)

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

随机推荐

  1. mysql中时间计算函数SQL DATE_SUB()用法

    本文为博主原创,未经允许不得转载: 在写sql的时候,经常要在sql中传值时间,对时间进行计算并过滤.之前都是将时间在后台计算好,直接传值给sql, 今天发现,有一个更方便的sql函数,可以简化很多代 ...

  2. C#高级编程第10版 note

    泛型接口的抗变和协变 https://www.cnblogs.com/yanfang/p/6635302.html ①泛型接口,如果泛型类型前没有关键字out或者in来标注,则该泛型接口不支持抗变和协 ...

  3. GRASP (职责分配原则)

    要学习设计模式,有些基础知识是我们必须要先知道的,设计模式是关于类和对象的一种高效.灵活的使用方式,也就是说,必须先有类和对象,才能有设计模式的用武之地,否则一切都是空谈,那么类和对象是从那冒出来的呢 ...

  4. 百度编辑器 Ueditor 上传图片时打开文件夹的延迟问题,点击上传图片弹窗打开慢问题

      在使用 ueditor 开发时, 作为一个web文本编辑器使用时. 当点击上传图片时, 文件夹要延迟好久才能打开. 解决: 针对多图片上传, 将/ueditor/dialogs/image/ima ...

  5. Qt5_qtconfig

    1.http://tieba.baidu.com/p/3225596765 QtConfig was removed in Qt5. If you want to force Qt5 to use a ...

  6. Spring AOP 切面编程记录日志和接口执行时间

    最近客户现在提出系统访问非常慢,需要优化提升访问速度,在排查了nginx.tomcat内存和服务器负载之后,判断是数据库查询速度慢,进一步排查发现是因为部分视图和表查询特别慢导致了整个系统的响应时间特 ...

  7. JavaScript权威指南--脚本化CSS

    知识要点 客户端javascript程序员对CSS感兴趣的是因为样式可以通过脚本编程.脚本化css启用了一系列有趣的视觉效果.例如:可以创建动画让文档从右侧“滑入”.创造这些效果的javascript ...

  8. 机器学习 Matplotlib库入门

    2017-07-21 15:22:05 Matplotlib库是一个优秀的python的数据可视化的第三方类库,其中的pyplot支持了类似matlab的图像输出操作.matplotlib.pyplo ...

  9. English trip -- VC(情景课)1 A Get ready

    Meet your classmates 见见你的同学 Look at the picture. What do you see? 看图片.你看到了什么? calendar  日历 bookcase ...

  10. 12月17日周日 form_for的部分理解。belongs_to的部分理解

    1.lean guide:helper method query ,✅