关于对健壮性代码的理解

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

提高代码的健壮性

  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-9\u4E00-\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;
      }
    }
  }
}

以上。

来源：oschina

链接：https://my.oschina.net/u/4259809/blog/4302851

标签

javascript

stylus