编写可维护的JavaScript--编程风格篇

AnthonyHan 发布于2019-08-21 14:18 / 3248人阅读

摘要：写在前面新司机最近读完编写可维护的，学到不少东西。书分为编程风格编程实践自动化三个部分。编程风格并不是绝对的，每个人或团队都有自己的编程风格，但知道哪些地方需要注意的话，还是有助于新司机完成代码风格的转变。

写在前面

新司机最近读完《编写可维护的JavaScript》，学到不少东西。书分为编程风格、编程实践、自动化三个部分。其中编程风格是你的代码格式约定，统一的格式不仅仅有利于团队，也有助于提高新司机的代码质量和程序的可维护性。编程风格并不是绝对的，每个人或团队都有自己的编程风格，但知道哪些地方需要注意的话，还是有助于新司机完成代码风格的转变。

第1章基本的格式化

1.1 缩进：制表符统一tab缩进或空格缩进，不能混用
1.2 语句结尾不省略分号

// 错误的例子
var x = 5
(function(){
    alert("不要省略分号");
})();

1.3 单行长度：80字符以内，长字符用“+”分割
1.4 拆分换行：两个制表符缩进，打断点在符合后
1.5 空行，添加空白行区分代码块

每个流程控制语句(if,while,for...)之前

在方法定义之间

方法中局部变量和第一条语句之前

多行或单行注释之前

方法内逻辑片段之间

1.6 命名：

变量和函数，遵守驼峰大小写命名法，变量前缀为名词，函数前缀为动词，常见约定：can/has/is返回一个布尔值

常量：使用大写字母和下划线来命名

构造函数：首字母大写的驼峰命名法

var setValue = function(){},    
    getValue = function(){},
    isEmpty = false,
    CONST_VALUE,                // 常量
    ConstructFunction;          // 构造函数

1.7 直接量：

字符串：统一使用双引号，多行字符串由『+』连接

null使用场景：将它当作占位符

初始化可能赋值对象的变量

与一个已经初始化的变量比较

当函数的参数期望是对象时，用作参数传入

返回值期望是对象时，用作返回值

null不适合场景：不用null检测是否传入参数

禁用undefined

对象直接量初试化数组或对象

var arr = [1, 2, 3, 4],
    obj = {key1: value1, key2: value2}

第2章注释

2.1 单行注释：

用来解释下一行代码，注释前有一个空行，缩进与下一行一致

代码尾部注释，代码与注释间至少有一个缩进，超过字符限度则应放在代码上方

2.2 多行注释：

注释前有一个空行，缩进与下一行一致

2.3 注释的使用：代码不够清晰时添加注释

难以理解的代码

可能被误认为错误的代码

浏览器特性hack

文档注释：为如下内容添加注释，所有方法的功能、期望参数和返回值、构造函数自定义类型和期望参数

第3章语句和表达式

3.1 花括号对齐方式：左括号放在第一句末尾，右括号放在代码后一行
3.2 括号语句间隔：左括号之前，右括号之后添加空格
3.3 switch不漏掉break
3.4 避免使用with
3.5 for中避免使用continue
3.6 for-in使用 hasOwnProperty()方法遍历实例属性，for-in用来遍历对象，不要用来遍历数组

第4章变量、函数和运算符

4.1 变量声明：将局部变量集中放在函数内部第一条，var合并为一个，初始化独占一行放前面，没初始值的放在后面。

var node1 = null,
    node2 = null,
    msg = "",
    i, len;

4.2 函数声明：先声明再使用，函数声明不应该出现在流程控制语句块之内。

// 错误实例，函数提升使程序不会像想象中的那样运行
if(document.getElementsByClassName("cls")){
    function getClass(){ // someCode }
} else {
    function getClass(){ // someCode }
}

// 函数提升后，可以看成是
function getClass(){ /* someCode */ }
function getClass(){ /* someCode */ }
if(document.getElementsByClassName("cls")){
} else {
}

4.3 函数调用：函数名与括号间不加空格
4.4 匿名函数立即调用：使用括号包裹起来，或添加注释
4.5 严格模式：在函数体内使用，而不要在全局作用域使用
4.6 相等：应该使用 === 和 !== ，能够避免强制类型转换，禁止直接使用原始类型

云服务器 GPU云服务器编写可维护的javascript 编程语言的编写如何编写高性能的javascript 编程风格

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

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

《编写可维护的JavaScript》之编程实践

摘要：最近读完编写可维护的，让我受益匪浅，它指明了编码过程中，需要注意的方方面面，在团队协作中特别有用，可维护性是一个非常大的话题，这本书是一个不错的起点。扩展阅读编写可维护的欢迎来到石佳劼的博客，如有疑问，请在原文评论区留言，我会尽量为您解答。最近读完《编写可维护的JavaScript》，让我受益匪浅，它指明了编码过程中，需要注意的方方面面，在团队协作中特别有用，可维护性是一个非常大的话...

张春雷 2019-08-19 18:30 评论0 收藏0
<<编写可维护的javascript>> 笔记3(语句和表达式)

摘要：所有的块语句都应当使用花括号包括花括号的对齐方式第一种风格第二种风格块语句间隔第一种在语句名圆括号和左花括号之间没有空格间隔第二种在左圆括号之前和右圆括号之后各添加一个空格第三种在左圆括号后和右圆括号前各添加一个空格我个人喜欢在右括号之后添所有的块语句都应当使用花括号, 包括: if for while do...while... try...catch...finally 3....

OBKoro1 2019-08-21 12:02 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

mikasa 2019-08-01 18:18 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

李世赞 2019-08-29 14:08 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

MudOnTire 2019-08-21 18:25 评论0 收藏0