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;

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