11个Javascript小技巧帮你提升代码质量(小结)


Posted in Javascript onDecember 28, 2020

本文会不断更新,不足之处欢迎评论区补充。

1. 提炼函数

好处:

  • 避免出现超大函数。
  • 独立出来的函数有助于代码复用。
  • 独立出来的函数更容易被覆写。
  • 独立出来的函数如果拥有一个良好的命名,它本身就起到了注释的作用。
  • 语义化将多段分离的逻辑放在不同的函数中实现,可以使代码逻辑清晰,清楚的看到每一步在做什么。

代码举例:

实现获取数据,然后操作dom显示数据,最后添加事件

函数提炼前

// 逻辑都写在一起,需要将所有逻辑看完才知道这段代码是干嘛的,局部逻辑无法复用
function main() {
 $.ajax.get('/getData').then((res) => {
  const ul = document.getElementById('ul');
  ul.innerHTML = res.list.map(text => `<li class="li">${text}</li>`).join('\n');
  const list = document.getElementsByClassName('li');
  for (let i = 0; i < list.length; 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 => `<li class="li">${text}</li>`).join('\n');
}
function addEvent() {
 const list = document.getElementsByClassName('li');
 for (let i = 0; i < list.length; 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 < list.length; i++) {
  const item = list[i];
  if (str.includes(item.key)) {return item.browser};
 }
 return 'other';
}

5. 提前让函数退出代替嵌套条件分支

让函数变成多出口提前返回,替换嵌套条件分支。

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. 活用位操作符

编程语言计算乘除的性能都不高,但是某些情况使用位操作符可以提升乘除等运算的性能。

11. 纯函数

纯函数是指不依赖于且不改变它作用域之外的变量状态的函数。
纯函数的返回值只由它调用时的参数决定,它的执行不依赖于系统的状态(执行上下文)。
相同的输入参数,一定会得到相同的输出,也就是内部不含有会影响输出的随机变量。

不属于纯函数的特点:

  • 更改文件系统
  • 往数据库插入记录
  • 发送一个 http 请求
  • 可变数据
  • 打印/log
  • 获取用户输入
  • DOM 查询
  • 访问系统状态

纯函数的作用:

  • 可靠性:函数返回永远和预期一致
  • 可缓存性:因为只要输入一样输出一定一样,因此可将输入作为key,输出作为值,使用对象缓存已经计算的结果
  • 可移植性:因为没有外部依赖,所以移植到任何环境都可正确运行
  • 可测试性:方便针对函数做单元测试
  • 可并行性:对一些复杂计算,可以并行计算(例如使用nodejs多个子进程同时并行计算多个任务,提高计算速度)

应用场景:

  • 工具函数最好使用纯函数
  • 多平台使用的代码(nodejs、浏览器、微信小程序、native客户端等)
  • 相对独立的功能
var a = 1;
// 非纯函数
function sum(b) {
 return a + b;
}
// 非纯函数
function sum(b) {
 a = 2;
 return b;
}
// 非纯函数
function sum(b) {
 return b + Math.random();
}


// 纯函数
function sum (b, c) {
 return b + c;
}

参考

JavaScript设计模式与开发实践

到此这篇关于11个Javascript小技巧帮你提升代码质量(小结)的文章就介绍到这了,更多相关Javascript 提升代码质量内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js/html光标定位的实现代码
Sep 23 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
javascript中call,apply,bind的用法对比分析
Feb 12 Javascript
javascript单例模式的简单实现方法
Jul 25 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
Dec 19 Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
详解Angular模板引用变量及其作用域
Nov 23 Javascript
JS立即执行的匿名函数用法分析
Nov 04 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
vue中watch的用法汇总
Dec 28 #Vue.js
浅析vue中的nextTick
Dec 28 #Vue.js
js仿淘宝放大镜效果
Dec 28 #Javascript
JavaScript实现原型封装轮播图
Dec 27 #Javascript
JavaScript代码实现简单计算器
Dec 27 #Javascript
JavaScript实现雪花飘落效果
Dec 27 #Javascript
微信小程序自定义胶囊样式
Dec 27 #Javascript
You might like
优化PHP代码的53条建议
2008/03/27 PHP
解析yii数据库的增删查改
2013/06/20 PHP
yii的CURD操作实例详解
2014/12/04 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
jQuery select的操作实现代码
2009/05/06 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
浅谈webpack4 图片处理汇总
2018/09/12 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
python 网络爬虫初级实现代码
2016/02/27 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
建筑人员岗位职责
2013/12/25 职场文书
成本会计岗位职责
2015/02/03 职场文书
店长岗位职责
2015/02/11 职场文书
自我推荐信格式模板
2015/03/24 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书
MySQL 覆盖索引的优点
2021/05/19 MySQL
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle
详解Python中的for循环
2022/04/30 Python