lixinliang

不懂用户体验的技术不是好设计

🔖 es6


简语

我只是旧文章的搬运工。🤒

https://github.com/lixinliang/es6-programme-style

灵感

文章太长了,就直接提上来了。

前言

这是一遍关于 ECMAScript 6(以下简称 ES6)编程风格的文章。 如果你还没有了解 ES6,可以从这里开始《ECMAScript 6 入门》

代码规范

众所周知,良好的代码规范会带来方方面面的好处。 但是,本篇文章不会重复讨论诸如大括号的圣战或者缩进圣战这类的问题。 如果,你想了解更多代码规范的内容,可以阅读这里 JavaScript 编码规范

编程风格

编程风格是什么?编程风格可以说是代码规范的子集,我们不会考虑变量命名等问题。 并且,在约束的程度上,以建议使用为主。 在一定程度上,与各个团队的代码规范形成互补,补充关于 ES6 的内容。

快速入门

并不是所有的浏览器能执行 ES6 的代码,但我们可以使用 Babel Compiler 进行代码转译。 或者,你可以直接使用 LegoFlow 马上体验。

星号

带星号的特性,并不是 ES6 的标准特性,它或许仅仅是 ES7 的一个提案,但至少 Babel 已经支持转译了,我们可以尝试使用它们,享受它们带来的便利。

约定

在阅读以下内容前,请谨记以下约定:

let 命令

// 😁
for (let i = 0; i < 3; i++) {
    setTimeout(function () {
        console.log(i);
    }, 100);
}

→在线转译

// 😭
function test () {
    flag = true;
    // 其他代码
    let flag;
    if (flag) {
        // 预期执行的代码
    }
}

→在线转译

const 命令

// 😭
const obj = {
    value : true
};
obj.value = false;
if (obj.value) {
    // 预期执行的代码
}
console.log(obj);

变量解构赋值

对象的解构赋值

// 😁
let { uid, username, avator } = data;
console.log(uid, username, avator);

→在线转译

数组的解构赋值

// 😁
let param = 'key=value';
let [key, value] = param.split('=');
// ❌
对象不支持“isArray”属性或方法

→在线转译

交换变量

// 😁
let min = 1;
let max = 0;
if (min > max) {
    [min, max] = [max, min];
}

→在线转译

混合解构与嵌套解构

// 😭
let {
    uid,
    username,
    message : [
        message0,
        message1,
    ],
} = data;

→在线转译

字符串模板

// 😁
let text = `
    name : ${ username }
    sex : ${ sex ? 'female' : 'male' }
    medal : ${ getMedal() }
`;

→在线转译

标签模板

// 😁
function parse ( templates, ...params ) {
    let output = templates[0];
    let length = params.length;
    if (navigator.language == 'zh-CN') {
        // 显示中文内容
        for (let index = 0; index < length; index++) {
            output += params[index].zh + templates[index + 1];
        }
    } else {
        // 显示英文内容
        for (let index = 0; index < length; index++) {
            output += params[index].en + templates[index + 1];
        }
    }
    return output;
}
let text = parse`uid : ${ uid }, name : ${ username }, avator : ${ avator }`;
// ❌
对象不支持“freeze”属性或方法

→在线转译

指数运算符 *

// 😁
let hundred = 10 ** 2;

→在线转译

函数参数默认值

// 😁
function setName ( name = '' ) {
  window.name = name;
}

→在线转译

rest 运算符

// 😁
function foo ( elem, ...params ) {
  // ...
  console.log(params);
}

→在线转译

扩展运算符

// 😁
console.log(...[1, 2, 3], ...document.scripts);
// ❌
对象不支持“isArray”属性或方法

→在线转译

箭头函数

// 😁
let image = new Image;
image.onload = function () {
    setTimeout(() => {
        // 指向 image 而不是 window
        console.log(this);
    },3000);
};
image.src = url;

→在线转译

// 😭
function main () {
    document.addEventListener('click', ( event ) => {
        // 预期是 document 而不是 window
        console.log(this);
    }, false);
}
main();

→在线转译

函数绑定运算符 *

// 😁
function set ( key, value ) {
  this[key] = value;
  return this;
}
console.log({}::set('uid', '123')::set('username', 'Max'));

→在线转译

对象简洁表示法

// 😁
let username = 'Max';
// 其他代码
let data = {
  username,
  avator,
};

→在线转译

属性名表达式

// 😁
let id = 1024;
let obj = {
  ['prefix' + id] : id,
};

→在线转译

方法简洁表示法

// 😁
let obj = {
  log ( ...args ) {
    console.log(...args);
  },
};

→在线转译

对象的扩展运算符 *

// 😁
let animal = { foot : 4 };
let cat = { ...animal, tail : 1 };

→在线转译

Generator 函数

// 😁
function* Genertor ( arg ) {
    // 同步代码,异步执行
    let input = yield arg;
    console.log(input);
    return 'end';
}

let genertor = Genertor('begin');

console.log(genertor.next().value);

console.log(genertor.next('input').value); // 外部注值
// ❌
缺少标识符、字符串或数字

Async 函数 *

// 😁
import $ from 'jquery';

let getData = async ( url ) => {
    let data = await $.ajax(url);
    return data;
};

getData('http://legox.yy.com/mock/api/33').then(( data ) => {
    console.log(data);
});
// ❌
缺少标识符、字符串或数字

Class

// 😁
class Widget {

    constructor ( ...args ) {
        // ...
    }

    method () {
        // 方法
    }

    static foo () {
        // 类的静态方法
    }
}

class Pendant extends Widget {

    constructor ( ...args ) {
        super(...args);
        // 继承
    }

}

let pendant = new Pendant();
// ❌
对象不支持此操作

→在线转译

修饰器

// 😁
function readonly ( target, name, descriptor ){
    descriptor.writable = false;
    return descriptor;
}

class Person {
    @readonly
    name () {
        // ...
    }
}
// ❌
对象不支持此操作

→在线转译

模块

// 😁
import $ from 'jquery';

export default {
    // ...
};

→在线转译

// 😭
window.jQuery = require('$');

import 'jquery.parallax';

→在线转译

参考链接