• Live2d Test Env


    这两天学到了很多知识,对项目的严密性有了极为深刻的理解,简而言之,身为前端开发者要站在用户的角度去写相关代码,而不能仅仅局限于理所当然,也不可以认为数据有便有,没有便没有,身为开发者,更多的应该考虑用户的感受,总结了以下几点:

    提高代码的健壮性

      1.非空过滤
    

    给每一条要渲染显示的数据添加过滤器

    要思考的不仅仅是渲染成功后的结果,更多要思考的是如果渲染不成功会显示什么,也就是当返回结果为空时,要显示给用户的是什么

      2. 不完全相信后台
    

    发起请求时添加条件判断

    虽然if/else饱受诟病,但可能后台开发者本身也不能确保不出任何问题,为了提高容错率,加一点条件判断是必要的,并且,要结合多个条件确保拿到的是正确的数据

      3. 不完全相信用户
    

    对用户输入的数据进行严格验证

    作为开发者当然期待用户输入的是自己想要的格式,但用户是单纯的,你不能确保用户一定会按照你想要的进行输入,这一点至关重要

      4. 考虑代码的可复用性
    

    包括html/css/js/单页面组件

    原则:抽离共性,保留不同

    html: 若dom结构大致相同,可以使用相同的dom结构;
    css/less/scss/stylus: 同一app内若有多次的div/view/text style,可以直接在public.css/less/sass/stylus中声明共有样式
    js:将需要多次使用的业务逻辑封装成单一功能函数,并在函数内部首先对参数格式进行评估,之后添加条件判断对参数进行过滤筛选,最后再对符合条件的参数进行处理

    如果单页面中需要多次使用该函数,则仅需要对在script内进行封装,如果在多页面中需要多次使用该函数,可以创建一个utils.js文件存放共有函数
    (vue/uniapp)如果导入utils.js的函数并准备在单页面中进行使用时,推荐在该单页面中声明一个与utils.js中的同名函数,并直接return该同名函数(本质是为了返回utils.js中的同名函数)

      5.考虑网络请求
    

    用户的流量是宝贵的,后台服务器的压力是可观的

    基于用户场景(思考:用户来到某一页面的目的是什么)选择是否发送适当的请求,要思考的是,如何在保证功能不变的情况下,减少与后台的交互,从而节省带宽

    ------------------------------------------------------------假装是条分割线----------------------------------------------------------------------

    精妙的过滤函数

    1. 展示数据的非空处理

    //用于过滤 undefined,空字符串,null,'null'
    filterEmpty(value,success,tips){
    	  if(value === undefined || value === '' || value === null || value === 'null' || value === " "){
    	    if(tips === undefined){
    	      return "-";
    	    }else{
    	      return tips
    	    }
    	  }else{
    	    if(typeof(success) === "function"){//如果是一个方法则调用方法
    	      return success();
    	    }else{//否则直接返回第一个参数
    	      return value;
    	    }
    	  }
    	}
    

    2. 表单相关验证

    2.1 正则相关验证

      //只包含数字,英文,汉字
      isNYC:function(obj ,tipValue,$this){
        let specialCharacters = /[\ud83c\udc00-\ud83c\udfff]|[\ud83d\udc00-\ud83d\udfff]|[\u2600-\u27ff]/g;
        if(/[^a-zA-Z0-9u4E00-u9FA5]/.test(obj) && specialCharacters.test(obj)){
          let tip;
          if(tipValue !== undefined && tipValue !== '' && tipValue !== null && tipValue !== '' && tipValue !== " "){
            tip = tipValue;
          }else {
            tip = '名称不能包含特殊字符';
          }
    			uni.showToast({
    				title:tip
    			})
          return false;
        }
        return true;
      }
    

    2.2 汉字验证

     // 汉字
      isChinese: function(obj,$this) {
        var reg = /^[u0391-uFFE5]+$/;
        if(obj != "" && !reg.test(obj)) {
    			uni.showToast({
    				title:'必须输入中文'
    			})
          return false;
        }
        return true;
      }
    

    2.3 字母

     // 字母
      checkChar: function(obj,$this) {
        var zmReg = /^[a-zA-Z]*$/;
        if(obj != "" && !zmReg.test(obj)) {
    			uni.showToast({
    				title:'只能是英文字母'
    			})
          return false;
        }
        return true;
      }
    

    2.4 数字

    // 数字
      checkNumber: function(obj,$this) {
        var reg = /^[0-9]+$/;
        if(obj != "" && !reg.test(obj)) {
    			uni.showToast({
    				title:'只能输入数字'
    			})
          return false;
        }
        return true;
      }
    

    2.5 英文字母和数字

      // 英文字母和数字
      checkStrOrNum: function(obj,$this) {
        var zmnumReg = /^[0-9a-zA-Z]*$/;
        if(obj != "" && !zmnumReg.test(obj)) {
    			uni.showToast({
    				title:'只能输入是字母或者数字,请重新输入'
    			})
          return false;
        }
        return true;
      },
    

    2.6 邮箱

      // 邮箱
      email: function(obj,$this) {
        var myreg = /^([a-zA-Z0-9]+[_|\_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/;
        if(!myreg.test(obj)) {
    			uni.showToast({
    				title:'请输入有效的邮箱'
    			})
          return false;
        }
        return true;
      },
    

    3 时间戳转换

    changeInfoDate(msesInt, format) {
      Date.prototype.Format = function(fmt) {
        var o = {
          "M+": this.getMonth() + 1, //月份
          "d+": this.getDate(), //日
          "H+": this.getHours(), //小时
          "m+": this.getMinutes(), //分
          "s+": this.getSeconds(), //秒
          "q+": Math.floor((this.getMonth() + 3) / 3), //季度
          "S": this.getMilliseconds() //毫秒
        };
        if(/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for(var k in o)
          if(new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
      };
    
      var dt = new Date(msesInt); // 初始化Date对象
      var ndt = dt.Format(format);
      return ndt;
    };
    
    filterDate(date,success,tips) {//用于过滤时间戳
      if(date === undefined || date === '' || date === null || date === 'null' || date == 0 || date === ' ' || date === " "){//判空处理
        if(tips == undefined){
          return "-";
        }else {
          return tips;
        }
      }else{
        if(typeof(date) === "number" || (typeof (date) === "string" && (date.length >= 10 && date.length <= 13) && date.indexOf("/") === -1 && date.indexOf("-") === -1 && date.indexOf("年") === -1 && date.indexOf(".") === -1)){//为时间戳
          if(typeof(date) === "string"){
            date = parseInt(date);
          }
          return changeInfoDate(date, 'yyyy-MM-dd');
        } else{
          if(typeof(success) === "function"){//如果是一个方法则调用方法
            return success();
          }else{//否则直接返回第一个参数
            return date;
          }
        }
      }
    }
    
    

    以上。

  • 相关阅读:
    ERROR 1452 (23000): Cannot add or update a child row: a foreign key constraint......
    模拟Executor策略的实现
    设计3D标签
    创建被图像填充的组件
    netty基础09_利用EmbeddedChannel做单元测试
    netty基础08_引导类
    netty基础07_Netty提供的消息处理器和编码解码器
    netty基础06_编码器和解码器
    netty基础05_管道和消息处理器
    netty基础04_数据缓冲区
  • 原文地址:https://www.cnblogs.com/hjk1124/p/13054960.html
Copyright © 2020-2023  润新知