關於新增和編輯

我想你們在開發的過程當中,確定都會遇到這樣一種場景, 編輯和新增都在同一個頁面, 在處理這種問題的時候, 我想不少人都會這樣處理

 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判斷, 只要一個狀態就能夠解決以前的全部的差別化需求, 並且每一個業務的需求都是獨立的, 互不影響,這樣即便在修改的時候也不會影響到另一個業務, 固然缺點也很明顯, 按照這種思路處理, 可能會有不少重複的代碼, 不過這是不可避免的, 現實中, 沒有那麼完美的方案,只能說按照需求和狀況 作出合適的處理和調整, 咱們如今所作的一切都是爲了需求和業務, 若是脫離了這些, 方案即便再完美, 哪又有何意義.