JS高级程序设计之高级技巧

1. 安全的类型检测

// 安全类型检测
/* 检测是不是原生的函数 */
function isFunction(value) {
    return Object.prototype.toString.call(value) == "[object Function]";
}

 

2.作用域安全的构造函数

// 作用域安全的构造函数
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);
    }
}
var person1 = Person("sundily", 22, 'Software Engineer');

 

3.惰性载入函数：表示函数执行的分支仅会发生一次 （主要用在浏览器的兼容上 做一次判断）两种实现方法：
　　● 函数被调用时再处理函数。在第一次调用的过程中，该函数就会被重新覆盖为另一个按合适方法执行的函数
　　● 在声明函数时就指定适当的函数。这样第一次调用函数就不会损失性能了，而在代码首次加载时会损失一点性能

/* 惰性载入函数  表示函数执行的分支仅会发生一次 */
// 原例
function createXHR() {
    if (typeof XMLHttpRequest != "undefined") {
        return new XMLHttpRequest();
    } else if (typeof ActiveXObject != "undefined") {
        if (typeof arguments.callee.activeXString != "string") {
            var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp"];
            for (var index = 0; index < versions.length; index++) {
                try {
                    new ActiveXObject(versions[index]);
                    arguments.callee.activeXString = versions[index];
                    break;
                } catch (error) {

                }

            }
        }
        return new ActiveXObject(arguments.callee.activeXString);
    } else {
        throw new Error("NO XHR object available");
    }
}

// 使用惰性函数之后
function createXHR() {
    if (typeof XMLHttpRequest != "undefined") {
        createXHR = function () {
            return new XMLHttpRequest();
        }
    } else if (typeof ActiveXObject != "undefined") {
        createXHR = function () {
            if (typeof arguments.callee.activeXString != "string") {
                var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp"];
                for (var index = 0; index < versions.length; index++) {
                    try {
                        new ActiveXObject(versions[index]);
                        arguments.callee.activeXString = versions[index];
                        break;
                    } catch (error) {
                        // skip
                    }
                }
            }
            return new ActiveXObject(arguments.callee.activeXString);
        };
    } else {
        createXHR = function () {
            throw new Error("no xhr object available");
        };
    }
    return createXHR();
}

// 第二种惰性函数    匿名的立即执行函数   返回匿名函数
var createXHR = (function () {
    if (typeof XMLHttpRequest != 'undefined') {
        return function () {
            return new XMLHttpRequest();
        };
    } else if (typeof ActiveXObject != "undefined") {
        return function () {
            if (typeof arguments.callee.activeXString != "string") {
                var versions = ["MSXML2.XMLHttp", "MSXML2.XMLHttp.6.0"];
                for (var index = 0; index < versions.length; index++) {
                    try {
                        new ActiveXObject(versions[index]);
                        arguments.callee.activeXString = versions[index];
                        break;
                    } catch (error) {
                        // skip
                    }
                }
            }
            return new ActiveXObject(arguments.callee.activeXString);
        };
    } else {
        return function () {
            throw new Error("no xhr object available");
        };
    }
})();

 

4 函数绑定——一个将函数绑定到指定环境的函数 bind（）

/* 函数绑定 */
var handler = {
message: "event handler",
handlerClick: function () {
alert(this.message);
}
};
var btn = document.getElementById("mybtn");
btn.addEventListener("click", handler.handlerClick.bind(handler), false);

只要是将某个函数指针以值的形式进行传递，同时该函数必须在特定环境中执行，就应该用函数绑定
主要应用与事件处理程序以及setInterval（） setTimeout（） 比普通函数需要更多的内存，所以最好必要时用

5 .函数柯里化（function currying）——用于创建已经设置好了一个或者多个参数的问题
函数柯里化基本方法和函数绑定时一样的，使用一个闭包返回一个函数
动态创建柯里化：调用另一个函数并为他传入要柯里化的函数和必要的参数

