教你如何写出优雅的 JavaScript 代码

lookSomeone 发布于2019-08-21 16:26 / 2755人阅读

摘要：前言同样一个功能，可以用很多方法来实现，有时候由于项目时间紧张，导致很多时候只是实现了功能，往往忽视了代码质量。下面几种代码重构方法，以便大家可以写出更优雅的代码。

前言

同样一个功能，可以用很多方法来实现，有时候由于项目时间紧张，导致很多时候只是实现了功能，往往忽视了代码质量。下面几种代码重构方法，以便大家可以写出更优雅的代码。

一，提炼函数

var getUserInfo = function(){
  ajax( "http:// xxx.com/userInfo", function( data ){
      console.log( "userId: " + data.userId );
      console.log( "userName: " + data.userName );
      console.log( "nickName: " + data.nickName );
  })
})

//  重构后
var getUserInfo = function(){
  ajax( "http:// xxx.com/userInfo", function( data ){
    printDetails( data ); });
};

var printDetails = function( data ){ 
  console.log( "userId: " + data.userId ); 
  console.log( "userName: " + data.userName ); 
  console.log( "nickName: " + data.nickName );
};

二，合并重复的条件片段

var paging = function( currPage ){
  if ( currPage <= 0 ){
    currPage = 0;
    jump( currPage );
  }else if ( currPage >= totalPage ){
    currPage = totalPage;
    jump( currPage );
  }else{
    jump( currPage );
  }
}

// 重构后，把重复函数独立出来
var paging = function( currPage ){
    if ( currPage <= 0 ){
        currPage = 0;
    }else if ( currPage >= totalPage ){
        currPage = totalPage; 
    }
    jump( currPage );
};

三，把条件分支语句提炼成函数

var getPrice = function( price ){
  var date = new Date();
  if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){
    return price * 0.8;
  }
  return price; 
};

// 重构后，改成能够理解的函数
var isSummer = function(){
  var date = new Date();
  return date.getMonth() >= 6 && date.getMonth() <= 9;
};

var getPrice = function( price ){ 
  if ( isSummer() ){ 
  return price * 0.8;
}
  return price; 
};

四，合理使用循环
五，提前让函数退出代替嵌套条件分支

点击更多

GPU云服务器云服务器代码html写出键盘汇编语言写出来的程序叫什么如何编写高性能的javascript 一个教你开发小程序的小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88546.html

javascript知识点

摘要：模块化是随着前端技术的发展，前端代码爆炸式增长后，工程化所采取的必然措施。目前模块化的思想分为和。特别指出，事件不等同于异步，回调也不等同于异步。将会讨论安全的类型检测惰性载入函数冻结对象定时器等话题。 Vue.js 前后端同构方案之准备篇——代码优化目前 Vue.js 的火爆不亚于当初的 React，本人对写代码有洁癖，代码也是艺术。此篇是准备篇，工欲善其事，必先利其器。我们先在代...

Karrdy 2019-08-26 11:34 评论0 收藏0
教你在不使用框架的情况下也能写出现代化 PHP 代码

摘要：毕竟，我们还将在接下来的开发之旅中使用其他框架开发者编写的辅助包。缺乏行业标准必然意味着，框架中的这些组件高度耦合。如果你尝试对这个类进行单元测试，会发现根本不可行。在做单元测试的时候，我们可以很好地模拟数据库连接，并将其传入使用。 showImg(https://segmentfault.com/img/remote/1460000014180802); 我为你们准备了一个富有挑战性...

trigkit4 2019-06-28 18:40 评论0 收藏0
vscode一格式化就报错？各种风格问题各种报错烦不胜烦，教你如何用好vue的eslint风格配置

摘要：格式化安装插件如果题主认真读了的的话，应该可以写出下面的配置了。用来格式化和提示格式错误。在编码过程中提示格式错误，养成良好的编码习惯。前言感觉搭建一个舒服的前端开发环境，十分的重要定制化的格式化，编辑器自带的格式化各种报错，手动改真的会死人，因此搭建一个编辑器环境必不可少，现在要讲的是vscode中如何定制vue vs code的配置文件: showImg(https://seg...

Achilles 2019-08-22 16:16 评论0 收藏0
FCC 成都社区·前端周刊第 9 期

摘要：详情行人脸识别库是仅行代码的人脸识别库，最小只有。详情开发大型应用这是根据上发表的演讲整理的文章，分享了作者在开发大型应用后的一些心得。详情每周一同步更新到欢迎 1. Node.js 10 将带来什么？ Node.js 10 的第一个版本将于本周二（4 月 24 日）发布，并将在 10 月份推出 LTS 版本，将带来哪些更新？ N-API，持续 HTTP/2 支持，ECMAScript...

kid143 2019-08-22 16:38 评论0 收藏0
FCC 成都社区·前端周刊第 9 期

摘要：详情行人脸识别库是仅行代码的人脸识别库，最小只有。详情开发大型应用这是根据上发表的演讲整理的文章，分享了作者在开发大型应用后的一些心得。详情每周一同步更新到欢迎 1. Node.js 10 将带来什么？ Node.js 10 的第一个版本将于本周二（4 月 24 日）发布，并将在 10 月份推出 LTS 版本，将带来哪些更新？ N-API，持续 HTTP/2 支持，ECMAScript...

KaltZK 2019-08-29 15:08 评论0 收藏0