编写可维护的JavaScript

*neverGiveUp*

于 2022-10-11 10:55:47 发布

阅读量555

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_48701993/article/details/127259449

版权

缩进：两个制表符进行缩进/4个空格的缩进
语句结尾：推荐总是使用分号
行的长度：一行代码最长不应当超过80个字符
换行：通常我们会在运算符后换行，下一行会增加两个层级的缩进，比如

// 好的做法：在运算符后换行，第二行追加两个缩进 
callAFunction(document, element, window, "some string value", true, 123, 
		navigator); 

// 不好的做法：第二行只有一个缩进 
callAFunction(document, element, window, "some string value", true, 123, 
	navigator); 

// 不好的做法：在运算符之前换行了 ，应该在逗号后换行
callAFunction(document, element, window, "some string value", true, 123 
		, navigator);

注意：当给变量赋值时，第二行的位置应当和赋值运算符的位置保持对齐，例如：

var result = something + anotherThing + yetAnotherThing + somethingElse + 
			anotherSomethingElse;
			
// 这段代码里，变量anotherSomethingElse和首行的something保持左 对齐，确保代码的可读性，并能一眼看清楚折行文本的上下文。

空行：在以下场景中添加空行也是不错的主意

1、在方法之间；

2、在方法中的局部变量和第一条语句之间；

3、在多行或单行注释之前；

4、在方法内的逻辑片段之间插入空行，提高可读性
命名：驼峰式大小写，命法是由小写字母开始的，后续每个单词首字母都大写
变量和函数：变量名应当总是遵守驼峰大小写命名法，并且命名前缀应当是名词；函数和方法命名来说，第一个单词应该是动词，这样有一些使用动词常见的约定：

动词	含义
can	函数返回一个布尔值
has	函数返回一个布尔值
is	函数返回一个布尔值
get	函数返回一个非布尔值
set	函数用来保存一个值

常量：它使用大写字母和下划线来命名，下划线用以分隔单词，比如：MAX_COUNT
构造函数：遵循大驼峰命名法，以大写字母开始，比如：function Person（name）{}
字符串：用双引号或单引号括起来
注释：单行注释和多行注释

单行注释：以两个斜线开始，以行尾结束,// 这是一句单行注释很多人喜欢在双斜线后敲入一个空格

多行注释：它以/*开始，以*/结束

多行注释之前应当有一个空行，且缩进层级和其描述的代码保持一
/*
 * 另一段注释 
 * 这段注释包含两行文本 
 */

语句和表达式：不论块语句包含多行代码还是单行代码，都应当总是使用花括号。
左花括号建议是放在块语句中第一句代码的末尾

if (condition) { 
	doSomething(); 
} else { 
	doSomethingElse(); 
}

在括左圆括号之前和右圆括号之后各添加一个空格

if (condition) { 
	doSomething(); 
}

JavaScript中允许多次使用var语句，推荐合并var语句，比如：

var value = 10,
	result = value + 10,
	i,
	len;

先声明JavaScript函数然后使用函数，在函数名和左括号之间没有空格，这样做是为了将它和块语句区分开来。

// 好的写法 
doSomething(item); 

// 不好的写法：看起来像一个块语句 
doSomething (item);

为了让立即执行函数能够被一眼看出来，可以将函数用一对圆括号包裹起来，比如：

// 好的写法 
var value = (function() { 
	// 函数体 
	return { 
		message: "Hi" 
	} 
}());

最好不要在全局作用域中使用“use strict”，因为这会让文件中的所有代码都以严格模式下来解析，如果你希望在多个文件中应用严格模式而不必写很多行“user strict”，可以使用立即执行的函数；

(function(){
	"use strict";
	function doSomething(){
	
	}
	function doSomethingElse(){
	
	}
})();

不推荐使用 == 和 != 而是应该使用 === 和 !==；
避免使用原始包装类型，这会使开发者的思路常常会在对象和原始值之间跳来跳去，这样会增加出bug的概率，从而使开发者陷入困惑；
UI层的松耦合：HTML、CSS、JS三个彼此隔离又相互作用的层定义

如果两个组件耦合太紧，则说明一个组件和另一个组件直接相关，这样的话，如果修改一个组件的逻辑，那么另外一个组件的逻辑也需修改。
最好将所有的Javascript代码都放入外置文件中，以确保在HTML代码中不会有内联的JavaScript代码。
将HTML从Javascript中抽离

// 不好的写法 
var div = document.getElementById("my-div"); div.innerHTML = "<h3>Error</h3><p>Invalid e-mail address.</p>";

【解决方法】：
1、将模板放置于远程服务器，使用XMLHttpRequest对象来获取外部标签；
2、简单客户端模板；

避免使用全局变量

全局变量带来的问题：

1、命名冲突的概率比较高，即很可能无意间就使用了一个已经声明了的变量；

2、代码的脆弱性；

3、难以测试；
推荐 typeof 无括号的写法 : typeof name，杜绝使用typeof来检测null的类型
如果你只想检查实例对象的某个属性是否存在，则使用hasOwnProperty() 方法
配置数据最好放在单独的文件中；
try-catch语句中，还可以增加一个finally块，不管代码是否有错误发生，最后都会被执行。如果try块中包含一个return语句，实际上它必须等到finally块中的代码执行后才能返回。
千万不要将try-catch中的catch块留空，应该总是写点什么来处理错误。
不是你的对象不要动，不要动原生对象，DOM对象，浏览器对象模型对象，类库的对象
文件和目录结构

1、一个文件只包含一个对象；

2、相关联的对象，就把这些文件都放在同一个目录下；

3、保持第三方代码的独立；

4、build 用来放置最终构建后的文件；

5、src 用来放置所有的源文件；

6、test或tests 用来放置所有的测试文件；