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 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
ejs v9 javascript模板系统
Mar 21 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
Aug 01 Javascript
javascript学习笔记--数字格式类型
May 22 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
Angular directive递归实现目录树结构代码实例
May 05 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 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
php+dbfile开发小型留言本
2006/10/09 PHP
聊天室php&mysql(六)
2006/10/09 PHP
php实现天干地支计算器示例
2014/03/14 PHP
PHP框架Laravel的小技巧两则
2015/02/10 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
angularJS 入门基础
2015/02/09 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
在漏洞利用Python代码真的很爽
2007/08/26 Python
详解Python中where()函数的用法
2018/03/27 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
基于python3实现倒叙字符串
2020/02/18 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
python连接mysql有哪些方法
2020/06/24 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
大家访活动实施方案
2014/03/10 职场文书
高级工程师英文求职信
2014/03/19 职场文书
企业元宵节主持词
2014/03/25 职场文书
大学新闻系求职信
2014/06/03 职场文书
上班迟到检讨书
2014/09/15 职场文书
党员个人党性分析材料
2014/12/18 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
2015年预算员工作总结
2015/05/14 职场文书
基督教追悼会答谢词
2015/09/29 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书