rmn190

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