jQuery源码阅读-全局架构设计的理解

页面导航:首页 > 网络编程 > JavaScript > jQuery源码阅读-全局架构设计的理解

jQuery源码阅读-全局架构设计的理解

来源: 作者: 时间:2016-02-02 09:59 【

使用匿名函数自执行的方式设计jQuery整体,使jQuery在引用后就开始立即执行(function( window, undefined ) { var jQuery = function( selector, context ) { return
//使用匿名函数自执行的方式设计jQuery整体,使jQuery在引用后就开始立即执行
(function( window, undefined ) {

    var jQuery = function( selector, context ) {
        return new jQuery.fn.init( selector, context, rootjQuery );
    };

    jQuery.fn.init.prototype = jQuery.fn;
    //详解请看问题四做出的解释

    /*
        将jQuery的原型指针赋值给jQuery的fn函数指针,这样就会把jQuery原型方法
        挂载到jQuery.fn函数指针作用域中,这样的好处是jQuery.fn指针在其他地方
        比较容易使用,而且不会影响jQuery原型指针的指向问题。

        注意:JavaScript中函数名字可以理解为指针,如果函数名字后面加上括号
             可以理解为函数对象,这样理解更为容易一点,因为原生JavaScript
             中经常出现函数指针指向设置的问题。
     */
    jQuery.fn = jQuery.prototype = {

        constructor: jQuery,

        length: 0,

        size: function() {},

        each: function( callback, args ) {}
        //在使用上只要是用jQuery选择的对象都可以使用上面这些方法
    };


    /*
        1.将jQuery对象挂载在window的$对象上,把jQuery接口对外公开了
        2.jQuery对象成为window下面的一个属性了,可以随便调用了
        3.同时为了便于使用jQuery可以用$符号进行使用jQuery
     */
    window.jQuery = window.$ = jQuery;

})( window );

1.什么是匿名函数自执行呢?

简单的可以理解为在JavaScript中定义这样的函数定义完成过后就可以自己执行了,如下代码页面加载完成过后就会执行弹出对话框。

(function(){
    alert('Hello jQuery!');
})();

如上述代码将会自动执行,匿名函数自执行的书写方式是:(function(){ //函数体})( /*传递参数*/ ); 其中函数体中的代码将会自动执行,而传递参数将会被函数使用。如果还是不理解可以参考这个链接内容 和 这里

2.为什么jQuery在匿名函数自执行中传递window对象呢?

其实在匿名函数中可以直接调用window对象,然而在JavaScript中根据原型链的原理,window处在对象的最顶端查找比较复杂,而对象都是查找离它最近的变量。如果不传递window对象,那么将想外层一层一层的查找,如果传递了window对象那么将使用这个window将明显提升查找速度。(什么是原型链)

3.为什么在匿名函数自执行的方法体中传递undefined参数呢?

在JavaScript中undefined既不是关键字也不是对象,如下代码:

var undefined = 99 ;

/*
   各种执行的结果:chrome:'undefined' ff:'' IE9.10:'undefined' IE8.7.6:'99'
*/
alert(undefined);

传递undefined的目的是作为局部变量可以防止外部进行修改,是因为undefined在浏览器的各个版本中表现的情况都不一样,存在兼容性问题,作为局部变量统一传入参数可以解决这个问题。

4.jQuery核心架构思想

如何理解下面的代码呢?

// Define a local copy of jQuery
jQuery = function( selector, context ) {
   // The jQuery object is actually just the init constructor 'enhanced'
   return new jQuery.fn.init( selector, context, rootjQuery );
},

我想下面的代码更容易对这个问题进行阐述:

function MyObject(){}
MyObject.prototype.init = function(){}
MyObject.prototype.css = function(){}

var myObject = new MyObject();
myObject.init();
myObject.css();

上面这种传统方式对于对象的调用非常麻烦。请看下面的代码:

function jQuery(){
   return new jQuery.prototype.init();
}
//定义原型下面的函数
jQuery.prototype.init = function(){}
jQuery.prototype.css = function(){}

//修改jQuery对象原型指针的指向
jQuery.prototype.init.prototype = jQuery.prototype ;

//改善过后函数调用的方式更简便了
jQuery().css();

将jQuery的原型引用赋值给jQuery中init初始化方法的原型,这样就将jQuery下的方法引用挂载在jQuery.init()方法下面了

 
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<