当前位置:   article > 正文

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

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);
}
}
}();

 

转载于:https://www.cnblogs.com/sundjly/p/7898991.html

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/871238
推荐阅读
相关标签
  

闽ICP备14008679号