尽量按强类型风格编码

JavaScript是弱类型语言, 但在编码太过随意, 也会惹出不少麻烦. 如果可以, 推荐使用TypeScript. 下面分几个典型案例讲解下

1. 变量声明时即赋值, 以便知晓变量初始为什么数据类型.

// bad
var numVar, strVar, objVar;

虽然声明了3个变量, 但JavaScript解释器并不知晓它的类型.

// good
var numVar = 0, strVar = '', objVar = {};

定义变量时并赋值, 会方便JavaScript解释器, 同时也增强了代码可读性, 让代码阅读者大体知道这些变量将会有什么用.

2. 不可随意改变变量类型

// bad
var num = 5;
num = "-" + num;

这样会使代码阅读者增加比较大的困难, 特别是代码量比较多的情况下. 应尽量避免改变变量的类型, 如果有需要, 可以再定义一个临时变量.

// good
var num = 5;
var tempStr = "-" + num;

3. 函数返回类型要明确

// bad
function getCount(count){
    if(count < 0) return "";
    else return count * 100;
}

函数getCount有可能会返回两种类型的返回值:

空字符串
数字

虽然JavaScript允许这样写, 但这种编码风格很好, 其他人在使用这个函数时可能会比较痛苦. 如果使用者对返回值不做判断, 而直接做加减乘除法, 可能会得到NaN.

函数的返回值类型应当确定

// good
function getCount(count){
    if(count < 0) return -1;
    else return count * 100;
}

减少作用域的查找

1. 尽量不要让代码暴露在window(全局作用域下)

// bad
<script>
  var canvas = document.querySelector("#canvas-warpper");
  canvas.style.width = "600px";
  canvas.style.height = "600px";
</script>

上例中, 代码的上下文都是全局作用域(window). 由于全局作用域比较复杂，查找比较慢。同时也可能会污染全局变量.

JavaScript变量值在查找时, 优先查找当前作用域链, 如果查找不到, 会向上级作用域链中查找, 然后层层向上级查找, 最终会在全局作用域中查找, 如果实在找不到, 就会报错.

// good
<script>
(function(){
  var canvas = document.querySelector("#canvas-warpper");
  canvas.style.width = "600px";
  canvas.style.height = "600px";
})(window, undefined)
</script>

这里使用到了一个自执行函数, 从而形成一个局部作用域, 以避免上例中出现的问题. 如果使用ES6编码, 可以考虑使用ES6中的块级作用域来规避上例中的问题.

2. 慎用闭包

闭包的作用在于可以让子级作用域使用它父级作用域的变量，同时这些变量在不同的闭包是不可见的。

合理的使用闭包, 可以帮助我们解决一些麻烦的事情, 比如代码封装对外不见.

但如果使用不当, 可以会导致在查找某个变量时, 必须要向父级作用域查找，一级一级向上查找。若闭包嵌套得很深，那查找的时间可能就很长。

function getResult(count){
    count++;
    function process(){
        var factor = 2;
        return count * factor - 5;
    }
    return process();
}

上例的process函数中count变量的查找时间, 显然高于局部变量factor. 其实上例中的代码, 不太适合使用闭包, 可以考虑将count传递到process函数中:

// good
function getResult(count){
    count++;
    function process(count){
        var factor = 2;
        return count * factor - 5;
    }
    return process(count);
}

此时, count和factor两个变量的查找时间是一样的了, 都在当前作用域中直接命中. 如果一个全局变量需要经常使用, 可以考虑使用一个局部变量缓存一下.

例如:

// bad
var url = "";
if(window.location.protocal === "https:"){
    url = "https://example.com" + window.location.pathname + window.location.search;
}

频繁地使用了window.location对象，所以可以先把它缓存一下：

// good
var url = "";
var location = window.location;
if(location.protocal === "https:"){
    url = "https://example.com" + location.pathname + location.search;
}

避免使用`==`

==和===有什么区别呢?

==, 可能会对两边的数据转换, 并对值进行比较
===, 不会对值进行转换, 通过比较两边变量或值的引用地址, 来判断是否相等.

1. 如果变量类型确定, 不可使用`==`

// bad
if(typeof num != "undefined"){
  // do something
} 
var num = parseInt(value);
if(num == 10){
  // do something
}

上例中变量类型都是确定的, 因此最好不用==

