如何写出高质量的代码！

由于昨天被老大叫去开了会议，会议内容关于我们日常写的代码质量、效率问题，会议后小鸿总结了以下几点，希望对你们有用！

 

所谓高质量的代码，在前端标准的思想指导下，在实现结构（HTML）、样式（CSS）和行为（JS）分离的基础上，还要做到三点：精简、重用、有序。

 

 

• 高质量的HTML

HTML除了用div或span标签进行布局，所有标签都是有语义的，用语义化标签进行布局，搜索引擎是看不到视觉效果的，能看到的只是代码，只能通过标签来判断内容的语义。

 

这里可以举例几个常用标签：

 

<section></section> : 定义 section。

<nav></nav> :  定义导航链接。

<header></header> : 定义 section 或 page 的页眉。

<footer></footer> : 定义 section 或 page 的页眉。

<figure></figure> : 定义媒介内容的分组，以及它们的标题。

<hgroup></hgroup> : 定义有关文档中的 section 的信息。

<menu></menu> : 定义菜单列表。

<ruby></ruby> : 定义 ruby 注释。

<script></script> : 定义脚本。

 

HTML要知道用的标签语义都是代表什么，这样方便代码的阅读，提高阅读效率！

 

 

• 高质量的CSS

浏览器为确保向后兼容，诞生了标准模式和怪异模式两种解析网页的方法。

在标准模式页面按照HTML,CSS的定义渲染，而在怪异模式就是浏览器为了兼容很早之前针对旧版本浏览器设计，并未严格遵循W3C标准而产生的一种页面渲染模式。

 

1.组织全局样式文件

reset.css ：重置浏览器标签的样式表。

normalize.css ：统一样式的同时保留可辨识性。是一种reset.css的替代方案。

common.css : 位于中间，提供组件级CSS类,我们将大量需要重复的模块视为一个组件，从页面里尽可能多的将组件提取出来，放在common层里。

 

 

 

2.CSS命名

结合骆驼命名法和划线命名法进行命名，骆驼命名法区分不同单词，划线用于表明从属关系。

 

 

3.挂多个class会让html标签看起来臃肿，但带来的好处不容忽视

这样大大减少了类的数量，提高可维护性

另一方面使类的职责单一，弹性更强，增加类的重用性，提高开发效率

 

4.低权重原则

• CSS的选择符是有权重的，当不同选择符的样式设置有冲突时，会采用权重高的选择符设置样式。

• 可以把样式的应用方式分为几个等级，按照等级来计算权重：

• !important，加在样式属性值后，权重值为 10000

• 内联样式，如：style=””，权重值为1000

• ID选择器，如：#content，权重值为100

• 类，伪类和属性选择器，如：content、:hover 权重值为10

• 标签选择器和伪元素选择器，如：div、p、:before 权重值为1

• 通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0

 

 

• 高质量的JS

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型，用这门语言编写网页的开发人员有了极大的增长。虽然很多主流的浏览器陆续实现了JavaScript的编译执行，不过还是有些方法可以改进代码的整体性能的。

 

 

1.确保代码尽量简洁

不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具，只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。

 

2.尽量减少DOM访问

使用JavaScript访问DOM元素很容易，代码更容易阅读，但是速度很慢。下面介绍几个要点：限制使用JavaScript来修饰网页布局，把针对访问元素的引用缓存起来。有时，当你的网站依赖大量的DOM改动时，就应该考虑限制你的标记。这是改用HTML5、舍弃那些原来的XHTML和 HTML4的一个充分理由。你可以查看DOM元素的数量，只要在Firebug插件的控制台中输入:document.getElementsByTagName('*').length。

 

3.压缩代码

压缩代码有利于页面的性能提高，加快页面的打开速度，减少网络传输时长，尤其是第一次访问时能感觉出来。

 

4.使用适当的CDN

现在许多网页使用内容分发网络(CDN)。它可以改进你的缓存机制，因为每个人都可以使用它。它还能为你节省一些带宽。你很容易使用ping检测或使用Firebug调试那些服务器，以便搞清可以从哪些方面加快数据的速度。选择CDN时，要照顾到你网站那些访客的位置。记得尽可能使用公共存储库。

 

5.避免全局查找

在一个函数中会用到全局对象存储为局部变量来减少全局查找，因为访问局部变量的速度要比访问全局变量的速度更快些。

 

6.避免with语句

和函数类似 ，with语句会创建自己的作用域，因此会增加其中执行的代码的作用域链的长度，由于额外的作用域链的查找，在with语句中执行的代码肯定比外面执行的代码要慢，在能不使用with语句的时候尽量不要使用with语句。

 

7.尽量少使用eval。 
每次使用eval需要消耗大量时间，这时候使用JS所支持的闭包可以实现函数模板。 

 

8.模块化开发

 

(不使用模块化开发，会出现这些问题)

单个js文件， 文件大, 为了提高项目代码的可读性、可扩展性拆分成多个js文件。

多个js文件之间的相互依赖关系，难以维护。

每个模块都是暴露在全局的会污染全局的作用域，简单的使用，会导致全局变量命名冲突。

 

（使用模块化开发，CommonJS规范(同步加载模块)）

 

每一个文件就是一个模块，其内部定义的变量是属于这个模块的，不会对外暴露，也就是说不会污染全局变量。

 

核心思想

1. 通过 require 方法来同步加载所要依赖的其他模块。

2. 通过 exports 或者 module.exports 来导出需要暴露的接口(exports指向的是module.exports的应用，不能对其直接赋值， 需要expors.名称 = value)。

 

特点

1. 所有要输出的对象统统挂载在 module.exports 上，然后暴露给外界。

2. 通过 require t同步加载别的模块，require 的返回值就是模块暴露的对象。

3. CommonJS 是一个单对象输出，单对象加载的模型。

4. 解决了依赖、全局变量污染的问题。

 

 

在程序设计中要使程序结构合理、清晰，形成良好的编程习惯对程序的要求不仅是可以在机器上执行，给出正确的结果，而且要便于程序的调试和维护，这就要求编写的程序不仅自己看得懂，而且也要让别人能看懂,当我们养成了良好的编程习惯以后,你一定会变得更加优秀！

 

 

喜欢本文的朋友，欢迎关注微信公众号"程序员小鸿"，收看更多精彩内容!