前言

本规范为针对无线前端的javascript的编码规范，其中部分只适用于移动端开发，并配合自制的eslint规范来进行检查

变量与声明

变量

1. 声明前必须使用关键字

bad code	good code
variable	let variable/const variable

2. 变量在函数内部或循环控制条件之前提前声明

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];
    }
}

3. 私有变量函数前置_标识

bad code

MyConstructor.prototype.private = function(){};

good code

function _private(){};
MyConstructor.prototype._private = _private;

4. 变量名规则具象化，布尔类型带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;

5. 构造方法首字母大写，方法变量遵循小驼峰命名规则

bad code

function slidepage(){}
slidepage.prototype.resizepage = function(){};

good code

function SlidePage(){}
SlidePage.prototype.resizePage = function(){};

常量

1. 常量需要大写

2. 常量定义在文件头部，并使用_分割

bad code

let maxpeoplesize = 10;

good code

let MAX_PEOPLE_SIZE = 10;

分号与逗号

1. 赋值，定义，返回值，方法调用后强制需要加分号(目前没有配置好检测工具)

2. 定义变量时，不使用逗号连续定义

bad code

let arr = [],str = "",obj = {a:1,b:2,};

good code

let arr = [];
let str = "";
let obj = {a:1,b:2};

函数

1. 为了可读性函数内部不允许使用嵌套函数

2. 函数内部尽量不使用arguments.callee和arguments.caller

3. 函数参数不得超过5个(超过使用对象解构来代替)

bad code

function myTestFunc(a,b,c,d,e,f,g,h){}

good code

function myTestFunc({a,b,c,d,e}={}){}

异常

1. 允许使用try/catch5.2 上线代码不允许使用debugger，console，alert等调试异常的关键字

eslit中console的规则会设置为warn，但是希望大家还是在调试器内调试而不是console.log()调试。这种习惯长远来看并不好

循环

1. 循环使用for，for的速度有保障且可读性高。别在非必要条件下使用while

2. 循环统一自增来避免循环中操作源数据，自减除非业务需要，自减时须给特别注释

3. 循环内不允许定义函数和变量，避免消耗过大

控制逻辑

1. 控制条件内不要使用var定义变量

2. 分支超过5种的判断使用switch case时需要带default

3. 判断条件过长，使用变量标识

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){}

4. 判断中禁止使用yoda表达式

5. 判断中使用严格判断

字符串

1. 允许使用多行字符

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(){};

2. 原型上不能保持属性，只能保存方法，避免子类被相互污染

注释

1. 文件开头必须要有文件说明注释，时间，作者

/*
 * @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
 */

2. 多行注释与单行注释都被允许

特性

1. 允许使用ES6中的高级特性(移动端开发)

2. 允许使用eval与new Function但不提倡使用，避免xss攻击

3. 不允许使用with

4. 代码统一遵循use strict规范

面向对象

1. 统一使用构造器+原型的范式进行面对对象开发，不使用拷贝继承

2. 多级继承，统一使用公用包中的class方法进行管理和控制

格式化

1. 目前是利用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
}