javascript代码风格指北

546669204 发布于2019-05-23 17:32 / 578人阅读

摘要：这段代码工作正常，尽管没有用分号在某些场景下是很管用的，特别是，有时候可以帮助减少代码错误。比如不好的写法尽管这段代码能正常工作，但代码中我们应尽量避免使用。

前言

在我们平时工作中写代码是最频繁的事情了，但我们的代码真的"好看"吗？

预计本文阅读时间(10分钟)

正文 1.1--语句结尾

我们来看一段代码

//合法的代码
var name = "Dreams";
function sayName() {
    alert(name);
}
//合法的代码，但不推荐这样写
var name = "Dreams"
function sayName() {
    alert(name)
}

这里我们可以看到上面两段代码的区别就是在于一段加了分号，一段没有加，那么问题来了，我们到底该不该加分号？

解释

这里其实有赖于分析的自动分号插入(Automatic Semicolon Insertion, ASI)机制，Javascript代码省略分号也是可以正常工作的。ASI会自动寻找代码中应当使用分号但实际没有分号额位置，并插入分号。大多数场景下ASI都会正确插入分号，不会产生错误。但ASI的分号插入规则非常复杂且很难记住，因此推荐大家不要省略分号。看一下这段代码：

// 原始代码
function getData() {
    return
    {
        title: "Dreams",
        author: "Dreams"
    }
}
//分析器会将它理解成
function getData() {
    return;
    {
        title: "Dreams",
        author: "Dreams"  
    };
}

在这段代码中，函数getData()的本意是返回一个包含一些数据的对象。然而，return之后新起了一行，导致return后被插入了一个分号，这会导致函数返回值是undefined. 可以通过将左花括号移至与return同一行的位置来修复这个问题。

//这段代码工作正常，尽管没有用分号
function getData() {
    return {
        title: "Dreams",
        author: "Dreams"  
    }
}

ASI在某些场景下是很管用的，特别是，有时候ASI可以帮助减少代码错误。当某个场景我们认为不需要插入分号而ASI认为需要插入时，常常会产生错误。所以我们尽量养成加分号的习惯，在某种意义上加上分号还提高程序的性能哦！

1.2--换行

当一行长度达到了单行最大字符数限制时，就需要手动将一行拆成两行。通常我们会在运算符后换行，下一行会增加两个层级的缩进。比如这样。

在这个例子中，逗号时一个运算符，应当作为前一行的行尾。这个换行位置非常重要，因为ASI机制会在某些场景下在行结束的位置插入分号。总是将一个运算符置为行尾，ASI就不会自作主张地插入分号，也就避免了错误的发生。

1.3--命名

我们只要是代码，都会涉及变量和函数，因此变量和函数命名对于增强代码可读性至关重要。那么在js中，ECMAScript推荐我们遵循**驼峰式大小写(Camel Case)**的命名方式.这种命名方式是小写字母开始的，后续每个单词首字母都大写，比如：

var thisMyName;
var anotherVariable;
var aVeryLongVariableName;

函数的命名

我们推荐函数函数前用动词开头

//好的写法
var count = 10;
var myName = "Dreams"
var found = true
//不好的写法:变量看起来像函数
var getCount = 10;
var isFound = true;
//好的写法
function getName() {
    return myName;
}
//不好的写法:函数看起来像变量
function theName() {
    return myName;
}

命名是一种学问，更是一门技术！，通常我们应尽量保持尽可能的简短，抓重点的命名方式。通过函数命就大概可以看出这个是干什么的函数。记住写代码永远不是在给自己写，而是在给你下一个接手的人写，所以代码写的规范对大家都有好处 我们推荐的函数有：can has is get set 例如：canDo hasClass isBlack getData setData

1.4--null

null是一个特殊值，但我们常常误解它，将它和undefined搞混。在下列场景中应当使用null.

用来初始化一个变量

用来和一个已经初始化的变量比较，这个变量可以是也可以不是一个对象

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

当函数的返回值期望是对象时，用作返回值传出

还有下面一些场景不应当使用null.

不要使用null来检测是否传入了某个参数。

不要用null来检测一个未初始化的变量

示例代码：

//好的用法
var person = null;
function getPerson() {
    if (condition) {
        return new Person("Dreams");
    } else {
        return null;
    }
}
var person = getPerson();
if (person !== null) {
    doSomething();
}

//不好的写法：用来和未初始化的变量比较
var person;
if (person != null) {
   doSomething() 
}
//不好的写法:用来和未初始化的变量比较
var person;
if (person != null) {
    doSomething();
}
//不好的写法：检测是否传入了参数
function doSomething(arg1,arg2,arg3,arg4) {
    if (arg4 != null) {
        doSomethingElse();
    }
}

