首頁 >web前端 >js教程 >jquery總體架構分析與使用詳解

jquery總體架構分析與使用詳解

php中世界最好的语言
php中世界最好的语言原創
2018-04-23 11:22:191777瀏覽

這次帶給大家jquery整體架構分析與使用詳解,jquery整體架構分析與使用的注意事項有哪些,以下就是實戰案例,一起來看一下。

jquery的整體架構

(function( window, undefined ) {
         // 构造 jQuery 对象
     var jQuery = (function() {
        var jQuery = function( selector, context ) {
                return new jQuery.fn.init( selector, context, rootjQuery );
            },
                 // 一堆局部变量声明
         jQuery.fn = jQuery.prototype = {
            constructor: jQuery,
             init: function( selector, context, rootjQuery ) { ... },
                 // 一堆原型
属性和方法
         };
         jQuery.fn.init.prototype = jQuery.fn;
         jQuery.extend = jQuery.fn.extend = function() { ... };
         jQuery.extend({
                 // 一堆静态属性和方法
         });
         return jQuery;
     })();
     window.jQuery = window.$ = jQuery;
 })( window );

分析以上程式碼,我們發現jquery採取了匿名函數自執行的寫法,這樣做的好處就是可以有效的防止命名空間與變數污染的問題。縮寫以上程式碼就是:

(function(window, undefined) {
    var jQuery = function() {}
    // ...
    window.jQuery = window.$ = jQuery;
})(window);

參數window

#匿名函式傳了兩個參數進來,一個是window,一個是undefined。我們知道,在js中變數是有作用域鏈的,這兩個變數的傳入就會變成匿名函數的局部變量,而訪問起來的時候速度會更快。透過傳入window物件可以使window物件作為局部變數使用,那麼,函數的參數也都變成了局部變量,當在jquery中存取window物件時,就不需要將作用域鏈退回到頂層作用域,以便更快的存取window物件。

參數undefined

js在尋找變數的時候,js引擎會先在函數本身的作用域中找出這個變數,如果沒有的話就繼續往上找,找到了就回傳該變量,找不到就回傳undefined。 undefined是window物件的屬性,透過傳入undefined參數,但又不進行賦值,可以縮短尋找undefined時的作用域鏈。在 自呼叫匿名函數 的作用域內,確保undefined是真的未定義。因為undefined能夠被重寫,賦予新的值。

jquery.fn是啥?

 jQuery.fn = jQuery.prototype = {
              constructor: jQuery,
              init: function( selector, context, rootjQuery ) { ... },
                 // 一堆原型属性和方法
        };

透過分析以上程式碼,我們發現jQuery.fn即是jQuery.prototype,這樣寫的好處就是更簡短。之後,我們又看到jquery為了簡潔,乾脆使用一個$符號來代替jquery使用,因此,在我們使用jquery框架的使用經常都會用到$(),

##構造函數jQuery()

圖片描述

jQuery的物件並不是透過new jQuery 建立的,而是透過new jQuery.fn.init 建立的:

var jQuery = function( selector, context ) {
       return new jQuery.fn.init( selector, context, rootjQuery );
}
這裡定義了一個變數jQuery,他的值是jQuery建構函數,在955行(最上面的程式碼)回傳並賦值給jQuery變數

jQuery.fn.init

jQuery.fn (上面97行)是建構子jQuery()的原型對象,jQuery.fn.init()是jQuery原型方法,也可以稱為建構子。負責解析參數selector和context的類型並執行對應的查找。

參數context:可以不傳入,或傳入jQuery對象,DOM元素,普通js對象之一

參數rootjQuery:包含了document對象的jQuery對象,用於document.getElementById()查找失敗等情況。

jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype
jQuery(selector [,context])
預設情況下,對符合元素的查找從根元素document 物件開始,即查找範圍是整個文件樹,不過也可以傳入第二個參數context來限定它的查找範圍。例如:

$('p.foo').click(function () {
            $('span',this).addClass('bar');//限定查找范围,即上面的context
   });
jQuery.extend()和jQuery.fn.extend()
方法jQuery.extend(object)和jQuery.fn.extend(object)用於合併兩個或多個物件到第一個物件。相關原始碼如下(部分):

