当前位置: 代码迷 >> Web前端 >> jquery 源码初探,一步步兑现自己的jquery(一)
  详细解决方案

jquery 源码初探,一步步兑现自己的jquery(一)

热度:61   发布时间:2012-10-25 10:58:57.0
jquery 源码初探,一步步实现自己的jquery(一)
  最近稍微看了一下jquery的源码(1.4.2),大致上看,源码都包含在下面的代码中
 
  (function(){})()

  第一个括号是个匿名函数,第二个表示马上执行第一个括号里面的代码,因为js里面没有命名空间,对于框架性的东西,函数,对象等于其他不重复是很关键的,在匿名函数里,确保了所定义的函数,对象的有效范围,起到了命名空间的作用。既然作用范围在这个匿名函数里,那么怎样让别人使用了,看下面
 
            var jQuery = function( selector, context ) {
	              return new jQuery.fn.init( selector, context );
            },
            _jQuery = window.jQuery,
            _$ = window.$,
   

    先是创建了jQuery这个对象,里面返回的是自己的一个实例(下面会详细讲),然后分别给_jQuery和_$赋值,当然了,后面会有扩展,把值赋回来,如
        
           window.$ = _$;
           window.jQuery = _jQuery;
        

     在前面版本中记得是直接赋值的 如:(估计是为了扩展需要吧)
     
      var jQuery = window.jQuery =  function(selector, context) {
        //……
      };
      

     反正呢,原理就是让jQuery成为window对象的一个属性,这样就可以在其他地方像使用document一样使用jQuery对象了(document也是window对象的一个属性),并且呢,在源码底部还有一行代码:
         
 
            window.jQuery = window.$ = jQuery;
         

   这样的话我们就用$来代替jQuery(还是美元值钱啊)


  一般情况下,js创建类也需要定义属性和方法(可以不定义),创建模式如下:
  
 
  // 定义一个构造函数;
testClass(param1, param2) {
  this.attr1 = param1;
  this.attr2 = param2;
   ...
}

// 在prototype对象上扩展,加上相应的方法;
testClass.prototype = {
   Method1: function() {...},
   Method2: function() {...},
   ...
}

// 定义一个实例;
var test = new testClass();
test.Method1();
test.Method2();

  



其实jquery也差不多,不过更复杂一些,如源代码所示:
 jQuery.fn = jQuery.prototype={
  	// Start with an empty selector
	selector: "",

	// The current version of jQuery being used
	jquery: "1.4.2",

	// The default length of a jQuery object is 0
	length: 0,

	// The number of elements contained in the matched element set
	size: function() {
		return this.length;
	},

	toArray: function() {
		return slice.call( this, 0 );
	},……
 }


以上是一些基本的简单的介绍,下篇开始实现自己的jquery。对于扩展jQuery,另外发文。



  相关解决方案