// good
if(typeof num !== "undefined"){
  // do something
} 
var num = parseInt(value);
if(num === 10){
  // do something
}

2. 如果变量类型不确定, 尽量手动进行类型转换, 避免让代码阅读者去猜测类型转换

// good
var totalPage = "5";
if(parseInt(totalPage) === 1){
  // do something
}

3. 使用`==`会被ESlint检查不能过

if(a == b){
  // do something
}

如下ESlint的输出：

Expected ‘===’ and instead saw ‘==’. 
if(a == b){

4. 使用`==`, 可能会产生异外情况, 从而给代码埋下隐患

null == undefined           //true
'' == '0'                   //false
0  == ''                    //true
0  == '0'                   //true
'' == 0                     //true
new String("abc") == "abc"  //true
new Boolean(true) == true   //true
true == 1                   //true

null居然会等于undefined，因为null和undefined是两个毫无关系的值，null应该是作为初始化空值使用，而undefined是用于检验某个变量是否未定义。

合并表达式

1. 用三目运算符取代简单的if/else

function getCount(count){
    if(count < 0) return -1;
    else return count * 100;
}

可以改成：

function getCount(count){
    return count < 0 ? -1 : count * 100;
}

这样写, 会比if/else好看多了. 但也需要注意的是, 如果if/else之类的条件判断较多或比较复杂时, 应该考虑其他方式来实现. 三目运算符应仅限于比较简单的if/else判断的场景, 不要过度使用三目运算符, 太偏了, 可能会收到不好的效果.

2. 自增

利用自增也可以简化代码。例如:

window.hwit.sendMessage(msgId++, msg);

减少"魔鬼变量"

例如，在某个文件的第xxxx行，发现有这么一段代码:

messageHander.show("seller", "seil", 5, true);

这样的代码, 很容易让人难以理解4个变量分别代码什么? 如果不去检查函数定义, 很难理解这些常量有什么用? 这些意义不明的常量, 我称之为"魔鬼变量"

所以最好还是给这些常量取一个名字，特别是在一些比较关键的地方。例如上面的代码可改成：


var sender = "seller", messageType = "sell", messageId = 5, isRefreshMessageBox = true;

...
messageHander.show(sender, messageType, messageId, isRefreshMessageBox);

这样意义就很明显了。

ES6使用技巧

ES6已经发展很多年了，许多现代浏览器对其兼容性也已经很好了。并且webpack等打包工具会对ES6语法进行转换.

合理的使用ES6语法，可以让代码更加地简洁。

1. 使用箭头函数代替匿名函数

有很多使用匿名函数的场景，此时用箭头函数一行, 就显得很方便了.

var nums = [4, 8, 1, 9, 0];
nums.sort(function(a, b){
    return b - a;
});
//output: [9, 8, 4, 1, 0]

上例如果用箭头函数的话, 代码会简洁很多：

var nums = [4, 8, 1, 9, 0];
nums.sort((a, b) => (b - a));

2. class

使用ES6的class与使用function的prototype本质是一样的, 都是用原型. 但使用class会更易于进行面向对象开发.

// ES5 模拟面向对象编程
function Person(name, age){
    this.name = name;
    this.age = age;
}
Person.prototype.setName = function(name){
    this.name = name
};
Person.prototype.getName = function(){
    return this.name
};

// ES6 面向对象编程
class Person{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    getName(){
        return this.name
    }

    setName(name){
        this.name = name
    }
}

在ES6中, 可以使用class & extend可以方便地实现继承、静态的成员函数，就不需要自己再去通过一些技巧去实现了。

3. 善用模板字符

善用模板字符

// bad
var temp = 
    '<div>' + 
    '    <span>hello james</span>' +
    '</div>';

// good
var temp = 
`   <div>
        <span>hello james</span>
    </div>
`;

// bad
var username = 'james', num = 10
var userListApi = "/list?num=" + num + "&username=" + username;

// good
var userListApi = `/list?num=${num}&username=${username}`;

4. 块级作用域变量

块级作用域变量是ES6的一个特色. 有了块级作用域, 就方便很多了.

下面的代码是一个任务队列的模型抽象：

var tasks = [];
for(var i = 0; i < 4; i++){
    tasks.push(function(){
        console.log("i is " + i);
    });
}

for(var j = 0; j < tasks.length; j++){
    tasks[j]();
}

但是上面代码的执行输出是4，4，4，4，并不是想要输出：0，1，2，3 所以每个task就不能取到它的index了，这是因为闭包都是用的同一个i变量，i已经变成4了，所以执行闭包的时候就都是4了。那怎么办呢？可以这样解决：

var tasks = [];
for(var i = 0; i < 4; i++){
    !function(k){
        tasks.push(function(){
            console.log("i is " + k);
        });
    }(i);
}

for(var j = 0; j < tasks.length; j++){
    tasks[j]();
}

把i赋值给了k，由于k它是一个function的一个参数，每次执行函数的时候，肯定会实例化新的k，所以每次的k都是不同的变量，这样就输出就正常了。

如果用ES6，实现起来就简单很多了! 只要把var改成let就行, 因为有块级作用域.

var tasks = [];
for(let i = 0; i <= 4; i++){
    tasks.push(function(){
        console.log("i is " + i);
    });
}
for(var j = 0; j < tasks.length; j++){
    tasks[j]();
}

5. 解构赋值

1) 基础使用

