jQuery 原理初步探究

经历了百度的面试,才深刻体会到对于任何的知识,仅仅知其然,不知其所以然,对于学习是很不好的。

 

一直以为对jQuery很熟悉,从1.2.6 一直用到现在的1.4.1 ,API可以按照分类背出来,但是掌握的层次仅仅是在应用上。网页教学网上曾经有一篇文章《前端开发者使用JS框架的三个等级》,我在写代码的时候,思路还是没有离开“功能实现”。

 

结合使用jQuery的经验,面试归来,好好研究一下jQuery的代码,试着去了解它实现的原理。

 

jQuery 的整体架构分析如下:

 

jQuery 原理初步探究_第1张图片

 

在jQuery的开篇声明里有一段非常重要的话:

 

jQuery 原理初步探究_第2张图片

 

jQuery是为了改变javascript的编码方式而设计的.


从这段话可以看出jQuery本身并不是UI组件库或其他的一般AJAX类库.
jQuery改变javascript编码方式!


那么它是如何实现它的声明的呢?这里,用以下的一段简短的使用流程:
1)查找(创建)jQuery对象:$("selector”);
2)调用jQuery对象的方法完成我们需要完成的工作:$("selector”).doOurWork();


jQuery就是以这种可以说是最简单的编码逻辑来改变javascript编码方式的.这两个步骤是jQuery的编码逻辑核心!


要实现这种简洁编码方式,创建jQuery对象这一环节至关重要.因此,jQuery的dom元素查找能力相当强悍.此外,jQuery对象的方法肯定是有限的,有限的方法满足不了日益增长各有所需的要求,所以,必须提供jQuery对象方法的扩展能力.


强悍的dom元素查找能力,以及随心所欲的方法扩展,这两点正是jQuery的核心所在!

 

参考jQuery实现的思想,我自己写了一个demo,还请各位牛人多多指教。:)

 

[xhtml] view plain copy
  1. <html>  
  2. <head>  
  3.     <title>My jQuery</title>  
  4. </head>  
  5. <body>  
  6. <div id=”div1”>div1</div>  
  7. <div id=”div2”>div2</div>  
  8. </body>  
  9. </html>  
  10. <mce:script type=”text/javascript”><!--  
  11. //实现自己的MyQuery框架  
  12. var MyQuery = function(selector){  
  13.     if ( window == this ) return new MyQuery(selector);  
  14.     //这里只实现dom类型的简单查找  
  15.     var doms = document.getElementsByTagName(selector);  
  16.     var arr = [];  
  17.     for(var i=0; i<doms .length; i++){  
  18.         arr.push(doms.item(i));  
  19.     }  
  20.     return this.setArray(arr);  
  21. }  
  22. MyQuery.prototype.setArray = function( arr ) {  
  23.         this.length = 0;  
  24.         [].push.apply( this, arr );  
  25.         return this;  
  26. }  
  27.   
  28. MyQuery.fn = MyQuery.prototype;  
  29. var $ = MyQuery;  
  30.   
  31. //插件扩展1)each  
  32. MyQuery.fn.each = function(method){  
  33.     for(var i=0,l=this.length; i<l; i++){  
  34.         method.call(this[i],i);  
  35.     }  
  36. }  
  37. //插件扩展2)show  
  38. MyQuery.fn.show = function(){  
  39.     this.each(function(i){  
  40.         alert(i+":"+this.id+":"+this.innerHTML);  
  41.     });  
  42. }  
  43. //debugger  
  44. $("div").show();  
  45. // --></mce:script>  

 

你可能感兴趣的:(jquery)