• 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则存  放着要  渲染进页面的数据

  • 相关阅读:
    「golang」go-micro指定consul地址
    「postgres」无数据则插入,有数据不做插入
    「postgres」导出数据以及分割数据
    「postgre」调整表结构
    「postgre」查看DB的物理占用空间
    「postgre」INT最大值
    「postgre」服务重启
    「golang」关于TIME_WAIT优化
    深入理解Spring Boot属性配置文件
    springboot 中的commandLineRunners接口
  • 原文地址:https://www.cnblogs.com/dhsz/p/7998731.html
Copyright © 2020-2023  润新知