编码风格文档

前言

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

变量与声明

变量

  1. 声明前必须使用关键字
bad code good code
variable let variable/const variable
  1. 变量在函数内部或循环控制条件之前提前声明

bad code


function bad(){
    for(var i=0;i

good code


function good(){
    let i;
    let item;
    const len = list.length;
    for(i=0;i
  1. 私有变量函数前置_标识

bad code


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

good code


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

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

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

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

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

  2. 判断中使用严格判断

字符串

  1. 允许使用多行字符

bad code


let str = "";

good code


let str = "
"\ \ myhref\ \
";

原型

1、 禁止对顶级对象的原型进行修改

bad code


String.prototype.cutHtml = function(){};

good code


function cutHtml(){};

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

注释

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

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

特性

  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
}

你可能感兴趣的:(编码风格文档)