Skip to content

Commit

Permalink
添加详细的描述,重构代码
Browse files Browse the repository at this point in the history
  • Loading branch information
wchaowu committed Aug 16, 2013
1 parent 890783b commit c755ce1
Show file tree
Hide file tree
Showing 6 changed files with 22 additions and 11 deletions.
6 changes: 5 additions & 1 deletion JavaScript-Design-Patterns/The-Adapter-Pattern/README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
<h3>适配器模式</h3>
适配模式可用来在现有接口和不兼容的类之间进行适配,使用这种模式的对象又叫包装器(wrapper),因为它们是在用一个新的接口包装另一个对象。<br />
从表面上看,适配器模式很像外观模式。它们都要对别的对象进行包装并改变其呈现的接口。二者的差别在于它们如何改变接口。外观元素展现的是一个简化的接口,它并不提供额外的选择,而且有时为了方便完成常见任务它还会做出一些假定。而适配器则要把一个接口转换为另一个接口,它并不会滤除某些能力,也不会简化接口。如果客户系统API不可用,就需要用到适配器。<br />
从表面上看,适配器模式很像外观模式。它们都要对别的对象进行包装并改变其呈现的接口。
> 二者的差别在于它们如何改变接口。<br >
> > 外观元素展现的是一个简化的接口,它并不提供额外的选择,而且有时为了方便完成常见任务它还会做出一些假定。<br />
> > 适配器则要把一个接口转换为另一个接口,它并不会滤除某些能力,也不会简化接口。如果客户系统API不可用,就需要用到适配器。<br />
PS2-to-USB适配器就是一个例子。<br />
示例:<a href="https://github.com/wchaowu/javascript-code/blob/master/JavaScript-Design-Patterns/The-Adapter-Pattern/1%20-%20Characteristics%20of%20an%20adapter.js">
创建一个简单的适配器方法,修改传入参数的方式
Expand Down
2 changes: 1 addition & 1 deletion JavaScript-Design-Patterns/The-Command-Pattern/README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<h3>命令模式</h3><br />
<h3>命令模式</h3>
命令模式是一种用来封装单个操作(discrete action)的结构型模式。其封装的操作可能是单个方法调用这么简单,也可能是整个子程序那么复杂。经封装的操作可以作为一等的对象进行传送。命令对象主要用于消除调用者与接受者之间的耦合,这有助于创建高度模块化的调用者,它们对所调用的操作不需要任何了解。<br />
<h3>1、命令的结构</h3<br />
下面展示一个典型的命令类StartAd和StopAd,它们的构造函数由另一个对象adObject作为参数,而它们实现的execute()方法则要调用该对象的某个方法。现在有了两个可用在用户界面中的类,它们具有相同的接口,你不需要也不关心adObject方法的具体实现,只需要知道它实现了start()和stop()方法就可以了。借助命令模式,可以实现用户界面对象与广告对象的隔离。<br />
Expand Down
19 changes: 13 additions & 6 deletions JavaScript-Design-Patterns/The-Decorator-Pattern/README.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,21 @@
装饰者模式<br />
<h3>装饰者模式</h3>
<br />
实例:创建自行车的装饰者<br />
1、接口在装饰者模式中的角色:<br />
装饰者模式颇多得益于接口的使用。装饰者最重要的特点之一就是它可以用来替代其组件。<br />
装饰者模式颇多得益于接口的使用。装饰者最重要的特点之一<br/>
就是它可以用来替代其组件。<br />
接口说明了装饰者必须实现哪些方法,有助于防止开发过程中的错误。<br />
如果装饰者对象与其组件不能互换使用,它就丧失了其功用。这是装饰者模式的关键特点,要注意防止装饰者和组件出现的接口方法的差异。这种模式的好处之一就是可以透明的用新对象装饰现有系统中的对象,这并不会改变代码中的其他东西,只有装饰者和组件实现了同样的接口才能做到这一点。<br />
如果装饰者对象与其组件不能互换使用,它就丧失了其功用。这是装饰者模式的关键特点,要注意防止装饰者和组件出现的接口方法的差异。
这种模式的好处之一就是可以透明的用新对象装饰现有系统中的对象,
这并不会改变代码中的其他东西,只有装饰者和组件实现了同样的接口才能做到这一点。<br />
2、装饰者模式与组合模式的比较:<br />
相同点:<br />
装饰者对象和组合对象都是用来包装别的对象(组合模式:子对象,装饰者模式:组件)<br />
都与所包装的对象实现同样的接口并且会把任何方法调用传递给这些对象<br />
不同点:<br />
组合模式是一种结构型模式,用于把众多子对象组织为一个整体。通常并不需要修改方法调用,而只是将其沿组合对象与子对象的链向下传递,直到到达并落实在叶对象上。装饰者模式也是一种结构型模式,但它并非用于组织对象,而是用于在不修改现有对象或从派生子类的前提下为其增添职责。创建装饰者的目的就在于对方法进行修改,其做法是先传递方法调用,然后修改其返回结果。<br />
组合模式是一种结构型模式,用于把众多子对象组织为一个整体。通常并不需要修改方法调用,而只是将其沿组合对象与子对象的链向下传递,直到到达并落实在叶对象上。
装饰者模式也是一种结构型模式,但它并非用于组织对象,
而是用于在不修改现有对象或从派生子类的前提下为其增添职责。创建装饰者的目的就在于对方法进行修改,其做法是先传递方法调用,然后修改其返回结果。<br />
组合对象不修改方法调用,着眼在于组织对象,而装饰者存在的唯一目的就是修改方法调用而不是组织子对象,因为子对象只有一个。<br />
3、装饰者修改其组件的方式<br />
在方法之后添加行为<br />
Expand All @@ -22,7 +28,8 @@
详细的例子:<a href="https://github.com/wchaowu/javascript-code/blob/master/JavaScript-Design-Patterns/The-Decorator-Pattern/1%20-%20Structure%20of%20the%20decorator.js">example</a><br />
4、工厂的角色<br />
如果必须确保按照某种特定顺序创建装饰者,那么可以为此使用工厂对象。实际上,不管顺序是否要紧,工厂都很适合于创建装饰对象。<br />
用工厂实例化自行车对象有许多好处。首先,不必了解自行车和装饰者的各种类名,所有这些信息都封装在AcmeBicycleShop类中。因此添加自行车型号和选件非常容易,只要把它们添加到AcmeBicycleShp.models或AcmeBicycleShop.options数组中即可。<br />
用工厂实例化自行车对象有许多好处。首先,不必了解自行车和装饰者的各种类名,所有这些信息都封装在AcmeBicycleShop类中。因此添加自行车型号和选件非常容易,
只要把它们添加到AcmeBicycleShp.models或AcmeBicycleShop.options数组中即可。<br />
例子:<br />
<a href="https://github.com/arthinking/Javascript/blob/master/Pro-JavaScript-Design-Patterns/Chapter12-The-Decorator-Pattern/12.03%20-%20The%20role%20of%20the%20factory.js">
AcmeBicycleShop类的createBicycle方法,以便用户可以指定自行车要配的选件。
Expand All @@ -43,4 +50,4 @@ AcmeBicycleShop类的createBicycle方法,以便用户可以指定自行车要
装饰者的运行过程是透明的,这就是说你可以用它包装其他对象,然后继续按之前使用那些对象的方法来使用它。装饰者为程序员带来了极大的灵活性。<br />
8、装饰者模式之弊<br />
在遇到用装饰者包装起来的对象时,那些依赖于类型检查的代码会出问题。<br />
使用装饰者模式往往会增加架构的复杂程度。此外,实现具有动态接口的装饰者(如MethodProfiler)涉及的语法细节有时也会令人生畏。在设计一个使用了装饰者模式的架构时,你西部多花点心思,确保自己的代码有良好的文档说明,并且容易理解。
使用装饰者模式往往会增加架构的复杂程度。此外,实现具有动态接口的装饰者(如MethodProfiler)涉及的语法细节有时也会令人生畏。在设计一个使用了装饰者模式的架构时,你需要多花点心思,确保自己的代码有良好的文档说明,并且容易理解。
1 change: 1 addition & 0 deletions JavaScript-Design-Patterns/The-Facade-Pattern/README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
###外观模式
外观模式并不是适配器模式,适配器模式是一种包装器,用来对接口进行适配以便在不兼容系统中使用它。而创建外观元素则是图个方便。它并不用于达到需要特定接口的客户系统打交道这个目的,而是用于提供一个简化的接口。<br />
<br />
<a href="https://github.com/wchaowu/javascript-code/blob/master/JavaScript-Design-Patterns/The-Facade-Pattern/2%20-%20Facades%20as%20convenience%20methods.js">
Expand Down
2 changes: 1 addition & 1 deletion JavaScript-Design-Patterns/The-Flyweight-Pattern/README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
享元模式<br />
###享元模式<br />
享元模式最适合于解决因创建大量类似对象而累及性能的问题。这种模式在Javascript中尤其有用,因为复杂的Javascript代码可能很快就会用光浏览器的所有可用内存。通过把大量独立对象转化为少量共享对象,可以降低运行Web应用程序所需的资源数量。对于那些可能一连用上几天也不会重新加载的大型应用系统,任何减少内存用量的技术都有非常显著的效果。而对于那些不会在浏览器中打开那么长时间的小型网页,内存的节约就没那么重要。<br />
示例:汽车登记<br />
内在状态和外在状态,用工厂进行实例化内在状态,封装在管理器中的外在状态。<br />
Expand Down
3 changes: 1 addition & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
--------------------------------------------------------------------------------
<h3>Javascript代码</h3>
<br/>
Version 1.0.0 <br/>
Author:scott (吴超武) <br />
有什么疑问和建议请发邮箱至Email:wchaowu@gmail.com <br />
Expand All @@ -24,7 +23,7 @@
4.<a href="https://github.com/wchaowu/javascript-code/tree/master/object-oriented/Inheritance"> Inheritance </a> <br />
<h3 name="javascriptBase">Javascript based</h3>
1.<a href="https://github.com/wchaowu/javascript-code/tree/master/javascript-based/this">JavaScript this </a> <br />
2.<a href="https://github.com/wchaowu/javascript-code/tree/master/javascript-based/this">JavaScript 闭包</a> <br />
2.<a href="https://github.com/wchaowu/javascript-code/tree/master/javascript-based/closure">JavaScript 闭包</a> <br />
3.<a href="https://github.com/wchaowu/javascript-code/tree/master/javascript-based/event">JavaScript 事件</a> <br />
<h3>Jquery</h3>
为了更加了解Jquery实现机制可以先了解
Expand Down

0 comments on commit c755ce1

Please sign in to comment.