国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

angular源碼學習第一篇 setupModuleLoader方法

2019-11-20 08:42:23
字體:
來源:轉載
供稿:網友

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。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 浦江县| 康乐县| 呼玛县| 金湖县| 汝南县| 长兴县| 阿勒泰市| 广东省| 盘山县| 西峡县| 昂仁县| 岳阳市| 郁南县| 内江市| 濮阳市| 拜泉县| 望江县| 宁德市| 莲花县| 来宾市| 宜川县| 淮南市| 油尖旺区| 亚东县| 罗江县| 岗巴县| 崇州市| 黎平县| 嘉兴市| 广德县| 临漳县| 宕昌县| 迭部县| 长宁区| 顺义区| 翁源县| 江安县| 恭城| 哈巴河县| 凤台县| 新乐市|