codingmeup

--- 桥接模式-设计模式 --- 桥接模式 Bridge === **桥接模式将抽象部分与它的实现部分分离，是它们都可以独立地变化。** 它很好的支持了开闭原则和组合锯和复用原则。 实现系统可能有多角度分类，每一种分类都有可能变化，那么就把这些多角度分离出来让他们独立变化，减少他们之间的耦合.  桥接模式主要有4个角色组成： 1. 抽象类 1. 扩充抽象类 1. 实现类接口 1. 具体实现类 ###案例一分析 ````js var forEach = function (arr, fn) { for (var...

--- 建造者模式（Builder）-设计模式 --- 建造者模式（Builder） === 将一个复杂对象的构建与它的表示分离，使得同样的构建过程可以创建不同的表示。 **各执其职，拆解流程**  场景： 一般产品的建造很复杂，那么请用工厂模式，如果产品的建造更复杂，那么请用建造者模式。 跟工厂模式只是多了一个导演类。 *** ````js //应聘者信息 //人类，有技能，爱好,姓名，工作---Product var Human=function(param){ this.skill=param&&param.skill||'保密'; this.hobby=param&&param.hobby||'保密'; this.name={};//partA this.work={};//partB } Human.prototype={ getSkill : function(){ return this.skill; }, getHobby...

--- 命令模式-设计模式 --- 命令模式 ==== 用于将一个请求封装成一个对象，从而使你可用不同的请求对客户进行参数化 ### 代码 ````js var CanvasCommand=(function(){ var canvas=document.getElementById('canvas'), ctx = canvas.getContext('2d'); //内部命令集对象 var Action = { fillStyle : function(c) { ctx.fillStyle = c; }, fillRect...

--- 组合模式-设计模式 --- 组合模式 Composite === 组合模式：将对象组合成树形结构以表示“部分-整体”的层次结构，组合模式使得用户对单个对象和组合对象的使用具有一致性。  组合模式主要有三个角色： 1. 抽象组件（Component）：抽象类，主要定义了参与组合的对象的公共接口 2. 子对象（Leaf）：组成组合对象的最基本对象 3. 组合对象（Composite）：由子对象组合起来的复杂对象 理解组合模式的关键是要理解组合模式对单个对象和组合对象使用的一致性，我们接下来说说组合模式的实现加深理解。 ### 案例一分析 最简单的组合模式，HTML的DOM结构，addClass 的实现 ````js //jq $(".test").addClass("noTest").remove("test"); ```` 模拟一下addClass的实现 ````js var addClass =...

--- 装饰模式-设计模式 --- 装饰模式 Decorator === 装饰模式动态地给一个对象添加一些额外的职责，就增加功能来说，它比生成子类更灵活。也可以这样说， 装饰模式把复杂类中的核心职责和装饰功能区分开了，这样既简化了复杂类，有去除了相关类中重复的装饰逻辑。 装饰模式没有通过继承原有类来扩展功能，但却达到了一样的目的，而且比继承更加灵活，所以可以说装饰模式是继承关系的一种替代方案。  1. 抽象构件(Component)角色：给出一个抽象接口，以规范准备接收附加责任的对象。 1. 具体构件(ConcreteComponent)角色：定义一个将要接收附加责任的类 1. 装饰角色(Decorator)：持有一个构件(Component)对象的实例，并定义一个与抽象构件接口一致的接口 1. 具体装饰角色(ConcreteDecorator)：负责给构件对象“贴上”附加的责任 Javascript中的对象添加新的属性是一个非常直接了当的过程。 装饰模式解耦了核心和装饰功能，锁业也是强调了松耦合。 ### 案例一分析 ````js // 最简单的装饰 function vehicle( vehicleType ){...

--- 外观模式（facade）-设计模式 --- 外观模式（facade） === 为一组复杂的子系统接口提供一个更为高级的统一接口，使得对接子系统的访问更容易。套餐饭~~~~  ### 例子 ````js var getEvent=function(event){ return event || window.event; } ```` *** ````js var A={ g : function(id){ return document.getElementById(id); }, css...

--- 工厂方法模式（Factory Method）-设计模式 --- 工厂方法模式（Factory Method） === 一个创建产品对象的工厂接口，让子类决定实例化哪一个类，将实际创建工作推迟到子类当中  ### 场景 轻松创建多个类的实例对象，避免了使用者与对象类间的耦合。 *** 学科书本的广告简介 ````js //广告数据 //用工厂方法模式（加上了安全保证） var Factory=function(type,content){ if(this instanceof Factory){ return new this[type](content); } else{ return new...

--- 享元模式-设计模式 --- 享元模式 Flyweight === 享元模式为运用共享技术有效的支持大量细粒度的对象。因为它可以通过共享大幅度地减少单个实例的数目，避免了大量非常相似类的开销。. 享元模式是一个类别的多个对象共享这个类别的一个对象，而不是各自再实例化各自的对象。这样就达到了节省内存的目的。  在JS中，享元模式主要有下面几个角色组成： 1. 客户端：用来调用享元工厂来获取内在数据的类，通常是应用程序所需的对象， 1. 享元工厂：用来维护享元数据的类 1. 享元类：保持内在数据的类 ### 案例一分析 ````html 选项1 选项2 选项3 选项4 选项5 选项6 ```` 绑定点击事件，一般用下面的方式绑定 ````js //jq $(".item").on("click",...

--- 迭代器模式-设计模式 --- 迭代器模式 === 在不暴露对象内部结构的同时，可以顺序的访问聚合对象内部的元素 ### 需了解的内容 1. for-of 1. ... 展开符 1. iterator for-of和for-in之间的差别 ````js var list = [3, 5, 7]; list.foo = 'bar'; for (var key in...

--- 惰性模式-设计模式 --- 惰性模式 ==== 减少每次代码执行时的重复性分支判断 ### ````js var A={ on:function(el,type,fn){ if(el.addEventListener){ el.addEventListener(type,fn,false); }else if(el.attachEvent){ el.attachEvent('on' + type,fn) }else { el['on' + type]=fn; } } } ```` ````js var A={...