博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue的第一份正式源码
阅读量:6465 次
发布时间:2019-06-23

本文共 1591 字,大约阅读时间需要 5 分钟。

提交:a5e27b1174e9196dcc9dbb0becc487275ea2e84c

commit: naive implementation

这可以说是vue的第一份正式源码,已经有了基本的骨架原型。

源码主要包含三个文件: main.js、directives.js、filters.js

运行原理:

  • 节点收集,找到根节点以及根节点之下的所有包含指令的节点.

  • 解析指令节点

  • 关联数据与节点

  • 监测指令节点的set操作,并调用指令的更新函数

伪代码:

/*根节点以及所有指令节点获取,这里指令节点的selector采用属性选择器来选择*/root = document.getElementById(opts.id),els  = root.querySelectorAll(selector)/** * 节点处理 */;[].forEach.call(els, processNode)processNode(root)/** * processNode中主要做了如下三步 */parseDirective()bindDirective()bindAccessors()

这里需要注意一点是 scope 的概念,vue是采用数据响应式的思想,这里的数据即对应一个vue实例里的 scope(也可称它为作用域,最新版本已改为data/vueInstance.$data)。上面所说的绑定操作都是针对于这个scope来的。

如:

scope = {    hello: 'ahahah'}

则在模板中声明一个v-text='hello'指令的时候,即实现了v-text指令与scope.hello的绑定。

如上便是当前版本vue的基本运行原理。

作者设计思想解读

  • 通过指令的声明方式实现某一DOM片段与某一javascript对象的关联

  • 数值关联,JS中的一个 String 对应于DOM中的一个或多个 textNode

  • 函数关联,JS中的一个方法 对应于DOM节点的事件函数

  • set监测

通过如下示例来观看作者指令语法的设计思想:

模板

YOYOYO

JS

var Seed = require('seed')var app = Seed.create({    id: 'test',    // template    scope: {        msg: 'hello',        hello: 'WHWHWHW',        changeMessage: function () {            app.scope.msg = 'hola'        }    }})

指令语句即 DOM 节点中的一个属性,如sd-text="msg | capitalize",等号前面为指令的名称,等号后面为指令的值。

受于字符串所能表达信息量的限制,作者在指令名称上采用 '-' 让指令名变成结构类型的数据,以此来增加指令的灵活性(标签的属性是不区分大小写的,所以不能采用驼峰式的命名).值对应组件作用域中的一个键名,这里通过管道符可以扩展相应的功能。

实质上来说,与普通的变量声明方式是一样的:

/*javascript 变量声明*/var text = 'ahahah';var onClick = function changeMessage () {};/*vue 指令声明, hello 和 changeMessage 则对应 scope 中的 hello 和 changeMessage的值*/v-text='hello';v-on-click='changeMessage';

注:组件对象数据与指令关联是一对多的关系

这样,一个微型的vue就成型了。

转载地址:http://vcezo.baihongyu.com/

你可能感兴趣的文章
MySQL 8支持文档存储,并带来性能和安全方面的改进
查看>>
百度发布智能电视伴侣,并公布短视频计划
查看>>
作者问答:解密硅谷
查看>>
Ooui:在浏览器中运行.NET应用
查看>>
LFE将Lisp编程带到Erlang虚拟机上
查看>>
移动互联网下半场,iOS开发者如何“高薪”成长?
查看>>
Java的序列化特性将要退出历史舞台了
查看>>
同事反馈环:如何实现持续改进的文化
查看>>
企业IT部门主管告诉你,DevOps给我们带来了这些变化
查看>>
AWS开源Firecracker,一种运行多租户容器服务的新虚拟化技术
查看>>
何时该用无服务器,何时该用Kubernetes?
查看>>
Google Chrome 51与交叉观察者和证书管理等API一起更新
查看>>
Hadoop真的要死了吗?
查看>>
Apache Kylin在绿城客户画像系统中的实践
查看>>
2019 SRE 调查报告:事故处理是主要工作,SRE 压力山大
查看>>
IBM发表论文:可能已找到处理量子计算退相干的方法
查看>>
苏宁的Node.js实践:不低于Java的渲染性能、安全稳定迭代快
查看>>
回顾我的2016
查看>>
苏宁Nodejs性能优化实战
查看>>
重磅!亚马逊将在2019年全面弃用Oracle数据库
查看>>