成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript 高級技巧

wean / 518人閱讀

摘要：如果直接調(diào)用構(gòu)造函數(shù)，那么會指向全局對象然后你的代碼就會覆蓋的原生。凍結(jié)對象最嚴格的防篡改就是凍結(jié)對象。中央定時器動畫地址參考書籍高級程序設(shè)計忍者秘籍

1 安全類型檢測

javascript內(nèi)置類型檢測并不可靠

safari某些版本（<4）typeof正則表達式返回為function

建議使用Object.prototype.toString.call()方法檢測數(shù)據(jù)類型

    function isArray(value){
        return Object.prototype.toString.call(value) === "[object Array]";
    }
    
    function isFunction(value){
        return Object.prototype.toString.call(value) === "[object Function]";
    }
    
    function isRegExp(value){
        return Object.prototype.toString.call(value) === "[object RegExp]";
    }
    
    function isNativeJSON(){
        return window.JSON && Object.prototype.toString.call(JSON) === "[object JSON]";
    }

對于ie中一COM對象形式實現(xiàn)的任何函數(shù)，isFunction都返回false，因為他們并非原生的javascript函數(shù)。

在web開發(fā)中，能夠區(qū)分原生與非原生的對象非常重要。只有這樣才能確切知道某個對象是否有哪些功能

以上所有的正確性的前提是：Object.prototype.toString沒有被修改過

2 作用域安全的構(gòu)造函數(shù) 
function Person(name){
    this.name = name;
}

//使用new來創(chuàng)建一個對象
var one = new Person("wdd");

//直接調(diào)用構(gòu)造函數(shù)
Person();

由于this是運行時分配的，如果你使用new來操作，this指向的就是one。如果直接調(diào)用構(gòu)造函數(shù)，那么this會指向全局對象window,然后你的代碼就會覆蓋window的原生name。如果有其他地方使用過window.name, 那么你的函數(shù)將會埋下一個深藏的bug。

==那么，如何才能創(chuàng)建一個作用域安全的構(gòu)造函數(shù)？==
方法1

function Person(name){
    if(this instanceof Person){
        this.name = name;
    }
    else{
        return new Person(name);
    }
}
3 惰性載入函數(shù)

假設(shè)有一個方法X，在A類瀏覽器里叫A,在b類瀏覽器里叫B,有些瀏覽器并沒有這個方法,你想實現(xiàn)一個跨瀏覽器的方法。

惰性載入函數(shù)的思想是：在函數(shù)內(nèi)部改變函數(shù)自身的執(zhí)行邏輯

function X(){
    if(A){
        return new A();
    }
    else{
        if(B){
            return new B();
        }
        else{
            throw new Error("no A or B");
        }
    }
}

換一種寫法

function X(){
    if(A){
        X = function(){
            return new A();
        };
    }
    else{
        if(B){
            X = function(){
                return new B();
            };
        }
        else{
            throw new Error("no A or B");
        }
    }
    
    return new X();
}
4 防篡改對象 4.1 不可擴展對象 Object.preventExtensions 
// 下面代碼在谷歌瀏覽器中執(zhí)行
> var person = {name: "wdd"};
undefined
> Object.preventExtensions(person);
Object {name: "wdd"}
> person.age = 10
10
> person
Object {name: "wdd"}
> Object.isExtensible(person)
false
4.2 密封對象Object.seal

密封對象不可擴展，并且不能刪除對象的屬性或者方法。但是屬性值可以修改。

> var one = {name: "hihi"}
undefined
> Object.seal(one)
Object {name: "hihi"}
> one.age = 12
12
> one
Object {name: "hihi"}
> delete one.name
false
> one
Object {name: "hihi"}
4.3 凍結(jié)對象 Object.freeze

最嚴格的防篡改就是凍結(jié)對象。對象不可擴展，而且密封，不能修改。只能訪問。

5 高級定時器 5.1 函數(shù)節(jié)流

函數(shù)節(jié)流的思想是：某些代碼不可以沒有間斷的連續(xù)重復執(zhí)行

var processor = {
    timeoutId: null,

    // 實際進行處理的方法
    performProcessing: function(){
        ...
    },

    // 初始化調(diào)用方法
    process: function(){
        clearTimeout(this.timeoutId);

        var that = this;

        this.timeoutId = setTimeout(function(){
            that.performProcessing();
        }, 100);
    }
}

