骑士の物语 > 前端规范 JS

前端规范 JS

2018-05-18

大前端

前端代码规范 —- javascript

本文档的目标是使 JavaScript 代码风格保持一致，容易被理解和被维护。

可以修改开发工具的配置文件并设置格式化快捷键来统一代码风格

基本命名规范

1、变量、函数名以驼峰式命名，应为名词，具体含义

let newName
function getName() {}

2、常量全部大写字母，用_连接

const THEME_SKIN = 'theme-skin'

3、函数名以动词开始

function getName() {} // 获取
function setName() {} // 设置
function doName() {} // 执行
function submitName() {} // 提交
function editName() {} // 编辑

4、返回类型是布尔类型，一般以is开头

let isEnable = false
function isCheckName() {}

5、变量和函数命名，不要担心长度，合乎逻辑重要。

6、class以名词命名，首字母大写

7、文件名、目录名称命名方式 用 - 连接

注释

1、单行注释   必须独占一行。// 后跟一个空格，缩进与下一行被注释说明的代码一致。//

2、多行注释   避免使用 /…/ 这样的多行注释。有多行注释内容时，使用多个单行注释。//

3、文档化注释   为了便于代码阅读和维护，以下内容必须包含以 /*…/ 形式的块注释中。

4、关于函数JSDoc注释 适用.vue文件 (wacth、methods、computed)

演示一下jsdoc的标准写法：

/**
 * 解释这个function的作用，可以把处理的思路写下来
 * @param  {Array} param1 - 参数param1的解释
 * @param  {Object} param2 - 参数param2的解释
 * @param  {number} param3 - 参数param3的解释
 * @return {string} 对返回值的解释，如果没有返回值，则不需要添加这一项
 */
function jsdocExample(param1, param2, param3) {
  // ...
  return ''
}

代码风格

缩进 使用4个空格(不要使用Tab)

忽略分号(不加)

空格

1、 [强制] 二元运算符两侧必须有一个空格，一元运算符与操作对象之间不允许有空格。

var a = !arr.length;
a++;
a = b + c;

2、[强制] 用作代码块起始的左花括号 { 前必须有一个空格。

// good
if(condition) {}
while(condition) {}
function funcName() {}

// bad
if(condition){}
while (condition){}
function funcName(){}

3、[强制] if / else / for / while / function / switch / do / try / catch / finally 关键字后，必须有一个空格。

// good
if (condition) {}
while (condition) {}
(function () {
})();

// bad
if(condition) {}
while(condition) {}
(function() {
})();

4、[强制] 在对象创建时，属性中的 : 之后必须有空格，: 之前不允许有空格。

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

5、[强制] 函数声明、具名函数表达式、函数调用中，函数名和 ( 之间不允许有空格。

// good
function funcName() {}
var funcName = function funcName() {};
funcName();

// bad
function funcName () {}
var funcName = function funcName () {};
funcName ();

6、[强制] , 前不允许有空格

// good
callFunc(a, b)

// bad
callFunc(a , b)

7、[强制] 在函数调用、函数声明、括号表达式、属性访问、if / for / while / switch / catch 等语句中，() 和 [] 内紧贴括号部分不允许有空格。

// good

callFunc(param1, param2, param3);
save(this.list[this.indexes[i]]);
needIncream && (variable += increament);
if (num > list.length) {}
while (len--) {}


// bad
callFunc( param1, param2, param3 );
save( this.list[ this.indexes[ i ] ] );
needIncreament && ( variable += increament );
if ( num > list.length ) {}
while ( len-- ) {}

基于eslint-plugin-standard修改eslint规则

git钩子会强制验证eslint规则，通过后才能提交。后期新项目会在初始化的时候执行git钩子安装命令(必须执行)

eslint 提供 —fix 命令可以修复大部分的error 和warn

// add your custom rules here 0 忽略 1 warn 2 error
       rules: {
       'valid-jsdoc': [1, {
           requireReturn: false,
       }],
       'require-jsdoc': [1, {
           require: {
               FunctionDeclaration: true,
               MethodDefinition: true,
               ClassDeclaration: true,
           },
       }],
       // 插件验证.vue文件中的jsdoc
       '@sweetui/sweet-mobile-sdk/object-literal-jsdoc/obj-doc': [1, {
           ignoreMethods,
       }],
       // 缩进4空格 禁用2
       'indent': [1, 4],
       // 禁止条件表达式中出现赋值操作符
       'no-cond-assign': 2,
       // 允许console语句
       'no-console': 1,
       // 允许 debugger
       'no-debugger': 1,
       // var声明
       'no-var': 2,
       // 禁止 function 定义中出现重名参数
       'no-dupe-args': 2,
       // 禁止重复的函数声明
       'no-func-assign': 2,
       // 忽略分号;
       'semi': [1, "never"],
       // 使用 === 和 !==
       'eqeqeq': [2, 'allow-null'],
       // warn alert、
       'no-alert': 1,
       // 禁用 eval()
       'no-eval': 2,
       // 禁用 with 语句
       'no-with': 2,
       // 要求或禁止使用严格模式指令
       'strict': 2,
       // 要求或禁止 var 声明中的初始化(初值)
       'init-declarations': 2,
       // 不允许 catch 子句的参数与外层作用域中的变量同名
       'no-catch-shadow': 0,
       // 禁止删除变量
       'no-delete-var': 2,
       // 不允许标签与变量同名
       'no-label-var': 2,
       // 禁用特定的全局变量
       'no-restricted-globals': 2,
       // 禁止 var 声明 与外层作用域的变量同名
       'no-shadow': 0,
       // 禁止覆盖受限制的标识符
       'no-shadow-restricted-names': 2,
       // 禁用未声明的变量，除非它们在 /*global */ 注释中被提到
       'no-undef': 2,
       // 禁止将变量初始化为 undefined
       'no-undef-init': 2,
       // 禁止将 undefined 作为标识符
       'no-undefined': 2,
       // 禁止出现未使用过的变量
       'no-unused-vars': [1, {'vars': 'all', 'args': 'none'}],
       // 不允许在变量定义之前使用它们
       'no-use-before-define': 1,
       // 强制一行的最大长度
       'max-len': [1, 160],
       // 文件末尾强制换行
       'eol-last': 0,
       // 强制使用单引号
       'quotes': [2, 'single'],
       // 禁止修改 const 声明的变量
       'no-const-assign': 2,
       // 禁止标识符中有悬空下划线_bar，这里忽略
       'no-underscore-dangle': 0,
       // 禁用行尾空格
       'no-trailing-spaces': 2,
       // 禁用不必要的嵌套块
       'no-lone-blocks': 2,
       // 强制在 JSX 属性中一致地使用双引号或单引号
       'jsx-quotes': 0,
       // 函数定义时括号前面要不要有空格
       'space-before-function-paren': [1, `never`],
       //对象字面量项尾不能有逗号 这里忽略
       'comma-dangle': [0, 'always'],
       // 在对象字面量属性中实现键和值之间的一致间隔 {key: value}
       'key-spacing': [1, {'mode': 'strict'}],
       // 允许对象所有键和值在同一行上
       'object-property-newline': [0, {'allowMultiplePropertiesPerLine': true}],
       // promise reject 参数设置为 * 任意类型
       'prefer-promise-reject-errors': [0, {'allowEmptyReject': true}]
   },