阿里旅行去啊H5首页总结&Promise

阿里旅行去啊H5首页总结&Promise

Transcript

1. 去啊H5首页总结 D[夯䔺
2. module KISSY.add(function(S, require, exports, module) { 'use strict'; var Q = require('q'), IO = require('io'), UA = require('ua'), MTop = require('mtop'); module.exports = {…}; });
3. when not use base?
4. when not use base? KISSY.add(function(S, UA, Base, Util, City, Data, View) { 'use strict'; return Base.extend([City, Data, View], {…}, { ATTRS: {…} }); }, { requires: [ 'ua', 'base', './util', './city', './data', './view' ] });
5. when not use base? KISSY.add(function(S, require, exports, module) { 'use strict'; var UA = require('ua'), Util = require('./util'), City = require('./city'), Data = require('./data'), View = require('./view'); module.exports = S.merge(City, Data, View, {…}); });
6. when not use base? S.merge(S.Event.Target, City, Data, View, {…});
7. when not use base? Base is good but we should not abuse it…
8. sketch 解放生产力!!!
9. sass ✓ rem - 字体自适应 ✓ scale - 比例缩放 ✓ 1px - 高清屏细边
10. (function (root) { var docEl = document.documentElement; function changeRem () { root.rem = docEl.getBoundingClientRect().width / 20; docEl.style.fontSize = root.rem + 'px'; } changeRem(); //... })(window, undefined); sass - rem
11. @function rem($values){ $list: (); @each $value in $values { $list: #{$value/32}rem; } @return $list(); } h2 { font-size: rem(32); padding:0 rem(20); height:rem(80); line-height:rem(80); color:rgba(32,35,37,0.8); } sass - rem
12. sass - 1px .r1b:after { position: absolute; content: ""; top: 0; left: 0; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; border: 1px solid rgba(32,35,37,0.15); } @media (-webkit-device-pixel-ratio: 2) { .r1b:after { width: 200%; height: 200%; -webkit-transform: scale(.5); transform: scale(.5); } }
13. sass - scale .banner { @include scaleOutter(324); } .banner-scroller { @include scaleInner; overflow:hidden; }
14. @mixin scaleOutter($height, $width:640) { position:relative; padding-bottom:percentage($height / $width); height:0; overflow:visible; } @mixin scaleInner($width:100%,$height:100%,$top:0,$left:0,$right:auto,$bottom:auto) { position:absolute; width:$width; height:$height; top:$top; left:$left; right:$right; bottom:$bottom; } sass - scale
15. image optimize <img data-src="${item.image|image_optim,'640x640','q75'}" class="lazyload fade" /> // 图⽚片优化 Juicer.register('image_optim', function(url, size, q) { var suffix = '', regx = /_(\d+x\d+)?(q\d+)?\.(jpg|jpeg|png|gif)$/i, match, format; // 获取URL上的参数 if ((match = url.match(regx))) { url = url.replace(regx, ''); size = size || match[0]; q = q || match[1]; format = match[2]; } size && (suffix += size); // 尺⼨寸 q && (suffix += q); // 质量 suffix && (suffix = '_' + suffix + '.jpg'); // 后缀格式 self.isSupportWebp && (suffix += '_.webp'); // ⽀支持webp url && (url += suffix); return url; });
16. image optimize - webp http://gtms01.alicdn.com/tps/i1/TB1uBH9IFXXXXc.XFXXXETMFFXX-1080-547.jpeg_640x640q75.jpg_.webp use webp: 24.9kb -> 14.6kb http://gtms01.alicdn.com/tps/i1/TB1uBH9IFXXXXc.XFXXXETMFFXX-1080-547.jpeg_640x640q75.jpg
17. loading render default page render getCity getData getCity getData flow optimize 1 2
18. getCity getData default page / cache page getCity getData default page / cache page diffHTML 3 4 flow optimize render render
19. diff html diffHTML: function(tpls, cache) { //... return { add: add, del: del, update: update, resort: resort, rerender: add.concat(update), modify: add.length || del.length || update.length }; }, renderHTML: function(data) { // diff⼀一下各模块是否有修改 diff = this.diffHTML(tpls, ctpls); console.log(diff); // 如果有修改（增删改） if (diff.modify) { // 先销毁原先的模块逻辑 rerender = diff.rerender; this.destroyMods(rerender); // 先删除没有的模块 diff.del.forEach(function(t) { node = S.one('.' + t.id); node && node.remove(true); }); // 增加新增的模块 diff.add.forEach(function(t) { container.append(t.html); }); // 更新原有的模块 diff.update.forEach(function(t) { // !!!去抢购不需要重新替换HTML if (t.id !== 'trip_home_sale') { node = S.one('.' + t.id); node && node.replaceWith(t.html); } }); } // 如果顺序发⽣生变化 if (diff.resort) { tpls.forEach(function(t) { node = S.one('.' + t.id); node && container.append(node); }); } return rerender; },
20. Promise “A promise represents the eventual result of an asynchronous operation. The primary way of interacting with a promise is through its then method, which registers callbacks to receive either a promise’s eventual value or the reason why the promise cannot be fulfilled.” - Promises/A+ https://promisesaplus.com/
21. Promise getCity getData default page / cache page diffHTML render
22. Promise getCity getData default page / cache page diffHTML render
23. Promise
24. Promise // sync this.getCity() .getData() .render();
25. Promise // sync this.getCity() .getData() .render(); // async - callbacks this.getCity(function(city) { this.getData(city, function(data) { this.render(data); }); });
26. Promise // sync this.getCity() .getData() .render(); // async - callbacks this.getCity(function(city) { this.getData(city, function(data) { this.render(data); }); }); 回调过度嵌套
27. Promise // sync this.getCity() .getData() .render(); // async - callbacks this.getCity(function(city) { this.getData(city, function(data) { this.render(data); }); }); // async - promise this.getCity() .then(this.getData) .then(this.render); 回调过度嵌套
28. Promise
29. Promise // async - callbacks getData: function(city, callback) { if (yes) { callback(null, data); } else { callback(reason, null); } }
30. Promise // async - callbacks getData: function(city, callback) { if (yes) { callback(null, data); } else { callback(reason, null); } } 混淆参数与返回值
31. Promise // async - callbacks getData: function(city, callback) { if (yes) { callback(null, data); } else { callback(reason, null); } } // async - promise getData: function(city) { return new Promise(function(resolve, reject) { if (yes) { resolve(data); } else { reject(reason); } }); } 混淆参数与返回值
32. Promise
33. Promise // async - callbacks this.getData(city, function(err, data) { if (err) { this.handleError(err); } else { this.render(data); } });
34. Promise // async - callbacks this.getData(city, function(err, data) { if (err) { this.handleError(err); } else { this.render(data); } }); 处理错误麻烦
35. Promise // async - callbacks this.getData(city, function(err, data) { if (err) { this.handleError(err); } else { this.render(data); } }); // async - promise this.getData(city) .then(this.render, this.handleError); 处理错误麻烦
36. Promise // async - callbacks this.getData(city, function(err, data) { if (err) { this.handleError(err); } else { this.render(data); } }); // async - promise this.getData(city) .then(this.render, this.handleError); 处理错误麻烦 // async - promise - catch this.getData(city) .then(this.render) .catch(this.handleError);
37. Promise - status pending fullfilled rejected resolve reject single way
38. Promise - status
39. // async - callbacks getCity: function(callback) { var timer; if (urlCity) { callback(urlCity); } else if (cacheCity) { callback(cacheCity); } else { this.getLocateCity(function(locateCity) { clearTimeout(timer); callback(locateCity); }); timer = setTimeout(function() { callback(defaultCity); }, 8000); } } Promise - status
40. // async - callbacks getCity: function(callback) { var timer; if (urlCity) { callback(urlCity); } else if (cacheCity) { callback(cacheCity); } else { this.getLocateCity(function(locateCity) { clearTimeout(timer); callback(locateCity); }); timer = setTimeout(function() { callback(defaultCity); }, 8000); } } Promise - status 多种状态可能执行多次
41. // async - callbacks getCity: function(callback) { var timer; if (urlCity) { callback(urlCity); } else if (cacheCity) { callback(cacheCity); } else { this.getLocateCity(function(locateCity) { clearTimeout(timer); callback(locateCity); }); timer = setTimeout(function() { callback(defaultCity); }, 8000); } } Promise - status // async - promise getCity: function(callback) { return new Promise(function(resolve, reject) { resolve(urlCity); resolve(cacheCity); this.getLocateCity.then(resolve); setTimeout(function() { resolve(defaultCity); }, 8000); }); } 多种状态可能执行多次
42. // async - callbacks getCity: function(callback) { var timer; if (urlCity) { callback(urlCity); } else if (cacheCity) { callback(cacheCity); } else { this.getLocateCity(function(locateCity) { clearTimeout(timer); callback(locateCity); }); timer = setTimeout(function() { callback(defaultCity); }, 8000); } } Promise - status // async - promise getCity: function(callback) { return new Promise(function(resolve, reject) { resolve(urlCity); resolve(cacheCity); this.getLocateCity.then(resolve); setTimeout(function() { resolve(defaultCity); }, 8000); }); } 多种状态可能执行多次 多种状态只执行一次
43. Promise - all
44. Promise - all // async - callbacks getData: function(city, callback) { var count = 0, datas = []; function checkDone(data) { datas.push(data); if (++count == 2) { callback(datas); } } this.getLayoutData(city, function(data) { checkDone(data); }); this.getOnsaleData(function(data) { checkDone(data); }); }
45. Promise - all // async - callbacks getData: function(city, callback) { var count = 0, datas = []; function checkDone(data) { datas.push(data); if (++count == 2) { callback(datas); } } this.getLayoutData(city, function(data) { checkDone(data); }); this.getOnsaleData(function(data) { checkDone(data); }); } 并行异步操作麻烦，并且无法保证返回值顺序
46. Promise - all // async - callbacks getData: function(city, callback) { var count = 0, datas = []; function checkDone(data) { datas.push(data); if (++count == 2) { callback(datas); } } this.getLayoutData(city, function(data) { checkDone(data); }); this.getOnsaleData(function(data) { checkDone(data); }); } // async - promise getData: function(city) { return Promise.all([ this.getLayoutData(city), this.getOnsaleData() ]); } 并行异步操作麻烦，并且无法保证返回值顺序
47. Promise - api • Promise.all(promises) - 并行处理异步，全部结束时返回值 • Promise.race(promises) - 并行处理异步，第一个结束时返回值 • Promise.resolve(value) - 生成一个成功的 Promise 对象 • Promise.reject(reason) - 生成一个失败的 Promise 对象 • promise.then(onFullfilled, onRejected) - 处理回调 • promise.catch(onRejected) - 处理失败回调 Static Prototype
48. • caniuse • RSVP.js • Q.js • https://promisesaplus.com/ • http://www.html5rocks.com/en/tutorials/es6/promises/ • https://www.youtube.com/watch?v=qbKWsbJ76-s • https://www.youtube.com/watch?v=wc72cyYt8-c can I use Promise?
49. 感想
50. 感想 • “迷途知返”- 要及时跳出坑
51. 感想 • “迷途知返”- 要及时跳出坑 • 写注释可以帮助重新梳理逻辑与优化代码
52. 感想 • “迷途知返”- 要及时跳出坑 • 写注释可以帮助重新梳理逻辑与优化代码 • 极致体验精益求精是我们永无止境的追求
53. 感想 • “迷途知返”- 要及时跳出坑 • 写注释可以帮助重新梳理逻辑与优化代码 • 极致体验精益求精是我们永无止境的追求 • 把每一个项目都当做是一次超越自己的机会
54. 感想 • “迷途知返”- 要及时跳出坑 • 写注释可以帮助重新梳理逻辑与优化代码 • 极致体验精益求精是我们永无止境的追求 • 把每一个项目都当做是一次超越自己的机会 • ES6 is Comming !!!
56. THE END.