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 相关文章推荐
IE php关于强制下载文件的代码
Aug 23 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
jQuery实现表格元素动态创建功能
Jan 09 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 Javascript
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
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编程中八种常见的文件操作方式
2006/11/19 PHP
PHP mail 通过Windows的SMTP发送邮件失败的解决方案
2009/05/27 PHP
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
php保存信息到当前Session的方法
2015/03/16 PHP
浅谈Laravel队列实现原理解决问题记录
2017/08/19 PHP
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
python编写暴力破解FTP密码小工具
2014/11/19 Python
python遍历目录的方法小结
2016/04/28 Python
Python实现包含min函数的栈
2016/04/29 Python
Python文件操作基本流程代码实例
2017/12/11 Python
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
10个Python小技巧你值得拥有
2018/09/29 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
python模拟斗地主发牌
2020/04/22 Python
自考毕业自我鉴定范文
2013/10/27 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书
希特勒经典演讲稿
2014/05/19 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
湘江北去观后感
2015/06/15 职场文书
诚信考试主题班会
2015/08/17 职场文书