标签：obj 健壮性 代码 title 理解 && uni date return

转：

关于对健壮性代码的理解

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

提高代码的健壮性

  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;
  },

2.7 手机号

  // 手机号
  phone: function(obj,$this) {
    if(obj.length == 0) {
			uni.showToast({
				title:'手机号码不能为空!'
			})
      return false;
    }
    if(obj.length != 11) {
			uni.showToast({
				title:'请输入有效的手机号码，需是11位！'
			})
      return false;
    }
    var myreg = /^(((13[0-9]{1})|(14[5|7])|(15([0-3]|[5-9]))|(17[013678])|(18[0,5-9]))+d{8})$/;
    if(!myreg.test(obj)) {
			uni.showToast({
				title:'请输入有效的手机号码！'
			})
      return false;
    }
    return true;
  }

3 时间戳转换

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;
      }
    }
  }
}

以上。

转：

关于对健壮性代码的理解

标签：obj,健壮性,代码,title,理解,&&,uni,date,return
来源： https://www.cnblogs.com/wangtcc/p/14472350.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。