前端设计模式 - 下——栽の地 止： ukoou.com/resource/1182
一、什么是设计模式 定义：设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。在面向对象软件设计过程中针对特定问题的优雅而简洁的解决方案。 设计模式遵循一下几种原则： 1、开闭原则：对扩展开放，对修改关闭 2、单一职责原则：一个类只负责一个功能领域中的相应职责 3、里氏代换原则：所有引用基类的地方必须能透明地使用其子类的对象 4、依赖倒转原则：依赖于抽象，不能依赖于具体实现 5、接口隔离原则：类之间的依赖关系应该建立在最小的接口上 6、合成/聚合复用原则：尽量使用合成/聚合，而不是通过继承达到复用的目的 7、最少知道原则：一个软件实体应当尽可能少的与其他实体发生相互作用 二、为什么要了解设计模式 设计模式说白了就是前辈们对自己代码经验的总结，目的是为了让我们在遇到类似或相同的问题的时候有经验可以参考或借鉴使用，使得代码可复用、更容易被他人理解。 1、设计模式可以让你知道在某些场景下如何设计出适合该场景的架子。如果只追求去实现一个功能，没有做其他的考虑，以后需要增加新功能或者做一些改动的时候，可能就会将代码改的面目全非，难以维护，不熟悉代码的人接手干活的话，会出现根本无从下手的问题； 2、如果想要提高自己的能力，去学习一些框架或者库的源码的时候，了解设计模式也有助于去理解源码当中应用到的一些设计思想，帮助自己更好的成长； 三、前端中常见的设计模式 设计模式按照分类分为三大类：创建型模式、结构型模式、行为型模式；总共是有23种设计模式。在这里我只想根据我做过的项目经验和自己学习设计模式过程中的一些理解来谈一谈前端中常见的几种设计模式。通过介绍主要思想结合案例的代码去和大家一起分享以下的几种设计模式。 1、工厂模式 什么是工厂模式？工厂模式是用来创建对象的一种最常用的设计模式。我们不暴露创建对象的具体逻辑，而是将逻辑封装在一个函数中，那么这个函数就可以被视为一个工厂。说白了就是像工厂一样重复的产生类似的产品，工厂模式只需要我们传入正确的参数，就能生产类似的产品； 生活中的实例：我们去饭店吃饭，只需要知道菜名，饭店后厨就能够做出相应的菜，而不需要关注具体每道菜的材料、调料以及烹饪方法。 工厂模式的分类：工厂模式根据抽象程度的不同可以分为： a、简单工厂 b、工厂方法 c、抽象工厂 工厂模式的优点：我们可以在不动之前原逻辑的基础上，继承和拓展新的功能，这样我们就可以提高效率，之前写好的功能可以复用，而且可以站在前人的肩膀上，不断拓展。 在实际的项目中，我们常常需要根据用户的权限来渲染不同的页面，高级权限的用户所拥有的页面有些是无法被低级权限的用户所查看。所以我们可以在不同权限等级用户的构造函数中保存该用户能够看到的页面，再根据权限实例化用户。
前端设计模式案例
策略模式 定义 : 要实现某一个功能，有多种方案可以选择。我们定义策略，把它们一个个封装起来，并且使它们可以相互转换。 策略 + 组合，绝配啊，老哥！
// 维护权限列表
const jobList = ['FE', 'BE'];
// 策略
var strategies = {
checkRole: function(value) {
return value === 'juejin';
},
checkGrade: function(value) {
return value >= 1;
},
checkJob: function(value) {
return jobList.indexOf(value) > 1;
},
checkEatType: function(value) {
return value === 'eat melons';
}
};
我们已经写完了策略，接下来要做的就是验证了~
// 校验规则
var Validator = function() {
this.cache = [];
// 添加策略事件
this.add = function(value, method) {
this.cache.push(function() {
return strategies[method](value);
});
};
// 检查
this.check = function() {
for (let i = 0; i < this.cache.length; i++) {
let valiFn = this.cache[i];
var data = valiFn(); // 开始检查
if (!data) {
return false;
}
}
return true;
};
};
function checkAuth(data) {
if (data.role !== 'juejin') {
console.log('不是掘金用户');
return false;
}
if (data.grade < 1) {
console.log('掘金等级小于 1 级');
return false;
}
if (data.job !== 'FE') {
console.log('不是前端开发');
return false;
}
if (data.type !== 'eat melons') {
console.log('不是吃瓜群众');
return false;
}
}
