如何编写高质量代码

标签：

对于开发人员来说，编写高质量的代码是有很重要的意义的，特别是在团队协作里。本篇博文从前端开发的角度，总结出编写高质量前端代码的一些经验。前端开发涉及的主要语言包括html,css,js等。这里主要针对JS来介绍。

编码思维

1. 逻辑思维

当接到某个任务的时候，不要急于开始动手，而是先静下心来思考，理清这个任务要实现的功能，这个功能用在什么场景下，将来是否会复用，如果将来会变化，可能会怎样变化。要怎么设计利于功能的扩展和优化，可能会出现哪些问题，如何规避问题。这些都是在前期动笔前需要思考清楚的，不然到后面开发的时候可能会不停的修改，最终效率越来越低。一个功能有着良好的运行逻辑，才不会容易出错。当然如果时间不允许，或是只上一次就废弃的功能，此时效率可能会优先考虑。

通常专业的设计师，在设计网页的时候会使页面保持相同的风格，相似的模块同质性很高，这些在我们开发的时候，对复用性较高的代码定义成公共的模块或组件。甚至我们在接到设计稿的时候，对于差异较大但是功能类似的页面提出疑问，提醒视觉保持统一。

有良好的逻辑思维能力和丰富的工作经验能使我们想的更深更远。对写代码保持强烈的热情跟好奇心，多看多读，有些代码晦涩难懂，比如复杂的算法或是新的概念，没关系，第一次看了了解，第二次看了就熟悉，第三次可能就精通了，坚持学习和吸收新的知识，有助于我们更好的了解需要开发的功能，磨练自己的逻辑思维，增加解决问题的办法。

2. 优化思维

对于自己写过的代码持怀疑态度，追求完美的代码。何为完美，每个人的标准不一样。对于自己写过的代码，写完后想想整个的流程，是否还有值得优化的地方。尽量用最简洁的代码来实现，比如用三元运算符代替if语句，重复的代码提取成方法，重用的功能写成一个组件等等。对于写的不好的代码要有重构的勇气和信心。

在开发的过程中，还时时需要考虑页面的性能，选择性能最好的解决方案。比如JS少用全局变量，用完后及时销毁，合理使用闭包，避免频繁操作DOM节点，大量的计算等，HTML代码的SEO优化，样式的合理组织等，开发完后通过firebug或chrome自带的调试工具查看页面加载的速度，资源大小等，然后有针对性的优化。

3. 设计思维

作为一名前端开发，懂点设计的基础是很有必要的。前端的设计是指一个画面或元素，如何在不同的浏览器，不同的设备上被创建，显示，或删除。我们除了直接跟设计师打交道外，还直接面向用户，做好响应式的设计与开发，从用户的角度出发，客观的评价设计稿所传达的信息，是否体验最优，就是我们前端的设计思维。设计的思维，会直接影响我们写代码的结构。

JS代码规范

1.前端代码的组织结构和文件的命名

代码文件组织结构。前端文件主要包含HTML、CSS、JS等，对于文件组织，既要考虑结构清晰一目了然还要考虑代码的复用。基于这样的原则，惯用的做法是同类文件放在一起，并按模块划分文件结构。比如页面中公用的组件放到外部公共的components文件夹里，页面特有的组件则放到该模块对应的JS文件夹里，每个组件对应有html,js,css等内容。

代码文件的命名。名称需要表明文件对应的模块内容和文件的格式等。使用语义化的名字，避免使用数字来命名，比如a1.html,a2.html等。

2.命名规范

2.1变量

使用合理易于理解的英文变量名称，变量命名的风格统一，比如都用驼峰命名法，局部变量名尽量简短。NEJ里的规范，局部变用接口内局部变量或者传递的参数用_来量表示，如_type,_index等。对象外可访问的接口或者属性，用_$开头，_$$表示类对象等。

