关于新增和编辑

我想你们在开发的过程当中,确定都会遇到这样一种场景, 编辑和新增都在同一个页面, 在处理这种问题的时候, 我想不少人都会这样处理

 1 //获取参数函数
 2 function queryString(name) {
 3     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
 4     var r = window.location.search.substr(1).match(reg);
 5     if (r != null) return unescape(r[2]); return null;
 6 }
 7 
 8 
 9 var detail =  {
10     init: function(){
11         var _this = this;
12         var id = queryString('id') || '';    
13         
14         if(id && id.length > 0){
15             this.showEdit();
16         }else{
17             this.showCreate();
18         }
19         
20         $('#button').click(function(){
21             if(id && id.length > 0){
22                 _this.edit();
23             }else{
24                 _this.create();
25             }
26         });
27     },
28     create: function() {
29         //处理建立
30     },
31     edit: function() {
32         //处理编辑
33     },
34     showCreate: function(){
35         //处理建立显示
36     },
37     showEdit: function(){
38         //处理编辑显示
39     }
40 };

 

上面的代码, 应该很容易理解, 并且不少人都是按照这种方式去处理编辑和新增的差别化需求, 这种编码方式很直接, 可是每次处理差别化需求的时候都得去进行判断, 常常这样处理会不会以为很糟糕, 其实我也常常在纠结这块代码该如何去处理,直到前段时间有一个同事在周会上分享了点内容, 顿时感受茅塞顿开, 就想到了这块该如何去处理, 其实能够用面向对象的思想去处理这个问题.

 

 1 var detail = {
 2     //设置状态,常量
 3     STATE: {
 4         CREATE: 'create',
 5         EDIT: 'edit'
 6     },
 7     state: '', //记录当前页面的状态
 8     init: function(){
 9         
10         var _this = this;
11         var id = queryString('id') || '';
12         
13         this.state = id.length > 0 ? this.STATE.EDIT : this.STATE.CREATE;
14         
15         $('#button').click(function(){
16             //根据状态来处理编辑和新增
17             _this[_this.state].update.call(_this);
18         });
19         
20         //进行初始化
21         this[_this.state].render.call(this);
22     },
23     create: {
24         render: function(){
25             //处理建立显示
26         },
27         update: function(){
28             //处理建立
29         }
30     },
31     edit: {
32         render: function(){
33             //处理编辑显示
34         }
35         update: function(){
36             //处理编辑
37         }    
38     }    
39 };

看到上面这段代码, 思路是否是很清晰, 也没有那么多的if判断, 只要一个状态就能够解决以前的全部的差别化需求, 并且每一个业务的需求都是独立的, 互不影响,这样即便在修改的时候也不会影响到另一个业务, 固然缺点也很明显, 按照这种思路处理, 可能会有不少重复的代码, 不过这是不可避免的, 现实中, 没有那么完美的方案,只能说按照需求和状况 作出合适的处理和调整, 咱们如今所作的一切都是为了需求和业务, 若是脱离了这些, 方案即便再完美, 哪又有何意义.