JavaScript中实现工厂模式.
第一次亲密接触:利用JavaScript中的prototype实现"基于多态的工厂模式".
老早就知道JavaScript中的prototype了,可一直没机会正式用下,虽说以前自己写着玩过,但由于没有与实际应用联系起来也就没能真真正正地感受到这个prototype的威力.
今天在工作中终于有幸用到这个了.
具体情况是这样的:项目中要提交一个表单,可这个表单有多层结构,用户在提交时可以具体情况而有选择性的提交.刚开始时,是用那种很笨很笨地纯粹表单提交,结果在Java那边要写一大串的代码来从request里取出各个Parameter再用这个生成JavaBean实例(想过用Spring的form标签,但配置起来很是复杂,终因得不偿失而放弃了).
决定用JSON来包装并用jQuery里的Post来Ajax地与后台交互.
刚开始时,用如下的代码来做JSON的包装:
var menu;
if(conditionOne){
menu = {name: $('nameColumn'), order: $('ordrColumn'), ...subCategory:{...,...}};
$.post('xxxx.htm',{para: JSON.stringfy(menu)}, success:function(){....});
}else if(conditionTwo){
menu = {name: $('nameColumn'), order: $('ordrColumn'), ...imageInfo:{...,...}};
$.post('xxxx.htm',{para: JSON.stringfy(menu)}, success:function(){....});
}
这样做很烦琐,写的代码也很不友好,很不面向对象.
经高手点拔后,采用了下面的方法.
step1:在一个单独的js文件中如下所示地写出menu类:
function Menu(name,order,...,condition...,option){
this.name = name;
this.order = order;
...
this.condition = condtion;
...
this.option = option;
}
Menu.prototype.toJsonString = function(){
var data;
if(this.conditionOne){
var subCategory = createSubCategory();
data = {name:nameVal,order:orderVal,...,subCategoryString:subCategory};
}else if(this.conditionTwo){
var imageInfo = createImageInfo();
data = {name:nameVal,order:orderVal,...,imageInfoString:imageInfo};
}
return JSON.stringfy(data);
}
function createMenu(){
if(conditionOne){
returne new Menu(.......);
}else if(conditionTwo){
returne new Menu(.......);
}
}
step2,这样有了上面的准备后,就可以直接在响应事件中写:
function eventHandler(){
var menu = createMenu();
$.post('xxxx.htm',{para: menu.toJsonString()}, success:function(){....});
}
从调用方的角度来看,代码简洁了许多.
利用这个prototype还实现了JavaScript版的工厂模式,呵呵,不错!
分享到:
相关推荐
本文件使用JavaScript已面向对象方式封装类来演示简单工厂模式的实现代码。以实例介绍了简单功能模式的用途,简单分析了实现的要件。mhtl文件里有实例代码的全部内容和分析简述。
28.设计模式之工厂模式 29.设计模式之装饰者模式 30.设计模式之外观模式 31.设计模式之代理模式 32.设计模式之观察者模式 33.设计模式之策略模式 34.设计模式之命令模式 35.设计模式之迭代器模式 36.设计模式之中介...
工厂模式 迭代器模式 装饰者模式 策略模式 外观模式 代理模式 中介者模式 观察者模式 小结 第8章 DOM和浏览器模式 关注分离 DOM脚本 事件 长期运行脚本 远程脚本 配置JavaScript ...
深入理解JavaScript系列(28):设计模式之工厂模式 深入理解JavaScript系列(29):设计模式之装饰者模式 深入理解JavaScript系列(30):设计模式之外观模式 深入理解JavaScript系列(31):设计模式之代理模式...
3. 工厂模式其实就是对 实现同一接口的 实现类 的 统一 工厂方式创建调用,但 javascript 没有接口这号东西,所以就去掉这一层 实现,但位功能类的成员及方法都应当一样; 抽象工厂源码例子 1. 邮件发送类: ...
第二部分则专注于各种具体的设计模式及其在JavaScript语言中的应用,主要介绍了工厂模式、桥接模式、组合模式、门面模式等几种常见的模式。为了让每一章中的示例都尽可能地贴近实际应用,书中同时列举了一些...
本文实例讲述了JS 设计模式之:工厂模式定义与实现方法。分享给大家供大家参考,具体如下: 前言 上次我们介绍了单例模式,没看过的小伙伴可以看这个链接: 浅析 JS 设计模式之:单例模式 今天来说一说一种常见的...
1.2 JavaScript 实现..............................................2 1.2.1 ECMAScript 1.2.2 DOM..............................................5 1.2.3 BOM..............................................8 ...
工厂模式也是对象创建模式之一,它通常在类或类的静态方法中去实现,本文将详细介绍JavaScript 工厂模式
深入理解JavaScript系列(28):设计模式之工厂模式 深入理解JavaScript系列(29):设计模式之装饰者模式 深入理解JavaScript系列(30):设计模式之外观模式 深入理解JavaScript系列(31):设计模式之代理模式...
3. 工厂模式其实就是对 实现同一接口的 实现类 的 统一 工厂方式创建调用,但 javascript 没有接口这号东西,所以就去掉这一层 实现,但位功能类的成员及方法都应当一样; 抽象工厂源码例子 1. 邮件发送类: 代码如下...
6.5.2 模式--函数工厂及其实例 6.6 总结 第7章 对象 7.1 什么是对象 7.2 对象的属性和方法 7.2.1 对象的内置属性 7.2.2 为对象添加和删除属性 7.2.3 反射机制--枚举对象属性 7.3 ...
工厂模式是软件工程领域一种广为人知的设计模式,这种模式抽象了创建具体对象的过程(本书后面还将讨论其他设计模式及其在JavaScript 中的实现)。考虑到在ECMAScript 中无法创建类,开发人员就发明了一种函数,用...
本文实例讲述了JavaScript设计模式之工厂模式和抽象工厂模式定义与用法。分享给大家供大家参考,具体如下: 1、工厂模式: 虽然Object构造函数和对象字面量都可以用来创建单个对象,但这个方式有个明显的缺点:使用...
本文实例讲述了javascript设计模式 – 工厂模式原理与应用。分享给大家供大家参考,具体如下: 介绍:前面我们介绍了简单工厂模式,简单工厂模式存在一个严重的问题:当需要扩展时必定要修改工厂类的源代码。我们...
本文实例讲述了javascript设计模式 – 简单工厂模式。分享给大家供大家参考,具体如下: 介绍:简单工厂模式是最常用的一类创建型设计模式。其中简单工厂模式并不属于GoF23个经典设计模式,它通常被作为学习其他工厂...
工厂模式 迭代器模式 装饰者模式 策略模式 外观模式 代理模式 中介者模式 观察者模式 小结 第8章 DOM和浏览器模式 关注分离 DOM脚本 事件 长期运行脚本 远程脚本 酉己置JavaScript 载入策略 小结
( 工厂模式 ) – 独乐不如众乐3. ( 构造函数模式 ) – 私有财产神圣不可侵犯4. ( 原型模式 ) – 大庇天下寒士俱欢颜5. ( 组合构造函数与原型模式 ) – 公私分明6. (动态原型模式) – 再接再厉7. (寄生构造函数模式)...