is设计模式
guanqingchao
这个作者很懒,什么都没留下…
展开
-
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 评论 -
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 · 150 阅读 · 0 评论 -
js设计模式之装饰者模式
装饰着模式:对原有对象进行包装,不改变原有对象的基础上,满足新的需求。 应用场景:比如现在有用户输入表单,电话输入框,地址输入框等等,新需求是默认输入框显示一行提示文案,用户点击输入框时文案消失。 var input=docuemnt.getElementById('tel-input);//输入框元素 var warnText=docuemnt.getElementById('tel-w...原创 2018-03-23 11:11:20 · 128 阅读 · 0 评论 -
js设计模式之桥接模式
桥接模式主要是将实现层(元素绑定的事件)与抽象层(修饰页面的ui逻辑)解耦 例如: 管管赤脚不害怕 等级1 消息5 先在要实现鼠标移动上去有hover的效果,那么我们一步一步实现: function g(tag){ return document.getElementByTagName(tag); } var spans=g('span...原创 2018-03-23 12:34:12 · 249 阅读 · 0 评论 -
js设计模式之模板方法模式
模板方法模式:父类定义一个基本的操作算法骨架,而将一些具体的实现步骤延迟在子类中,使得子类不要改变父类的算法结构可以实现一些拓展功能。 创建基本提示框 var Alert = function(data){ //如果没有数据则返回,防止后面程序执行 if(!data) return; this.content=data.content; //创建...原创 2018-03-25 13:43:39 · 156 阅读 · 0 评论 -
js设计模式之命令模式
命令模式就是将创建模块的逻辑封装在一个对象里,这个对象提供一个参数化的请求接口,通过调用这个接口并传递一些参数实现调用命令对象内部中的方法。 现在我们需要做一个活动页面,平铺结构,比如每个预览产品图片区域,有一行标题,标题下面是产品图片,只是图片数量和排列不同。 //模块实现模块 var viewCommand=(function(){ var tpl={ //展示图片结...原创 2018-03-25 20:53:37 · 169 阅读 · 0 评论 -
js设计模式之观察者模式
观察者模式又叫做发布-订阅模式,主要功能就是解耦。 有一个实际需求,在新闻评论模块, 当我们发布评论时,会在展示评论末尾处追加最新评论,同时消息模块的消息数量也会增加,删除评论留言区的评论时,消息模块数量相应的减少。 但是在项目开发中,往往不同模块由不同的人开发,消息模块,评论模块分别由不同的人开发。这个时候不想将几个独立的模块整合在一起,可以用观察者模式。 下面我...原创 2018-04-03 14:36:16 · 162 阅读 · 0 评论