最简前端规范——JS篇(三)

时代在进步、技术在更新。作为一个前端开发者来说 学习必然是一件持续的事情。对于很多开发者来说 前端规范或多或少都有接触过，驼峰式写法、不适用保留字、缩进、构造函数首字母大写等等。在这里，总结了一些目前经常用到的还有一些应该要规避的目前绝大多数浏览器已经支持了ES6的写法，如有遇到对js无法解析的 可以加入babel-polyfill提供支持。这次JS的前端规范的介绍主要以ES6为主，那什么是ES6当中应该注意到的一些规范呢，以下是总结了一些经常遇到又忽略的地方。

1、首先要知道一个关于注释的原则。无必要不注释，有必要尽详细。

 注释分三种：单行注释、多行注释 、文档注释。多行注释主要作用于函数/方法。例如：

/*方法说明
 *@method 方法名
 *@for 所属类名
 *@param{参数类型}参数名 参数说明
 *@return {返回值类型} 返回值说明
*/

文档注释主要作用于JS的篇头，相当于简介，介绍这个JS文件的大体内容。这个在很多开源项目里都有 就不一一赘述了。

2、const和let是块级作用域，var是函数作用域

• 所有对于引用的都用const，不要用var
• 可变动的定义使用let

注：有个特别的点，需要注意一下，关于const对复杂类型（object、Arrary、function）的定义,改变了其中的数能生效、不会提示报错信息。

const foo = [1,2,3]

const bar = foo

bar[0] = 9

console.log(bar[0],foo[0]) // 9,9

3、尽量使用es6语法书写代码，例：

请使用字面量值创建对象

// bad const a = new Object{} // good const a = {}

别使用保留字作为对象的键值，这样在 IE8 下不会运行

// bad const a = { default: {}, // default 是保留字 common: {} } // good const a = { defaults: {}, common: {} }

请使用对象方法的简写方式

// bad const item = { value: 1, addValue: function (val) { return item.value + val } } // good const item = { value: 1, addValue(val) { return item.value + val } }

请使用对象属性值的简写方式

const job = 'FrontEnd' // bad const item = { job: job } // good const item = { job }

对象属性值的简写方式要和声明式的方式分组

const job = 'FrontEnd' const department = 'JDC' // bad const item = { sex: 'male', job, age: 25, department } // good const item = { job, department, sex: 'male', age: 25 }

关于数组这块我就不展开说明了，主要就是用ES6的语法做到精简。

使用标准的 ES6 模块语法 import 和 export

// bad const util = require('./util') module.exports = util // good import Util from './util' export default Util // better import { Util } from './util' export default Util

4、构造函数首字母大写，用以区分构造函数和普通函数。例：

//不推荐

var fooItem = new foo()

//推荐

var fooItem = new Foo()

5、禁止使用链式赋值，可读性差,和变量声明时一样，拒绝声明多个变量。例：

//不推荐

var  a = b = c =1

var a,b,c

//推荐

var a = 1

var b = 1

var c = 1

var a

var b

var c

以上就是开发当中经常忽略的一些小问题，当然啦 还有驼峰式命名习惯，这个基本上的程序员都会做到 所以在此就不特意强调

上一篇：最简前端规范——CSS篇(二)

下一篇：最简前端规范——VUE篇(四)