// 嘗試開始執(zhí)行
processor.process();
5.2 中央定時器

頁面如果有十個區(qū)域要動態(tài)顯示當前時間，一般來說，可以用10個定時來實現(xiàn)。其實一個中央定時器就可以搞定。

中央定時器動畫 demo地址：http://wangduanduan.coding.me...

var timers = {
        timerId: 0,
        timers: [],
        add: function(fn){
            this.timers.push(fn);
        },
        start: function(){
            if(this.timerId){
                return;
            }

            (function runNext(){
                if(timers.timers.length > 0){
                    for(var i=0; i < timers.timers.length ; i++){
                        if(timers.timers[i]() === false){
                            timers.timers.splice(i, 1);
                            i--;
                        }
                    }

                    timers.timerId = setTimeout(runNext, 16);
                }
            })();
        },
        stop: function(){
            clearTimeout(timers.timerId);
            this.timerId = 0;
        }
    };

參考書籍：
《javascript高級程序設(shè)計》
《javascript忍者秘籍》

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81986.html

相關(guān)文章

  • JavaScript 高級技巧——“高級定時器”的注意要點

    摘要：為了規(guī)避這個問題，可以使用定時器對事件處理程序進行節(jié)流。當?shù)诙握{(diào)用該函數(shù)時，它會清除前一次的定時器，并設(shè)置另一個。如果前一個定時器已經(jīng)執(zhí)行過了，這個操作就沒有任何意義。然而如果前一個定時器尚未執(zhí)行，其實就是將其替換為一個新的定時器。 高級定時器 為了解決setInterval的一些執(zhí)行問題， 下面是采用鏈式setTimeout的方式來規(guī)避： setTimeout(function()...

    rubyshen 評論0 收藏0

  • JavaScript 高級技巧——“防篡改對象”的注意要點

    摘要：防篡改對象不可擴展對象默認情況下，所有對象都是可擴展的不可擴展可以使用這個方法嚴格模式下會拋出錯誤一旦設(shè)置防擴展，對象就無法添加新的屬性和方法。已有的屬性方法不受影響，這些屬性方法仍然可以修改和刪除。檢測是否被凍結(jié)，用方法 防篡改對象 不可擴展對象 默認情況下，所有對象都是可擴展的： var person = { name: Oliver }; person.age = 18;...

    atinosun 評論0 收藏0

  • 10個用Console來Debug的高級技巧

    摘要：在本文，我會為你介紹一些用老式來的技巧。使用可以將聚合成組，并且形成嵌套的層級。最后一個壓軸的你可以使用將對象以表格的形式打印出來。自從年雙十一正式上線，累計處理了億錯誤事件，得到了金山軟件百姓網(wǎng)等眾多知名用戶的認可。 譯者按： 我們往往會局限在自己熟悉的知識圈，但也應擔偶爾拓展一下，使用一些不常見而又有用的技巧，擴大自己的舒適圈。 原文: 10 Tips for Javascrip...

    Hwg 評論0 收藏0

  • JavaScript 高級技巧——“高級函數(shù)”的注意要點

    摘要：語法如下注意這里使用的并不是的，是內(nèi)部函數(shù)的。函數(shù)柯里化的基本方法是使用一個閉包返回一個函數(shù)。當函數(shù)被調(diào)用時，返回的函數(shù)還需要設(shè)置一些傳入的參數(shù)。 安全的類型檢測 typeof操作符 檢測數(shù)據(jù)類型的結(jié)果可能會不正確； instanceof操作符 操作符在多個全局作用域下存在問題： var value = []; var isArray = value instanceof Array;...

    solocoder 評論0 收藏0

  • JavaScript 高級技巧 Memoization

    摘要：來源于拉丁語，不要與混淆了。本文首先介紹一個簡單的使用優(yōu)化技術(shù)的例子，然后解讀和庫中使用的源碼，加深理解?？偨Y(jié)是一種優(yōu)化技術(shù)，避免一些不必要的重復計算，可以提高計算速度。 memoization 來源于拉丁語 memorandum (to be remembered)，不要與 memorization 混淆了。 首先來看一下維基百科的描述： In computing, memoizat...

    劉德剛 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<