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. php数据库应用程序建议

    一.保持独立的读写连接 开始就创建两个数据库连接是一个好的方法,一个用于读取,一个用于写入,并且允许不同的数据库服务器连接他们.如果只有一个服务器,则将它们设置彼此相同. 当操作为INSERT, UP ...

  2. android的volley学习

    更简单的一种方式是在build.gradle中引入依赖[推荐这种方式] compile 'com.android.volley:volley:1.1.1' StringRequest的用法接下来我们看 ...

  3. css3新的选择器

    CSS3新的选择器 ele[att^="val"] /*属性att的值以val开头的元素*/ ele[att$="val"] /*属性att的值以val结尾的元 ...

  4. javascript 入门 之 bootstrap 第一个程序

    <table data-toggle="table"> <thead> <tr> <th>Item ID</th> &l ...

  5. scala_spark实践1

    /** * scala模型的main(args:Array[String])是业务执行入口 * org.apache.spark.{SparkConf, SparkContext} * val spa ...

  6. Blazor WebAssembly 3.2.0 Preview 4 如期发布

    ASP.NET团队如期3.16在官方博客发布了 Blazor WebAssembly 3.2.0 Preview 4:https://devblogs.microsoft.com/aspnet/bla ...

  7. 006-循环结构(下)-C语言笔记

    006-循环结构(下)-C语言笔记 学习目标 1.[掌握]do-while循环结构 2.[掌握]for循环结构 3.[掌握]嵌套循环 一.do-while循环结构 do-while语法:   1 2 ...

  8. 05-移动web之流式布局

    一.视口 1.常见屏幕知识 设备 解释 描述 宽 屏幕的宽度 - (单位:英寸) 屏幕的宽度 高 屏幕的高度 -(单位:英寸) 屏幕的高度 对角线 屏幕的对角线的长度 英寸 一般说手机尺寸 是指以屏幕 ...

  9. 利用Ajax实现异步请求

    Ajax 1.课程引入      静态网站和动态网站都是同步的,但同步方式有缺点:页面请求响应式阻塞,影响用户体验      为了解决这个问题,可以通过变通的手段实现页面的局部更新(隐藏帧),由于隐藏 ...

  10. 【题解】P3349 [ZJOI2016]小星星 - 子集dp - 容斥

    P3349 [ZJOI2016]小星星 声明:本博客所有题解都参照了网络资料或其他博客,仅为博主想加深理解而写,如有疑问欢迎与博主讨论✧。٩(ˊᗜˋ)و✧*。 题目描述 小 \(Y\) 是一个心灵手巧 ...