@@ -27,4 +27,82 @@ fetch('some.json')
27
27
28
28
除了 ` response.json() ` 之外,它还有 ` .blob() ` ,` .text() ` 等方法,具体可以参考 [ MDN 上的文档] ( https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API ) 。
29
29
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