八年前端开发之路中遇到的一些实用技巧分享—

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

news2024/11/19 17:34:43

在这里插入图片描述

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

- 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 () {
       // 利用闭包获取stu
       let 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:'帅哥美女关注一下'}