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版的工厂模式,呵呵,不错!