Skip to content

Commit a402faa

Browse files
committed
补充一些内容到正文中
Signed-off-by: Meathill <meathill@gmail.com>
1 parent 64b5337 commit a402faa

File tree

1 file changed

+79
-1
lines changed

1 file changed

+79
-1
lines changed

04-3-other.md

+79-1
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,82 @@ fetch('some.json')
2727

2828
除了 `response.json()` 之外,它还有 `.blob()``.text()` 等方法,具体可以参考 [MDN 上的文档](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
2929

30-
它的浏览器覆盖率请看[这里](http://caniuse.com/#search=fetch),值得注意的是,iOS 10.2 还不支持,所以现在必须提供兼容方案。
30+
它的浏览器覆盖率请看[这里](http://caniuse.com/#search=fetch),值得注意的是,iOS 10.2 还不支持,所以现在必须提供兼容方案。
31+
32+
## Gulp
33+
34+
我们知道,gulp 为了提速,默认采用并发异步的方式执行任务。如果一定要顺序执行,有三个方式:
35+
36+
1. 任务完成后调用参数 callback
37+
2. 返回一个 stream 或者 vinyl file
38+
3. 返回一个 Promise 对象
39+
40+
所以这个时候,应用异步函数再合适不过
41+
42+
```javascript
43+
gulp.task('task', async () => {
44+
let readFile = util.promisify(fs.readFile);
45+
let content = await readFile('sfbj.txt');
46+
content = content.replace('old', 'new');
47+
return content;
48+
});
49+
```
50+
51+
## H5
52+
53+
H5 项目中,动画的比重很大,有些动画有顺序要求,这个时候,用 Promise 来处理就非常合适。
54+
55+
这里提供一个我写的函数供大家参考:
56+
57+
```javascript
58+
function isTransition(dom) {
59+
let style = getComputedStyle(dom).getPropertyValue('transition');
60+
return style !== 'all 0s ease 0s';
61+
}
62+
63+
export function next(dom) {
64+
let eventName = isTransition(dom) ? 'transitionend' : 'animationend';
65+
return new Promise(resolve => {
66+
dom.addEventListener(eventName, function handler(event) {
67+
dom.removeEventListener(eventName, handler);
68+
resolve(event);
69+
}, false);
70+
});
71+
}
72+
```
73+
74+
这个函数会根据元素的样式判定是使用 `transition` 动画还是 `animation` 动画,然后侦听相应事件,在事件结束后,`resovle`
75+
76+
使用的时候,可以先把写好的动画样式绑上去,然后侦听,比如下面:
77+
78+
```javascript
79+
this.actions = next(loading)
80+
.then(() => {
81+
el.classList.remove('enter');
82+
})
83+
.then(() => {
84+
wukong.classList.add('in');
85+
wukong.style.transform = 'translate3d(0,0,0)';
86+
return next(wukong);
87+
})
88+
.then(() => {
89+
let bufu = this.queue.getResult('bufu');
90+
bufu.className = 'bufu fadeInUp animated';
91+
el.appendChild(bufu);
92+
return next(bufu);
93+
})
94+
.then(() => {
95+
let faxing = this.queue.getResult('faxing');
96+
faxing.className = 'faxing fadeInUp animated';
97+
el.appendChild(faxing);
98+
return next(faxing);
99+
})
100+
.then(() => {
101+
let bg = this.queue.getResult('homepage');
102+
bg.className = 'bg fadeIn animated';
103+
el.insertBefore(bg, el.firstChild);
104+
return next(bg);
105+
});
106+
```
107+
108+
在这种场景,使用 Promise 会比使用异步函数更方便维护。

0 commit comments

Comments
 (0)