亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

關(guān)于一些前端js框架的源碼研究

whjin / 663人閱讀

摘要:的作用相當(dāng)于,將其轉(zhuǎn)換為布爾值。用于判斷一個(gè)變量是否某個(gè)對(duì)象的實(shí)例,如返回同時(shí)也會(huì)返回返回布爾值,如果為,則返回,否則返回的結(jié)果。

underscore.js源碼

Underscore.js 沒有對(duì)原生 JavaScript 對(duì)象進(jìn)行擴(kuò)展,而是通過調(diào)用 _() 方法進(jìn)行封裝,一旦封裝完成,原生 JavaScript 對(duì)象便成為一個(gè) Underscore 對(duì)象。

判斷給定變量是否是對(duì)象
// Is a given variable an object?
    _.isObject = function(obj) {
        var type = typeof obj;
        return type === "function" || type === "object" && !!obj;
    };

這是underscore.js的判斷給定變量是否是object的一段源碼。 我們知道typeof會(huì)返回如下六個(gè)值:

1. "undefined" --- 這個(gè)值未定義;
2. "boolean"    --- 這個(gè)值是布爾值;
3. "string"        --- 這個(gè)值是字符串;
4. "number"     --- 這個(gè)值是數(shù)值;
5. "object"       --- 這個(gè)值是對(duì)象或null;
6. "function"    --- 這個(gè)值是函數(shù)。  

&&的優(yōu)先級(jí)要高與||。!!的作用相當(dāng)于Boolean(),將其轉(zhuǎn)換為布爾值。

判斷給定值是否是DOM元素
// Is a given value a DOM element?
    _.isElement = function(obj) {
        return !!(obj && obj.nodeType === 1);
    };

同樣!!相當(dāng)于Boolean()的作用,nodeType === 1則說明是元素節(jié)點(diǎn),屬性attr是2 ,文本text是3


    

測(cè)試

firstChild屬性

var t = document.getElementById("test").firstChild;
alert(t.nodeType);//3
alert(t.nodeName);//#test
alert(t.nodeValue);//測(cè)試

文本節(jié)點(diǎn)也算是一個(gè)節(jié)點(diǎn),所以p的子節(jié)點(diǎn)是文本節(jié)點(diǎn),所以返回3

zepto源碼 判斷是否是數(shù)組
isArray = Array.isArray ||
            function(object){ return object instanceof Array }   

Array.isArray() 方法:如果一個(gè)對(duì)象是數(shù)組就返回true,如果不是則返回false。

instanceof 用于判斷一個(gè)變量是否某個(gè)對(duì)象的實(shí)例,如

var a= [];
alert(a instanceof Array);//返回 true

同時(shí) alert(a instanceof Object) 也會(huì)返回 true

isArray 返回布爾值,如果Array.isArraytrue,則返回true,否則返回object instanceof Array的結(jié)果。

數(shù)據(jù)類型判斷
class2type = {},

function type(obj) {
        return obj == null ? String(obj) :
        class2type[toString.call(obj)] || "object"
    }

    function isFunction(value) { return type(value) == "function" }
    function isWindow(obj)     { return obj != null && obj == obj.window }
    function isDocument(obj)   { return obj != null && obj.nodeType == obj.DOCUMENT_NODE }
    function isObject(obj)     { return type(obj) == "object" }

class2type是一個(gè)空對(duì)象,實(shí)際上一個(gè)什么都沒有的空對(duì)象是這樣創(chuàng)建的Object.create(null);

我們可以通過Object.prototype.toString.call()方法來(lái)判斷數(shù)據(jù)類型,例如:

console.log(Object.prototype.toString.call(123)) //[object Number]  
console.log(Object.prototype.toString.call("123")) //[object String]    
console.log(Object.prototype.toString.call(undefined)) //[object Undefined]                         
console.log(Object.prototype.toString.call(true)) //[object Boolean]                                      
console.log(Object.prototype.toString.call({})) //[object Object]                                      
console.log(Object.prototype.toString.call([])) //[object Array]             
console.log(Object.prototype.toString.call(function(){})) //[object Function]  

