JavaScript设计模式第27页

JavaScript设计模式与开发实践：惰性函数

Web开发中，因为浏览器之间的差异实现差异，一些嗅探工作总是不可避免的，比如我们需要在各个浏览器中能够通用事件绑定函数addEvent//一般写法 //缺点：当他每次被调用的时候都都会执行里面的if条件， varaddEvent=function(elem,type,handler){ if(window.addEventLister){ returnelem.addEventListen

卡莫·2016-01-31 00:00

JavaScript设计模式学习笔记2

上篇有些设计模式没说道，一方面是我没见到，一方面是我不太理解。今天再说说其他的几种设计模式：1.代理模式就是我把一件事交给专门的一个处理程序去做。比如下面这个例子：varkeyMgr=keyManage(); keyMgr.listen('change',proxy(function(keyCode){ console.log(keyCode); }))这块的proxy就是那个代理，原先是后面直接

sufubo·2016-01-29 21:00

javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件（三）

在上一篇《javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件（二）》里，通过采用模板方法模式完成了切换效果对象的构建编写。接下来就是完成各效果对象的调用和联动。

白色的海·2016-01-29 20:00

javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件（二）

在上一篇《javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件（一）》里，通过采用迭代器模式完成了各初始化函数的定义和调用。接下来就要完成各个切换效果的编写。

白色的海·2016-01-29 19:00

javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件（一）

类似于幻灯片的切换效果，有时需要在网页中完成一些图片的自动切换效果，比如广告，宣传，产品介绍之类的，那么单纯的切就没意思了，需要在切换的时候通过一些效果使得切换生动些。比较常用之一的就是窗帘切换了。先贴上完成的效果。实现原理不复杂，在动的一条一条的称之为“窗帘条”或者是“strip”，每一个strip都是一个div，类似于雪碧图的方式将其背景图的位置设置为strip的可视位置，然后用jque

白色的海·2016-01-29 19:00

2016年2月书单

BootstrapSiteBlueprintsVolumeIIAngularJS权威指南.pdfHeadfirstjavaJavascript设计模式和开发实践

byAge·2016-01-29 15:00

JavaScript设计模式学习笔记

