Web重构之道

重构是一个含“金”量低的职位，而重构之道是具有历史的一个话题，做为一名Web重构从业人员，思考许久，毕竟目前很多Web从业人员都还在从事这部分工作，也有不少人对自己的职业或者所从事的重构工作感到迷茫。借此机会与大家一起探讨重构在Web中的重要性与历史使命。

Transcript

1. Web᯿຅ԏ᭲ य़ᄏ—MFE@ಋႣ
2. ౯ฎय़ᄏ 榫⧮国语ʼn璱⮝ʼn䢤⑭䴏 㑫㿸璱狯䢤ň伪⑭䴏ʼn 页概⃴
3. Web᯿຅ԏ᭲ ⑭‶ ⃪䜿 㥊来
4. Web᯿຅ԏ᭲ 
5. Web᯿຅ԏ᭲ 没㤩揭㦤†说 独㤩䢤标签 共页设计师 冮々
6. Web᯿຅ԏ᭲ ゔ拃场榉⚝
7. Web᯿຅ԏ᭲ 榉⚝☮带来䢤变猴 ‶纪␽璱⭇䢤+6⏄㩨 灾难㉇䢤FKX EUU㻻滥 ␧图Ԋ页概⃴Ԋ⽆ň钱ʼn礒Ԋ门槛Ⅾ
8. Web᯿຅ԏ᭲ 9GD揭㦤⑐珸㡏⃠⁨犖
9. Web᯿຅ԏ᭲ *6/. %55
10. Web᯿຅ԏ᭲ †䯭狾㝙 内挈结㦤㤔ⷙ㠳 㤩节⑖䢤㞔䘦℃码 ↟$WI产䜿䖧璱ⸯ猴
11. Web᯿຅ԏ᭲ 9GD揭㦤⑐珸㡏⃠⁨犖 㡏㈽㌓ 㡏䘦㈕ 㡏*6/. %55 ,5䢤␦䯛◪ℸ猴 㡏婬内␦々䢤ℸ猴 㡏℅㒠术Ԋ数㖎Ԋ㋥㈠Ԋ⃚㞧为⁛导䢤⃄₲ℸ猴
12. Web᯿຅ԏ᭲ 䩔啇刬␚ 癣䩔吊㐱
13. Web᯿຅ԏ᭲ 输␚
    页概 25& ⃄₲ 2& 䝈䨴 癌ク 々⎗ ԋԋԋ
14. Web᯿຅ԏ᭲ 㐱⥈㑫㿸㈮⁨≺揭㦤犖
15. Web᯿຅ԏ᭲ /GFKC1DLGEV
16. Web᯿຅ԏ᭲ 㐱们䨅礼䢤㤩犖 ⽬⭷ ☓边㤩㔩钮
17. Web᯿຅ԏ᭲ 㐱们‭䨅礼䢤㤩犖 图䑧⭇ⸯ⚬对齐㟙ㄯ ☓边内ⷙ㥊䨅 宽テ㥊䨅
18. Web᯿຅ԏ᭲ 㥊揭㦤⑭犖
19. Web᯿຅ԏ᭲
20. Web᯿຅ԏ᭲
21. Web᯿຅ԏ᭲ <div class="media"> <div class="media__object"> <img src="" alt=""> </div> <div class="media__body"> ... </div> </div> .media { &:after{ content:""; display: table; clear:both; } &__object { float: left; } &__body { overflow: hidden; } }
22. Web᯿຅ԏ᭲ <div class="media"> <div class="media__object pull-left"> <img src="" alt=""> </div> <div class="media__object pull-right"> <button type="button">...</button> </div> <div class="media__body"> ... </div> </div> .media { &:after{ content:""; display: table; clear:both; } &__object { float: left; &.pull-right{ float:right; } } &__body { overflow: hidden; } }
23. Web᯿຅ԏ᭲ 个㉇猴样ㄯ㈮⁨处䘦
24. Web᯿຅ԏ᭲ <div class="media shop"> <div class="media__object"> <img src="" alt=""> </div> <div class="media__body"> ... </div> </div> <div class="media card"> <div class="media__object"> <img src="" alt=""> </div> <div class="media__body"> ... </div> </div>
25. Web᯿຅ԏ᭲ 虽䍖硚决₦椠㹢犃Ⅶ扩⹵㉇⚬灵㽛㉇‭够强⭇
26. Web᯿຅ԏ᭲ (NGZDQZ (NCI1DLGEV
27. Web᯿຅ԏ᭲ <div class="flag"> <div class="flag__item"> <img src="" alt=""> </div> <div class="flag__item"> ... </div> </div> .flag { display: table; width: 100%; &__item { display: table-cell; vertical-align: middle; &--top { vertical-align: top; } &--bottom { vertical-align: bottom; } } }
28. Web᯿຅ԏ᭲ %55 〣⹠ 䣎肤 |--media.scss |----_media-layout.scss |----_media-skin.scss
29. Web᯿຅ԏ᭲ 㤩没㤩†个‧匝䢤标签OGFKC OGFKC
30. Web᯿຅ԏ᭲ var media = doc.createElement('div'); media.className = ‘media'; media.innerHTML = '<a class="media__object" href="">' + '<img src="" alt="">' + '</a>' + '<div class=“media__body”>…</div>’; media.querySelector(‘.media__object’).href = media.link; media.querySelector(‘.media__object img').src = media.avatarImg; …
31. Web᯿຅ԏ᭲ 亲⵰⮢ⅵ䷁䘦
32. Web᯿຅ԏ᭲ †䤔还⥈瑢佂Ŏ
33. Web᯿຅ԏ᭲ ☏⬭䝈 ☏扩⹵ ☏ⶺ⑖ ☏维护
34. Web᯿຅ԏ᭲
35. Web᯿຅ԏ᭲ vs 㿸揱币
36. Web᯿຅ԏ᭲ Before 0 4.5 9 13.5 18 2G 3G 4G WIFI 3.3 3.9 7.5 16.1 Fully Loaded Time avg.
37. Web᯿຅ԏ᭲ ୚੕ඪ՞ғ0.36% -> 0.72% GMVғ732W -> 1377W
38. Web᯿຅ԏ᭲ 㥊来㡏冮⮝䢤犃礼怏㡏㤒㒸䢤犃现实㡏残掗䢤犃Ⓚ㻙♇
39. Web᯿຅ԏ᭲ 揭㦤⃚ ‭⍩礂㹢㒠术 揭㦤䘦㈕ ‭⍩礂㹢还▿设计䱟 ‭⍩礂㹢浏览⢈⎜ⷙ㉇ 揭审䢤㡏⨚础⚬䘦㈕