声明变量必须加上 var 关键字.当你没有写 var, 变量就会暴露在全局上下文中, 这样很可能会和现有变量冲突。变量需先声明后使用，防止变量提升。

另外常量名字都用大写。

2.2方法

JS面向对象开发中公有接口命名首字母为大写，私有接口命名首字母小写。事件的命名用动词+名词+动词的方式，方法名具有语义化，尽量完整。如：onExchange,doExchange,cbExchange等。逻辑操作符 || 和 && 可被用来返回布尔值，简化代码。

3.代码注释

代码加上合理的注释，提高可读性。例如对于某个功能的简介，或者变量的特殊含义和用处。每个JS文件头部说明下作者，日期，文件介绍等。

/**
* KJ-13989 组团买好货
* author AAA
* 2015-12-09 
*/

/**
 * 接口函数的说明
 * 参数说明
 */
/**
  * 空闲控制 返回函数连续调用时，空闲时间必须大于或等于 wait，func 才会执行
  *
  * @param {function} func    传入函数
  * @param {number}  wait    表示时间窗口的间隔
  * @param {boolean} immediate  设置为ture时，调用触发于开始边界而不是结束边界
  * @return {function}       返回客户调用函数
  */

当你写注释时一定要注意：不要写你的代码都干了些什么，而要写你的代码为什么要这么写，背后的考量是什么。对于文件的修改，也可以在注释里加上相关的任务号。

4.语句结束时添加分号

记得语句结束时使用分号。如果仅依靠语句间的隐式分隔, 有时会很麻烦。而且添加分号也利于代码的理解。

5.不要在块内声明一个函数，使用函数表达式来定义函数

if (x) {
  function foo() {}
}

if (x) {
  var foo = function() {}
}

(function(){
    //do some thing
})()

var configInfos ={
        remindType:${remindType!2},
        totalPoint:${pointTotalCount!0},
        isSigned:"${isSigned?string(‘yes‘,‘no‘)}"
    }

var a = [],obj={};

_e._$addClassName(this.__passWord,‘u-ipt-login-active‘);

pro.__getNodes = function(){
        var _node = _e._$getByClassName(document.body,‘ztag‘),i=0;
        this.__aboutWrap = _node[i++];
        this.__goodsDescWrap = _node[i++];
        this.__fixedBtn = _node[i++];
        this.__payBtn = _node[i++];
    };

for(var i=0,len=number.length;i<len;i++){}

其他注意点

1.提前设计

提前规划设计好，从全局角度规划代码的结构。保证代码精简，写完某个功能后重新思考下整个流程，是否可以优化，方向有没有写错。

我记得刚开始写代码的时候，某个功能写到某一步的时候，发现写不下去了，这个时候只能重新换个思路，推倒之前的代码重新写。这就是没有提前规划好思路，急于下笔，导致浪费了很多时间。

2.前端代码重构注意事项

重构前一定要预估风险，如果没有足够的自动化测试，最好是先完善自动化测试代码。

重构的目的和范围要明确，切忌盲目修改，前端代码的重构目的主要是提高代码的可维护性、可读性和性能。

最好是先易后难，循序渐进。首先修改诸如命名、格式等不涉及具体逻辑的内容，然后考虑模块化和性能提升等具体逻辑相关的内容。

重构过程中要持续测试，在多个浏览器中测试，确保重构一部分功能正确，切忌在大量重构后再进行测试，因为大量重构后基本很难记得重构的逻辑，也就有可能遗漏部分测试用例。

如果是提升性能，要事先检测网站的整体性能并量化，找出性能瓶颈，重构过程中要持续监控性能，并对比性能提升的效果。

3.快速编写页面

拿到设计稿后，规划好结构，先写完html代码，最后再补充完整的样式，这样效率最高。边写边调是很浪费时间的。

参考文章：

http://itwap.net/ArticleContent.aspx?id=35

http://www.css88.com/archives/5366

如何编写高质量代码

标签：

原文地址：http://www.cnblogs.com/zourong/p/5116788.html