开发中比较容易理解的代码套路

开发中比较容易理解的代码套路

链式编程

所谓链式编程即是函数调用后返回对象本身

var calculator = {
    total:0,
    add (n) {
        // 模拟执行功能
		this.total += n;
        // 为了能在调用完add()后继续.substruct() 因此我们返回对象本身
        return this;
    },
    subtract(n) {
        this.total -= n;
        return this;
    }
}
// 调用
calculator.add(5).add(5).subtract(2).total; // 8

高阶函数应用-(添加数据并提供删除方法)

举个栗子:我们有一些业务需要添加元素到数组中,但同时也可能过会又要将其移除。更好的方式是我们把他们封装成函数,并利用高阶函数闭包的特性来标记删除,这样就减少了去查找这个元素的问题了

var students = [];
function addStudent (stu) {
    // 加入  通过形参标记该学员
    students.push(stu);
    return function () { 
        // 利用闭包获取stu
        var index = students.indexOf(stu);
        // 删除该学生
        students.splice(index);
    }
}
var stu = { name:"小明" };
// 试用一下
var stu1 = addStudent(stu);
var stu2 = addStudent({name:"小红"});
// 一年想到需要删除了,我们不需要查找他们了
stu1(); // 删除小明
stu2(); // 删除小红

利用Promise链切入(延迟执行)

Promise不仅可以帮助做异步流程控制,同时啥步流程控制也能做,当然更重要是延迟执行和异步中保证顺序,比如步骤A到步骤B,中间我们要等等,也步确定啥时候完成,因此可以先定义好两个步骤,把A步骤的resolve保存起来等待需要调用的时候调用即可(不要试图和回调函数去比较,因为Promise本身就是为了解决回调函数不优雅的问题)

// 任务A
function task1() {
    setTimeout(function(){
		// 第一件事
    },2000);
}
function task2() {
    setTimeout(function(){
		// 第二件事
    },1000);
}
// 我先让第一件事执行,并保存其实例和resolve
var token = (function(){
    var next;
    var p = new Promise(function(resolve){
        // 获取放行的钥匙
        next = resolve;
		task1();
    });
	return {
        promise:p,
        next:next
    }
})();
// 定义第二件事
token.promise.then(task2);
// 想让第二件事执行的话,看我心情咯,来个定时器吧
setTimeout(function () {
    // 就现在吧,做第二件事吧(延迟执行)
    token.next();
},Math.random() * 1000 );



通过中间层来解决问题(装饰者模式)

不是有句话是JS中任何问题都可以通过中间层来解决,比如我们写了一个吃饭的功能,突然想起来饭前要洗手,那么怎么做呢?用你想想的中间层来对比我写的中间层,想想看有什么不同?!

var obj = {
    eat:function () {
		console.log("我愉快的吃饭..");
    }
}
obj.wash = function () {
    console.log("洗手");
}
// 装饰者模式
obj.plus = function (fn1,fn2) {
    fn1();
    return fn2(); 
}
// 突然学习到《《《饭前要洗手》》》,怎么办?
obj.plus(obj.wash,obj.eat);

单例模式

有时我们需要全局中有一个唯一的实例,而不是new一次就一个的时候,就用下面代码吧,不过细节要注意以下

var Leader = (function() {
    var instance; // 闭包不让外部访问
    return function (name) {// 构造函数
         if (instance) return instance;
         instance = this;
         this.name = name;
    }
})();

new Leader("凃老师"); // { name:"凃老师"}
new Leader("启道学院"); // { name:"凃老师"}

图片