共计 7945 个字符，预计需要花费 20 分钟才能阅读完成。
上一篇通过 TodoList 的练习，目的是为了让大家理解 ES6 中各种新特性的实际用途。
最好的学习方法就是实践，所以这节课结合实际项目，来更好的理解和掌握 ES6 的用途和使用场景，达到灵活运用的目的。
1、模块化
以项目中普遍会有的 config.js 文件为例，实现 export 导出：
const githubURL = "OUR GITHUB URL HERE";
const staticServer = "http://xxx.com";
const testsPath = `zaz-${type}-${name}/tests/index.htm?zaz[env]=tests`;
const name = "stalker";
const type = "mod";
const version = "0.0.1";
const state = "ok";
const description = "JavaScript API to deal with user data";
let globalpkg = null;
const config = {
_static: {
name,
version,
state,
description,
docs: `${githubURL}/pages/terra/zaz-${type}-${name}`,
source: `${githubURL}/Terra/zaz-${type}-${name}`,
tests: `${staticServer}/fe/${testsPath}`,
dependencies: ['mod.wilson']
}
};
export default config;
再在其他文件中通过 import 实现导入：
import config from './config';// 导入 ES6 模块
import {globalpkg} from './config';
import factory from './factory';
zaz.use((pkg) => {
"use strict";
config.dynamic.globalpkg = pkg;
pkg.require(['modFactory'], (modFactory) => {modFactory.create(pkg.utils.deepMerge(config._static, factory));
});
});
使用 ES6 统一的模块化规范，可以提高代码的可读性，更易于维护。
2、数组操作
import React,{Component} from 'react';
class RepeatArray extends Component{constructor() {super();
}
render(){const names = ['Alice', 'Emily', 'Kate'];
return (
<div>
{let p=document.querySelectorAll('p');
let pArr=Array.from(p);
pArr.forEach(function(item){console.log(item.textContent);
});
Array.from(pArr,function(item){return item + 'ES6'});
}
</div>
);
}
}
使用 Array.from 同时对每个元素进行操作。
3、模板字符串
常见的使用场景便是写组件模板时使用：
$('#result').append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);
可以在模板字符串中任意的嵌入变量，调用函数等。
4、解构与扩展操作符
扩展操作符在父组件给子组件传递一批属性的情境中更为方便。
下面的例子把 className 以外的所有属性传递给 div 标签
class AutoloadingPostsGrid extends React.Component {render() {
var {
className,
...others, // contains all properties of this.props except for className
} = this.props;
return (<div className={className}>
<PostsGrid {...others} />
<button onClick={this.handleLoadMoreClick}>Load more</button>
</div>
);
}
}
使用 react 开发最常见的问题就是父组件要传给子组件的属性较多时比较麻烦
class MyComponent extends React.Component{
// 假设 MyComponent 已经有了 name 和 age 属性
render(){
return (<SubComponent name={this.props.name} age={this.props.age}/>
)
}
}
使用扩展操作符可以变得很简单
class MyComponent extends React.Component{
// 假设 MyComponent 已经有了 name 和 age 属性
render(){
return (<SubComponent {...this.props}/>
)
}
}
上述方式是将父组件的所有属性都传递下去，如果这其中有些属性不需要传递呢？也很简单
class MyComponent extends React.Component{
// 假设 MyComponent 有很多属性，而 name 属性不需要传递给子组件
var {name,...MyProps}=this.props;
render(){
return (<SubComponent {...Myprops}/>
)
}
}
上述方法最常用的场景就是父组件的 class 属性需要被单独提取出来作为某个元素的 class，而其他属性需要传递给子组件。
在构建通用容器时，扩展属性会非常有用。
function App1() {return <Greeting firstName="Ben" lastName="Hector" />;}
function App2() {const props = {firstName: 'Ben', lastName: 'Hector'};
return <Greeting {...props} />;
}
5、Promise
场景一 : 所有图片加载完再显示在页面上，避免页面闪动。
function loadImg(src) {return new Promise((resolve, reject) => {let img = document.createElement('img');
img.src = src;
img.onload = function () {resolve(img)
}
img.onerror = function (err) {reject(err)
}
})
}
function showImgs(imgs) {imgs.forEach(function(img){document.body.appendChild(img);
})
}
Promise.all([loadImg('https://example.com/pic1')
loadImg('https://example.com/pic2')
loadImg('https://example.com/pic3')
]).then(showImgs)
场景二: 多个资源中只要加载了其中一种就可。
{function loadImg(src) {return new Promise((resolve, reject) => {let img = document.createElement('img');
img.src = src;
img.onload = function () {resolve(img)
}
img.onerror = function (err) {reject(err)
}
})
}
function showImgs(img) {document.body.appendChild(img);
}
Promise.race([loadImg('https://example.com/pic1')
loadImg('https://example.com/pic2')
loadImg('https://example.com/pic3')
]).then(showImgs)
}
6、Generator
在异步编程的解决方案中，Generator 比 Promise 更高级些。
使用场景：抽奖次数逻辑控制、长轮询（服务器请求报错再次请求, 定时发送请求）
// 以前控制次数是在全局中申明，既不安全又影响性能
let draw = function (count) {
// 具体抽奖逻辑
console.info(` 剩余 ${count} 次 `)
}
let residue = function* (count) {while (count > 0) {
count--
yield draw(count)
}
}
let start = residue(5)
let btn = document.createElement('button')
btn.id='start'
btn.textContent = '抽奖'
document.body.appendChild(btn);
document.getElementById('start').addEventListener('click', function() {start.next()
}, false)
}
{
// 长轮询
let ajax = function* () {yield new Promise(function(resolve, reject) {setTimeout(() => {resolve({code: 0})
}, 200);
})
}
let pull = function () {let generator = ajax()
let step = generator.next()
step.value.then(function(d){if (d.code !=0) {setTimeout(() => {console.info('wait')
pull()}, 100);
} else {console.info(d)
}
})
}
pull()
通过下面这张流程图，再加深下对 Generator 的理解。
7、await
在项目中，有时会出现需要同时依赖多个接口，而且必须在这几个请求都处理完后，才能开始处理数据的情况。我们可以在一个 async 函数 中写多个 await 语法的请求，然后逐个处理，但是这样效率太低了。
多个请求是可以并行执行的。这时就可以结合 Promise.all 高级方法来处理，可以同时发起多个请求，然后统一处理接口返回数据。
为了方便，这里演示同时请求 2 个 url，多个的也是一样的，如下：
export default {
name: 'hello1',
data () {
return {
msg: 'Hello Vue.js',
info: {},
user1: {},
user2: {}}
},
methods: {async getUserInfo () {
try {const res = await this.$http.get('http://aaa.com/userinfo');
this.info = res.data
} catch (e) {console.log(e);
}
},
async get2UserInfo () {
try {
const res = await Promise.all([this.$http.get('http://aaa.com/userinfo1'),
this.$http.get('http://aaa.com/userinfo2'),
])
this.user1 = res[0].data;
this.user2 = res[1].data;
} catch (e) {console.log(e);
}
}
},
created () {this.getUserInfo();
this.get2UserInfo();}
}
再次运行项目，可以发现页面在初始化的时候同时发起了 3 个请求，并正常渲染出了接口数据。
注意：这里的 Promise.all() 的参数是一个函数执行队列，它们会同时发起，然后都请求成功后，会将队列的每个任务的结果组装成一个结果数据，然后返回。
8、类操作
先实战创建一个 List 类
import Utils from "./Utils.js";
class List {constructor(title = "", items = [], isEditable = true, id ="") {this.id = (id) ? id : Utils.guid();
this.title = title;
this.items = items;
this.isEditable = isEditable;
}
render() {var html = `<div class="list" data-id="${this.id}" data-iseditable="${this.isEditable}">
<h2 class="list-title">${this.title}</h2>
${(this.isEditable) ? "<div class='btn delete-list danger'data-action='delete-list'>X</div>" : ""}
<ul class="items">`;
this.items.forEach(function(item) {html += item.render();
});
html += `
</ul>
${(this.isEditable) ? "<div class='btn add-item success'data-action='add-item'>Add Item</div>" : ""}
</div>`;
return html;
}
getItemById(id) {let item = this.items.filter(i => i.id === id);
return ((item.length) ? item[0] : null);
}
add(item) {this.items.push(item);
}
remove(item) {this.items = this.items.filter(i => (i.id !== item.id));
}
}
export default List;
在 app.js 中创建 List 实例：
import List from "./List.js";
import Utils from "./Utils.js";
import Status from "./Status.js";
class App {constructor(lists = []) {this.lists = lists;}
getDueItems() {let dueItems = [];
this.lists.forEach(function(list) {list.items.forEach(function(item) {if (item.date && item.status === Status.PENDING && Utils.dateDiffInDays(new Date(item.date), new Date()) > 0) {dueItems.push(item);
}
});
});
return dueItems;
}
getItemById(id) {const filterById = (function filterById(id1) {return function(listItem) {return listItem.id === id1;};
}(id));
for (let i = 0; i < this.lists.length; i++) {let item = this.lists[i].items.filter(filterById);
if (item.length) {return item[0];
}
}
return null;
}
getListById(id) {let list = this.lists.filter(l => l.id === id);
return ((list.length) ? list[0] : null);
}
render() {let pastDueList = new List("Past Due Date", this.getDueItems(), false);
let html = `<div class="app">
<div class="btn add-list success" data-action="add-list">[+] Add List</div>
`;
this.lists.forEach(function(list) {html += list.render();
});
html += pastDueList.render();
html += "</div>";
return html;
}
add(list) {this.lists.push(list);
}
remove(list) {this.lists = this.lists.filter(l => (l.id !== list.id));
}
}
export default App;
ES6 中的类能让我们可以用更简明的语法实现继承，也使代码的可读性变得更高。
9、Proxy
Proxy 可以让我们根据不同的业务逻辑进行相应的处理，对原对象进行映射，生成新的对象，操作新对象的同时通过一定的规则修改原对象。
// 先定义一个函数
function validator(target,validator) {
return new Proxy(target, {
_validator: validator,
set(targer,key,value,proxy){if (targer.hasOwnProperty(key)) {let va = this._validator[key];
if (!!va(value)) {return Reflect.set(target,key,value,proxy)
}else {throw Error(` 不能设置 ${key} 到 ${value}`)
}
}else {throw Error(`${key} 不存在 `)
}
}
})
}
const personValidator={name(val){return typeof val === 'string'},
age(val){return typeof val === 'number' && val >18}
}
class Person{constructor(name,age) {
this.name = name
this.age = age
return validator(this, personValidator)
}
}
const person = new Person('lilei', 30)
console.info(person) // Proxy {name: "lilei", age: 30}
// person.name = 48 // Uncaught Error: 不能设置 name 到 48
// console.info(person)
person.name = 'han mei mei'
console.info(person) // Proxy {name: "han mei mei", age: 30}
点评：使用 Proxy 进行数据校验，将对象和验证分离开，便于后期代码的维护。
总结
本篇主要通过实际项目中的例子回顾 ES6 的知识点，帮大家梳理重点和难点。学会 ES6 语法不难，活学活用到项目才是关键。
希望各位小伙伴能充分认识到 ES6 的强大，通过在实际工作中不断地使用 ES6，提升代码质量和工作效率，这样就能多一点喝茶看电影的时间。
最后祝大家都能成为别人眼中的程序猿大牛，O(∩_∩)O 哈哈~
正文完