在ES6中新增解构赋值的语法, 解决了很多在变量赋值时的麻烦.

// ES5
var s = [1,2,3,4];
var a = s[0];
var b = s[2];

// good
let s = [1,2,3,4];
let {first, second} = s

2) 使用默认值

如果想按强类型的语法来编写, 可以考虑给first给一个默认值, 如果没有取到值, 就使用默认值.

// good
let s = [1,2,3,4];
let {first = paramRequired('first'), second = paramRequired('second')} = s

function paramRequired(key) {
    throw new Error(`Param: ${key} is required!`)
}

3) 解构赋值时使用别名

在解构赋值时, 也可以使用不同变量赋值

let element = {
    tag : 'div',
    text : 'hello james'
};
let {tag:localTag,text:localText} = element;
console.log(localTag);//'div'
console.log(localText);//'hello james'

4) 嵌套对象/数组中的提取

如果对象嵌套层次较多, 也可以深入到嵌套的对象结构中提取想要的数据

let element = {
    tag: 'div',
    text: 'hello james',
    attrs: {
        dataIndex: 1,
        userInfo: {
            name: 'jameszhang'
        }
    }
}
let { attrs: { userInfo:userIdenInfo = paramRequired('userIdenInfo') }} = element;
console.log(userIdenInfo.name)

function paramRequired(key) {
    throw new Error(`Param: ${key} is required!`)
}

如果上例中的userInfo的值为undefined, 则会触发paramRequired函数的执行, 最终会给出一个出错提示.

VM1642:12 Uncaught Error: Param: userIdenInfo is required!
    at paramRequired (<anonymous>:12:11)
    at <anonymous>:8:40

同样的, 如果是一个多维数组, 可以通过深入到嵌套的数组结构中取得想要的数据.

let colors = [ "red", [ "green", "lightgreen" ], "blue" ];
let [first, [second]] = colors
console.log(second) // output: green

5) 数组剩余项赋值

数组解构有个与函数的剩余参数类似的, 名为剩余项（ rest items ）的概念，它使用...语法来将剩余的项目赋值给一个指定的变量

let colors = [ "red", "green", "blue" ];
let [ firstColor, ...restColors ] = colors;
console.log(firstColor); // "red"
console.log(restColors.length); // 2
console.log(restColors[0]); // "green"
console.log(restColors[1]); // "blue"

6) 混合解构

对象中包含有多种数据类型, 如包含有: 数组, 对象, 函数等等. 例如

let vnode = {
    tag: 'user-info',
    text: 'hello james',
    attrs: {
        ref: 'userId'
    },
    children: [
        {
            tag: 'user-name'
        },
        {
            tag: 'user-profile'
        }
    ]
}
let {attrs: {ref}, children: [first, second]} = vnode
console.log(ref, first.tag, second.tag) // output: userId user-name user-profile

7) 函数参数解析

如果上例中的vnode作为函数的参数传入使用, 也可以考虑使用解构赋值来实现. 例如:

function handleNode({attrs: {ref}, children: [firstChild, secondChild]}) {
    console.log(ref, firstChild, secondChild)
}
handleNode(vnode)

6. Promise

// todo