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