1.5--undefined

undefined是一个特殊值，我们常常把它和null搞混。其中一个让人颇感困惑的就是null == undefined结果是true。然而，这两个值的用途却各不相同。那些没有被初始化的变量都有一个初始值，即undefined,表示这个变量等待被赋值。比如：

//不好的写法
var person;
console.log(person === undefined);//true

尽管这段代码能正常工作，但代码中我们应尽量避免使用undefined。这个值常常和返回"undefined"的typeof运算符混淆。事实上，typeof的行为也很让人费解，因为不管值是undefined的变量还是未声明的变量，typeof运算结果都是"undefined"，比如：

//foo未被声明
var person;
console.log(typeof person);//"undefined"
console.log(typeof foo)//"undefined"

在这段代码中，person和foo都会导致tpyeof返回"undefined" 当变量未声明时，如果你使用了一个可能(或可能不会)赋值为一个对象的变量时，则将其赋值为null

//好的做法
var person = null;
console.log(person === null);//true

将变量初始值赋值为null表明了这个变量的意图，他最终很可能赋值为对象。typeof运算符运算null的类型时返回"object"，这样就可以和undefined区分开了

1.6--对象字面量

声明数组和对象时推荐下面的做法

//好的写法
var book = {}
var numbers = [1,2,3,4]
//不好的写法
var book = new Object();
var numbers = new Array(1,2,3,4)

结语

本文内容参考至<<编写可维护的javascript>>

在日常工作中我们应当合理使用上述方法对变量/方法/对象/数组进行管理，而不是胡乱的起名和管理，这样会对我们项目后续的维护不利，如果大家还有什么好的习惯，可以在评论区提出哦。

超融合服务器 idc机房托管代码风格指北入坑指北 javascript代码

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

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

JavaScript 作用域不完全指北

摘要：一旦到达顶层全局作用域，可能找到，也可能没有找到，查找过程都必须停止。当引擎执行查询时，如果查询在所有嵌套的作用域中遍寻不到所需的变量，引擎就会抛出异常。代表作用域判别失败相关，而则代表作用域判别成功了，但是对结果的操作是非法或不合理的。什么是作用域对于几乎所有编程语言，最基本的功能之一就是能够存储变量的值，并且能在之后对这个值进行访问和修改。这样就会带来几个问题，这些变量存储在哪...

coordinate35 2019-08-23 18:02 评论0 收藏0
React Native 基础练习指北（一）

摘要：围观本文需自备，，以及。使用打开，并点击，会看到模拟器以及此项目对应的内容，效果如下如果想要修改显示内容，请打开，里面是一堆模样的东西。接下来，我们按照教程，来展示一张电影海报，为了方便，我们直接修改。原文链接：http://www.tinghaige.com/ 本着什么都要搀和的原则，一起来看看React Native是如何开发iOS APP。围观本文需自备Mac OSX ，...

nidaye 2019-08-21 10:29 评论0 收藏0
[Javascript]cssText基本使用指北

摘要：如果解析失败则终止运行。如果新对象的并不匹配当前对象的则抛出异常。替换当前对象为新对象。是替换，也就是说会覆盖到目标元素之前本身所具有的全部样式继承的不算。除此以外，下返回的属性和值全是大写，为了避免日后出现意外，还是比较好。一、cssText之起步那些年，我们是这样设置样式的： xxx.style.width = 233px; xxx.style.position = fix...

tulayang 2019-08-28 17:59 评论0 收藏0
[Javascript]cssText基本使用指北

摘要：如果解析失败则终止运行。如果新对象的并不匹配当前对象的则抛出异常。替换当前对象为新对象。是替换，也就是说会覆盖到目标元素之前本身所具有的全部样式继承的不算。除此以外，下返回的属性和值全是大写，为了避免日后出现意外，还是比较好。一、cssText之起步那些年，我们是这样设置样式的： xxx.style.width = 233px; xxx.style.position = fix...

MASAILA 2019-08-21 12:31 评论0 收藏0
Nginx配置指北之gzip

摘要：如有错误，欢迎指正。如果使用了进行反向代理，那么和后端的之间默认是用协议通信的。如果不是这样，最好设置为，因为这会造成额外的开销。一个比较好的处理方式是放在或级别单独处理。无论是前端还是后端，在部署项目时，时常免不了用到Nginx，小项目也时常做个反向代理啥的。今天就简单直接，聊一下其中的一个点——gzip。如有错误，欢迎指正。一般服务器端常用的是 Ubuntu、CentOS、Li...

yunhao 2019-07-25 14:00 评论0 收藏0