当前位置:首页 > 资讯 > info5 > 正文

vue源码解读预热-0

发表于: 2016-05-08   作者:yechonglaile   来源:转载   浏览:
摘要: vueJS的源码解读vue源码总共包含约一万行代码量(包括注释)特别感谢作者EvanYou开放的源代码,访问地址为Github代码整体介绍与函数介绍预览代码模块分析代码整体思路总体的分析从图片中可以看出的为采用IIFE(Immediately-InvokedFunctionExpression)立即执行的函数表达式的形式进行的代码的编写常见的几种插件方式:(function(,){}(,))或(f

vueJS的源码解读

vue源码总共包含约一万行代码量(包括注释)特别感谢作者Evan You开放的源代码,访问地址为Github

  • 代码整体介绍与函数介绍预览
  • 代码模块分析
  • 代码整体思路

总体的分析

vue源码解读预热-0_第1张图片

从图片中可以看出的为采用IIFE(Immediately-Invoked Function Expression)立即执行的函数表达式的形式进行的代码的编写

常见的几种插件方式: (function(,){}(,))或(function(,){})(,)或!function(){}()等等,其中必有一项会传入内部依赖的上下文,可以为window或其他插件或框架名称

这种写法非常像jquery的源码的写法,jquery中多了一个window的判断

vue源码解读预热-0_第2张图片

window对象

1.window对象的属性均指向window对象自身;(可以利用函数内this.window.的属性在进行对象调用时会因此指向不同的当前窗口)

  window.window.....

2.全局变量也即是定义在window下的属性,也即是在全局作用域下定义的变量attr等也即是相当于在window.attr上定义了相关的值,给我们启发 –1.通常在编码的过程中要避免污染全局变量;–2.定义函数的时候最好不要在外部可以访问与修改

    function test(){console.info("a")}
    window.test=function test(){.....}//也即是相当于全局的一个属性

3.对于window的自身的属性可以不必写window.可以直接调用,如innerWidth (innerWidth的表示可以参考jqzoom中的图)

IIFE

IIFE也即是立即执行的函数表达式,这种写法作为函数定义的两种方式之一(一种为函数声明,另一种为函数表达式)写法很多但是主要目的是告诉解析器一表达式的方式进行解析 (例如匿名函数:创建一个函数并将它的赋值给变量 ;)

 var s=function(){....}
 function s(){.......}

第一种形式也即是匿名函数,赋值号右边有值或表达式,告诉解析器为函数表达式的类型(另:函数表达式name属性为空字符串) ;第二种会在代码执行前会进行函数的声明提升,从而预先读取函数的声明(可以在未定义前调用该函数);

综上可以常见的很多插件中的写法如下
( function() {}() );
( function() {} )();
[ function() {}() ];
~ function() {}();
! function() {}();
+ function() {}();
- function() {}();

详细的可以参考该作者对问题的回答:
https://www.zhihu.com/question/20292224

1.删除一个属性必要时触发改变

Delete a property and trigger change if necessary.

function del(obj, key) {
if (!hasOwn(obj, key)) {
return;
}
……..
}

1.2 hasOwn(obj,key) (检查对象是否含有该属性)

var hasOwnProperty = Object.prototype.hasOwnProperty;
function hasOwn(obj, key) {
return hasOwnProperty.call(obj, key);
}

  1. 考虑避免当函数重新定义hasOwnProperty的覆盖原来的定义的时候 直接从原型链中取出
  2. 检测其直接挂载的属性(direct properties)而非从原型链中继承的属性(return false)

delete obj[key];
var ob = obj. _ ob _;
if (!ob) {
return;
}

如果存在该属性则删除之 ;
delete操作不会对直接释放内存做任何的操作,只是删除对象的引用;如果删除的属性在原型链中也存在的时候则 ,删除后对象将会继承原型链中的属性;删除对象的属性 对变量或函数的名称无效 (区分全局的变量 也即是挂在在全局对象的属性);不能删除预先定义对象的属性;不存在返回true

_ ob _位后续定义的一个属性 将会在def会看到;如果不存在该属性则直接返回

ob.dep.notify();
if (ob.vms) {
var i = ob.vms.length;
while (i–) {
var vm = ob.vms[i];
vm._proxy(key);
vm._digest();
}
}
return val;

此时出现的dep;

1.3 Dep函数 (发布订阅者模式应用)

var uid$1 = 0;

function Dep() {
this.id = uid$1++;
this.subs = [];
}
Dep.target = null;

Dep.prototype.addSub = function (sub) {
this.subs.push(sub);
};

Dep.prototype.removeSub = function (sub) {
this.subs.$remove(sub);
};

Dep.prototype.depend = function () {
Dep.target.addDep(this);
};

Dep.prototype.notify = function () {
// stablize the subscriber list first
var subs = toArray(this.subs);
for (var i = 0, l = subs.length; i < l; i++) {
subs[i].update();
}
};

……

以上为该文章的开始部分 ,以及各部分的将要介绍的格式,下文将分模块的解读vue的源码

vue源码解读预热-0_第3张图片

vue源码解读预热-0

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
转载http://blog.163.com/among_1985/blog/static/2750052320126168394939/ 在Hibernate 4.1.4中,
转载http://blog.163.com/among_1985/blog/static/2750052320126178159568/ 概述 我们都知道Hiberna
rails sinatra 等一些ruby的web框架,都是属于rack app, 建立在rack基础上的。 rack是什么?官网上
前面已经可以了解到AQS的设计,接下看一下具体的使用和实现: 1、java.util.concurrent 的结构: 曾
HashMap源码解读(一) 1、HashMap的存储结构 2、HashMap的初始化 3、元素Hash值获取及通过hash值找
从使用说起: 若干年前,有一天发现,通过js代码创建的html元素及ajax加载的html,无法被$([selecto
网上对android WiFi源码解读的帖子也有不少,但大部分是android 2.3左右。最近研究了下android4.0
网上对android WiFi源码解读的帖子也有不少,但大部分是android 2.3左右。最近研究了下android4.0
1、 单表操作(增删改查)。 # 由Entity中的Accessor Context完成。 2、 级联操作。 # 对应Database
前面已经可以了解到AQS的设计,接下看一下具体的使用和实现: 1、java.util.concurrent 的结构: 曾
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号