java提高代码质量的小技巧,10个 Javascript 小技巧帮你提升代码质量
Javascript 常用代码优化和重构的方法
简介
主要介绍以下几点:
提炼函数
合并重复的条件片段
把条件分支语句提炼成函数
合理使用循环
提前让函数退出代替嵌套条件分支
传递对象参数代替过长的参数列表
少用三目运算符
合理使用链式调用
分解大型类
本文会不断更新,不足之处欢迎评论区补充。
提炼函数
好处:
避免出现超大函数。
独立出来的函数有助于代码复用。
独立出来的函数更容易被覆写。
独立出来的函数如果拥有一个良好的命名,它本身就起到了注释的作用。
语义化将多段分离的逻辑放在不同的函数中实现,可以使代码逻辑清晰,清楚的看到每一步在做什么。
代码举例:
实现获取数据,然后操作dom显示数据,最后添加事件
函数提炼前
// 逻辑都写在一起,需要将所有逻辑看完才知道这段代码是干嘛的,局部逻辑无法复用
function main(){
$.ajax.get('/getData').then((res) => {
const ul = document.getElementById('ul');
ul.innerHTML = res.list.map(text => `
${text}
`).join('\n');
const list = document.getElementsByClassName('li');
for (let i = 0; i
list[i].addEventListener('focus', () => {
// do something
});
}
});
}
函数提炼后
function getData(){
return $.ajax.get('/getData')
.then((res) => res.data.list);
}
function showList(list){
const ul = document.getElementById('ul');
ul.innerHTML = list.map(text => `
${text}
`).join('\n');
}
function addEvent(){
const list = document.getElementsByClassName('li');
for (let i = 0; i
list[i].addEventListener('focus', () => {
// do something
});
}
}
// 逻辑清晰,一眼读懂每一步在做什么,某些提炼出来的函数还可以被复用
async function main() {
const list = await getData(); // 获取数据
showList(list); // 显示页面
addEvent(); // 添加事件
}
2. 合并重复的条件片段
如果一个函数体内有一些条件分支语句,而这些条件分支语句内部散布了一些重复的代码,那么就有必要进行合并去重工作。
// 合并前
function main(currPage){
if ( currPage <= 0 ){
currPage = 0;
jump( currPage ); // 跳转
}else if ( currPage >= totalPage ){
currPage = totalPage;
jump( currPage ); // 跳转
}else{
jump( currPage ); // 跳转
}
};
// 合并后
function main(currPage){
if ( currPage <= 0 ){
currPage = 0;
}else if ( currPage >= totalPage ){
currPage = totalPage;
}
jump( currPage ); // 把jump 函数独立出来
};
3. 把条件分支语句提炼成函数
复杂的条件分支语句是导致程序难以阅读和理解的重要原因,而且容易导致一个庞大的函数。有时可以将条件分支语句提炼成语义化的函数,使代码更加直观,逻辑清晰。
// 根据不同季节决定打折力度
function getPrice(price){
var date = new Date();
// 夏天
if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){
return price * 0.8;
}
return price;
};
// 是否是夏天
function isSummer(){
var date = new Date();
return date.getMonth() >= 6 && date.getMonth() <= 9;
};
// 提炼条件后
function getPrice(price){
if ( isSummer() ){
return price * 0.8;
}
return price;
};
4. 合理使用循环
如果多段代码实际上负责的是一些重复性的工作,那么可以用循环代替,使代码量更少。
// 判断是什么浏览器
function getBrowser(){
const str = navigator.userAgent;
if (str.includes('QQBrowser')) {
return 'qq';
} else if (str.includes('Chrome')) {
return 'chrome';
} else if (str.includes('Safari')) {
return 'safri';
} else if (str.includes('Firefox')) {
return 'firefox';
} else if(explorer.indexOf('Opera') >= 0){
return 'opera';
} else if (str.includes('msie')) {
return 'ie';
} else {
return 'other';
}
};
// 循环判断,将对应关系抽象为配置,更加清晰明确
function getBrowser(){
const str = navigator.userAgent;
const list = [
{key: 'QQBrowser', browser: 'qq'},
{key: 'Chrome', browser: 'chrome'},
{key: 'Safari', browser: 'safari'},
{key: 'Firefox', browser: 'firefox'},
{key: 'Opera', browser: 'opera'},
{key: 'msie', browser: 'ie'},
];
for (let i = 0; i
const item = list[i];
if (str.includes(item.key)) {return item.browser};
}
return 'other';
}
提前让函数退出代替嵌套条件分支 让函数变成多出口提前返回,替换嵌套条件分支。
function del(obj){
var ret;
if ( !obj.isReadOnly ){ // 不为只读的才能被删除
if ( obj.isFolder ){ // 如果是文件夹
ret = deleteFolder( obj );
}else if ( obj.isFile ){ // 如果是文件
ret = deleteFile( obj );
}
}
return ret;
};
function del(obj){
if ( obj.isReadOnly ){ // 反转if 表达式
return;
}
if ( obj.isFolder ){
return deleteFolder( obj );
}
if ( obj.isFile ){
return deleteFile( obj );
}
};
6. 传递对象参数代替过长的参数列表
函数参数过长那么就增加出错的风险,想保证传递的顺序正确就是一件麻烦的事,代码可读性也会变差,尽量保证函数的参数不会太长。如果必须传递多个参数的话,建议使用对象代替。
一般来说,函数参数最好不要超过3个
function setUserInfo(id, name, address, sex, mobile, qq){
console.log( 'id= ' + id );
console.log( 'name= ' +name );
console.log( 'address= ' + address );
console.log( 'sex= ' + sex );
console.log( 'mobile= ' + mobile );
console.log( 'qq= ' + qq );
};
setUserInfo( 1314, 'sven', 'shenzhen', 'male', '137********', 377876679 );
function setUserInfo(obj){
console.log( 'id= ' + obj.id );
console.log( 'name= ' + obj.name );
console.log( 'address= ' + obj.address );
console.log( 'sex= ' + obj.sex );
console.log( 'mobile= ' + obj.mobile );
console.log( 'qq= ' + obj.qq );
};
setUserInfo({
id: 1314,
name: 'sven',
address: 'shenzhen',
sex: 'male',
mobile: '137********',
qq: 377876679
});
7. 少用三目运算符
三目运算符性能高,代码量少。
但不应该滥用三目运算符,我们应该在简单逻辑分支使用,在复杂逻辑分支避免使用。
// 简单逻辑可以使用三目运算符
var global = typeof window !== "undefined" ? window : this;
// 复杂逻辑不适合使用
var ok = isString ? (isTooLang ? 2 : (isTooShort ? 1 : 0)) : -1;
8. 合理使用链式调用
优点:
链式调用使用简单,代码量少。
缺点:
链式调用带来的坏处就是在调试不方便,如果我们知道一条链中有错误出现,必须得先把这条链拆开才能加上一些调试 log 或者增加断点,这样才能定位错误出现的地方。
如果该链条的结构相对稳定,后期不易发生修改,可以使用链式。
var User = {
id: null,
name: null,
setId: function(id){
this.id = id;
return this;
},
setName: function(name){
this.name = name;
return this;
}
};
User
.setId( 1314 )
.setName( 'sven' );
var user = new User();
user.setId( 1314 );
user.setName( 'sven' );
9. 分解大型类
大型类的分解和函数的提炼很像,类太大会出现逻辑不清晰,难以理解和维护的问题。
合理的大类分解可以使类的逻辑清晰,且子模块可以方便复用。
10. 活用位操作符
编程语言计算乘除的性能都不高,但是某些情况使用位操作符可以提升乘除等运算的性能。
// 按位右移
var n = parseInt(3 / 2); // 原始
var n = 3 >> 1; // 按位右移
java提高代码质量的小技巧,10个 Javascript 小技巧帮你提升代码质量相关推荐
- 11个 Javascript 小技巧帮你提升代码质量
Javascript 常用代码优化和重构的方法 简介 主要介绍以下几点: 提炼函数 合并重复的条件片段 把条件分支语句提炼成函数 合理使用循环 提前让函数退出代替嵌套条件分支 传递对象参数代替过长的参 ...
- java提高篇之详解内部类
转载自 java提高篇之详解内部类 内部类是一个非常有用的特性但又比较难理解使用的特性(鄙人到现在都没有怎么使用过内部类,对内部类也只是略知一二). 第一次见面 内部类我们从外面看是非常容易理解的,无 ...
- 程序员必知的10个C语言技巧
点击蓝字 关注我们 硬件设计师最常见的工作内容,就是通过写代码来测试硬件.这10个C语言技巧(C语言仍然是常见的选择)可以帮助设计师避免因基础性错误而导致某些缺陷的产生,并造成维护方面的困扰. 为了成 ...
- java提高篇(八)----详解内部类
可以将一个类的定义放在另一个类的定义内部,这就是内部类. 内部类是一个非常有用的特性但又比较难理解使用的特性(鄙人到现在都没有怎么使用过内部类,对内部类也只是略知一二). 第一次见面 内部类我们从外面 ...
- 微信小程序中的JavaScript 简明介绍
小程序的主要开发语言是 JavaScript ,开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来完成业务需求. 1 ECMAScript 在大部分开发者看来,ECMAScr ...
- 10个重构小技巧,去掉代码中的S味
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章 来源 | https://urlify.cn/yme6Vz 本次我 ...
- java游戏小程序_javaCode 158个经典小程序,里面包含各种小游戏代码,能提高初学者 趣,同事可以从中学习 Games 246万源代码下载- www.pudn.com...
文件名称: javaCode下载 收藏√ [ 5 4 3 2 1 ] 所属分类: Games 开发工具: Java 文件大小: 543 KB 上传时间: 2015-10-25 下载次数: ...
- 巴别鸟10个使用小技巧,提高你的工作效率
用巴别鸟,可以提高团队协作效率,用巴别鸟小技巧,可以提高你的效率.以下这10个小技巧你知道吗? 1.文件拖曳上传 上传文件,除了点击"新建"按钮,上传文件外,你还可以在右边的空白处 ...
- java 强制转换 效率_Java 性能优化:35 个小细节,让你提升 Java 代码的运行效率...
代码优化细节 1.尽量指定类.方法的final修饰符 2.尽量重用对象 3.尽可能使用局部变量 4.及时关闭流 5.尽量减少对变量的重复计算 6.尽量采用懒加载的策略,即在需要的时候才创建 7.慎用异 ...
最新文章
- 【数据结构与算法】图结构的Java实现
- java 优酷视频缩略图_优酷视频缩略图
- 盛辉智能机器人安全吗_人工智能真的安全吗?快看这些已经发出的警告
- 开源供应链金融_成为开源供应链
- Bootstrap创建按钮组
- python怎么抓取网页倒计时_python实现的简单窗口倒计时界面实例
- 戴钊《自我教练:迈向自我实现之路》读书笔记
- 【AI学习笔记】退出 Anaconda 虚拟环境时 遇到的两种报错。
- 怎么用python画房子_python绘图作业:使用pygame库画房子
- 483g路由器连接服务器无响应,TP-LINK企业路由器设置 TP-LINK TL-R483 Wan口设置图文教程...
- 像素值为什么归一化?归一化作用?
- 域名注册条件有哪些?需要提交哪些材料?
- 【Java】 杨辉三角 二维数组打印杨辉三角
- 定时开关机的八种方法
- 一文带你理解前后端分离本质
- 2019年国赛高教杯数学建模E题薄利多销分析解题全过程文档及程序
- 《相信未来》——食指 1
- JAVA知识梳理(日常整理)
- JSP+MySQL电子图书馆借还及查询系统
- java理论知识之Redis
热门文章
- mysql添加 分隔_分割字符串并插入表---mysql
- C与C++关于*与的传参解析
- 放弃 Python 2 之后,这家公司写了 50 万行的 Go 代码来迁移!
- 在 GitHub 上提交代码必备指南!
- 清华毕业生最爱去华为;应届生称因拒绝加班,被申通快递辞退;PrestoSQL被迫更名 | 极客头条...
- 常年“盘踞”数据库前五的 MongoDB,在中国有哪些新动向?
- 直击鲲鹏开发者训练营下一城,11.20 福州见
- “数学不行,干啥也不行!”CTO:基础差的程序员,你不知道有多难!
- 达摩院再获自动驾驶权威测评第一,车辆可识别“厘米级”障碍物
- TIOBE 3 月编程语言排行榜:Java 大涨,Delphi 辉煌不再!