JavaScript 高等技能

1 平安范例检测

  • javascript内置范例检测并不牢靠
  • safari某些版本(<4)typeof正则表达式返回为function

发起运用Object.prototype.toString.call()要领检测数据范例


    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对象情势完成的任何函数,isFunction都返回false,因为他们并不是原生的javascript函数。

在web开辟中,能够辨别原生与非原生的对象非常重要。只要如许才确实晓得某个对象是不是有哪些功用

以上一切的正确性的条件是:Object.prototype.toString没有被修悛改

2 作用域平安的组织函数

function Person(name){
    this.name = name;
}

//运用new来建立一个对象
var one = new Person('wdd');

//直接挪用组织函数
Person();

因为this是运行时分派的,假如你运用new来操纵,this指向的就是one。假如直接挪用组织函数,那末this会指向全局对象window,然后你的代码就会掩盖window的原生name。假如有其他地方运用过window.name, 那末你的函数将会埋下一个深藏的bug。

==那末,怎样才建立一个作用域平安的组织函数?==
要领1

function Person(name){
    if(this instanceof Person){
        this.name = name;
    }
    else{
        return new Person(name);
    }
}

3 惰性载入函数

假设有一个要领X,在A类浏览器里叫A,在b类浏览器里叫B,有些浏览器并没有这个要领,你想完成一个跨浏览器的要领。

惰性载入函数的头脑是:在函数内部转变函数本身的实行逻辑

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

// 下面代码在谷歌浏览器中实行
> 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 凝结对象 Object.freeze

最严厉的防改动就是凝结对象。对象不可扩大,而且密封,不能修正。只能接见。

5 高等定时器

5.1 函数撙节

函数撙节的头脑是:某些代码不能够没有中断的一连反复实行

var processor = {
    timeoutId: null,

    // 现实举行处置惩罚的要领
    performProcessing: function(){
        ...
    },

    // 初始化挪用要领
    process: function(){
        clearTimeout(this.timeoutId);

        var that = this;

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

// 尝试最先实行
processor.process();

5.2 中心定时器

页面假如有十个地区要动态显示当前时候,一般来说,能够用10个定时来完成。实在一个中心定时器就能够搞定。

中心定时器动画 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高等程序设计》
《javascript忍者秘笈》

    原文作者:Carl
    原文地址: https://segmentfault.com/a/1190000008687130
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