JS程序設(shè)計(jì)高級(jí)技巧

Codeing_ls 發(fā)布于2019-08-23 15:06 / 1793人閱讀

摘要：關(guān)于定時(shí)器要記住的最重要的事情是指定的時(shí)間間隔表示何時(shí)將定時(shí)器的代碼添加到隊(duì)列，而不是何時(shí)實(shí)際執(zhí)行代碼。多個(gè)定時(shí)器之間的執(zhí)行間隔會(huì)比預(yù)期的小解決辦法處理中數(shù)組分塊，，函數(shù)節(jié)流，實(shí)際進(jìn)行處理的方法實(shí)際執(zhí)行的代碼初始處理調(diào)用的方法

一、高級(jí)函數(shù)

安全類(lèi)型檢測(cè)

Object.protitype.toString.call(value)

作用域安全的構(gòu)造函數(shù)

function Person(name, age, job) {
    if (this instanceof Person) {
        this.name = name;
        this.age = age;
        this.job = job;
    } else {
        return new Person(name, age, job);
    }
}
// 如果你使用構(gòu)造函數(shù)竊取模式的繼承且不使用原型鏈，這個(gè)繼承很可能被破壞
function Teacher (name, age, job, salary) {
    // this指向非Peroson 返回新的實(shí)例，構(gòu)造函數(shù)中的this屬性并未增長(zhǎng)
    Person.call(this, name, age, job); 
    this.salary = salary;
}
// 解決這個(gè)問(wèn)題的方法是，Teacher.prototype = new Person(),此時(shí)一個(gè)Teacher實(shí)例也是一個(gè)Person實(shí)例

惰性載入函數(shù)
在函數(shù)被調(diào)用的時(shí)候再處理函數(shù)，在第一次調(diào)用的過(guò)程中，該函數(shù)會(huì)被覆蓋為另一個(gè)按合適方式執(zhí)行的函數(shù)

function createXHR () {
    if (typeof XMLHttpRequest != "undefined) {
        createXHR  = function () {
            return new XMLHttpRequest ();
        }
    } else if (typeof ActiveXObject != "undefined") {
        createXHR = function () {
            if (typeof arguments.callee.activeString != "string") {
                //...
            }
        }
    } else {
        createXHR  = function () {
            // ...
        }
    }
    return createXHR();
}

在聲明的時(shí)候就指定適當(dāng)?shù)暮瘮?shù)，利用匿名函數(shù)自運(yùn)行，return一個(gè)合適的函數(shù)

函數(shù)綁定
一個(gè)簡(jiǎn)單的bind函數(shù)

function bind(fn, context){
    return function() {
        return fn.apply(context, arguments)
    }
}

函數(shù)柯里化
函數(shù)的柯里化的基本方法和函數(shù)綁定是一樣的，使用一個(gè)閉包返回一個(gè)函數(shù)，區(qū)別是，當(dāng)函數(shù)被調(diào)用時(shí)，還需要傳遞一些參數(shù)
柯里化函數(shù)動(dòng)態(tài)創(chuàng)建步驟：調(diào)用另一個(gè)函數(shù)并為它傳入要柯里化的函數(shù)和必要參數(shù)

function curry(fn){
    var args = Array.prototype.slice.call(arguments, 1);
    return function () {
        var innerArgs = Array.prototype.slice.call(arguments);
        var finalArgs = args.concat(innerArgs);
        return fn.apply(null, finalArgs)
    }
}

es5中的防篡改對(duì)象
不可擴(kuò)展對(duì)象

Objcect.preventExtensions(obj)   // 設(shè)置對(duì)象屬性是否可以擴(kuò)展
Objcect.isExtensible(obj)         // 返回值為bool值，true即該對(duì)象可以擴(kuò)展，false為不可擴(kuò)展

密封的對(duì)象
密封對(duì)象不可擴(kuò)展，而且已有成員的[ [ Configurable ] ]特性將被設(shè)置為false，這就意味著不能刪除屬性和方法

Object.seal(obj)     // 設(shè)置對(duì)象是否是密封
Object.isSealed    // 返回值為bool值，true即該對(duì)象已經(jīng)密封，false為沒(méi)有密封

凍結(jié)對(duì)象
凍結(jié)的對(duì)象既不可以擴(kuò)展，又是密封的

Object.freeze(obj)         // 設(shè)置對(duì)象是否凍結(jié)
Objcet.isForzen(obj)    // 返回值為bool值，true即該對(duì)象已經(jīng)凍結(jié)，false為沒(méi)有凍結(jié)

高級(jí)定時(shí)器
除了主Javascript執(zhí)行進(jìn)程外，還有一個(gè)需要在進(jìn)程下次一空閑的時(shí)執(zhí)行的代碼隊(duì)列。隨著頁(yè)面在其生命周期中的推移，代碼會(huì)按照?qǐng)?zhí)行順序添加到隊(duì)列。
關(guān)于定時(shí)器要記住的最重要的事情是：指定的時(shí)間間隔表示何時(shí)將定時(shí)器的代碼添加到隊(duì)列，而不是何時(shí)實(shí)際執(zhí)行代碼。
a.重復(fù)的定時(shí)器

使用setInterval()創(chuàng)建的定時(shí)器確保了定時(shí)器代碼規(guī)則地插入隊(duì)列中，這個(gè)方式的問(wèn)題在于定時(shí)器代碼可能在代碼再次被添加到隊(duì)列之前還沒(méi)有完成執(zhí)行，結(jié)果導(dǎo)致定時(shí)器代碼連續(xù)運(yùn)行好幾次，而之間沒(méi)有任何停頓，javascript引擎在使用setInterval時(shí)，僅當(dāng)沒(méi)有該定時(shí)器的代碼是才將定時(shí)器的代碼添加到隊(duì)列中，但是這樣會(huì)導(dǎo)致1、某些間隔時(shí)間被跳過(guò)。

b.多個(gè)定時(shí)器之間的執(zhí)行間隔會(huì)比預(yù)期的小

// 解決辦法
setTimeout(function () {
    //處理中
    setTimeout(arguments.callee, interval)
}, interval)

數(shù)組分塊

function chunk(array， process， context) {
    setTimeout( function() {
        var Item = array.shift();
        process(item)
        if (array.length > 0) {
            setTimeout(arguments.callee, 100)
        }
    }, 100)
}

函數(shù)節(jié)流

var processor = {
    timeoutId = null，
    // 實(shí)際進(jìn)行處理的方法
    performProcessing: function() {
    // 實(shí)際執(zhí)行的代碼
},
// 初始處理調(diào)用的方法
process: function () {
    clearTimeout(this.timeouId);
    var that = this;
    this.timeoutId = setTimeout(function () {
        that.performProcessing();
    }, 100)
    }
}