分享一下平常开发经常出现问题,增加代码质量的十个小点:
特别是网络请求或者其他异步操作中,await 记得包裹 try catch,可以给用户一个友好提示,同时可以考虑 catch 中需要做什么兜底处理,必要时进行上传日志。
try {
this.loading = this.$loading({
lock: true,
text: '加载中...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)',
});
const info = await resDistributeService({ taskTicketId: this.id });
...
} catch (e) {
this.$message({
type: 'error',
message: e.msg || e.message || '失败',
});
} finally {
this.loading.close();
}
可以结合 finally,处理 loading 等。
前端经常使用 !v ,来判断 v 是不是有值。
if(!v){
return
}
doSomething()
但如果 0 是 v 的有效值 ,此时本该处理,但会提前结束,最终引发错误。此时需要显示的判断是否是 null 或者 undefined 。
if(v === null || v=== undefined){
return
}
doSomething()
由于 js 中的对象是引用,因此赋默认值的时候最好通过函数,每次都返回一个新对象。
bad:
const defaultCondition = {
name: '',
conditionList: [
{
conditionCode: '',
conditionValue: null,
},
],
}
export default {
data() {
return {
condition: {...defaultCondition},
};
},
methods: {
closeDialog() {
this.condition = {...defaultCondition};
this.configId = null;
this.$refs.form.resetFields();
},
},
};
good:
const getDefaultCondition = () => ({
name: '',
conditionList: [
{
conditionCode: '',
conditionValue: null,
},
],
})
export default {
data() {
return {
condition: getDefaultCondition(),
};
},
methods: {
closeDialog() {
this.condition = getDefaultCondition();
this.configId = null;
this.$refs.form.resetFields();
},
},
};
将接口的定义放到统一文件中,未来变动改动起来会比较方便,如果各个 url 都写死在页面中以后就很麻烦了。
// service.js
import request from 'utils/request';
const service = new (request('/api/m/mallorder/exp/compensation/customer'))();
export const listService = (params) => {
return service.post('/queryRuleList', params);
};
export const listDataKey = 'ruleVOList';
export const idKey = 'ruleId';
export const dialogEnumService = () => {
return service.get('/info');
};
export const saveService = (params) => {
return service.post('/saveRule', params);
};
export const detailService = (params) => {
return service.get('/detail', params);
};
此外,网络请求一般都会在 npm 包的基础上自己再包一层,一方面可以注入共用参数,另一方面可以对返回数据进行统一的错误处理。
如果定义一个函数需要 3 个以上的参数
function(a,b,c,d){
}
此时可以考虑采用对象解构,改为
function({a=1,b,c,d}={}){
}
好处是未来需要扩展参数的时候,不需要太担心其他地方调用时候传参是否会引起问题。
当然,如果参数过多也需要思考一下当前函数是否承载了太多的功能,进行一下功能上的拆分。
当我们已经定义了一个函数,比如去初始一些变量。
function initOptions(){
a = xxx
b = xxx
}
此时我们需要做另一件无关的事 【A】,虽然它和 initOptions 调用的时机一致,但最好不要直接放到 initOptions 中,而是新建一个函数单独调用。
不然未来如果其他地方也要调 initOptions,但此时可能并不需要做【A】这件事情就会引起 bug。
由于 js 语言的灵活性,函数传入的参数很可能不符合预期,必要时我们需要进行判断并且进行兜底处理,不可完全信任调用方。
团队合作中,该函数在未来极大可能会被其他人调用。
function doSomeThing(params1, params2) {
if(params1 === null){
return;
}
if(params2){
...
}
// 再去做我们的事情
}
如果后边的流程强依赖于 params,我们可以直接 return,必要时也可以上报日志或者 throw Error。
js 中没有整数类型,即 java 中的 int、long 这些,所有数字都遵循 IEEE 754 标准,即 java 中的 double 类型,详细的可参考 浮点数详解。
可以精确表示的最大整数是 9007199254740991,共 16 位,超过这个数精度可能会丢失,对于新接口,可以问一下后端相应数字字段的最大值会是多少。
对于浮点数的处理,除了众所周知的 0.1 + 0.2 === 0.3 的值为 false 外,当我们对数字进行运算的时候也需要注意。
常见的将 9.04 元转为 904 分:
我们需要对结果进行取整处理。
可选链操作符,参考 MDN ,用的比较多。
和后端定的数组或者对象,后端有时候返回来的很可能是 null 甚至没有该字段,因此前端可以用可选链操作符用于数组、对象、函数,防止出现错误直接阻断后续流程。
let nestedProp = obj.first?.second; // 等效于 obj.first && obj.fisrt.second
//后续流程
但不要过度使用可选链,如果某些地方理论上不会出问题,比如 let test = obj.first?.second,如果 second 一定能取到,我们直接 let test = obj.first.second 即可。
不然未来如果这里由于某种原因出了问题导致 obj.first 是 null,但我们使用了可选链,所以 obj.first?.second 也不会报错,我们就永远不会知道这里出现问题了。
当然也需要权衡下,不加可选链造成 js Error 会不会影响业务逻辑。
修改或者使用对象、数组时,时刻切记它们为引用,一处修改会造成处处修改。
来源: windliang
战线切勿拖太长,除非练手,否则不是真心想去的公司就别试了。对公司信息的了解要放在平时,多与同事朋友了解沟通,偶尔逛逛blind一亩三分地一类,这样才能确定下次跳槽的目标,有的放矢。选公司不是买菜!别见一个爱一个
ie下websocket的安全限制问题:数据看板中的数据大部分都是实时数据或前一天统计的历史数据,因此这边后端考虑采用websocket来实时和定时推送数据来保证数据的实时性和有效性。而前端开发这边为了提高前端开发的复用性,采用了在各个组件中开发成一个个的小部件
从11岁时,我就一直在编程,并且一直都很喜欢技术和编程。这些年来,我积累了一些艰难又容易的经验。作为一名程序员,你或许还没这些经验,但我会把它们献给那些想从中学到更多的朋友
我发现前端开发人员一直在努力征服CSS。理由也很充分,开发人员是用逻辑思考的生物。添加一个DIV元素导致所有代码都不得不往下移一行,而另一个DIV“浮”到左侧,感觉没有任何意义
这是一篇值得收藏起来,隔三差五就拿来重读的文章!因为作者向你保证,他“遇到的所有糟糕的代码,都是因为没采纳这些实践经验。而任何一段优秀的代码,都采纳了至少部分实践经验。”
别再用 JS 框架了,转向可复用、可正交组合的 HTML+CSS+JS 单元吧。这几年我零零碎碎写过一些进展,现在既然 Jon 问到了,我觉得有必要把这些总结成一篇文章概括一下。我和我的团队一直在用 Web 组件来构建我们的 Web UI。
一个拥有 20 年编程经验的“熟手”,编程干货有多少?本文的作者是一名从业 20 年的程序员,在本文中,他分享了自己这 20 年来学到的 5 种编程经验:重复的知识最糟糕、把代码当成一种债务、对高级开发人员信任但去验证、使用 TDD
我们是从一个只有3个人其他啥都没有的创业公司逐步成长为一家大型的具备可扩展性,业务操作能力,数据库和产品开发的企业。如果你真心醉心于做企业,那么这就应该成为你的目标
踏入职场后写代码已经有 14 个年头,保守估计应该垒了有 50 万行的代码。尤其最近 1 年多从 0 开始写起 Bytebase,日常也会 review 同事的代码。趁着端午也总结了一些经验
能把一件事坚持 40 年的人并不多,我们今天要介绍的这位就是其中一员。他叫 Noah Gibbs,从事编程工作快满 40 年了,最近他用博客的形式分享了自己总结的一些经验。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!