Web重构之道

E2a4044058c9d32770da590571e956b8?s=47 w3cplus
December 16, 2015

 Web重构之道

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

E2a4044058c9d32770da590571e956b8?s=128

w3cplus

December 16, 2015
Tweet

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᯿຅ԏ᭲ 揭㦤⃚ ‭⍩礂㹢㒠术 揭㦤䘦㈕ ‭⍩礂㹢还▿设计䱟 ‭⍩礂㹢浏览⢈⎜ⷙ㉇ 揭审䢤㡏⨚础⚬䘦㈕

  40. None