<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        解析jquery中的核心功能實例

        來源:懂視網 責編:小采 時間:2020-11-27 20:19:39
        文檔

        解析jquery中的核心功能實例

        解析jquery中的核心功能實例:核心功能包括:jquery是如何定義的,如何調用的,如何擴展的。掌握核心方法是如何實現的,是理解jQuery源碼的關鍵。這里理解了一切豁然開朗。1,如何定義,即入口// Define a local copy of jQueryvar jQuery = function( selector
        推薦度:
        導讀解析jquery中的核心功能實例:核心功能包括:jquery是如何定義的,如何調用的,如何擴展的。掌握核心方法是如何實現的,是理解jQuery源碼的關鍵。這里理解了一切豁然開朗。1,如何定義,即入口// Define a local copy of jQueryvar jQuery = function( selector

        核心功能包括:

        jquery是如何定義的,如何調用的,如何擴展的。掌握核心方法是如何實現的,是理解jQuery源碼的關鍵。這里理解了一切豁然開朗。

        1,如何定義,即入口

        // Define a local copy of jQuery

        var jQuery = function( selector, context ) {

        // The jQuery object is actually just the init constructor ‘enhanced’

        return new jQuery.fn.init( selector, context, rootjQuery );//jQuery對象僅僅是構造函數jQuery.prototype.init加強版

        }

        2,jQuery的原型,及與jQuery.fn.init的關系

        //定義對象方法,也即只有通過$(“xx”).的方式才能調用。

        jQuery.fn = jQuery.prototype = {

        init:function( selector, context, rootjQuery ) {

        return jQuery.makeArray( selector, this );

        }

        其他還有很多屬性和方法,

        屬性有:jquery,constructor, selector, length

        方法有:toArray,get, pushStack,each, ready,slice, first,last,eq, map,end, push, sort, splice

        }

        //把jQuery.prototype賦給jQuery.prototype.init.prototype,是為了后面的實例化

        // Give the init function the jQuery prototype for later instantiation

        jQuery.fn.init.prototype = jQuery.fn;

        也即是,$(“xx”)擁有了實例方法,可以調用。(調用jQuery.prototype下定義的方法)

        為什么jQuery要返回jQuery.fn.init對象?

        jQuery = function( selector, context ) {

        // The jQuery object is actually just the init constructor ‘enhanced’

        return new jQuery.fn.init( selector, context, rootjQuery );

        }

        jQuery.fn = jQuery.prototype = {

        ……

        }

        jQuery.fn.init.prototype = jQuery.fn;

        在 stackoverflow 上找到類似問題:

        http://stackoverflow.com/questions/4754560/help-understanding-jquerys-jquery-fn-init-why-is-init-in-fn

        還有這個

        http://stackoverflow.com/questions/1856890/why-does-jquery-use-new-jquery-fn-init-for-creating-jquery-object-but-i-can/1858537#1858537

        I believe the code is written in this fashion so that the new keyword is not required each time you instantiate a new jQuery object and also to delegate the logic behind the object construction to the prototype. The former I believe is to make the library cleaner to use and the latter to keep the initialisation logic cleanly in one place and allow init to be recursively called to construct and return an object that correctly matches the passed arguments.

        3,extend擴展對象方法和靜態方法原理

        jQuery.extend = jQuery.fn.extend = function() {

        var target = arguments[0] || {};

        return target;

        }

        使用extend就方便了,無非就是$.extend({});和$.fn.extend({});如果你能在看到fn時理解聯想到是jQuery.prototype就好了。

        再通過this作用域看一下:

        $.extend ->this是$-> this.aa()

        $.fn.extend->this是$.fn-> this.aa()

        附extend實現細節:

        使用場景:

        1,擴展一些函數

        只有一個參數。例如:$.extend({f1:function(){},f2:function(){},f3:function(){}})

        2,合并多個對象到第一個對象

        (1)淺copy,第一個參數是目標對象。例如

        var a = {name:”hello”}

        var b = {age:30}

        $.extend(a,b);//a={name:”hello”,age:30}

        (2)深copy,第一個參數是TRUE,第二個參數是目標對象。例如

        var a = {name:{job:”it”}};

        var b = {name:{age: 30 }};

        //$.extend(a,b);

        $.extend(true,a,b);

        console.log(a);

        jQuery.extend = jQuery.fn.extend = function() {
         var options, name, src, copy, copyIsArray, clone,
         target = arguments[0] || {},
         i = 1,
         length = arguments.length,
         deep = false;
        
         // 是不是深復制 Handle a deep copy situation
         if ( typeof target === "boolean" ) {
         deep = target;
         target = arguments[1] || {};
         // skip the boolean and the target
         i = 2;
         }
        
         // 不是對象類型 Handle case when target is a string or something (possible in deep copy)
         if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
         target = {};
         }
        
         // 擴展插件的情況 extend jQuery itself if only one argument is passed
         if ( length === i ) {//$.extend({f1:function(){},f2:function(){},f3:function(){}})
         target = this;//this是$,或是$.fn
         --i;
         }
        
         for ( ; i < length; i++ ) {//可能有多個對象擴展到第一個對象上
         // Only deal with non-null/undefined values
         if ( (options = arguments[ i ]) != null ) {//options是一個對象
         // Extend the base object
         for ( name in options ) {
         src = target[ name ]; //src是target里已經存在的value(也可能不存在)
         copy = options[ name ];//copy是待合入的一個value
        
         // 防止循環引用 Prevent never-ending loop
         if ( target === copy ) {//例如:var a={};$.extend(a,{name:a});//可能導致循環引用
         continue;
         }
        
         // if是深復制else是淺復制 Recurse if we're merging plain objects or arrays
         if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
         if ( copyIsArray ) {
         copyIsArray = false;
         clone = src && jQuery.isArray(src) ? src : [];
        
         } else {
         clone = src && jQuery.isPlainObject(src) ? src : {};
         }
        
         // 亮了,直至剝離至最深一層非對象類型,而且是逐個。Never move original objects, clone them
         target[ name ] = jQuery.extend( deep, clone, copy );
        
         // Don't bring in undefined values
         } else if ( copy !== undefined ) {
         target[ name ] = copy;//target[ name ] = options[ name ];
         }
         }
         }
         }
        
         // Return the modified object
         return target;
        };

        jQuery.extend({…})分析

        看一下是如何寫的

        jQuery.extend({

        prop:””

        method:function(){}

        });

        可以看出,這些方法是jQuery的靜態屬性和方法(也即是工具方法),將來既可以直接提供給用戶使用,也可以在內部使用。

        具體實現的工具屬性和方法有(同時也標注了哪些在內部使用)

        jQuery.extend({

        expando : 生成唯一JQ字符串(內部)

        noConflict() : 防止沖突

        isReady : DOM是否加載完(內部)

        readyWait : 等待多少文件的計數器(內部)

        holdReady() : 推遲DOM觸發

        ready() : 準備DOM觸發

        isFunction() : 是否為函數

        isArray() : 是否為數組

        isWindow() : 是否為window

        isNumeric() : 是否為數字

        type() : 判斷數據類型

        isPlainObject() : 是否為對象自變量

        isEmptyObject() : 是否為空的對象

        error() : 拋出異常

        parseHTML() : 解析節點

        parseJSON() : 解析JSON

        parseXML() : 解析XML

        noop() : 空函數

        globalEval() : 全局解析JS

        camelCase() : 轉駝峰

        nodeName() : 是否為指定節點名(內部)

        each() : 遍歷集合

        trim() : 去前后空格

        makeArray() : 類數組轉真數組

        inArray() : 數組版indexOf

        merge() : 合并數組

        grep() : 過濾新數組

        map() : 映射新數組

        guid : 唯一標識符(內部)

        proxy() : 改this指向

        access() : 多功能值操作(內部)

        now() : 當前時間

        swap() : CSS交換(內部)

        });

        jQuery.ready.promise = function(){}; 監測DOM的異步操作(內部)

        function isArraylike(){} 類似數組的判斷(內部)

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        解析jquery中的核心功能實例

        解析jquery中的核心功能實例:核心功能包括:jquery是如何定義的,如何調用的,如何擴展的。掌握核心方法是如何實現的,是理解jQuery源碼的關鍵。這里理解了一切豁然開朗。1,如何定義,即入口// Define a local copy of jQueryvar jQuery = function( selector
        推薦度:
        標簽: 中的 功能 作用
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 一边摸一边桶一边脱免费视频| 亚洲AV无码成人专区| 一级毛片a免费播放王色电影 | 国产视频精品免费视频| 亚洲色图综合在线| 永久免费观看黄网站| 国产精品亚洲高清一区二区| 一级成人毛片免费观看| 亚洲一本大道无码av天堂| 好猛好深好爽好硬免费视频| 国产成人A亚洲精V品无码| 嫩草影院在线播放www免费观看| 亚洲午夜久久久久妓女影院| 黄色片免费在线观看| 亚洲第一成年网站大全亚洲| 两个人的视频高清在线观看免费| 久久亚洲精品国产精品婷婷 | 久久国产亚洲观看| 中文字幕在线观看免费视频 | 四虎精品成人免费视频| 亚洲人成人网站色www| 久久国产色AV免费看| 性xxxx黑人与亚洲| 国产一级做a爱免费视频| 一级做a爰片久久毛片免费陪| 亚洲人成图片小说网站| 国产电影午夜成年免费视频| 风间由美在线亚洲一区| 久久精品国产精品亚洲| 永久免费视频网站在线观看| 亚洲欧美日韩综合久久久| 精品国产亚洲一区二区在线观看| 黄页免费在线观看| 亚洲国产AV一区二区三区四区| 久久乐国产精品亚洲综合| 亚洲毛片免费观看| 免费一区二区无码视频在线播放 | 亚洲精品国产国语| 中文字幕久久亚洲一区| 韩国免费一级成人毛片| 四虎国产精品成人免费久久|