angular源码分析一

2019独角兽企业重金招聘Python工程师标准>>>

1.angular 初始化流程
function(window, document, undefined) {

 //定位到4939行，这里是angularjs开始执行初始化的地方,见代码
 bindJQuery(), publishExternalAPI(angular), jqLite(document).ready(function() {
        angularInit(document, bootstrap)
    })
 //bindJQuery方法是检查是否引用jquery，没有的话jqlite就用本身自带的，否则切换到jquery中去.这个好理解
   publishExternalAPI这个方法是绑定一些公共的方法到angular下面,这些是可以在网站中访问到的,像forEach,copy等公共方法，还有一个重要的任务就是初始化angular核心的模块,publishExternalAPI在465行，现在我们来分析里面的一些重要的代码   
}(window, document),
 !angular.$$csp() &&  //个人理解为此处angular的标志变量未定义
 //下面就是为将angular找到head 对一些指令追加css样式
 angular.element(document).find("head").prepend('<style type="text/css">@charset "UTF-8";
 [ng\\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\\:form{display:block;}.
 ng-animate-start{clip:rect(0,auto,auto,0);-ms-zoom:1.0001;}.
 ng-animate-active{clip:rect(-1px,auto,auto,0);-ms-zoom:1;}</style>')

bindJQuery 方法解析
function bindJQuery() {
  var originalCleanData;

  if (bindJQueryFired) {
    return;
  }
/***********************************如果有引入jquery，就使用jquery  ***********************/
  // bind to jQuery if present;
  var jqName = jq(); 
  jQuery = window.jQuery; // use default jQuery.
  if (isDefined(jqName)) { // `ngJq` present   如果有引入jquery，就使用jquery   
    jQuery = jqName === null ? undefined : window[jqName]; // if empty; use jqLite. if not empty, use jQuery specified by `ngJq`.
  }

  // Use jQuery if it exists with proper functionality, otherwise default to us.
  // Angular 1.2+ requires jQuery 1.7+ for on()/off() support.
  // Angular 1.3+ technically requires at least jQuery 2.1+ but it may work with older
  // versions. It will not work for sure with jQuery <1.7, though.
  if (jQuery && jQuery.fn.on) {
    jqLite = jQuery;
    extend(jQuery.fn, {
      scope: JQLitePrototype.scope,
      isolateScope: JQLitePrototype.isolateScope,
      controller: JQLitePrototype.controller,
      injector: JQLitePrototype.injector,
      inheritedData: JQLitePrototype.inheritedData
    });

    // All nodes removed from the DOM via various jQuery APIs like .remove()
    // are passed through jQuery.cleanData. Monkey-patch this method to fire
    // the $destroy event on all removed nodes.
    originalCleanData = jQuery.cleanData;
    jQuery.cleanData = function(elems) {
      var events;
      if (!skipDestroyOnNextJQueryCleanData) {
        for (var i = 0, elem; (elem = elems[i]) != null; i++) {
          events = jQuery._data(elem, "events");
          if (events && events.$destroy) {
            jQuery(elem).triggerHandler('$destroy');
          }
        }
      } else {
        skipDestroyOnNextJQueryCleanData = false;
      }
      originalCleanData(elems);
    };
  } else {
/***********************************如果没有引入jquery，就使用angular 自带的JQlite***********************/
    jqLite = JQLite;
  }

  angular.element = jqLite;

  // Prevent double-proxying.
  bindJQueryFired = true;  
}

转载于:https://my.oschina.net/u/998304/blog/406417