jQuery.extend = jQuery.fn.extend = function() {
    var options, name, src, copy, copyIsArray, clone,//定义的一组局部变量
        target = arguments[0] || {},
        i = 1,
        length = arguments.length,
        deep = false;
jQuery.extend(object); 為jQuery類別新增新增類別方法,可以理解為新增靜態方法。如:

$.extend({ 
  add:function(a,b){returna+b;} 
});
便為jQuery 添加一個為add 的“靜態方法”,之後便可以在引入jQuery 添加一個為add 的“靜態方法”,之後便可以在引入jQuery 的地方,使用這個方法了,

$.add(3,4); //return 7 
jQuery.fn.extend(object)
,查看一段官網的代碼演示如下:

<label><input type="checkbox" name="foo"> Foo</label><label><input type="checkbox" name="bar"> Bar</label>
<script>    
jQuery.fn.extend({        
check: function() {            
return this.each(function() {
                this.checked = true;
                            });
                                    },
      uncheck: function() 
      {            return this.each(function() 
      {                this.checked = false;            });
              }    });    // Use the newly created .check() 
method    $( "input[type='checkbox']" ).check();</script>

CSS選擇器引擎Sizzle

#可以說,jQuery是為操作DOM而誕生的,jQuery之所以如此強大,得益於CSS選擇器引擎Sizzle,解析規則引用網路上的一段實例:

selector:"p > p p.aaron input[type="checkbox"]"

解析規則:

1 依照從右到左
2 取出最後一個token  例如[type="checkbox"]

            {
                                matches : Array[3]
                                type    : "ATTR"
                                value   : "[type="
                                checkbox "]"
                            }

3 过滤类型 如果type是 > + ~ 空 四种关系选择器中的一种,则跳过,在继续过滤
4 直到匹配到为 ID,CLASS,TAG  中一种 , 因为这样才能通过浏览器的接口索取
5 此时seed种子合集中就有值了,这样把刷选的条件给缩的很小了
6 如果匹配的seed的合集有多个就需要进一步的过滤了,修正选择器 selector: "p > p + p.aaron [type="checkbox"]"
7 OK,跳到一下阶段的编译函数

deferred对象

开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们都不是立即能得到结果的。

通常的做法是,为它们指定回调函数(callback)。即事先规定,一旦它们运行结束,应该调用哪些函数。

但是,在回调函数方面,jQuery的功能非常弱。为了改变这一点,jQuery开发团队就设计了deferred对象。

简单说,deferred对象就是jQuery的回调函数解决方案。在英语中,defer的意思是"延迟",所以deferred对象的含义就是"延迟"到未来某个点再执行。

回顾一下jQuery的ajax操作的传统写法:

$.ajax({
   url: "test.html",
   success: function(){
     alert("哈哈,成功了!");
   },
   error:function(){
     alert("出错啦!");
   }
 });


在上面的代码中,$.ajax()接受一个对象参数,这个对象包含两个方法:success方法指定操作成功后的回调函数,error方法指定操作失败后的回调函数。

$.ajax()操作完成后,如果使用的是低于1.5.0版本的jQuery,返回的是XHR对象,你没法进行链式操作;如果高于1.5.0版本,返回的是deferred对象,可以进行链式操作。

现在,新的写法是这样的:

$.ajax("test.html")
  .done(function(){ alert("哈哈,成功了!"); })
  .fail(function(){ alert("出错啦!"); });

为多个操作指定回调函数

deferred对象的另一大好处,就是它允许你为多个事件指定一个回调函数,这是传统写法做不到的。

请看下面的代码,它用到了一个新的方法$.when():

$.when($.ajax("test1.html"), $.ajax("test2.html"))
 .done(function(){ alert("哈哈,成功了!"); })
 .fail(function(){ alert("出错啦!"); });

这段代码的意思是,先执行两个操作$.ajax("test1.html")和$.ajax("test2.html"),如果都成功了,就运行done()指定的回调函数;如果有一个失败或都失败了,就执行fail()指定的回调函数。

jQuery.Deferred( func ) 的实现原理

内部维护了三个回调函数列表:成功回调函数列表、失败回调函数列表、消息回调函数列表,其他方法则围绕这三个列表进行操作和检测。

jQuery.Deferred( func ) 的源码结构:

jQuery.extend({
    Deferred: function( func ) {            // 成功回调函数列表        var doneList = jQuery.Callbacks( "once memory" ),            // 失败回调函数列表            failList = jQuery.Callbacks( "once memory" ),            // 消息回调函数列表            progressList = jQuery.Callbacks( "memory" ),            // 初始状态            state = "pending",            // 异步队列的只读副本            promise = {                // done, fail, progress                // state, isResolved, isRejected                // then, always                // pipe                // promise                       },            // 异步队列            deferred = promise.promise({}),            key;        // 添加触发成功、失败、消息回调函列表的方法        for ( key in lists ) {            deferred[ key ] = lists[ key ].fire;            deferred[ key + "With" ] = lists[ key ].fireWith;        }        // 添加设置状态的回调函数        deferred.done( function() {            state = "resolved";        }, failList.disable, progressList.lock )        .fail( function() {            state = "rejected";        }, doneList.disable, progressList.lock );        // 如果传入函数参数 func,则执行。        if ( func ) {            func.call( deferred, deferred );        }
        // 返回异步队列 deferred        return deferred;    },}

jQuery.when( deferreds )

提供了基于一个或多个对象的状态来执行回调函数的功能,通常是基于具有异步事件的异步队列。

jQuery.when( deferreds ) 的用法

如果传入多个异步队列对象,方法 jQuery.when() 返回一个新的主异步队列对象的只读副本,只读副本将跟踪所传入的异步队列的最终状态。

一旦所有异步队列都变为成功状态,“主“异步队列的成功回调函数被调用;

/*
请求 '/when.do?method=when1' 返回 {"when":1}
请求 '/when.do?method=when2' 返回 {"when":2}
请求 '/when.do?method=when3' 返回 {"when":3}
*/
var whenDone = function(){ console.log( 'done', arguments ); },
    whenFail = function(){ console.log( 'fail', arguments ); };
$.when(
    $.ajax( '/when.do?method=when1', { dataType: "json" } ),
    $.ajax( '/when.do?method=when2', { dataType: "json" } ),
    $.ajax( '/when.do?method=when3', { dataType: "json" } )
).done( whenDone ).fail( whenFail );属性selector用于记录jQuery查找和过滤DOM元素时的选择器表达式。

属性.length表示当前jquery对象中元素的个数。
方法.size()返回当前jquery对象中元素的个数,功能上等同于属性length,但应该优先使用length,因为他没有函数调用开销。

.size()源码如下:

size():function(){
    return this.length;
}

方法.toArray()将当前jQuery对象转换为真正的数组,转换后的数组包含了所有元素,其源码如下:

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

方法.get(index)返回当前jQuery对象中指定位置的元素,或包含了全部元素的数组。其源
码如下:

    get: function( num ) {        return num == null ?
            // Return a 'clean' array            this.toArray() :
            // Return just the object            ( num < 0 ? this[ this.length + num ] : this[ num ] );    },


如果没有传入参数,则调用.toArray()返回了包含有锁元素的数组;如果指定了参数index,则返回一个单独的元素,index从0开始计数,并且支持负数。

首先会判断num是否小于0,如果小于0,则用length+num重新计算下标,然后使用数组访问操作符([])获取指定位置的元素,这是支持下标为负数的一个小技巧;如果大于等于0,直接返回指定位置的元素。

eg()和get()使用详解:jquery常用方法及使用示例汇总

方法.each()用于遍历当前jQuery对象,并在每个元素上执行回调函数。方法.each()内部通过简单的调用静态方法jQuery.each()实现:

each: function( callback, args ) {
        return jQuery.each( this, callback, args );
    },

回调函数是在当前元素为上下文的语境中触发的,即关键字this总是指向当前元素,在回调函数中return false 可以终止遍历。

方法.map()遍历当前jQuery对象,在每个元素上执行回调函数,并将回调函数的返回值放入一个新jQuery对象中。该方法常用于获取或设置DOM元素集合的值。

map: function( callback ) {
        return this.pushStack( jQuery.map(this, function( elem, i ) {
            return callback.call( elem, i, elem );
        }));
    },

原型方法.pushStack()创建一个新的空jQuery对象,然后把DOM元素集合放入这个jQuery对象中,并保留对当前jQuery对象的引用。

原型方法.pushStack()是核心方法之一,它为以下方法提供支持:

jQuery对象遍历:.eq()、.first()、.last()、.slice()、.map()。

DOM查找、过滤:.find()、.not()、.filter()、.closest()、.add()、.andSelf()。

DOM遍历:.parent()、.parents()、.parentsUntil()、.next()、.prev()、.nextAll()、.prevAll()、.nextUnit()、.prevUnit()、.siblings()、.children()、.contents()。

DOM插入:jQuery.before()、jQuery.after()、jQuery.replaceWith()、.append()、.prepent()、.before()、.after()、.replaceWith()。
定义方法.push( elems, name, selector ),它接受3个参数:

参数elems:将放入新jQuery对象的元素数组(或类数组对象)。

参数name:产生元素数组elems的jQuery方法名。

参数selector:传给jQuery方法的参数,用于修正原型属性.selector。
方法.end()结束当前链条中最近的筛选操作,并将匹配元素还原为之前的状态

end: function() {
        return this.prevObject || this.constructor(null);
    },

返回前一个jQuery对象,如果属性prevObect不存在,则构建一个空的jQuery对象返回。方法.pushStack()用于入栈,方法.end()用于出栈

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

jQuery判断上传图片类型与大小方法详解

jQuery雪花飘落实现步骤(附代码)

以上是jquery總體架構分析與使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn