美文网首页程序员
表单提交的简单优化

表单提交的简单优化

作者: JsLin_ | 来源:发表于2018-08-01 22:14 被阅读108次

    今天,分配的任务做完,问我们组长有没有工作需要帮助,她来了句把自己代码优化下,影响性能的地方,以及 不规范的地方 自己优化下,然后给她看... (等着被吊)


    image.png

    优化前 (好吧确实臃肿)

     handleSubmit = () => {
        // const {
        //   // navigation: { navigate },
        //   ContactStore: { first, second, data },
        // } = this.props;
        //上传 first, second, data
        if (!this.state.FirstSelectName) {
          Toast.show('请选择第一联系人关系', {
            position: Toast.positions.CENTER,
          });
          return false;
        }
        if (!this.state.selectphone) {
          Toast.show('请选择第一联系人姓名', {
            position: Toast.positions.CENTER,
          });
          return false;
        }
        if (!this.state.SecendSelectName) {
          Toast.show('请选择第二联系人关系', {
            position: Toast.positions.CENTER,
          });
          return false;
        }
        if (!this.state.selectphone_) {
          Toast.show('请选择第二联系人姓名', {
            position: Toast.positions.CENTER,
          });
          return false;
        }
        if (this.state.selectphone === this.state.selectphone_) {
          Toast.show('请不要重复选择联系人', {
            position: Toast.positions.CENTER,
          });
          return false;
        }
        //上传通讯录
    }
    

    优化后 (指导下...)

    ...
     static defaultProps = {
        errorInfo:{
       FirstSelectName:"请选择第一联系人关系",
          selectphone:"请选择第一联系人姓名",
          SecendSelectName:"请选择第二联系人关系",
          selectphone_:"请选择第二联系人姓名",
          errorduplicate:"请不要重复选择联系人",
        }
      };
    ....
     handleSubmit = () => {
       const {errorInfo,navigation} = this.props;
       const formCheckArray = ["FirstSelectName","selectphone","SecendSelectName","selectphone_"];
       const result = formCheckArray.find(key=> !this.state[key]);
       if(result){
        Toast.show(errorInfo[result], {
          position: Toast.positions.CENTER,
        });
         return false;
    
       }
        if (this.state.selectphone === this.state.selectphone_) {
          Toast.show(errorInfo.errorduplicate, {
            position: Toast.positions.CENTER,
          });
          return false;
        }
        //上传通讯录
    }
    
    

    是不是舒服多了 ,这里有个优化原则 就是把静态内容 统一管理。 还有其他的优化方案,待研究。。。。
    这里记录下 es6的 find的使用:
    语法:arr.find(callback[, thisArg])

    描述:
    find 方法对数组中的每一项元素执行一次 callback 函数,直至有一个 callback 返回 true。当找到了这样一个元素后,该方法会立即返回这个元素的值,否则返回 undefined
    注意 callback 函数会为数组中的每个索引调用即从 0 到length - 1,而不仅仅是那些被赋值的索引,这意味着对于稀疏数组来说,该方法的效率要低于那些只遍历有值的索引的方法。
    
    callback 函数带有3个参数:当前元素的值、当前元素的索引,以及数组本身。
    
    如果提供了 thisArg 参数,那么它将作为每次 callback 函数执行时的上下文对象,否则上下文对象为 undefined
    
    find 方法不会改变数组。
    
    在第一次调用 callback函数时会确定元素的索引范围,因此在 find 方法开始执行之后添加到数组的新元素将不会被 callback 函数访问到。如果数组中一个尚未被callback函数访问到的元素的值被callback函数所改变,那么当callback函数访问到它时,它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍旧会被访问到。
    

    返回值: 当某个元素通过 callback 的测试时,返回数组中的一个值,否则返回 undefined。

    相关文章

      网友评论

      本文标题:表单提交的简单优化

      本文链接:https://www.haomeiwen.com/subject/mikdvftx.html