JS代码规范

空格

二元运算符两侧必须有一个空格,一元运算符与操作对象之间不允许有空格。

var a = !arr.length;
a++;
a = b + c;
复制代码

用作代码块起始的左花括号 { 前必须有一个空格。

// good
if (condition) {
} function funcName() {
} // bad
if (condition){
} function funcName(){
}
复制代码

if / else / for / while / function / switch / do / try / catch / finally 关键字后,必须有一个空格。

// good
if (condition) {
} while (condition) {
} (function () {
})(); // bad
if(condition) {
} while(condition) {
} (function() {
})();
复制代码

在对象创建时,属性中的 : 之后必须有空格,: 之前不允许有空格。

// good
var obj = {
a: 1,
b: 2,
c: 3
}; // bad
var obj = {
a : 1,
b:2,
c :3
};
复制代码

函数声明、具名函数表达式、函数调用中,函数名和 ( 之间不允许有空格。

// good
function funcName() {
} var funcName = function funcName() {
}; funcName(); // bad
function funcName () {
} var funcName = function funcName () {
}; funcName ();
复制代码

, 和 ; 前不允许有空格。

// good
callFunc(a, b); // bad
callFunc(a , b) ;
复制代码

单行声明的数组与对象,如果包含元素,{} 和 [] 内紧贴括号部分不允许包含空格。

// good
var arr1 = [];
var arr2 = [1, 2, 3];
var obj1 = {};
var obj2 = {name: 'obj'};
var obj3 = {
name: 'obj',
age: 20,
sex: 1
}; // bad
var arr1 = [ ];
var arr2 = [ 1, 2, 3 ];
var obj1 = { };
var obj2 = { name: 'obj' };
var obj3 = {name: 'obj', age: 20, sex: 1};
复制代码

行尾不得有多余的空格。

换行

每个独立语句结束后必须换行。

运算符处换行时,运算符必须在新行的行首。

// good
if (user.isAuthenticated()
&& user.isInRole('admin')
&& user.hasAuthority('add-admin')
|| user.hasAuthority('delete-admin')
) {
// Code
} var result = number1 + number2 + number3
+ number4 + number5; // bad
if (user.isAuthenticated() &&
user.isInRole('admin') &&
user.hasAuthority('add-admin') ||
user.hasAuthority('delete-admin')) {
// Code
} var result = number1 + number2 + number3 +
number4 + number5;
复制代码

对于 if...else...、try...catch...finally 等语句,推荐使用在 } 号后添加一个换行 的风格,使代码层次结构更清晰,阅读性更好。

if (condition) {
// some statements;
}
else {
// some statements;
} try {
// some statements;
}
catch (ex) {
// some statements;
}
复制代码

语句

在 if / else / for / do / while 语句中,即使只有一行,也不得省略块 {...}。

// good
if (condition) {
callFunc();
} // bad
if (condition) callFunc();
if (condition)
callFunc();
复制代码

函数定义结束不允许添加分号。

// good
function funcName() {
} // bad
function funcName() {
}; // 如果是函数表达式,分号是不允许省略的。
var funcName = function () {
};
复制代码

命名

注* :
Camel命名法:驼峰命名法如 myFirstName
Pascal命名法:帕斯卡命名法如 FirstName、LastName

变量 使用 Camel命名法。

var loadingModules = {};
复制代码

常量 使用 全部字母大写,单词间下划线分隔 的命名方式。

var HTML_ENTITY = {};
复制代码

函数 使用 Camel命名法。

function stringFormat(source) {
}
复制代码

函数的 参数 使用 Camel命名法。

function hear(theBells) {
}
复制代码

类 使用 Pascal命名法。

function TextNode(options) {
}
复制代码

类的 方法 / 属性 使用 Camel命名法。

function TextNode(value, engine) {
this.value = value;
this.engine = engine;
} TextNode.prototype.clone = function () {
return this;
};
复制代码

原著GitHub地址 : styleguide

转载于:https://juejin.im/post/5cac1259f265da0360238de1

JS代码规范的更多相关文章

  1. JavaScript必备:Google发布的JS代码规范(转)

    [翻译]关于Google发布的JS代码规范,你需要了解什么? 翻译 | WhiteYin 译文 | https://github.com/WhiteYin/translation/issues/10 ...

  2. 谷歌与Airbnb的JS代码规范

    谷歌JS代码规范 规范代码原因:代码规范是为了保持源代码编写模式一致,便于维护代码,可读性高. 1.使用空格代替tab 规范随后指出应该使用2个,而不是4个空格带实现缩进.(除了每一行的终止符序列,A ...

  3. 前端规范之JS代码规范(ESLint + Prettier)

    代码规范是软件开发领域经久不衰的话题,几乎所有工程师在开发过程中都会遇到或思考过这一问题.而随着前端应用的大型化和复杂化,越来越多的前端团队也开始重视代码规范.同样,前段时间,笔者所在的团队也开展了一 ...

  4. 浅谈js代码规范

    要放假了  后天就可以 回家,心里很高兴,忙里偷闲写篇博客吧!!!! 声明:这是我自己总结的,如果有不对的地方请大家不要较真 一 .变量声明 对所有的变量声明,我们都应该指定var,如果没有指定var ...

  5. dataway_代码规范

    无论何时无论何地,只要写代码,请遵从这样的规范. ----------------------------------------------------------------- css代码规范. ...

  6. 也谈谈规范JS代码的几个注意点

    也谈谈规范JS代码的几个注意点 写JS代码差不多也有两年了吧,从刚开始的“初生牛犊不怕虎”乱写一通到后来也慢慢知道去规范一下自己写的代码.这种感觉就像是代码是你的作品,你希望它保持一份不仅干净而且也优 ...

  7. 代码规范和常用的js插件以及测试工具

    1.代码规范 .model层 1.1.1database file_proerty 1.1.2java fileProperty. 1.2.字段要有空指针 1.3.不创建爱数据库外键约束 1.4.已知 ...

  8. js学习笔记-编写高效、规范的js代码-Tom

    编写高效.规范的js代码: 1.变量命名空间问题,尽量使用局部变量,防止命名冲突(污染作用域中的全局变量):全局空间命名的变量可以在对应的文档域任意位置中使用window调用. 2.尽量使用单var定 ...

  9. JS代码的几个注意点规范

    也谈谈规范JS代码的几个注意点 也谈谈规范JS代码的几个注意点 写JS代码差不多也有两年了吧,从刚开始的“初生牛犊不怕虎”乱写一通到后来也慢慢知道去规范一下自己写的代码.这种感觉就像是代码是你的作品, ...

随机推荐

  1. 判断移动端还是PC端JS

    if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {         // alert("手机&qu ...

  2. idea 本地代码被覆盖问题

    一不小心误操作先执行更新操作怎么办!辛辛苦苦工作一下午的代码全被覆盖了,心里紧张死了!不过别着急,还好用的idea,请看如图操作! 1.点击鼠标右键 => 2.点击Local History = ...

  3. CTF中常用的php伪协议利用

    1.file:// 作用: 用于访问文件(绝对路径.相对路径.网络路径) 示例: http://www.xx.com?file=file:///etc/passsword 2.php:// 作用:访问 ...

  4. php静态变量的运用

    <?php $count = 5; function get_count() { static $count = 0; return $count++; } echo $count; echo ...

  5. 关于wget下载jdk问题解决

    问题: 直接从jdk官网下载会出现: 正在解析主机 login.oracle.com (login.oracle.com)... 156.151.58.18正在连接 login.oracle.com ...

  6. Android AndroidManifest.xml详解

    AndroidManifest.xml简述: AndroidManifest.xml 是每个android程序中必须的文件.它位于整个项目的根目录,描述了package中暴露的组件(activitie ...

  7. MySQL学习之路2-数据库and数据表的基本操作

    数据库基本操作 查看.选择数据库: show databases; use <databasename>; 创建数据库:create database <dbname> cha ...

  8. Spring(DI,AOP) 理解(一)

    感觉自己的spring理解的不好.所以重新开始学习. 这篇文章主要是来理解DI(依赖注入),Aop(切面) 一.DI(依赖注入,这里没有涉及到注释.只是用xml文件和Bean的方法来注册pojo,) ...

  9. PHP单例模式及应用场

    设计模式?听起来很高大上?的确是这样的.设计模式就是组织代码的方式,也就是说代码不再是一条条的往下执行,按照前人总结的行之有效的方法,更有效的来组织代码,这样效率更高,而且看起来也清晰有序. php单 ...

  10. shell执行${var:m:n}报错Bad substitution解决办法

    Ubuntu系统下,执行字符串截取脚本时,总是报错:Bad substitution,脚本非常简单如下: #!/bin/sh str1="hello world!" :} 执行后报 ...