标签：style blog color io ar 问题 cti div
我想大家在开发的过程中,肯定都会遇到这样一种场景, 编辑和新增都在同一个页面, 在处理这种问题的时候, 我想很多人都会这样处理
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判断, 只要一个状态就可以解决之前的所有的差异化需求, 而且每个业务的需求都是独立的, 互不影响,这样即使在修改的时候也不会影响到另外一个业务, 当然缺点也很明显, 按照这种思路处理, 可能会有很多重复的代码, 不过这是不可避免的, 现实中, 没有那么完美的方案,只能说按照需求和情况 做出合适的处理和调整, 我们现在所做的一切都是为了需求和业务, 如果脱离了这些, 方案即使再完美, 哪又有何意义.
标签：style blog color io ar 问题 cti div
原文地址：http://www.cnblogs.com/AeroJin/p/3914286.html
