前端设计模式

Posted 2020-11-28 fuguy

SOLID设计原则

• s: 单一原则:一个类只做一种类型责任，当这个类需要承当其他类型的责任的时候，就需要分解这个类
• o: 开放封闭原则:对外扩展是开放的,对于修改是封闭的
• l: 里氏置换原则:当一个子类的实例应该能够替换任何其超类的实例时，它们之间才具有is-A关系
• i: 接口分离原则:使用多个专门的接口比使用单一的总接口总要好
• d: 依赖倒置原则: 抽象不应该依赖于细节，细节应该依赖于抽象

单例模式

单例就是保证一个类只有一个实例，实现方法一般是先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回

应用场景

在Jquery中

jquery中只会创建一个$对象,会先去判断$对象是否存在,如果不存在创建一个新的对象

if(window.jQuery!=null){
  return window.jQuery;
}else{
    //init~~~~~~~
}

模态窗口

一般网站都会有用户系统,登录窗口或者toast提示,会去创建一个getInstance的静态方法来统一调用

工厂模式

工厂模式主要出现在面向对象创建实例的过程中,其本质是为了更方便生成实例

应用场景

React.createElement

React.createElement = function(tag, attrs, children) {
		return new Vnode(tag, attrs, children)
}

jquery

当我们在使用jquery的时候,直接返回的是一个jquery实例,而不是需要newJquery(′div′)才能够返回

window.$ = function(selector) {
  return new JQuery(selector);
}

函数缓存(备忘模式)

高阶函数

高阶函数就是那种输入参数里面有一个或者多个函数，输出也是函数的函数，这个在js里面主要是利用闭包实现的，最简单的就是经常看到的在一个函数内部输出另一个函数,每次执行都会缓存方法执行的结果

适配器模式

适配器模式是一对相对简单的模式。但适配器模式在JS中的使用场景很多，在参数的适配上，有许多库和框架都使用适配器模式；数据的适配在解决前后端数据依赖上十分重要。我们要认识到的是适配器模式本质上是一个”亡羊补牢”的模式，它解决的是现存的两个接口之间不兼容的问题，你不应该在软件的初期开发阶段就使用该模式；如果在设计之初我们就能够统筹的规划好接口的一致性，那么适配器就应该尽量减少使用。

redux为了和react适配，所有有mapStateToProps()这个函数来吧state转为Props外部状态，这样就可以从外部又回到组件内了。你看这个就是适配器模式(Adaptor)

weex跨端适配

观察者模式

• 发布 && 订阅
• 一对N(一对一,一对多)

Promise实现

function Promise(fn) {
    // 加入状态
    var state = ‘pending‘;
    var value = null;
    //callbacks为订阅数组，因为可能同时有很多个回调
    var callbacks = [];  
    //加入订阅数组
    this.then = function (onFulfilled) {
        if(state===‘fullfilled‘){
            callbacks.push(onFulfilled);
            //支持链式调用
            return this;
        }
    };
    //遍历订阅回调数组,执行回调
    function resolve(value) {
       // 加入setTimeout,保证先注册then,然后在执行回调
       setTimeout(function() {
        state = ‘fulfilled‘;
        callbacks.forEach(function (callback) {
            callback(value);
        });
    }, 0)
    }

    fn(resolve);
}

参考

30分钟，让你彻底明白Promise原理

Events模块

node.js中有一个底层的Events模块,被其他的模块大量使用,可以说是node非常核心的一个模块了.其本质还是一个观察者模式

const eventEmitter = require(‘events‘).EventEmitter

const emitter1 = new eventEmitter()

emitter1.on(‘some‘, info=> {
    console.log(‘fn1‘, info)
})
emitter1.on(‘some‘, info=> {
    console.log(‘fn2‘, info)
})	
emitter1.emit(‘some‘, ‘xxxx‘)

vue中的watch函数

vue有个订阅数据中心,有订阅队列、发布方法、还有通知方法

生命周期

还有vue与react中的生命周期钩子,下面是vue源码,在new Vue的时候使用callHook方法执行我们定义的方法

迭代器模式

迭代器模式就是为了简化有序集合的遍历产生的模式,统一遍历的方式,在ES6中通过Symbol.iterator标识数据是可遍历的

function each(data, callback) {
    //通过js提供的Symbol.iterator返回迭代器
    const iterator = data[Symbol.iterator]()
    let item = {done: false}
    while(!item.done) {
        item.iterator.next()
        if(!item.done) {
            callback(item)
        }
    }
}
let log = (data)=>{
    console.log(data)
}

let arr = [1,2,3,4,5,6]
let map = new Map()
map.set(‘a‘, 100)
map.set(‘b‘, 200)

each(arr)
each(map)

拥有迭代器模式的数据,可以通过for……of语法糖来遍历

  for(let item of data) {
        cb(item)
}