2018年03月_guanqingchao

原创 js设计模式之命令模式

命令模式就是将创建模块的逻辑封装在一个对象里，这个对象提供一个参数化的请求接口，通过调用这个接口并传递一些参数实现调用命令对象内部中的方法。现在我们需要做一个活动页面，平铺结构，比如每个预览产品图片区域，有一行标题，标题下面是产品图片，只是图片数量和排列不同。 //模块实现模块 var viewCommand=(function(){ var tpl={ //展示图片结...

2018-03-25 20:53:37 169

原创 js设计模式之模板方法模式

模板方法模式：父类定义一个基本的操作算法骨架，而将一些具体的实现步骤延迟在子类中，使得子类不要改变父类的算法结构可以实现一些拓展功能。创建基本提示框 var Alert = function(data){ //如果没有数据则返回，防止后面程序执行 if(!data) return; this.content=data.content; //创建...

2018-03-25 13:43:39 156

原创 js设计模式之桥接模式

桥接模式主要是将实现层（元素绑定的事件）与抽象层（修饰页面的ui逻辑）解耦例如：管管赤脚不害怕等级1 消息5 先在要实现鼠标移动上去有hover的效果，那么我们一步一步实现： function g(tag){ return document.getElementByTagName(tag); } var spans=g('span...

2018-03-23 12:34:12 250

原创 js设计模式之装饰者模式

装饰着模式：对原有对象进行包装，不改变原有对象的基础上，满足新的需求。应用场景：比如现在有用户输入表单，电话输入框，地址输入框等等，新需求是默认输入框显示一行提示文案，用户点击输入框时文案消失。 var input=docuemnt.getElementById('tel-input);//输入框元素 var warnText=docuemnt.getElementById('tel-w...

2018-03-23 11:11:20 131

原创 js设计模式之适配器模式

适配器模式往往用于适配两个接口不兼容的问题，在js中应用更为广泛，比如适配两个代码库、适配前后端数据。 1.参数适配比如某个方法中需要传入多个参数 function doSomething(name,title,age,type,color,size){} 记住这些参数顺序很难，所以我们经常是以一个参数的形式传进去 obj.name:name obj.title:title obj.ag...

2018-03-23 10:25:48 152

原创 js设计模式之外观模式

外观模式其实就是提供一个更高级的统一的接口，常用于处理兼容性统一或者封装，比如，处理绑定事件，下面以下两个例子为例： 1. 封装绑定事件： function addEvent(dom,type,fn){ if(dom.addEventListener){ dom.addEventListener(type,fn,false) } else if(dom.at...

2018-03-23 09:24:07 225 1

guanqingchao的博客