结合eslint,总结最适合常用的代码规范_适合自己

[001] 逻辑语句: 判断相等使用 '===' 与 '!==' ,  不使用'=='/'!='

[002] 逻辑语句: 句末不添加 ';' 符号

[003] 逻辑语句: 字符串变量全部使用单引号,不使用双引号

[004] 逻辑语句: 定义全局常量使用全大写字母, 方法内变量使用驼峰

[005] 逻辑语句: 定义function ,function后空格,形参括号后空格

function () {
    return false
}

[006] 逻辑语句: 缩进全部使用4个空格，可以使用tab，但tab需要设置为4空格

[007] 逻辑语句: 不允许空行无内容

[008] 逻辑语句:  注释

- 单行注释
	```js
	必须独占一行。// 后跟一个空格，缩进与下一行被注释说明的代码一致
	```
	- 多行注释
	```js
	使用 /*...*/
	```
	- 函数/方法注释	
		- 函数/方法注释必须包含函数说明，有参数和返回值时必须使用注释标识
		- 参数和返回值注释必须包含类型信息和说明
		- 当函数是内部函数，外部不可访问时，可以使用 @inner 标识
		```js
		/**
		 * 函数描述
		 *
		 * @param {string} p1 参数1的说明
		 * @param {string} p2 参数2的说明，比较长
		 *     那就换行了.
		 * @param {number=} p3 参数3的说明（可选）
		 * @return {Object} 返回值描述
		 */
		function foo(p1, p2, p3) {
		    var p3 = p3 || 10;
		    return {
		        p1: p1,
		        p2: p2,
		        p3: p3
		    };
		}
		```

 

[009] 逻辑语句: 所有函数中形参使用到逗号的,后面全部空一格;函数声明时函数名与括号之间空一格

function test (param1, param2, param3) {
    return false
}

[010] 逻辑语句: 使用运算逻辑符[ +, -, *, /,  =]时逻辑符前后需要空格

let num1 = a + b
let num2 = c / d

[011] 样式语句: ':'后统一换行并且添加分号

.text{
    color: red;
    background: green;
}

[012] 命名: 统一使用驼峰命名,不使用下划线,统一使用有道翻译进行变量命名规范

[013] 逻辑语句: 单行句子过长(较难查阅)时,按同一类型符号切割换行

/*当前代码:*/

  constructor(public navCtrl: NavController, public navParams: NavParams, private commonSer: CommonService, private menuCtrl: MenuController, private nativeSer: NativeService) {


/*优化代码:*/
  constructor(public navCtrl: NavController, 
              public navParams: NavParams, 
              private commonSer: CommonService, 
              private menuCtrl: MenuController,
              private nativeSer: NativeService) {

[014] 逻辑语句: 注释重要性,便于后续维护,以及可读性

         定义变量: 默认赋初始值, 需要添加注释

         定义函数: 添加注释

         特殊逻辑语句: 添加注释

 

[015] 逻辑语句: 不使用未定义的变量 (注:函数中使用未定义的变量,其会自动成为全局变量)

[016] 逻辑语句: 关键字后面添加空格

/* right */
if (status) {
    return false
}


/* wrong */
if(status){
    return false
}

[017] 逻辑语句: else关键字与 花括号保持同一行, if / else 不省略花括号

if (status) {
    return data1
} else {
    return data2
}

[018] 逻辑语: 声明变量时,一个变量单独一行,便于注释说明,与阅读

/* use */
let data1 = 1
let data2 = 2
let data3 = 3

/* nonuse */
let data1 = 1,
    data2 = 2,
    data3 = 3

[019] 逻辑语句: 始终将逗号放置句末(长句代码换行时),换行后不将逗号放置首位

[020] 逻辑语句: 使用switch的时候,case语句句末需要添加break进行正常关闭

/* nonuse */
switch (n) {
    case 1:
        doSomething1()
    case 2:
        doSomething2()
} 

/* use */
switch (n) {
    case 1:
        doSomething1()
        break
    case 2:
        doSomething2()
        break
} 

[021] 逻辑语句: 遇到分号时,空格原则为后留前不留

/* nonuse */
for (var i = 1; i<2; i++) {
    go(i)
}

/* use */
for (var i = 1 ;i<2 ;i++) {
    go(i)
}

[022] 逻辑语句: 圆括号内首尾不需要留空格

/* nonuse */
function go( param1, param2 )

/* use */
function go(param1, param2)

[023] 逻辑语句: 定义变量不要使用var，使用let/const，可百度var/let/const使用区别

[024] html标签: 标签一律使用小写

[024] html标签: 不使用html转义字符: < >   " 例如  表示空格 ,字符之间需要使用空格可以使用css中的letter-spacing

[025] css模块:

禁忌：直接把style样式写在html上（内敛），代码结构混乱

    1]面向属性进行命名，例如.pl10
        css一旦脱离了项目,单独看这个css,就是显而易见的属性(.pl10 = padding-left: 10px)
    
    2]网站通用的模块,不要进行分离
        有800个页面,每个页面都有导航栏,导航栏使用了css类(.tr, .pb8)进行控制,一旦padding-bottom需要修改成10像素,那么就需要每个页面都修改类,这是不合理的场景.通用的模块,注意不进行分离,可单独出来最好,提高修改效率
    
    3]对于非通用元素,如果样式简单(1-2个属性),对其分离并使用面向属性的命名方法
        不推荐 .text-form{ text-align: right, padding-bottom: 8px}
          推荐 .tr, .pb8 进行控制样式
    
    4]精简高效css命名之'三无原则'
        1] no ID ：不要使用id去设置样式
        2] no 层级 ： 减少父子层级结构写法 例如： .left .go .ul{}
        3] no 标签 : 不要直接div,input, img去控制样式
        要简单,直接
    
        4.1]使用以上原则可以提高样式类的可重用性 
        4.2]css文件小   .od_set_ml_x 好过使用多层级的样式进渲染
        4.3]降低效率
            #test .test{}， ul.test{}，#test ul{} 以及.test{}这四种渲染方式中,.test{}是最快的,css的渲染方式是从右到左的,例如#test div{},浏览器要会先渲染页面上所有的div,再去找父亲id为test的元素,所以层级越多,渲染的开销越大

                                                                                                                                                                                      .......待补充