八年前端开发之路中遇到的一些实用技巧分享——代码思路及通用场景-编程知识

八年前端开发之路中遇到的一些实用技巧分享——代码思路及通用场景

在这里插入图片描述

在开发中比较有用的代码思路

- 1. 链式编程
- 2. 高阶函数应用-(添加数据并提供删除方法)
- 3. 利用Promise链切入（延迟执行）
- 4. 通过中间层来解决问题（装饰者模式）
- 5. 单例模式

1. 链式编程

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

let 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

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

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

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

3. 利用Promise链切入（延迟执行）

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

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

4. 通过中间层来解决问题（装饰者模式）

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

let obj = {eat:function () {console.log('我愉快的吃饭..');}
}
obj.wash = function () {console.log('洗手');
}
// 装饰者模式
obj.plus = function (fn1,fn2) {fn1();return fn2();
}
// 突然学习到 “饭前要洗手”，怎么办？ 是不是很优雅
obj.plus(obj.wash,obj.eat);

5. 单例模式

有时我们需要全局中有一个唯一的实例，而不是new一次就一个的时候，下面这个例子就很管用。

let Leader = (function() {let instance; // 闭包不让外部访问return function (name) { // 构造函数if (instance) return instance;instance = this;this.name = name;}
})();new Leader('欧阳前端'); // { name:'欧阳前端'}
new Leader('帅哥美女关注一下'); // { name:'帅哥美女关注一下'}