Angular源碼解讀publishExternalAPI函數

閱讀我的原文
function publishExternalAPI(angular){}
publishExternalAPI就是將一些通用的方法掛載到全局變量angular上,然后我們就可以以API的形式進行調用
函數首先傳入一個angular的全局變量,下面將會遇到在前面定義的好的一個extend函數

function extend(dst) {
        var h = dst.$$hashKey;
        return forEach(arguments, function(obj) {
            obj !== dst && forEach(obj, function(value, key) {
                dst[key] = value
            })
        }), setHashKey(dst, h), dst
    }

這里的方法就是將某些通用的方法掛到一個對象上面,extend傳入和返回都是dst形參對象,里面經歷了兩個forEach,forEach也是angular前面定義好的函數,extend根據傳入的arguments個數進行判斷,dst是需要掛載的對象,arguments中除了dst外都是需要被掛載到dst中的對象
obj !== dst && forEach(obj, function(value, key) {})
上面這句就是將arguments中的dst對象排除出去,然后對dst進行對象掛載
然后就轉化成

angular['boostrap'] = boostrap;
angular['copy'] = copy;
angular['extend'] = extend;
//...省略若干個通用的方法

上面就不一一列出所有方法,當然當我們對加載了angular.js的頁面進入控制臺進行打印就會很清晰的看出這里的全部方法
console.log(angular);
如圖所示

image
image

這些通用的工具函數在實際的項目中會經常使用到,挺方便的例如forEach,toJson和fromJson這些常用函數
當然就如上面的extend也可以是做API調用,也寫個簡單的例子,同樣在控制器里面輸入一段代碼,然后打印,這里創(chuàng)建一個空對象,并把該對象后面的對象拷貝并掛載到該空對象中,并賦值給wscat,那么wscat對象就有對應的這些屬性
var wscat = angular.extend({}, {name:"autumnswind",skill:"none"})
console.log(wscat)
image
image

咱們繼續(xù)往下看
angularModule = setupModuleLoader(window)
這里為angular對象創(chuàng)建和加載module()函數,這里我在Angular源碼解讀setupModuleLoader函數有詳細的分析,這里就不多說了,有需要的的可以回頭看一下
繼續(xù)下面這句

try {
            angularModule("ngLocale")
        } catch (e) {
            angularModule("ngLocale", []).provider("$locale", $LocaleProvider)
        }

try代碼塊里面首先判斷是否獲取到獲取ngLocale模塊,如果我們獲取不到,則就報個異常(ngLocale默認沒有創(chuàng)建的)
catch代碼塊接受上面的異常(也就是獲取不到ngLocale模塊走catch分支),然后在這個位置注冊ngLocale模塊

簡單的說這里angular.module在創(chuàng)建模塊的時候,傳遞一個參數的時候,是獲取模塊;傳遞一個以上的是創(chuàng)建新模塊;所以try里面是獲取,catch里面就是創(chuàng)建了
那么這里就成功的創(chuàng)建了一個ngLocale模塊,其實angularModule實際上就是angular.module
angularModule = angular.module
angularModule("ngLocale", []) = angular.module("ngLocale", [])
所以我們就可以鏈式去調用對象moduleInstance中的directive和provider

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 在線閱讀 http://interview.poetries.top[http://interview.poetr...
    前端進階之旅閱讀 115,556評論 24 450
  • 請參看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon閱讀 7,762評論 2 19
  • Angular面試題 一、ng-show/ng-hide與ng-if的區(qū)別? 第一點區(qū)別是,ng-if在后面表達式...
    w_zhuan閱讀 5,706評論 0 26
  • 1、angularjs的幾大特性是什么? 雙向數據綁定、依賴注入、模板、指令、MVC/MVVM 2、列舉幾種常見的...
    2e9a10d418ab閱讀 1,462評論 0 10
  • 二月第一天,二十三小年。今天是送灶王爺上天的日子,城里人都拜拜神,農村人才有。記得小時候,姥姥總會用高粱稈扎一匹小...
    圈_圈_閱讀 152評論 0 0

友情鏈接更多精彩內容