jQuery中的幾個模塊總結

Query插件，以備並希望在前端方面有所長進。請批評指正。

一，類型判斷全解

JQuery判斷類型擴展方法：$.type()

/*type: function( obj ) { 2  if ( obj == null ) { 3  return obj + ""; 4  } 5  return typeof obj === "object" || typeof obj === "function" ? 6  class2type[ toString.call(obj) ] || "object" : 7  typeof obj; 8  }*/

本質：就是運用{}.toString.call()或者（Object.prototype.toString.call()）。

自己模仿寫出來一個方法：

function getType(o) { 2             var _target; 3             return ( 4                 (_target = typeof (o)) == "object" ? Object.prototype.toString.call(o).slice(8, -1) : _target) 5  .toLowerCase(); 6         }

但這個方法只是判斷繼承Object復雜類型下的Date Array RegExp等typeof判斷不出的子類型。

1，typeof 2，instanceof 3，constructor 4，{}.toString.call()或者（Object.prototype.toString.call()）

Boolean Number String Function Array Date RegExp Object Error Null Undefined

        //1，數據類型：5種簡單基本類型：Undefined Boolean String Number Null 1種復雜類型Object
        //2，但根據返回值得到的類型有6種，“undefined” “boolean” “string” “number” “function” “object”。注意將Null去掉，換成“function”。都以小寫字母開頭
        //比如操作符操作字符串會返回上面6種，注意一點：將typeof null會返回“object”，注意返回object的表示這個值是對象（包括Array）或者null,
        //1Array Date返回object 2Math 數字返回number 3字符串new返回object 直接定義返回object
        var arr1 = [1, 2, 3];  6         var arr2 = new Array()  7         var dat = new Date();  8         var mat1 = Math.PI;  9         var mat2 = Math.random(); 10         alert(typeof arr1);//object
        alert(typeof arr2);//object
        alert(typeof dat);//object
        alert(typeof mat1);//number
        alert(typeof mat2);//number

        alert(typeof [])//object
        alert(typeof null);//object
        //字符串有點特殊
        var s1 = 'abc'; 20         var s2 = new String('def'); 21         alert(typeof s1);//string
        alert(typeof s2);//object

        function fun() { 25 
 } 27         alert(typeof fun);//function 
        //3，一般null==undefined返回true ,null===undefined 返回false
        if (null == undefined) { alert(true) }//true
        if (null === undefined) { alert(true) } else { 31             alert(false); 32  } 33         //4，Boolean 轉換成false的的類型 “” 0和NaN null undefined 

  //instance
        var a = "abc.";  3         var b = 1;  4         var c = [1, 2, 3];  5         var d = new Date();  6         var e = function () { alert(1); };  7         var f = function () { this.name = "2"; };  8         alert(c instanceof Array) //true
        alert(d instanceof Date) 10         alert(f instanceof Function)//true
        // alert(f instanceof function)// false
        //instanceof 后面一定要是對象類型，注意大小寫不能錯

 function A() { } 2         alert(typeof A);//function
        var a = new A(); 4         alert(typeof a);//object

        //構造函數 
        //new 1創建實例 2將函數的原型賦值給這個實例 3執行這個函數 並且這個函數的上下文this就是這個實例
        alert(a.constructor)// function A() { }
        alert(a.constructor === A)//true ***************注意實例能直接調用對應原型中屬性方法。比如a直接調用原型中的constructor

function A() { } 2         var a = new A(); 3         alert({}.toString.call(a))//[object Object]
        alert({}.toString.call(A))//[object Function]
        alert(Object.prototype.toString.call([]))//[object Array]
        alert({}.toString.call([]))//[object Array]
        alert({}.toString.call(new Date()))//[Object Date]

/1typeof:判斷除了Null的5個基本類型准確，但是想Date Array Regexp不准 2先知道類型，再判斷是否是這個類型
//instaneceof，准確，但必須先知道類型，然后判斷是否為這個類型
//constructor（得到構造函數
//跨iframe時候 instanceof 和constructor有問題，具體什么問題不清楚
//用jquery.type(),把null undefined 復雜類型和 除null和undefined外的4中基本類型都包含了。 核心代碼{}.toString.call(obj) //[object ...]

二，創建對象全解

jQuery創建$(),這$()是個方法，里面renturn一個對象，new的時候，覆蓋構造函數的對象。運用構造函數+寄生創建對象，核心理解原型鏈。