首先如果參數(shù)objundefinednull,則通過String(obj)轉(zhuǎn)換為對(duì)應(yīng)的原始字符串“undefined”或“null”。

然后class2type[toString.call(obj)]首先借用Object的原型方法toString()來(lái)獲取obj的字符串表示,返回值的形式是 [object class],其中的class是內(nèi)部對(duì)象類。

然后從對(duì)象class2type中取出[object class]對(duì)應(yīng)的小寫字符串并返回;如果未取到則一律返回“object

get方法
get: function(idx){
            return idx === undefined ? slice.call(this) : this[idx >= 0 ? idx : idx + this.length]
        },
    

取集合中對(duì)應(yīng)指定索引的值,如果idx小于0,則idx等于idx+length,length為集合的長(zhǎng)度.

可能你剛看到slice.call(this)會(huì)覺得很納悶,其實(shí)不僅是zepto.js的源碼,包括jQuerybackbone的源碼都是這么寫的,只不過它們?cè)谧铋_頭做了聲明:

var push = array.push;
var slice = array.slice;
var splice = array.splice;

所以slice.call(this)其實(shí)還是Array.slce.call(this)

prototype.js源碼
 
  //為對(duì)象添加 class 屬性值
    
   addClassName: function(element, className) {
        element = $(element);
        Element.removeClassName(element, className);
        element.className += " " + className;
    },

    
   //為對(duì)象移除 class 屬性值
     
    removeClassName: function(element, className) {
        element = $(element);
        if (!element)
            return;
        var newClassName = "";
        var a = element.className.split(" ");
        for (var i = 0; i < a.length; i++) {
            if (a[i] != className) {
                if (i > 0)
                    newClassName += " ";
                newClassName += a[i];
            }
        }
        element.className = newClassName;
    },

因?yàn)?b>addClassName依賴于removeClassName(),所以先分析后者,$()是先將元素封裝成prototype對(duì)象,

if(!element)  return

這句的意思就是如果元素對(duì)象不存在,則忽略不再繼續(xù)執(zhí)行的意思,也就是終止的意思。

split() 方法用于把一個(gè)字符串分割成字符串?dāng)?shù)組。

如果把空字符串 ("") 用作 分隔符,那么 該對(duì)象 中的每個(gè)字符之間都會(huì)被分割。

判斷是否擁有 class 屬性值
//是否擁有 class 屬性值

hasClassName: function(element, className) {
    element = $(element);
    if (!element)
        return;
    var a = element.className.split(" ");
    for (var i = 0; i < a.length; i++) {
        if (a[i] == className)
            return true;//返回正確的處理結(jié)果
    }
    return false;//返回錯(cuò)誤的處理結(jié)果
},    
兼容舊版本瀏覽器增加Array的push方法
/**
 * 為兼容舊版本的瀏覽器增加 Array 的 push 方法。
 */
if (!Array.prototype.push) {
    Array.prototype.push = function() {
        var startLength = this.length;//this指代Array
        for (var i = 0; i < arguments.length; i++)
            this[startLength + i] = arguments[i];//this依舊指代Array
        return this.length;
    }
}

!Array.prototype.push如果為true,說明瀏覽器不支持該方法,則往下執(zhí)行。this[startLength + i] = arguments[i]將傳遞進(jìn)來(lái)的每個(gè)參數(shù)依次放入數(shù)組中,最后返回?cái)?shù)組的長(zhǎng)度

訪問對(duì)象可以使用(.)表示法,也可以使用[]來(lái)訪問,同樣訪問數(shù)組元素也是

jQuery 源碼

jQuery源碼太多關(guān)聯(lián)了,所以不好多帶帶拿出來(lái)做分析,就舉一兩個(gè)簡(jiǎn)單的例子吧:

toArray方法
jQuery.prototype = {
    toArray: function() {
            return slice.call( this );
        },
}

Array.prototype.slice.call(arguments)能將具有length屬性的對(duì)象轉(zhuǎn)成數(shù)組,也就是說其目的是將arguments對(duì)象的數(shù)組提出來(lái)轉(zhuǎn)化為數(shù)組。例如:


slice有兩個(gè)用法,一個(gè)是String.slice,一個(gè)是Array.slice,第一個(gè)返回的是字符串,第二個(gè)返回的是數(shù)組。

Array.prototype.slice.call(arguments)能夠?qū)?b>arguments轉(zhuǎn)成數(shù)組,那么就是arguments.toArray().slice();

因?yàn)?b>arguments并不是真正的數(shù)組對(duì)象,只是與數(shù)組類似而已,所以它并沒有slice這個(gè)方法,而Array.prototype.slice.call(arguments)可以理解成是將arguments轉(zhuǎn)換成一個(gè)數(shù)組對(duì)象,讓arguments具有slice()方法。 比如:

 var arr = [1,2,3,4];
 console.log(Array.prototype.slice.call(arr,2));//[3,4]

Array
這是我們想要的基對(duì)象名稱

prototype
這可以被認(rèn)為是一個(gè)數(shù)組的實(shí)例方法的命名空間

slice
這提取數(shù)組的一部分并返回新的數(shù)組,并沒有開始和結(jié)束索引,它只是返回一個(gè)數(shù)組的拷貝

call
這是一個(gè)非常有用的功能,它允許你從一個(gè)對(duì)象調(diào)用一個(gè)函數(shù)并且使用它在另一個(gè)上下文環(huán)境

下面的寫法是等效的:

Array.prototype.slice.call == [].slice.call

看這個(gè)例子:

 
object1 = {
    name:"frank",
    greet:function(){
        alert("hello "+this.name)
    }
};

object2 = {
    name:"trigkit4"
};

// object2沒有g(shù)reet方法
// 但我們可以從object1中借來(lái)

 object1.greet.call(object2);//彈出hello trigkit4

分解一下就是object1.greet運(yùn)行彈出hello + "this.name",然后object2對(duì)象冒充,this就指代object2

var t = function(){
    console.log(this);// String [ "t", "r", "i", "g", "k", "i", "t", "4" ]
    console.log(typeof this);  //  Object
    console.log(this instanceof String);  // true
};
t.call("trigkit4");

call(this)指向了所傳進(jìn)去的對(duì)象。

Object.prototype中已經(jīng)包含了一些方法:

    1.toString ( )

    2.toLocaleString ( )

    3.valueOf ( )

    4.hasOwnProperty (V)

    5.isPrototypeOf (V)

    6.propertyIsEnumerable (V)
on方法
jQuery.fn.extend({
    on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
        var type, origFn;

        // Types can be a map of types/handlers
        if ( typeof types === "object" ) {
            // ( types-Object, selector, data )
            if ( typeof selector !== "string" ) {
                // ( types-Object, data )
                data = data || selector;
                selector = undefined;

            }
        }
})


jQuery.extend(object) :為擴(kuò)展jQuery類本身.為類添加新的方法。

jQuery.fn.extend(object) :給jQuery對(duì)象添加方法。

!= 在表達(dá)式兩邊的數(shù)據(jù)類型不一致時(shí),會(huì)隱式轉(zhuǎn)換為相同數(shù)據(jù)類型,然后對(duì)值進(jìn)行比較.
!== 不會(huì)進(jìn)行類型轉(zhuǎn)換,在比較時(shí)除了對(duì)值進(jìn)行比較以外,還比較兩邊的數(shù)據(jù)類型, 它是恒等運(yùn)算符===的非形式。

on : function(){}js對(duì)象字面量的寫法

