正文

前端设计模式(代码片段)

fuguy  fuguy  2022-12-04  216

关键词：

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)

前端常见的设计模式(代码片段)

设计模式一.结构型模式（StructuralPatterns）外观模式（FacadePattern）封装常用的简易api给其他模块使用例：//绑定事件functionaddEvent(element,event,handler)if(element.addEventListener)element.addEventListe 查看详情

前端——前端三种语言(代码片段)

前端三种语言、核心标签、常见标签、标签分类一、前端前端即网站前台部分，运在PC端，移动端等浏览器上展现给客户浏览的的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应... 查看详情

前端常用的设计模式和使用场景(代码片段)

设计原则最重要的思想：开放封闭原则对扩展开放对修改封闭工厂模式用一个工厂函数，创建一个实例，封装创建的过程。classFoo...functionfactory():Foo//封装创建过程，这其中可能有很多业务逻辑returnnewFoo(...arguments)应用场景-jQuery`$... 查看详情

前端设计模式(代码片段)

SOLID设计原则s:单一原则:一个类只做一种类型责任，当这个类需要承当其他类型的责任的时候，就需要分解这个类o:开放封闭原则:对外扩展是开放的,对于修改是封闭的l:里氏置换原则:当一个子类的实例应该能够替换任何其超类的... 查看详情

设计一个前端统计sdk(代码片段)

前端统计的范围-访问量PV-自定义事件（如统计一个按钮被点击了多少次）-性能-错误统计数据的流程（只做前端SDK，但是要了解全局）-前端发送统计数据给服务端-服务端接受，并处理统计数据-查看统计结果代码<!DOCTYPEhtml>&... 查看详情

前端也要学系列：设计模式之策略模式(代码片段)

做前端开发已经好几年了，对设计模式一直没有深入学习总结过。随着架构相关的工作越来越多，越来越能感觉到设计模式成为了我前进道路上的一个阻碍。所以从今天开始深入学习和总结经典的设计模式以及面向对象的几大原... 查看详情

前端面试总结(代码片段)

HTMLDoctype作用？标准模式与兼容模式各有什么区别??（1）、<!DOCTYPE>声明位于位于HTML文档中的第一行，处于标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现... 查看详情

前端设计模式之观察者模式(代码片段)

　　所谓的观察者模式我所认为的就是订阅发布。其中中间关于调度方法还有一点区别，这里就不多做叙述了　　接下来给大家分享下我对所谓的发布订阅的理解吧，其实这种设计理念在react体现在了跨组件通信中，原理就是订... 查看详情

前端设计文档模版（送给刚刚参加前端技术工作者们）(代码片段)

以下为公司通用的开发流程：一、需求背景及资源需求背景相关文档&资源需求文档:设计视觉稿:服务端IDL:第三方服务/SDK文档测试Case:埋点文档:运营资源列表(optional):走查以及验收文档:二、排期需求Timeline评审设计开发联... 查看详情

前端javascript设计模式--设计模式真实业务场景(代码片段)

设计原则—真实实例1.某打车公司的业务场景UML类图,如图所示:/***1.某打车公司的业务场景*1.打车时,可以打专车或者快车,任何车都有车牌号和名称;*2.不同的车价格不同,快车每公里1元,专车每公里2元;*3.行程开始时,显示车辆信息;*... 查看详情

前端javascript设计模式-大纲(代码片段)

前端JavaScript设计模式大纲废话不多说,上图有真相。1.一名合格的工程师必备条件:1.对前端开发有一定的设计能力。1.想要成为项目技术负责人,设计能力是必要的基础。2.从写好代码,到做好设计,设计模式是必经之路2.前端学习设... 查看详情

前端javascript设计模式--搭建开发环境(代码片段)

本章节的主要内容是–搭建开发环境因为所涉及到的知识点包含ES6语法,也为了我们的执行效率更高所以我们搭建一套自己需要的开发环境。如图所示:知识点大纲1.搭建开发环境2.什么是面向对象3.UML类图搭建开发环境1.初始化npm... 查看详情

前端javascript设计模式前奏--面向对象-class类(代码片段)

面向对象–class类1.类的声明1.1方式一:传统的使用构造函数的方式,模拟一个类的方式/***1.方式一:传统的使用构造函数的方式,模拟一个类的方式**1.这里我们就声明了一个Animal1类。*/functionAnimal1()//通过this来表明这是一个构造函数... 查看详情

设计模式(代码片段)

...关注前端的工程化。工程化在很大一部分在讨论的东西跟设计模式类似——其实设计模式本质上讨论的是可复用的面向对象框架。随着前端组件化程度越来越完善，我们应该对面向对象的方式如何解决问题或多或少有些了解，但... 查看详情

你知道前端开发常用的几种设计模式吗？(代码片段)

设计模式概览设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论，而不是现成的代码，当然每种设计模式都有每种语言中的具体实现方式。学习设计模式更多的... 查看详情

你知道前端开发常用的几种设计模式吗？(代码片段)

前端路由模式hash和history(代码片段)

hash模式hash模式的原理是依据window对象的onhashchange事件进行监听，它的特点是：虽然hash路径出现在URL中，但是不会出现在HTTP请求中，对后端完全没有影响，因此改变hash值不会重新加载页面。window.onhashchange=function(e)console.log(e);打... 查看详情

前端mvc变形记(代码片段)

背景：MVC是一种架构设计模式，它通过关注点分离鼓励改进应用程序组织。在过去，MVC被大量用于构建桌面和服务器端应用程序，如今Web应用程序的开发已经越来越向传统应用软件开发靠拢，Web和应用之间的... 查看详情