js的设计模式
单例模式
- 定义：只有一个实例，可以全局访问
- 主要解决： 一个全局使用的类，频繁的创建和销毁
- 何时使用： 当你想控制实例的数目，节省系统化资源的时候
- 如何实现：判断系统是否已经有这个单利，如果有则返回，没有则创建
- 单利模式优点：内存中只要一个实例，减少内存的开销，尤其是频繁的创建和销毁实例（比如说首页页面的缓存）
- 使用场景：1.全局的缓存 2.弹窗
//前景
class Person {
constructor(name, sex) {
this.name = name;
this.sex = sex;
//实际开发中，更多的是做初始化的操作
}
say() {
console.log('web');
}
}
let person1 = new Person('阿羡','man');
console.log(person1.name);
person1.say();
console.log(person1.say === Person.prototype.say);
//es6实现单例
class demo {
constructor(name, creator, products){
this.name = name;
this.creator = creator;
this.products = products;
}
static getInstance(name, creator, products) {
if(!this.instance){
this.instance = new demo(name, creator, products);
}
return this.instance;
}
}
let demo1 = demo.getInstance(1,2,3);
let demo2 = demo.getInstance(4,5,6);
console.log(demo1 === demo2); //true
策略模式
- 定义一系列的算法，把它们封装起来，并且他们之间可以相互替换
- 核心：将算法的使用和算法的实现分离开来
实战演练
- 绩效为S的人年终奖有4倍工资，为A的有3倍...
1.传统写法缺点：缺乏弹性
let calculate = function(level,salary){
if(level == "S"){
return salary * 4
}
if(level == "A"){
return salary * 3
}
}
2.算法的使用和实现分离
let pS = function(){};
pS.prototype.calculate = function (salary) {
return salary * 4
}
let pA = function(){};
pA.prototype.calculate = function (salary) {
return salary * 3
}
let Bouns = function() {
this.salary = null;
this.strategy = null;
}
Bouns.prototype.setSalary = function (salary) {
this.salary = salary;
}
Bouns.prototype.setStrategy = function (salary) {
this.strategy = strategy;
}
Bouns.prototype.getBouns = function () {
return this.strategy.calculate(this.salary)
}
let bouns = new Bouns();
bouns.setSalary(10000);
bouns.setStrategy(new pS());
console.log(bouns.getBouns());
//函数也是对象
let strategies = {
"S": function (){
return salary * 4;
},
"A": function (){
return salary * 3;
}
}
let getBouns = function (level, salary){
return strategies[level](salary)
}
- 运用策略模式封装validator.add(value,'isNonempty','用户名不能为空')等规则的表单校验
const { ValidationError } = require("schema-utils")
let strategies = {
isNonEmpty: function (value,errorMsg){
if(value == '') {
return errorMsg
}
},
minLength: function (value, length, errorMsg) {
if(value.length < 6) {
return errorMsg
}
},//minLength:6
isMobile: function (value, errorMsg) {
if(!/^1[3|5|8][0-9]{9}$/.test(value)) {
return errorMsg
}
}
}
let validateFun = function () {
let validate = new Validator();
validate.add(registerForm.userName,'isNonEmpty','用户名不能为空');
//开启验证
let errorMsg = Validator.start();
return errorMsg;
}
let Validator = function(){
this.cache = [];
}
Validator.prototype.add = function (dom, rule,errorMsg) {
let ary = rule.split(":");
this.cache.push(function(){
let strategy = ary.shift();//用户选择的验证规则
ary.unshift(dom.value);
ary.push(errorMsg);
return strategies[strategy].apply(dom, ary)
//return strategies[strategy](...ary)
})
}
Validator.prototype.start = function() {
for (let index = 0, vaFunc;vaFunc = this.cache[index++]; ) {
let msg = vaFunc();
if (msg) {
return msg
}
}
}
registerForm.onsubmit = function(){
let errorMsg = validateFun()
if(errorMsg){
alert(errorMsg)
return false
}
}
发布者订阅者模式
- 就是对某个对象进行订阅，如果该对象发生变化，就会通知到订阅者做出相应的改变
如何实现
- 首先想好谁是发布者
- 然后给发布者添加一个缓存列表，用于存放回调函数用来通知订阅者
- 最后就是发布消息，发布者遍历这个缓存列表，依次触发里面存放的订阅者回调函数
let shopObj = {};//发布者
shopObj.list = {}; //缓存列表 存放订阅者的函数
shopObj.listen = function(key,fn){
if(!this.list[key]){
this.list[key] = [];
}
this.list[key].push(fn)
}
shopObj.trigger = function(){
let key = Array.prototype.shift.call(arguments);
let fns = this.list[key];
if (!fns || fns.length == 0){
return
}
for (let index = 0,fn; fn = fns[index++]; ) {
fn.applay(this,arguments);
// fn(...arguments)
}
}
shopObj.remove = function(key, fn) {
let fns = this.list[key];
if(!fns) {
return false
}
if(!fn){
fn && (fns.length = 0);
}else {
for (let index = fns.length-1; index >= 0; index--) {
let _fn = fns[index];
if(_fn == fn){
fns.splice(index,1)
}
}
}
}
shopObj.listen('key',function(){})
//改版
let Event = (function(){
let list = {},
listen,
trigger,
remove;
listen = function(){
//如上
};
trigger = function(){}
remove = function(){}
})()
- npm包有 pubsub-js
使用场景
- 改进异步操作中的强耦合
实战演练
在传统的商城登录模块中
- 传统登录后相关模块的信息需要更新；但是这种方式如果后期更换了方法名称或者新增了模块，需要修改很多版块，耦合性比较高，维护难
login.succ(function(data) {
Header.setAvator(data.avatar);
nav.setAvator(data.avatar);
message.refresh();
cart.refresh();
//等等
address.refresh()
})
- 采用发布者订阅者模式后，登录后主动触发相应的模块，各个模块相互独立
//登录成功触发消息
$.ajax(`http://xxxx/login`,function(data){
login.trigger('loginSucc', data);
})
//各个模块监听登录成功的消息
let header = (function(){
login.listen('loginSucc',function(data) {
header.setAvatar(data.avatar);
});
return {
setAvatar : function(data){
console.log('设置header模块的头像');
}
}
})()