前言
本规范为针对无线前端的javascript的编码规范，其中部分只适用于移动端开发，并配合自制的eslint规范来进行检查
变量与声明
变量
- 声明前必须使用关键字
| bad code | good code |
|---|---|
| variable | let variable/const variable |
- 变量在函数内部或循环控制条件之前提前声明
bad code
function bad(){
for(var i=0;i<list.length;i++){
var item = list[i];
}
}
good code
function good(){
let i;
let item;
const len = list.length;
for(i=0;i<list;i++){
item = list[i];
}
}
- 私有变量函数前置_标识
bad code
MyConstructor.prototype.private = function(){};
good code
function _private(){};
MyConstructor.prototype._private = _private;
- 变量名规则具象化，布尔类型带is，单位值带单位(_px,_ms,_s)
bad code
var height = $("#mydiv").height();
var delay = 3 * 1000;
var readYet = false;
good code
var height_px = $("#mydiv").height();
var delay_ms = 3 * 1000;
var isRead = false;
- 构造方法首字母大写，方法变量遵循小驼峰命名规则
bad code
function slidepage(){}
slidepage.prototype.resizepage = function(){};
good code
function SlidePage(){}
SlidePage.prototype.resizePage = function(){};
常量
常量需要大写
常量定义在文件头部，并使用_分割
bad code
let maxpeoplesize = 10;
good code
let MAX_PEOPLE_SIZE = 10;
分号与逗号
赋值，定义，返回值，方法调用后强制需要加分号(目前没有配置好检测工具)
定义变量时，不使用逗号连续定义
bad code
let arr = [],str = "",obj = {a:1,b:2,};
good code
let arr = [];
let str = "";
let obj = {a:1,b:2};
函数
为了可读性函数内部不允许使用嵌套函数
函数内部尽量不使用arguments.callee和arguments.caller
函数参数不得超过5个(超过使用对象解构来代替)
bad code
function myTestFunc(a,b,c,d,e,f,g,h){}
good code
function myTestFunc({a,b,c,d,e}={}){}
异常
- 允许使用try/catch5.2 上线代码不允许使用debugger，console，alert等调试异常的关键字
eslit中console的规则会设置为warn，但是希望大家还是在调试器内调试而不是console.log()调试。这种习惯长远来看并不好
循环
循环使用for，for的速度有保障且可读性高。别在非必要条件下使用while
循环统一自增来避免循环中操作源数据，自减除非业务需要，自减时须给特别注释
循环内不允许定义函数和变量，避免消耗过大
控制逻辑
控制条件内不要使用var定义变量
分支超过5种的判断使用switch case时需要带default
判断条件过长，使用变量标识
bad code
if( flag === 0 || $(".div").length > 0 || $("#id").hasClass("hide")){}
good code
const isRead = (flag === 0);
const hasDiv = $(".div").length > 0;
const isDisplay = $("#id").hasClass("hide");
if(isRead || hasDiv || isDisplay){}
判断中禁止使用yoda表达式
判断中使用严格判断
字符串
- 允许使用多行字符
bad code
let str = "<div><span><a href="#">myhref</a></span></div>";
good code
let str = "<div>"\
<span>\
<a href="#">myhref</a>\
</span>\
</div>";
原型
1、 禁止对顶级对象的原型进行修改
bad code
String.prototype.cutHtml = function(){};
good code
function cutHtml(){};
- 原型上不能保持属性，只能保存方法，避免子类被相互污染
注释
- 文件开头必须要有文件说明注释，时间，作者
/*
* @Author: 张浩然
* @Date: 2017-12-12 19:59:30
* @Last Modified by: mikey.zhaopeng
* @Last Modified time: 2018-01-02 15:28:29
* @fileoverview 本文件用于xxx，实现了xxx方法，注意事项xxx
*/
- 多行注释与单行注释都被允许
特性
允许使用ES6中的高级特性(移动端开发)
允许使用eval与new Function但不提倡使用，避免xss攻击
不允许使用with
代码统一遵循use strict规范
面向对象
统一使用构造器+原型的范式进行面对对象开发，不使用拷贝继承
多级继承，统一使用公用包中的class方法进行管理和控制
格式化
- 目前是利用js-beautify的配置来统一格式化
使用方法，在项目根目录下放置配置文件
.jsbeautifyrc
{
"indent_size": 2,
"indent_char": " ",
"indent_level": 0,
"indent_with_tabs": false,
"preserve_newlines": true,
"max_preserve_newlines": 10,
"jslint_happy": false,
"brace_style": "collapse",
"keep_array_indentation": false,
"keep_function_indentation": false,
"space_before_conditional": true,
"break_chained_methods": false,
"eval_code": false,
"unescape_strings": false,
"wrap_line_length": 0,
// jsbeautify options
"format_on_save": true
}
