zoukankan      html  css  js  c++  java
  • 关于新增和编辑

    我想大家在开发的过程中,肯定都会遇到这样一种场景, 编辑和新增都在同一个页面, 在处理这种问题的时候, 我想很多人都会这样处理

     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判断, 只要一个状态就可以解决之前的所有的差异化需求, 而且每个业务的需求都是独立的, 互不影响,这样即使在修改的时候也不会影响到另外一个业务, 当然缺点也很明显, 按照这种思路处理, 可能会有很多重复的代码, 不过这是不可避免的, 现实中, 没有那么完美的方案,只能说按照需求和情况 做出合适的处理和调整, 我们现在所做的一切都是为了需求和业务, 如果脱离了这些, 方案即使再完美, 哪又有何意义.

  • 相关阅读:
    SQL优化,解决系统运行效率瓶颈
    C#中 哪些是值类型 哪些是引用类型
    C#异常类相关总结
    对象 序列化 字节流 传输
    给数组中的每个元素赋值
    对象转化为 xml字符串
    .NET BETWEEN方法
    Datatable To List<Entity>
    ajax原理
    gulp记录
  • 原文地址:https://www.cnblogs.com/AeroJin/p/3914286.html
Copyright © 2011-2022 走看看