/* 函数柯里化：调用另一个函数并为他传入要柯里化的函数和必要的参数
主要工作 就是将返回函数的参数进行排序
concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
*/
function curry(fn) {
var args = Array.prototype.slice.call(arguments, 1);//arguments中第一个参数时fn 所以要从1开始slice（）
return function () {
var innerArgs = Array.prototype.slice.call(arguments);
var finalArgs = args.concat(innerArgs);
return fn.apply(null, finalArgs);//调用函数fn自己本身，apply的第一个参数就是null，finalArgs就是传入的参数
}
}

es5中bind（）方法也实现了柯里化
// bind()的柯里化
var handler={
message:"event handler",
handlerClick:function(name,event){
alert(this.message+":"+name+":"+event.type);
};
}
var btn=document.getElementById("mybtn");
btn.addEventListener('click',handler.handlerClick.bind(handler,"mybtn"));

 

6. 防篡改对象
　　1. 不可扩展的对象

var person={name:"sundjly"};
Object.preventExtensions(person);//不能再给person添加属性和方法 但仍然可以修改 删除已有的成员
// 使用Object.isExtensible（）方法确定对象是否可以扩展
Object.isExtensible(person);//false

　　　　1. 1密封的对象（sealed object）：密封对象不可扩展，而且已有属性方法不能删除，

Object.seal(person);
Object.isSealed(person);//判断对象是否被密封

　　　　1.2冻结对象 Object.freeze(person);//无法对对象做出操作

7. 高级定时器：
js是单线程的，由代码队列先后顺序执行。js中没有任何代码是立即执行的，但一旦进程空闲则尽快执行。
setInterval:这种重复定时器的规则有两个问题：
　　　　1. 某些间隔会被跳过
　　　　2. 多个定时器的代码执行之间的间隔可能比预期小

/* 避免setInterval（）重复定时器的两个缺点，可以使用链式setTimeout（）调用
这个模式链式调用setTimeout()函数，每次函数执行的时候都会创建一个新的定时器，第二个setTimeout调用arguments.callee
获取当前函数的引用
优点：在前一个定时器代码执行之前，不会向队列插入新的定时器代码，确保不会有任何缺失的间隔，
而且它可以保证在下次定时器代码执行之前，至少等待间隔时间，避免了连续运行。
*/
setTimeout(function() {
// 处理函数
setTimeout(arguments.callee, interval);
}, interval);

具体的例子：

setTimeout(function () {
    var div = document.querySelector("#div");
    left = parseInt(div.style.left) + 5;
    div.style.left = left + "px";
    if (left < 200) {
        setTimeout(arguments.callee, 50);
    }
}, 50);

 

8.Yielding Processes
　　1. 脚本长时间运行的的原因：
　　　　a. 过长的，过深嵌套的函数调用
　　　　b. 进行大量处理的循环
　　2. 如果处理不必同步完成，数据不必按顺序完成，那么可以使用定时器分割循环——数组分块（array chunking）
　　　　a. 基本思路：为要处理的项目创建一个队列，然后使用定时器取出下一个要处理的项目进行处理，接着在设置另一个定时器

/* 
数组分块技术：shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
array变量的本质就是一个“待办事宜”列表，包含要处理的列表
*/
setTimeout(function () {
    // 取出第一个条目并处理
    var item = array.shift();
    process(item);
    // 若还有条目，再设置定时器
    if (array.length > 0) {
        setTimeout(arguments.callee, 100);
    }
}, 100);

 

　　3.

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

一旦某个函数需要花费50ms以上的时间完成，那么最好考虑能否将任务分割为一系列可以使用定时器的小任务

9 函数节流
DOM操作比起非dom操作交互需要更多的内存和CPU时间，连续尝试过多的DOM相关操作可能会导致浏览器挂起，崩溃。尤其是IE中onresize事件，为了绕开这个问题，可以使用定时器对该函数进行节流。
基本思路：代码可以在间断的情况下连续重复的执行，目的只有在执行函数的请求停止一段时间之后才执行：

