JS代码规范--怎么写一段整洁有可读性的代码

最近看了《编写可维护的JavaScript》受益颇多

函数的注释

各种编程语言中函数的注释也是需要特别注意的，一般来说，目前我接触的编程语言的函数注释都采用了以下这种方法：

/**
         * @name: FunName
         * @param {type}  在这里描述参数段作用
         * @return {type}
         * @Date: 2020-05-07 17:17:41
         * @LastEditors: royalKnight
         */

一般来说，纯手打这一大长串的注释是非常的令人头疼的，我在这里推荐一个VScode上的一款插件，安装后按Ctrl+Alt+T就可以一键写入注释格式 koroFileHeader插件

命名

变量

命名方法，一般有两种：驼峰式和横线分隔式命名方式一定要统一，不然到后期维护一定是非常头疼的问题驼峰式样式：由小写开始，之后的单词都首字符大写：

var anotherVariable

函数

对于函数的命名，也有自己的一套方法：在函数的最开始，加上一些约定俗成的动词：

动词	含义
can	函数会返回一个布尔值
has	函数会返回一个布尔值
is	函数会返回一个布尔值
get	函数会返回一个非布尔值
set	函数会用来保存一个值
例如：

isEnable();
setName();
getName();

常量

对于常量的命名，一般使用全部大写和下划线来分隔

var MAX_COUNT=10;
var URL;

类（构造函数）

类，构造函数一般使用大写字母开头

function Person();

严格模式

ECMAScript5引入的严格模式使用方式是在文档开头加上一串字符串：

"use strict"

这一串看起来是一串没有命名的字符串，但是他是一个编译器指令。在全局的环境中定义时，所有的文件都会按严格模式解析，所以，最好不要文件开头定义，这样其他文件都会使用严格模式。推荐在函数中使用。

原始包装类型

什么是原始包装类型？原始包装类型有3种：String，Boolean，Number，这3种类型在定义之后，都可以调用一些方法：

var name="Mick"
name.toUpperCase();

定义原始包装类型时，最好不要使用构造器方法定义

//不好的做法:
var name=new String("Nick")
//推荐的做法
var name="Nikc";

这样会让人无法分清基本类型和类

eval()

eval()可以使js执行其中字符串定义的方法

eval("alert('hi!')");

这种方法是非常不推荐的，不仅会产生XSS攻击的隐患，还会使程序可读性大大降低，也不利于维护。

编程实践

这一章主要讨论在编程中具体的方式，不再讨论一些注释等格式问题

松耦合

Web开发的三层关系：

|JavaScript | |-| |CSS| |HTML|

实际场景中的CSS和JavaScript更像是兄弟关系：

JavaScript和CSS分离

CSS中的函数expression可以执行js表达式，和eval一样这些都是强耦合的，极不推荐：

/*不推荐*/
div{
    width:expression(document.body.offsetWidth+"px");
}

Js中操作CSS也是非常令人难受的：

//不推荐
 element.style.color="red"

想要更改样式，最好是在元素中添加或者删除类来实现：

element.className+="style"
element.className.add("style");

JavaScript和HTML分离

这一方面最明显的陋习就是：

<button onclick="fun()">Cilck</button>

这样做的时候，当你要在js中修改函数名称，你还需要去HTML中寻找这个元素，推荐的做法是使用JS来为元素添加事件侦听器：

var btn=document.getElementById("btn");
btn.addEventListener("click",fun,false);