设计模式
Bright's Dream
计算机专业本科生,web技术爱好者
展开
-
每日JavaScript设计模式:Day4 单例模式
单例模式又指单体模式,是指只允许实例化一次的类,也就是对于某一个类型,该类型用于只能有一个实例,如果要获取该类型的实例,获取到的实例都是同一个。在JavaScript中单例模式一般用于创建命名空间,利用对象字面量,也可以利用闭包创建静态变量的单例和延迟创建的单例。实例:命名空间var Ming = { css: function(name, value){}, addClass: fun...原创 2019-03-30 12:21:56 · 105 阅读 · 0 评论 -
JavaScript设计模式:桥接模式
桥接模式桥接模式的主要形式提取代码中的公共的部分并抽象,达到代码复用和解耦的目的。举例var spans = getElementByTagNames('span');span[0].onmouseover = function(){ this.style.color = 'red'; this.style.background = '#ddd';}span[1].onmouseo...原创 2019-05-05 14:48:59 · 87 阅读 · 0 评论 -
每日JavaScript设计模式:Day 8装饰者模式
装饰者模式在不改变原对象的基础上,通过对其进行包装拓展(添加属性或者方法)使原有对象可以满足用户的更复杂需求。实例假定我们现在有一个方法及调用,如下:function changeData(target, key, newV) { target[key] = newV;}function callChangeData(){ let target = { a: 1 } ch...原创 2019-04-09 22:32:47 · 122 阅读 · 0 评论 -
每日JavaScript设计模式:Day5 外观模式
外观模式为一组复杂的子系统的接口提供一个更高级的统一接口,通过这个接口使得对子系统接口的访问更加容易,在JavaScript中有时也会用于对底层结构兼容性作统一封装。举个例子,我们想吃一顿美味的炖排骨,一种方式是我们自己做,买好排骨、萝卜、玉米、调料等,然后按照一定的步骤炖好排骨汤,然后品尝美味;另一种方式就是点个外卖,直接来一份排骨汤。对于第二种方式,我们是用户,需求是排骨汤,那么对于我们...原创 2019-04-03 17:52:51 · 84 阅读 · 0 评论 -
每日JavaScript设计模式:Day 7 代理模式
代理模式由于一个对象不能直接引用另一个对象,所以需要通过代理对象在这两个对象之间起到中介的作用实例跨域问题,在不同的域之间是不能直接访问的,这时候我们就需要一个对象来作为中间桥梁让两个对象能够相互访问。一类解决思路就是通过代理的思想,比如JSONP,ajax脚本不能够直接访问数据库,但是script标签可以,这时候script标签就可以充当代理的角色,让浏览器脚本和另一个域下的服务器进行通信...原创 2019-04-08 19:19:23 · 141 阅读 · 0 评论 -
每日JavaScript设计模式 Day3 原型模式
原型模式其实就是基于JavaScript的原型继承,对于一些共有的方法,我们将其放到基类的原型对象中。通过对象的方法或者属性调用时查找原型链的,这样可以实现对父类方法的重写。如下例:// 实例 图片轮播类var LoopImages = function(imgArr, container) { this.imagesArray = imgArr; this.container = c...原创 2019-03-28 16:34:54 · 110 阅读 · 0 评论 -
每日JavaScript设计模式:Day 6 适配器模式
适配器模式(adapter)将一个类(对象)的接口(方法或属性)转化成另外一个接口,以满足用户需求,使类(对象)之间的接口不兼容问题通过适配器得以解决。简单来说就是通过一个中间的接口,让两个格式不兼容的类/函数/数据等能够相互兼容。举个生活中的例子,mac电脑一般没有dvi接口(就是连台式显示器的接口),只有usb接口,那这个时候我们要连显示器怎么办呢?买一个usb转dvi的转换插头,这样就能...原创 2019-04-06 11:55:19 · 90 阅读 · 0 评论 -
每日JavaScript设计模式:Day2 建造者模式
建造者模式将一个复杂对象的构建层和表现层相互分离,同样的构建过程可以采用不同的表示。解释前面我们讨论过工厂方法模式,工厂方法模式主要用于创建某一类对象的实例或者创建某对象类簇,暴露出来的只是一个工厂方法的接口,使用这个接口的用户对实例的创建过程并不关心,他们所要做的只是调用工厂方法,然后获取相应的实例对象。但是对于复杂对象,每个对象可能由很多个不同的部分组成,这些成员有各自的特性,可以相互...原创 2019-03-27 13:11:10 · 74 阅读 · 0 评论 -
每日JavaScript设计模式:Day1 工厂模式
1 简单工厂模式又叫静态工厂方法,由一个工厂方法决定创建某一种产品对象类的实例,主要用来创建某一类对象// 实例:体育商品店var BasketBall = function(){}var FootBall = function() {}var Tennis = function() {}/** * 运动工厂 */var SportsFactory = functi...原创 2019-03-26 16:59:12 · 310 阅读 · 1 评论 -
JavaScript设计模式:组合模式
组合模式又称部分整体-模式,将对象合成树形结构以表示“部分整体”的层次结构。简单来说,就是将一个复杂的系统,拆分成功能相对独立的个体,然后通过这些个体的组合形成一个新的整体。举例class News { constructor() { this.children = []; this.element = null; } init() { throw new Error('...原创 2019-05-06 10:33:38 · 161 阅读 · 0 评论