{鍵:值,鍵:值}語(yǔ)法中的“健/值”會(huì)成為對(duì)象的靜態(tài)成員。如果給某個(gè)“健”指定的值是一個(gè)匿名函數(shù),那么該函數(shù)就會(huì)變成對(duì)象的靜態(tài)方法;否則就是對(duì)象的一個(gè)靜態(tài)屬性。

jQuery類型判斷
type: function( obj ) {
            if ( obj == null ) {
                return obj + "";
            }
            return typeof obj === "object" || typeof obj === "function" ?
            class2type[ toString.call(obj) ] || "object" :
                typeof obj;
        },

前面已經(jīng)分析了,class2type = {};所以class2type[ toString.call(obj) ] =
{}.toString.call(obj)。它的作用是改變toStringthis指向?yàn)?b>object的實(shí)例。

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/91504.html

相關(guān)文章

  • 前端架構(gòu)師親述:前端工程師成長(zhǎng)之路 N 問 及 回答

    摘要:?jiǎn)栴}回答者黃軼,目前就職于公司擔(dān)任前端架構(gòu)師,曾就職于滴滴和百度,畢業(yè)于北京科技大學(xué)。最后附上鏈接問題我目前是一名后端工程師,工作快五年了。 showImg(https://segmentfault.com/img/bVbuaiP?w=1240&h=620); 問題回答者:黃軼,目前就職于 Zoom 公司擔(dān)任前端架構(gòu)師,曾就職于滴滴和百度,畢業(yè)于北京科技大學(xué)。 1. 前端開發(fā) 問題 大...

    crossoverJie 評(píng)論0 收藏0
  • 通過閱讀源碼來(lái)提高js知識(shí)

    摘要:在這篇文章中,分享了他如何克服恐懼并開始使用源代碼來(lái)提高他的知識(shí)和技能。不久之后,你正在閱讀的源代碼將引導(dǎo)您進(jìn)入規(guī)范。 通過閱讀源碼來(lái)提高js知識(shí) 原文傳送門:《Improve Your JavaScript Knowledge By Reading Source Code》 showImg(https://segmentfault.com/img/remote/14600000197...

    浠ラ箍 評(píng)論0 收藏0
  • 前端資源系列(4)-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要:特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總,方便自己學(xué)習(xí)查閱參考,和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總,方便自己學(xué)習(xí)查閱參考,和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多,可以很快搞定,沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方,歡迎補(bǔ)充。有錯(cuò)誤的地方,還請(qǐng)斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應(yīng)和斧正,會(huì)及時(shí)更新,平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...

    princekin 評(píng)論0 收藏0
  • JavaScript精編干貨

    摘要:老姚淺談怎么學(xué)鑒于時(shí)不時(shí),有同學(xué)私信問我老姚,下同怎么學(xué)前端的問題。擼碼聽歌,全局控制。 淺析用 js 解析 xml 的方法 由于項(xiàng)目上需要解析 xml,于是各種百度,然后自己總結(jié)了下各個(gè)主流瀏覽器解析 xml 的方法,只能是很淺顯的知道他的用法,但是還沒有深層次的研究。 裝 X - 建立自己的斗圖網(wǎng)站庫(kù) 之前加過一個(gè)斗圖群,看到很多經(jīng)典的表情,然后就收藏到了 QQ, 迫于本屌絲開不起...

    Fourierr 評(píng)論0 收藏0
  • 前端發(fā)展論戰(zhàn)

    摘要:最近很熱的討論關(guān)于真阿當(dāng)對(duì)目前流行前端技術(shù)的批判我眼中的前端框架,,,以及我看前端架構(gòu)關(guān)于前端工具變化過快的討論我感覺到的前端變化上面幾篇文章對(duì)于前端的發(fā)展討論較多。 showImg(https://segmentfault.com/img/bVr3sx); 最近很熱的討論 關(guān)于『真阿當(dāng)』對(duì)目前流行前端技術(shù)的批判 https://www.zhihu.com/question/3892...

    mrli2016 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<