106°

关于对健壮性代码的理解

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

提高代码的健壮性

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

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

以上。

本文转载自博客园,原文链接:https://www.cnblogs.com/hjk1124/p/13054960.html

全部评论: 0

    我有话说: