angularjs bindJQuery函数详解

ANGULARJS bindJQuery函数讲解

首先先上代码：
先看两个函数 这两个函数在接下来用得上。isUndefined和 isDefined
isUndefined函数定义如下：

   function isUndefined(value){
         return typeof value==='undefined';
     }

isUndefined这个函数判断value是否为‘undefined’类型。
只有value 为’undefined’类型时，都会返回 true.
如果value为null或其他类型，则这个函数都会返回 false；

isDefined函数如下：

   function isDefined(value){
       return typeof value!=='undefined';
       }

isDefined判断value值是否为’undefined’;
如果为undefined则返回false 否则其他的返回true

接下来看主函数 bindJQuery.

    var bindJQueryFired=false;
    function bindJQuery(){
        var originalCleanData;
        if(bindJQueryFired){
          return;
        }
        var jqName=jq();
        jQuery=isUndefined(jqName) ?window.jQuery:
                !jqName     ?  undefined  :
                window[jqName];
        if(jQuery&&JQuery.fn.on){
            jqLite=jQuery;
            extend(jQuery.fn,{
                   scope:jQLitePrototype.scope,
                   isolateScope:JQLitePrototype.isolateScope,
                   controller:JQLitePrototype.injector,
                   inheritedData:JQLitePrototype.inheritedData;
                   )};
            originalCleanData=jQuery.cleanData;
            jQuery.cleanData=function(elems){
                   var events;
                       for(var i=0,elem;(elem=elem[i]!=null;i++){
                          events=jQuery._data(elem,"events");
                          if(events&&events.$destroy){
                             jQuery(elem).triggerHandler('$destroy');
                          }
                        }
                   originalCleanData(elems);
                   };
         }else{
             jqLite=JQLite;
         }
         angular.element=jqLite;
         bindJQueryFired=true;]
以上就是bindJQuery的代码段，下面来分批进行介绍各部分作用。

var bindJQueryFired=false;   

这句话的作用相当与一个开关，首次加载的时候定义为开启状态，当满足某些条件后，自动关闭。

function bindJQuery(){
     /*定义变量 清除数据。关于angularJS的数据缓存，以及如何清理没有搞明白。
     如果你们懂的，可以给我施舍下哈，亲们。*/
     var originaCleanData;

     /*如果开关已开，则直接退出函数*/
     if(bindJQueryFired){
        return;
      /*定义了一个jq()函数并把它赋给 jqName*/
      var jqName=jq();}

既然使用了jq()这个函数，那么咋么来看看jq（）这个函数怎么定义的

 function jq(){
       /*首先先判断有没有jq.name 如果有则直接返回，如果没有
        *则继续执行下面的代码。
        */                
       if(isDefined(jq.name_)){
          return jq.name_;
        }

       /*定义临时变量，存储从dom元素中查找到的elememnt*/
       var el;

       /*定义 变量 i 用于for循环*/
       var i;

       /* ngAttrPrefixes是一个数组，定义了首字节，用于记录
       * angularjs中所有可能出现的头字节。
       */
       var ngAttrPrefixes=['ng-','data-ng-','ng:','x-ng-'];

       /*定义变量ii 用于定义ngAttrPrefixes数组的长度*/
       var ii=ngAttrPrefixes.length;

       /*prefix 用于获取ngAttrPrefixes里的变量，用于for循环*/
       var prefix;

       /*定义name 获取el元素的属性值*/
       var name;

       for(i=0;i<ii.length;i++){
          /*遍历ngAttrPrfixes 并把内容赋给 prefix*/
          prefix=ngAttrPrefixes[i];

          /*在整个文档中查找元素或id或class中查找
          * ng-jq、data-ng-jq、ng\:jq、x-ng-jq这几个值，如果找到将它赋给el;
          * 如果没有找到直接跳过。
          * 当找到以上几个值后并赋给el后，查找这个元素上的属性名分别为
          * ng-jq、data-ng-jq、ng:jq、x-ng-jq
          */并将这些属性名上的值赋给name;
          if(el=window.document.querySelector('['+prefix.replace(':','\\:')+'jq]')){
              name=el.getAttribute(prefix+'jq');
              break;
          } 
       }
       /*最后将这个name值赋给jq.name*/
     return (jq.name_=name);
  };

jq()这个函数有什么作用？
接下来回到主函数 bindJQuery这个函数中。

 function bindJQuery(){
        var originalCleanData;
        if(bindJQueryFired){
          return;
        }

        /*获取到jq.name并将值赋给jqName*/
        var jqName=jq();

        /* 假设 jq()函数返回了一个值不是'undefined' */
        * 则isUndefined(jqName)返回值为true  jQuery=window.jQuery;*/
        * 如果jq()函数返回的是一个值 jq.name; */
        * 则isUndefined(jqName)返回false */
        * 首先先判读 !jqName是否为true */
        * （由于jqName现在返回的值有效，则现在的 !jqName为 false） */
        * 则 jQuery=window[jqName]; */
        * 什么时候会执行jQuery=undefined. */
        * 当jqName即不为js里定义的 string bool，number,null,object,undefined,以外的类型 */
        * 会执行jQuery=undefined; */
        * 应该防止程序出错而定义的。 */

        jQuery=isUndefined(jqName) ?window.jQuery:
                !jqName     ?  undefined  :
                window[jqName];

       /*前面一定给jQuery赋值 接下来判断是否有jQuery.fn.on这个函数。 */
       /* 将jQuery赋给angularjs自己定义的jqLite. */
       /* extend函数是在第一个参数下面添加其他的方法。 */
       /* 并且在jQuery.fn jQuery 原型下面添加几个方法。这几个方法，我还没有 */
       /* 琢磨，有时间在和大家分享。 */
      if(jQuery&&jQuery.fn.on){
         jqLite=jQuery;
         extend(jQuery.fn,{
           scope:jQLitePrototype.scope,
           isolateScope:JQLitePrototype.isolateScope,
           iniector:jQLitePrototype.injector,
           inheritedData:jQLitePrototype.inheritedData
           });

         originalCleanData=jQuery.cleanData;
        /*jQuery.cleanData这个函数没有看懂。*/
         jQuery.cleanData=function(elems){
            var events;
            for(var i=0,ele;(ele=elems[i])!=null;i++){
               events=jQuery._data(elem,"events");
               if(events&&events.$destroy){
                  jQuery(elem).triggerHandler('$desroy');
               }
             }
            originalCleanData(elems);
         };
      }else{
         jqLite=jQLite;
      }
      /*将jqLite赋给angular.element*/
     angular.element=jqLite;
      /*将开关关闭*/
     bindJQueryFired=true;

文章还在编写矫正中，有的地方肯定不足，请谅解 。。。