用JavaScript实现的设计模式之commandline(命令行)模式

简介: 用JavaScript实现的设计模式之commandline(命令行)模式

</div><div>// Priority: ActiveX > HTML5 > Flash > Form(default)</div><div>function isActiveXSupported(){</div><div> //...</div><div> return false;</div><div>}</div><div>function isHTML5Supported(){</div><div> //...</div><div> return false;</div><div>}</div><div>function isFlashSupported(){</div><div> //...</div><div> return false;</div><div>}</div><div>var uploadAPI;</div><div>if ( isActiveXSupported()) {</div><div> // lots of initialization work</div><div> uploadAPI = { "name": "ActiveX"};</div><div>}</div><div>else if( isHTML5Supported()) {</div><div> // lots of initialization work</div><div> uploadAPI = { "name": "HTML5"};</div><div>}</div><div>else if( isFlashSupported()) {</div><div> // lots of initialization work</div><div> uploadAPI = { "name": "Flash"};</div><div>}</div><div>else {</div><div> // lots of initialization work</div><div> uploadAPI = { "name": "Form"};</div><div>}</div><div>console.log(uploadAPI);</div><div>

我们可以使用CommandLine设计模式,将这些冗长的IF-ELSE语句消除:

image.png

</div><div>Function.prototype.after = function( func ){</div><div>    var _self = this;</div><div>    return function() {</div><div>       var ret = _self.apply( this, arguments );</div><div>       if ( ret  ) {</div><div>          return ret;</div><div>       }</div><div>       return func.apply( this, arguments);</div><div>    }</div><div>}</div><div>// Priority: ActiveX > HTML5 > Flash > Form(default)</div><div>var getActiveX = function() {</div><div> try {</div><div>  // lots of initialization work</div><div>  a();</div><div>  return { "name": "ActiveX"};</div><div> }</div><div> catch (e) {</div><div>  // user broswer does not support ActiveX</div><div>  return null;</div><div> }</div><div>}</div><div>var getHTML5 = function() {</div><div> try {</div><div>  // lots of initialization work</div><div>  return { "name": "HTML5"};</div><div> }</div><div> catch (e) {</div><div>  // user broswer does not support HTML5</div><div>  return null;</div><div> }</div><div>}</div><div>var getFlash = function() {</div><div> try {</div><div>  // lots of initialization work</div><div>  return { "name": "Flash"};</div><div> }</div><div> catch (e) {</div><div>  // user broswer does not support Flash</div><div>  return null;</div><div> }</div><div>}</div><div>var getForm = function() {</div><div> return { "name": "Form"};</div><div>}</div><div>var uploadAPI = getActiveX.after(getHTML5).after(getFlash).after(getForm)();</div><div>console.log(uploadAPI);</div><div>


目录
相关文章
|
5天前
|
设计模式 存储 前端开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发
|
6天前
|
消息中间件 存储 设计模式
JavaScript发布订阅模式:实现事件驱动编程!
JavaScript发布订阅模式:实现事件驱动编程!
|
6天前
|
JavaScript 前端开发
JavaScript构造函数模式:创建对象的另一种方式!
JavaScript构造函数模式:创建对象的另一种方式!
|
6天前
|
设计模式 JavaScript 前端开发
JS中发布/订阅模式的简单应用
JS中发布/订阅模式的简单应用
|
7天前
|
设计模式 API
【设计模式】适配器和桥接器模式有什么区别
【设计模式】适配器和桥接器模式有什么区别
10 1
|
7天前
|
设计模式
【设计模式】张一鸣笔记:责任链接模式怎么用?
【设计模式】张一鸣笔记:责任链接模式怎么用?
11 1
|
7天前
|
设计模式 uml
【设计模式】建造者模式就是游戏模式吗?
【设计模式】建造者模式就是游戏模式吗?
11 0
|
7天前
|
设计模式 Java uml
【设计模式】什么是工厂方法模式?
【设计模式】什么是工厂方法模式?
8 1
|
7天前
|
设计模式 uml
【设计模式】一文搞定简单工厂模式!
【设计模式】一文搞定简单工厂模式!
8 2
|
7天前
|
设计模式 JavaScript 前端开发
js设计模式-观察者模式与发布/订阅模式
观察者模式和发布/订阅模式是JavaScript中的两种设计模式,用于处理对象间的通信和事件处理。观察者模式中,一个主题对象状态改变会通知所有观察者。实现包括定义主题和观察者对象,以及在主题中添加、删除和通知观察者的功能。发布/订阅模式则引入事件管理器,允许发布者发布事件,订阅者通过订阅接收通知。