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