/* 函数节流：
 */
var processor = {
    timeoutID: null,
    // 实际进行处理的方法
    performProcessing: function () {
        // 实际执行的代码
    },
    // 初始处理调用的方法
    process: function () {
        clearTimeout(this.timeoutID);
        var that = this;
        this.tomeoutID = setTimeout(function () {
            that.performProcessing();
        }, 100);
    }
};
// 尝试开始执行
processor.process();
// 简化
function throttle(method, context) {
    clearTimeout(method.tId);
    method.tId = setTimeout(function () {
        method.call(context);
    }, 100);
}
// 列子
function resizeDiv() {
    var div = document.querySelector("#div");
    div.style.height = div.offsetWidth + "px";
}
window.onresize = function () {
    throttle(resizeDiv);
}

 

只要代码是周期性执行的，都要用函数节流，控制处理的频率，确保浏览器不会再短时间内进行过多的计算

10 自定义事件：
事件——一种叫观察者的设计模式（创建松散耦合代码的技术）
观察者模式是由两类对象组成：主体和观察者。主体负责发布事件，观察者通过订阅这些事件来观察主体，在DOM中，DOM元素就是主体，你的事件处理程序就是观察者
事件是与DOM交互最常见的方式。
自定义事件的适用场景：当代码中存在多个部分在特定时刻互相交互的情况下

/* 自定义事件 */
function EventTarget() {
    this.handlers = {};
}
EventTarget.prototype = {
    constructor: EventTarget,
    addHandler: function (type, handler) {
        if (typeof this.handlers[type] == "undefined") {
            this.handlers[type] = [];
        }
        this.handlers[type].push(handler);
    },
    fire: function (event) {
        if (!event.target) {
            event.target = this;
        }
        if (this.handlers[event.type] instanceof Array) {
            var handlers = this.handlers[event.type];
            for (var index = 0; index < handlers.length; index++) {
                handlers[index](event);
            }
        }
    },
    removeHandler: function (type, handler) {
        if (this.handlers[type] instanceof Array) {
            var handlers = this.handlers[type];
            for (var index = 0; index < handlers.length; index++) {
                if (handlers[index] == handler) {
                    break;
                }
            }
            handlers.slice(index, 1);
        }
    }
};

function handleMessage(event) {
    alert("message received" + event.message);
}
var target = new EventTarget();
target.addHandler("message", handleMessage); //添加事件处理程序
target.fire({
    type: "message",
    message: "hello world"
}); //触发事件
target.removeHandler("message", handleMessage); //删除事件处理程序

 

12 拖放

/* 拖放
<div class="draggable" style="position:absolute; background:red;"></div>
*/
var DragDrop = function () {
// DragDrop对象封装了拖放的所有基本功能，这是一个单例，并使用了模块模式来隐藏某些实现细节 但是该方法没有提供任何方法表示拖动开始，正在拖动，或者已经结束
var dragging = null, //存放被拖动的元素
diffX = 0,
diffY = 0;

function handleEvent(event) {
// 获取事件目标
var target = event.target;
// 确定事件类型
switch (event.type) {
case "mousedown":
if (target.className.indexof("draggable") > -1) {
dragging = target;
diffX = event.clientX - target.offsetLeft;
diffY = event.clientY - target.offsetWidth;
}
break;
case "mousemove":
if (dragging != null) {
// 指定位置
dragging.style.left = (event.clientX - diffX) + "px";
dragging.style.top = (event.clientY - diffY) + "px";
}
break;
case "mouseup":
dragging = null;
break;

}
};
return {
enable: function () {
document.addEventListener("mousedown", handleEvent, false);
document.addEventListener("mousemove", handleEvent, false);
document.addEventListener("mouseup", handleEvent, false);
},
disable: function () {
document.removeEventListener("mousedown", handleEvent, false);
document.removeEventListener("mousemove", handleEvent, false);
document.removeEventListener("mouseup", handleEvent, false);
}
}
}();