在上一章节中，咱们用vue实现了简略的todo利用，如果咱们把vue.js援用去掉，首先是界面显示原始文本内容

而后console报错

index.html:22 Uncaught ReferenceError: Vue is not defined    at index.html:22

起因是咱们在代码中通过代码var app = new Vue({...})创立了Vue对象，Vue对象是定义在vue.js中，当初没了vue.js天然报错。

这章的内容就是解决Vue对象找不到问题，让代码不再报错，为什么要先解决js报错问题而不是文本显示问题？因为Vue对象提供了Vue所有的性能，其中就包含值绑定，解决了值绑定的问题，界面天然也会恢复正常，所以先解决Vue对象找不到问题。

匿名函数和闭包

先解释什么是匿名函数，顾名思义就是没有定义名称的函数，比方上面这几种

// 函数表达式var fn = function add(a,b){    return a+b;}var c  = fn(1,2);// 下面例子的联合(function(a,b){return a+b;})(1,2);//事件响应函数var button = document.getElementById('submitButton');button.onclick = function(){    //do something}

还有其余状况，这里就不列举，java也有匿名类，跟js的匿名函数相似。

再来聊一下前端面试必问，有数前端学子竟折腰的闭包是什么货色，这货色的确难了解，我感觉很大一个起因是翻译的问题，比方匿名函数，看名称大略就晓得什么意思，闭包两个字没有任何设想的空间，而且还可能引起误会，闭包实际上跟包并没有什么关系。我的不谨严但直观的了解是闭包就是类，你能够了解为闭包就是java里的类，在java类中，类能够定义变量和办法，办法能够援用类的变量，类比js，java类就是js的函数，java类变量就是js函数中定义的变量，java类的办法就是定义在js函数外部的函数。举个例子：

function CircleArea(r){    var PI=3.14159;        function calculate(){        return PI*r*r;    }        return calculate;}var circle2=CircleArea(2);var area=circle2();console.log(area);

失常当函数执行完变量会进行回收，在函数CircleArea中返回了calculate这个函数，实践上PI曾经回收因为函数曾经执行完，但在函数内部执行var area=circle2();时，后果仍然时正确的，阐明PI并没有被回收，这个就是闭包的个性，函数和对其四周状态（lexical environment，词法环境）的援用捆绑在一起形成闭包（closure），这个才是官网对闭包的定义。

那么在咱们这个利用中，Vue是以什么模式存在，对象还是函数？毫无疑问必定是函数，只有在函数中能力实现简单的逻辑，能力实现生命周期的管制。所以如果想让var app = new Vue({...})这行代码不报错，一个可行的计划如下：

var Vue = function (options){    console.log(options);}

创立一个js文件，名称就叫做vuex.js,复制下面的代码到js文件中，将上一章html中援用vue.js的改为援用vuex.js，从新运行，这时候尽管界面还是原样输入，然而console曾经不报错了，而且也正确打印出数据。

这一章的目标也就达到了。能不能更优雅点？如果看过jquery源码和vue源码，大家都能在代码的结尾看到这么一段代码

(function( global, factory ) {....})(this,function(options){...})

是否有点像下面匿名函数(function(a,b){return a+b;})(1,2);，没错，这个就是立刻执行的匿名函数，整个框架的逻辑就写在function中，配置通过options传入，这样写有什么益处？

  • 更加优雅整洁
  • 领有独立的运行环境，多个框架之间不会互相抵触

其中保障领有独立运行环境才是重要起因，通过匿名函数实现了一个闭包，整个框架的逻辑在闭包中实现，通过function的return给调用者api。但如果通过匿名函数+闭包的形式，如何保障能new Vue({})呢，能够全局申明Vue变量，将下面的代码批改为以下代码：

(function(global, factory) {    global.Vue = factory})(this, function(options) {    console.log(options);});

其中global对象在调用时传入this，this示意window对象，factory就是实现整个逻辑的匿名函数，通过global.Vue = factory将匿名函数定义在window.Vue上，这样全局都能够应用new Vue实现函数的调用。

参考

  • 模拟vue本人入手写响应式框架(一) – Vue实现todo利用
  • 模拟vue本人入手写响应式框架(二) – Vue对象创立