JavaScript设计模式
大笨儿钟
这个作者很懒,什么都没留下…
展开
-
如何在前端开发时优雅的使用pipe
前言pipe其实是一种设计思想,经常被用于架构设计,也能体现‘函数式编程’ 思想 — 通过组合一系列的函数来完成一个既定的功能。而在前端开发中,本身强调 组合大于继承,所以掌握这种思想是十分重要的。实例pipe大概像如下那样使用// 假设有个三个方法,分别实现+1, 求与2的乘积,-1 这三个功能let add = n => n + 3;let multiple = n => n * 2;let minus = n => n - 1;// 假设现在有个pipe方法con原创 2020-12-30 12:45:17 · 1007 阅读 · 2 评论 -
惰性单例的应用
单例模式是比较常见的一种设计模式,基于此可以延伸出一个惰性单例的使用方法,以登录框为例// version 1 缺点是初始化时就会执行登录框的实例化,但是有时候这个动作不一定会触发const loginDialog = (function(){ const dialog = document.createElement('div') dialog.innerHTML = '登录' // 设置样式 dialog.style.display = 'none' dialog.style.xxxx =原创 2020-12-16 10:26:45 · 460 阅读 · 0 评论 -
JavaScript 设计模式 --- 迭代器模式
前言迭代器模式应该算是比较 “低调” 的设计模式了,因为这种模式在日常工作中经常遇到,但由于本身这种模式的思想十分简单,所以一般不会特别的去关注他。迭代器模式注重的是如何去迭代集合中每一个元素,大部分语言都内置了实现迭代器接口的数据结构,并且暴露出对应的方法供我们使用。JavaScript中的迭代器模式体现常用的数组就是一个可以迭代的对象,它提供了一个forEach方法可以让我们快速使用...原创 2020-04-26 19:19:06 · 190 阅读 · 0 评论 -
JavaScript 设计模式 --- 发布订阅模式
前言对于前端同学而言,发布-订阅模式应该是最熟悉的设计模式了。平常写的最多的事件监听就是一个最好的例子。var dom = document.querySelector('xxx');dom.addEventListener('click', () => { //do something });dom.click();这里开发同学订阅这个dom对象的click事件,并且传入了一个...原创 2020-03-25 15:49:31 · 143 阅读 · 0 评论 -
JavaScript 设计模式 --- 策略模式
前言在我们编写业务代码时,分支结构应该是我们最常用到的结构了。下面先模拟一个简单的业务场景:要根据当前用户登录的身份(达人/机构/卖家)和对应的角色等级来展示用户的logo// 假设有这么一个基于React的logo组件<logo role={role} level={level} />// 假如内部的实现是这样子的render(){ const { role, le...原创 2020-03-18 18:17:49 · 151 阅读 · 0 评论