设计模式可以帮助我们更好的解决一类问题，重复代码。下面学习一下作为一名前端工程师应该掌握的设计模式：1.单体模式，也叫单例模式其实就是把自己的代码的作用变量全部放到一个命名空间下面，以便日后的维护和避免全局变量的使用。varfunctionGroup={name:'sufubo',method1:function(){//code},init:function(){//body...}}大概就是这

vieber·2016-01-28 22:46

JavaScript设计模式学习笔记

设计模式可以帮助我们更好的解决一类问题，重复代码。下面学习一下作为一名前端工程师应该掌握的设计模式：1.单体模式，也叫单例模式其实就是把自己的代码的作用变量全部放到一个命名空间下面，以便日后的维护和避免全局变量的使用。varfunctionGroup={ name:'sufubo', method1:function(){ //code }, init:function(){ //body...

sufubo·2016-01-28 22:00

JavaScript设计模式之单体模式

GangofFour（四人帮）编著的《设计模式》一书，相信大家都很熟悉的（即使没有看过也有听说过吧）。可是，这些设计模式对于静态的、强类型的、基于类的的语言（比如Java，C++）来说是很容易实现的，对于JavaScript这样的语言来说，可能是微不足道的或者是没必要的。在JavaScript里面，常用的设计模式有单体模式（singleton）、装饰器模式（decorator）、工厂模式（b

宇哥哥·2016-01-28 17:00

学习JavaScript之this,call,apply

中途参考的书籍也很多，以《JavaScript设计模式与开发实践》为主，《JavaScript高级程序设计》、《你不知道的JavaScript》为辅。

Lxxyx·2016-01-28 00:00

JavaScript设计模式--行为类型--命令模式

定义将请求封装为对象，从而客户端可以接收不同的请求对象、队列或日志请求作为参数，并支持可撤销的操作。使用频次：5颗星总结：命令模式把行为封装为对象，命令对象将发出请求的对象和实际处理请求的对象区分开来，从而实现松耦合设计。这些请求被称为事件，处理这些请求的代码被称为事件处理器。现假设你正在开发一个支持剪切、复制、粘贴等鼠标操作的应用程序。应用中能以不同的方式触发这些操作，例如一些菜单操作或者键盘的

pengfoo·2016-01-27 10:45

JavaScript设计模式--行为类型--命令模式

定义将请求封装为对象，从而客户端可以接收不同的请求对象、队列或日志请求作为参数，并支持可撤销的操作。使用频次：5颗星总结：命令模式把行为封装为对象，命令对象将发出请求的对象和实际处理请求的对象区分开来，从而实现松耦合设计。这些请求被称为事件，处理这些请求的代码被称为事件处理器。现假设你正在开发一个支持剪切、复制、粘贴等鼠标操作的应用程序。应用中能以不同的方式触发这些操作，例如一些菜单操

kuzuozhou·2016-01-27 10:00

学习JavaScript设计模式之模板方法模式

一、定义模板方法是基于继承的设计模式，可以很好的提高系统的扩展性。java中的抽象父类、子类模板方法有两部分结构组成，第一部分是抽象父类，第二部分是具体的实现子类。二、示例CoffeeorTea(1)把水煮沸(2)用沸水浸泡茶叶(3)把茶水倒进杯子(4)加柠檬/*抽象父类：饮料*/varBeverage=function(){};//(1)把水煮沸Beverage.prototype.boilWa

奋�w·2016-01-20 11:14

学习JavaScript设计模式之迭代器模式

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。JavaScript中的Array.prototype.forEach一、jQuery中的迭代器$.each([1,2,3],function(i,n){console.log("当前下标为："+i+"当前元素为："+n);});二、实现自己的迭代器vareach=function(ary,callback

奋�w·2016-01-19 17:43

学习JavaScript设计模式之观察者模式

一、定义观察者模式（发布-订阅模式）：其定义对象间一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。在JavaScript中，一般使用事件模型来替代传统的观察者模式。好处：（1）可广泛应用于异步编程中，是一种替代传递回调函数的方案。（2）可取代对象之间硬编码的通知机制，一个对象不用再显示地调用另外一个对象的某个接口。两对象轻松解耦。二、DOM事件�C观察者模式典例需

奋�w·2016-01-19 16:48

学习JavaScript设计模式之单例模式

一、定义保证一个类仅有一个实例，并提供一个访问它的全局访问点。当单击登陆按钮，页面中出现一个登陆浮窗，这个登陆浮窗是唯一的，无论单击多少次登陆按钮，这个浮窗都只会被创建一次，那么这个登陆浮窗就适合用单例模式来创建。二、实现原理要实现单例并不复杂，使用一个变量来标志当前是否已经为某个类创建过对象，如果是，则在下一次获取该类的实例时，直接返回之前创建的对象。三、假单例全局变量不是单例模式，但在Java

奋�w·2016-01-19 11:29

学习JavaScript设计模式之装饰者模式

有时我们不希望某个类天生就非常庞大，一次性包含许多职责。那么我们就可以使用装饰着模式。装饰着模式可以动态地给某个对象添加一些额外的职责，从而不影响这个类中派生的其他对象。装饰着模式将一个对象嵌入另一个对象之中，实际上相当于这个对象被另一个对象包装起来，形成一条包装链。一、不改动原函数的情况下，给该函数添加些额外的功能1.保存原引用window.onload=function(){console.l

奋�w·2016-01-19 09:54

学习JavaScript设计模式之享元模式

一、定义享元（flyweight）模式是一种用于性能优化的模式，核心是运用共享技术来有效支持大量细刻度的对象。在JavaScript中，浏览器特别是移动端的浏览器分配的内存并不算多，如何节省内存就成了一个非常有意义的事情。享元模式是一种用时间换空间的优化模式内衣工厂有100种男士内衣、100中女士内衣，要求给每种内衣拍照。如果不使用享元模式则需要200个塑料模特；使用享元模式，只需要男女各1个模特

奋�w·2016-01-18 17:04

学习JavaScript设计模式之责任链模式

一、定义责任链模式：使多个对象都有机会处理请求，从而避免请求的发送者和接受者之间的耦合关系，将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止。二、示例假设这么一个场景：我们负责一个售卖手机的电商网站，经过分别缴纳500元定金和200元定金的两轮预定后，到了正式购买阶段。针对预定用户实行优惠，支付过500元定金的用户会收到100元的商城优惠券，支付过200元定金的用户会收到50

奋�w·2016-01-18 16:31

学习JavaScript设计模式之中介者模式

一、定义面向对象设计鼓励将行为分布到各个对象中，把对象划分成更小的粒度，有助于增强对象的可复用性。但由于这些细粒度对象之间的联系激增，又可能反过来降低它们的可复用性。中介者模式的作用就是解除对象与对象之间的紧耦合关系。二、示例：购买商品假设我们正在开发一个购买手机的页面，购买流程中，可以选择手机颜色以及输入购买数量，同时页面中可以对应展示输入内容。还有一个按钮动态显示下一步操作（该颜色库存量充足，

奋�w·2016-01-14 17:00

JavaScript设计模式 --- 方法的链式调用

方法的链式调用调用链的结构设计一个支持方法链式调用的JavaScript库小结方法的链式调用链式调用其实只不过是一种语法招数，它能让你通过重用一个初始操作来达到用少量代码表达复杂操作的目的。这种技术包含两部分：创建代码HTML元素的对象的工厂以及一批对这个HTML元素执行某些操作的方法调用链的结构$函数，它通常返回一个HTML元素或者一个HTML元素的集合，如：function$(){varele

CherishLyf·2016-01-14 14:07

学习JavaScript设计模式之代理模式

明星都有经纪人作为代理。如果请明星办一场商演，只能联系其经纪人，经纪人会把商演的细节和报酬谈好，再把合同交给明星签。一、定义代理模式：为一个对象提供一个代用品或占位符，以便控制对它的访问。代理分为：保护代理和虚拟代理保护代理：用于控制不同权限的对象对目标对象的访问，在JavaScript中很难判断谁访问了某个对象，所以保护代理很难实现。二、图片预加载（最常见的虚拟代理应用场景）图片预加载是一种常用

奋�w·2016-01-12 17:40

最强大、最牛逼的javascript视频教程

应用的范围非常广泛，每一个web开发者学好javascript也是必须的，本套视频教程详细的讲解了javascript各个知识点、关键点，其中涉及到高深的函数概念、原型概念、接口概念、单体概念、更是详细的讲解了javascript

Spartacus_·2016-01-12 15:59

学习JavaScript设计模式之策略模式

把不变的部分和变化的部分隔开是每个设计模式的主题。条条大路通罗马。我们经常会遇到解决一件事情有多种方案，比如压缩文件，我们可以使用zip算法、也可以使用gzip算法。其灵活多样，我们可以采用策略模式解决。一、定义定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。基于策略类模式的程序至少由两部分组成。第一个部分是一组策略类，策略类封装了具体的算法，并负责具体的计算过程。第二个部分是环境

奋�w·2016-01-12 11:51

学习JavaScript设计模式之状态模式

状态模式的关键是区分事物内部的状态，事物内部状态的改变往往会带来事物的行为改变。当电灯开着，此时按下开关，电灯会切换到关闭状态；再按一次开关，电灯又将被打开。同一个开关在不同的状态下，表现出来的行为是不一样的。一、有限状态机状态总数（state）是有限的。任一时刻，只处在一种状态之中。某种条件下，会从一种状态转变（transition）到另一种状态。允许一个对象在其内部状态改变时改变它的行为，对象

奋�w·2016-01-08 17:14

JavaScript设计模式 --- 单体模式

单体模式单体模式是javascript中最基本但最有用的模式之一。这种模式提供了一种将代码组织为一个逻辑单元的手段，这个逻辑单元中的代码可以通过单一的变量进行访问。通过确保单体对象只存在一个实例。单体的基本结构最简单的单体实际上就是一个字面量。它把一批有关联的方法和属性组织在一起：/*BasicSingleton*/varSingleton={attribute1:true,attribute2:

CherishLyf·2016-01-07 23:01

JavaScript设计模式初探

目的：设计模式众多，尝试记录下学到的不同设计模式的优劣，方便以后查阅。前言：半年前看高程的时候看到设计模式这章，云里雾里，不是看不明白，而是不明白为啥要如此麻烦只为创建一个对象。直到最近完成了自己第一个小项目，才体会到当代码量多起来时没有适当的规范与限制是多么大的灾难。于是重新翻开高程，总结下几种我学到的简单设计模式的优劣。正文：本文一共介绍7种设计模式以及他们的应用场景、优劣。1.工厂模式直接用

卡卡颂·2016-01-07 11:25

JavaScript设计模式 --- 继承

继承为什么需要继承类式继承原型链extend函数原型式继承掺元类示例就地编辑类式继承继承下面将描述创建子类的各种技术以及他们的适用场合。为什么需要继承一般来说，在设计类的时候，我们希望减少重复性的代码，并且弱化对象间的耦合。使用继承符合前一个设计原则的需要。类式继承通过用函数来声明类、用关键字new来创建实例，下面是一个简单的类声明：/*ClassPerson*/functionPerson(na

CherishLyf·2016-01-05 17:44

saybyeto2015

技术方面，看的书主要是《Angularjs权威指南》《JavaScript设计模式与开发实践》粗略看了一遍，时间有点少。

清姿·2015-12-31 18:00

【学习笔记javascript设计模式与开发实践（享元模式）----12】

第12章享元模式享元（flyweight）模式是一种用于性能优化的模式，“fly”在这里是苍蝇的意思，意为蝇量级。享元模式的核心是运用共享技术来有效支持大量细粒度的对象。如果系统因为创建大量类似的对象而导致内存占用过高，享元模式就非常有用了。在javascript中，浏览器特别是移动端的浏览器分配的内存并不算多，如何节省内存就成了一件非常有意义的事情。12.1初识享元模式假设有个内衣工厂，目前的产

不一样的水果·2015-12-30 19:29

5）Javascript设计模式：extends模式

简单的方式 functionPerson(){ this.name='person'; } Person.prototype.say=function(){}; functionChild(){ this.name='child'; } Child.prototype=newPerson(); varchild=newChild();缺点：其实child并不需要person里面的name属性借

sexy_girl·2015-12-27 19:00

4）Javascript设计模式：Decorator模式

functionMacBook(){ this.cost=function(){ return997; } } varmacbook=newMacBook(); functionaddCost(macbook){ var_cost=macbook.cost; macbook.cost=function(){ return_cost()+100; } } macbook.cost()

sexy_girl·2015-12-26 19:00

3）Javascript设计模式：Observer模式

Observer模式varObserver=(function(){ varinstance=null; functionObserve(){ this.events={} } Observe.prototype.subscribe=function(eventName,callback){ varactions=this.events[eventName]; if(!actions){ a

sexy_girl·2015-12-26 18:00

2）Javascript设计模式：Singleton模式

Singleton模式 varUser=(function(){ varinstance; function_User(){} _User.prototype.say=function(){} functioninit(){ returnnew_User() } returnfunction(){ if(instance==null){ instance=init(); } returnin

sexy_girl·2015-12-26 18:00

1）Javascript设计模式：Module模式

最简单的创建对象方法 functionUser(name){ this.name=name||'' } User.prototype.say=function(){ console.log('Hi,Mynameis'+this.name); } varu=newUser('tom')缺点：此种方法无法实现私有成员变量的隐藏私有模式varUser=(function(){ varsayCount

sexy_girl·2015-12-26 17:00

《JavaScript设计模式与开发实践》-面向对象的JavaScript

设计模式面向对象动态类型语言编程语言按照数据类型大体分为：静态类型语言和动态类型语言。静态类型语言在编译时便已确定变量的类型，而动态类型语言的变量类型要到程序运行时，待变量被赋予某个值之后，才会具有某种类型。在JavaScript中，当我们对一个变量赋值时，显然不需要考虑它的类型，因此JavaScript是一门典型的动态类型语言。动态类型语言对变量类型的宽容给实际编码带来了很大的灵活性，由于无需进

DEPSI·2015-12-26 00:00

JavaScript设计模式--状态模式

状态模式的关键是区分事物内部的状态，事物内部状态的改变往往会带来事物的行为改变。当电灯开着，此时按下开关，电灯会切换到关闭状态；再按一次开关，电灯又将被打开。同一个开关在不同的状态下，表现出来的行为是不一样的。一、有限状态机状态总数（state）是有限的。任一时刻，只处在一种状态之中。某种条件下，会从一种状态转变（transition）到另一种状态。允许一个对象在其内部状态改变时改变它的行为，对象

ligang2585116·2015-12-20 19:00

JavaScript设计模式--装饰者模式

有时我们不希望某个类天生就非常庞大，一次性包含许多职责。那么我们就可以使用装饰着模式。装饰着模式可以动态地给某个对象添加一些额外的职责，从而不影响这个类中派生的其他对象。装饰着模式将一个对象嵌入另一个对象之中，实际上相当于这个对象被另一个对象包装起来，形成一条包装链。一、不改动原函数的情况下，给该函数添加些额外的功能1.保存原引用window.onload=function(){ console.

ligang2585116·2015-12-20 19:00

JavaScript设计模式--责任链模式

一、定义责任链模式：使多个对象都有机会处理请求，从而避免请求的发送者和接受者之间的耦合关系，将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止。二、示例假设这么一个场景：我们负责一个售卖手机的电商网站，经过分别缴纳500元定金和200元定金的两轮预定后，到了正式购买阶段。针对预定用户实行优惠，支付过500元定金的用户会收到100元的商城优惠券，支付过200元定金的用户会收到50

ligang2585116·2015-12-20 19:00

JavaScript设计模式--中介者模式

一、定义面向对象设计鼓励将行为分布到各个对象中，把对象划分成更小的粒度，有助于增强对象的可复用性。但由于这些细粒度对象之间的联系激增，又可能反过来降低它们的可复用性。中介者模式的作用就是解除对象与对象之间的紧耦合关系。二、示例：购买商品假设我们正在开发一个购买手机的页面，购买流程中，可以选择手机颜色以及输入购买数量，同时页面中可以对应展示输入内容。还有一个按钮动态显示下一步操作（该颜色库存量充足，

i10630226·2015-12-20 19:00

JavaScript设计模式--享元模式

一、定义享元（flyweight）模式是一种用于性能优化的模式，核心是运用共享技术来有效支持大量细刻度的对象。在JavaScript中，浏览器特别是移动端的浏览器分配的内存并不算多，如何节省内存就成了一个非常有意义的事情。享元模式是一种用时间换空间的优化模式内衣工厂有100种男士内衣、100中女士内衣，要求给每种内衣拍照。如果不使用享元模式则需要200个塑料模特；使用享元模式，只需要男女各1个模特

ligang2585116·2015-12-20 19:00

推荐频道

JavaScript设计模式

设计模式-工厂模式（JavaScript）

前端工程师之路

常用的Javascript设计模式

《JavaScript设计模式》学习日志

一段javascript设计模式应用场景

JavaScript设计模式

Javascript设计模式详解

Javascript设计模式详解

JavaScript设计模式与开发实践：分时函数

JavaScript设计模式与开发实践：惰性函数

JavaScript设计模式学习笔记2

javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件（三）

javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件（二）

javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件（一）

2016年2月书单

JavaScript设计模式学习笔记

JavaScript设计模式学习笔记

JavaScript设计模式之单体模式

学习JavaScript之this,call,apply

JavaScript设计模式--行为类型--命令模式

JavaScript设计模式--行为类型--命令模式

学习JavaScript设计模式之模板方法模式

学习JavaScript设计模式之迭代器模式

学习JavaScript设计模式之观察者模式

学习JavaScript设计模式之单例模式

学习JavaScript设计模式之装饰者模式

学习JavaScript设计模式之享元模式

学习JavaScript设计模式之责任链模式

学习JavaScript设计模式之中介者模式

JavaScript设计模式 --- 方法的链式调用

学习JavaScript设计模式之代理模式

最强大、最牛逼的javascript视频教程

学习JavaScript设计模式之策略模式

学习JavaScript设计模式之状态模式

JavaScript设计模式 --- 单体模式

JavaScript设计模式初探

JavaScript设计模式 --- 继承

saybyeto2015

【学习笔记javascript设计模式与开发实践（享元模式）----12】

5）Javascript设计模式：extends模式

4）Javascript设计模式：Decorator模式

3）Javascript设计模式：Observer模式

2）Javascript设计模式：Singleton模式

1）Javascript设计模式：Module模式

《JavaScript设计模式与开发实践》-面向对象的JavaScript

JavaScript设计模式--状态模式

JavaScript设计模式--装饰者模式

JavaScript设计模式--责任链模式

JavaScript设计模式--中介者模式

JavaScript设计模式--享元模式