angular源码学习第一篇 setupModuleLoader方法


Posted in Javascript onOctober 20, 2016

angular源码其实结构非常清晰,划分的有条有理的,大概就是这样子:

(function(window,document,jquery,undefined){
 //一些工具函数
 //EXPR 编译器 自执行
 //setupModuleLoader方法,公司内部的框架是vxsetup方法,(只是定义,没有调用)
 //moduler方法()
 //angular初始化方法,公司内部的框架是vxinit方法
 //bootstrap
 //createInjector
 //一系列指令,服务,过滤器等指令
})(window,document,window.$)

其实阅读angular源码重要的是angular的整个架构思路,至于服务过滤器和指令可以先抛开。

setupModuleLoader方法写的有点复杂,尤其是直接三层闭包,如果逆着看,容易糊涂,还是顺着思路走比较容易。

首先是,我希望当我运行angualr的时候,可以在window下面创建一个angular属性。这个angualr是一个对象,可以用来创建一个module。于是产生了下面的代码:

function setupModuleLoader(window){
     
    //ensure方法比较通俗易懂,网上也很多解释。由此看来,window.angular这个对象是个单例的。
   
  var ensure=function(obj,name,factory){
    return obj[name]||(obj[name]=factory())
  }
    
  var angular = ensure(window,'angular',Object);
     
    //createModule方法是用来创建一个module实例的。
  var createModule = function(name,requires){
    var moduleInstance = {
      name:name,
            requires:requires
    };
    return moduleInstance;
  }
    //window.angular.module方法实际运行的是createModule方法,这个闭包只是为了保护一下变量(现在是简化版,变量还没有加)。
    //其实要给一个对象增加一个方法,在angular中经常使用ensure函数,传一个工厂函数,这样的好处是整齐并且保护作用域。
  ensure(angular,'module',function(){
    return function(name,requires){
      return createModule(name,requires)
    }
  })
 
} 

现在看起来这个angular.module方法就是这样了。这是注册的方法。

众所周知的是,angular.module('myapp',[])这段代码是注册一个module,如果不传后面的第二个参数,就是取回一个app。

然而目前上面写的代码并没有取回一个module的功能。所以需要完善一下:

function setupModuleLoader(window){
  var ensure=function(obj,name,factory){
    return obj[name]||(obj[name]=factory())
  }
    //增加一个对象,用于存放每一个注册过的module,其实在angular里面,这个对象也是存在的
    //当然,这个modules对象的位置是在下面ensure(angular,'module',fn)的fn工厂函数里,这样放在闭包里就可以杜绝外界访问
    //如果你改一下angular的源码,把这个对象强行获取到,比如设置window.modulebox = modules;然后再去打印这个modulebox来看,你会发现所有注册的modules都能看到。
    //我放到这里是因为以后方便调试。我可以随时看到modules里面都有什么东西。但是其实不影响的。
    var modules={}
 
  var angular = ensure(window,'angular',Object);
 
  var createModule = function(name,requires,modules){
    var moduleInstance = {
      name:name
    };
        modules[name]=moduleInstance;//每注册一个module的时候都把这个module按照相应名称存入modules对象。
    return moduleInstance;
  }
 
  ensure(angular,'module',function(){
    return function(name,requires){
      if(requires){
        return createModule(name,requires,modules)//增加了一个参数,就是modules这个对象。
      }else{
        return getModule(name,modules);//这个getModule方法虽然还没定义,但是这一段代码看起来确实很明白了。g
      }
    }
  })
}

现在OK了,可以注册一个module也可以获取一个module了。至于getModules就是根据名称从modules对象中取出一个module,就不写了。

其实简化下来的setupModuleLoader就是这样,挺清晰的。

setupModuleLoader方法真正开始变的复杂是从它与injector的配合开始。

setupModuleLoader方法先放到这儿,下一篇分析一下injector方法。然后回过头来在搞setupModuleLoader。

看看他们是怎么配合的。

重要的是,injector这个东西一定要先理解透彻,同时$provider我希望看到这篇博客的你(当然也包括我)能够理解透彻。

这样的话会很容易搞懂angularJs。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
深入学习js瀑布流布局
Oct 14 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
不使用 JS 匿名函数理由
Nov 17 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
JavaScript中CreateTextFile函数
Aug 30 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 #Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 #Javascript
yarn与npm的命令行小结
Oct 20 #Javascript
Bootstrap 网站实例之单页营销网站
Oct 20 #Javascript
Javascript的动态增加类的实现方法
Oct 20 #Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 #Javascript
javascript淘宝主图放大镜功能
Oct 20 #Javascript
You might like
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
JavaScript 事件参考手册
2008/12/24 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
详细介绍Ruby中的正则表达式
2015/04/10 Python
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
Python多进程与服务器并发原理及用法实例分析
2018/08/21 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
python nohup 实现远程运行不宕机操作
2020/04/16 Python
Python如何实现的二分查找算法
2020/05/27 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
2014年自我评价
2014/01/04 职场文书
高中政治教学反思
2014/01/18 职场文书
大学生的自我鉴定范文
2014/01/21 职场文书
竞选大队干部演讲稿
2014/09/11 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
人力资源部岗位职责
2015/02/11 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书
Python词云的正确实现方法实例
2021/05/08 Python
详细总结Python常见的安全问题
2021/05/21 Python
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android