var jQuery = function( selector, context ) {  2         // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context );  4  }  5 
jQuery.fn = jQuery.prototype = {  7     init: function( selector, context ) {  8         var match, elem, ret, doc;  9 
        // Handle $(""), $(null), or $(undefined)
        if ( !selector ) { 12             return this; 13  } 14 ....... 15 
jQuery.fn.init.prototype = jQuery.fn;

return new jQuery.fn.init( selector, context );為什么不直接返回new jQuery();應為new的時候，會調用jQuery....然后又new..死循環。
將jquery下的prototype下的init方法的原型=jquery下的prototype。意思：newjQuery.fn.init（）對象具有 init方法的原型中的所有方法 的實例，就會具有jquery下的prototype下的所有方法，擴展jquery下的prototype下的方法。就等於擴展$()的方法。

創建對象的形式：說的3種，5種什么的，沒什么意思的。其實看書之后總結是7種，不過沒什么意思。核心還是構造函數+原型，知道之后其余的稍微看一下就會的。

原始：var obj={}；或者var obj=new Object() ;obj.attr1=..,obj.attr2=..

工廠：function factory（par1,par2,...）{var obj=new Object();obj.attr=par1..;return obj}

構造函數：function A(){} var a=new A();

構造函數+原型：function A(){} var a=new A(); A.prototype={attr1：..;fun1:...}

動態構造函數：function A(){this.attr1=..;this.attr2=..;if(typeof this.fun1!='function'){A.prototype.fun1=function(){....}}}    var a=new A(); a.fun1();//函數內部沒有的，我再在原型中創建。這個整體寫法，將原型寫到方法體內了。就相當我們c#的語言一樣了，將類的所有的方法寫到一個類中。

寄生構造函數：function A(){vat a=new ..;this.attr1=...   return a;}//return的結果，覆蓋構造函數new時候默認返回的實例。

穩妥構造函數：看高級編程之后，實在發現不出和工廠方法有什么區別。這都什么飛機？我簡單認為就是工廠模式。核心為了“安全”，不使用this，不使用new。

三，引用問題

//在h5游戲開發中，經常會有這樣的要求：復制出一個對象，但修改原來的對象，不會造成對復制出的對象造成影響。我們需要理解一些基本的東西。

        //1在閉包內，盡量不適用同一個變量名，比如下面的a。因為作用域就近找變量。不會按照人眼看到的從上到下執行。
        //2變量和函數的聲明，放到最上面。因為js程序運行的時候自動會將聲明提升到當前作用域的最頂端
        var a = "global";
        function b() {
            console.log(a);//undefined  1先在當前上下文作用域內找a，就近原則！。當前作用於內不存在，就從上級作用域找...上級
            var a = "local";//此時var a聲明會提升到當前上下文（作用域最頂端）
            console.log(a);//local
        }
        b();

        var m = "global";
        function n() {
            var m;
            console.log(m);//undefined
            m = "local";
            console.log(m);//local
        }
        n();
        var k = "global";
        function l() {
            var k;
            console.log(k);//undefined  找到當前作用域的k，就不會再往作用域鏈上繼續找
            console.log(k);//undefined
        }
        l();
        var s = "global";
        function t() {
            console.log(s);//undefined  找到當前作用域的k，就不會再往作用域鏈上繼續找
            console.log(s);//undefined
        }
        t();

四，擴展實質全解

jQuery.extend = jQuery.fn.extend = function() {
    // copy reference to target object
    var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options, name, src, copy;

    // 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 ) {
        target = this;
        --i;
    }

    for ( ; i < length; i++ ) {
        // Only deal with non-null/undefined values
        if ( (options = arguments[ i ]) != null ) {
            // Extend the base object
            for ( name in options ) {
                src = target[ name ];
                copy = options[ name ];

                // Prevent never-ending loop
                if ( target === copy ) {
                    continue;
                }

                // Recurse if we're merging object literal values or arrays
                if ( deep && copy && ( jQuery.isPlainObject(copy) || jQuery.isArray(copy) ) ) {
                    var clone = src && ( jQuery.isPlainObject(src) || jQuery.isArray(src) ) ? src
                        : jQuery.isArray(copy) ? [] : {};

                    // 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;
                }
            }
        }
    }

    // Return the modified object
    return target;
};

注意：$.extend和$().extend,都是用這一個方法搞定的。

 //extend
        var obj1 = $.extend({}, { name: 'lk', age: 18 }, { weight: 120 })
        var obj2 = $.extend({}, { name: 'lk', attr: { age: 15, hair: 'red' } }, { weight: 120 })
        var obj3 = $.extend(false, { name: 'lk', attr: { age: 15, hair: 'red' } }, { weight: 120 }, { attr: { sight: 5.0 } })
        console.log(obj3);//{name: "lk",weight: 120,attr:{sight: 5.0}}
        var obj4 = $.extend(true, { name: 'lk', attr: { age: 15, hair: 'red' } }, { weight: 120 }, { attr: { age: 18, sight: 5.0 } })
        console.log(obj4);//{name: "lk",weight: 120,attr:{age: 18, hair: 'red',sight: 5.0}}

注意遞歸的使用：

  function multi(num) {
            //終止條件
            if (num == 1) {
                return 1;
            }

            return num * multi(num - 1);//5*4*3*2*1

        }
        console.log(multi(5))//120

//我們想把這個對象真正的復制一份出來
var obj1 = { a: 15 }
var obj2 = obj1;
obj1.a = 18;
console.log(obj2); //{a:18 }//想要的是講obj1對象“拷貝”給obj2之后，改obj1，不會造成對obj2的影響。

拷貝就是采用的遞歸：

 function copy(obj) {
            var newObj = {}

            for (var key in obj) {
                newObj[key] = obj[key]
            }
            return newObj;

        }
        var obj4 = copy(obj3);
        obj3.a = 18;
        console.log(obj3)//{a:18}
        console.log(obj4)//{a:20} 通過這種拷貝的形式，就會使得不會相互影響，脫離的“引用問題”干擾。

function deepCopy(obj) {
            //終止條件，當不是{key：value}對象時
            if (typeof obj != 'object') {
                return obj;
            }
            var newObj = {}
            for (var key in obj) {
                newObj[key] = deepCopy(obj[key]);//“遞”次調用，最后”歸“一

            }
            return newObj;

        }
        var obj8 = deepCopy(obj7);
        obj7.a.b.c = 18;
        console.log(obj7);//{ a: { b: { c: 18 } } }
        console.log(obj8); //{ a: { b: { c: 15 } } }

自己模仿一個擴展。

  function Bird() {
            this.wing = 2;
            this.fly = function () {
                alert("fly");
            }
        }
 Bird.kuozhan = Bird.prototype.kuozhan = function (obj) {
            for (var key in obj) {//{a:5,b:10}
                this[key] = obj[key]
            }
            return this;
        }

  //函數：既是方法，又是變量，還是對象。那么函數肯定有屬性、方法
        //擴展靜態方法
        //var Bird= function () {

        function Bird() {
            this.wing = 2;
            this.fly = function () {
                alert("fly");
            }
        }
        Bird.say = function () {
            alert('say');
        }
        Bird.run = function () {
            alert('run');
        }
        // Bird.fly();//這里出現錯誤,只能其實例調用
        var bird = new Bird();
        bird.fly();

        Bird.say();//say
        Bird.run();//run
        //對一個方法對象擴展同時擴展多個方法（自己調用），更為方便的寫法
        //看一些框架中，把擴展的多個方法弄成一個對象，整體做參數，傳進去，就把這個參數對象的方法一個一個擴展到原來對象上去了。就類似
        //{fun1：function(){},fun2：function(){},fun3：function(){}},然后一自動對齊，顯得逼格十足。
        //要實現這點，下部如何將一個對象的方法一個一個擴展到原來對象上去呢？是的，我們就寫出這個擴展方法。少用“=”，多用“：”

        Bird.kuozhan = Bird.prototype.kuozhan = function (obj) {
            for (var key in obj) {//{a:5,b:10}
                this[key] = obj[key]
            }
            return this;
        }
        Bird.kuozhan({
            s: function () {
                alert('1');
            },
            r: function () {
                alert('2');
            }
        })
        Bird.s();
        Bird.r();
        Bird.prototype.kuozhan({
            m: function () {
                alert('m');
            },
            n: function () {
                alert('n');
            }
        })
        var b = new Bird();

五，繼承注意

 

/*引用的問題*/
        /*********************************************************************/
        /*數組*/
        var a=[1,2,3];
        var b=a;
        //a.push(4);//修改的問題
        b.push(4);//修改的問題
        console.log(a);//[1,2,3,4]
        console.log(b);//[1,2,3,4]


        var a=[1,2,3];
        var b=a;
        //=等號 ：重開辟新空間重新賦值 開辟新空間導致  就不會再存在引用類型修改的問題
        a=[7,8,9]
        console.log(a);//[7,8,9]
        console.log(b);//[1,2,3,4]

        /*********************************************************************/
         /*object*/
         var obj1={name:"老李"};
         var obj2=obj1;
         obj2.name="老王"
         console.log(obj1);//{name:"老王"}
         console.log(obj2);//{name:"老王"}

         var obj1={name:"老李"};
         var obj2=obj1;

         obj2={haha:"笑哈哈"}
         console.log(obj1);{name:"老李"}
         console.log(obj2);{haha:"笑哈哈"}

        /*********************************************************************/
        /*特殊的方法，不能修改*/
        var a=function(){alert('qqqqq')}
        var b=a;
        //函數只能=  函數不能修改，不存在修改的問題 
        b=function(){alert('wwww')}
        a();//qqqqq
        b();//wwww

 

 

 

 

 

 function Person(name, age) {
            this.name = name;
            this.age = age;
            this.aler = function () {
                alert(1);
            }
        }
        Person.prototype = {//因為prototype是對象，可以寫成無序鍵值對
            sayHi: function () { alert('sayhi'); },
            sayHello: function () { alert('sayhello'); }
        }
        function student(sname, sage) {//
            Person.call(this, sname, sage);//we
        }
        //student.prototype = Person.prototype;
        student.prototype = new Person();
        student.prototype.constructor = student;

        var stu1 = new student();
        stu1.aler();
        stu1.sayHi();
        stu1.sayHello();

//student.prototype = Person.prototype;
student.prototype = new Person();//可以來個”父類“實例，因為原型鏈
student.prototype.constructor = student;//上面的代碼已經破壞了原型的構造指向，勿忘修改。