更好的文件组织

package dependence tools compiler loader http://www.ﬂickr.com/photos/sixteen-miles/3695679411/ . . . .
. ߋ޷త * จ݅组织 kejun / hikejun.com Sunday, March 25, 2012 ઌղ释ҰԼ为ॄ㜮ੋจ݅组织ࣕෆੋ୅码组织ɻ୅码组织ԟԟੋࢦ应༻Սᦻํ໘త಺༰ɼ诸೗ CommonJSɺMVC೭㜎త话题ɼୠ这ࠣੋࠓఱෆձ㐪ٴతɻࠓఱ谈论తจ݅组织ࢦతबੋ੩态จ݅త؅ ཧ࿨组织ɻ

ଟ೥લब讨论ሏɼዎ㜮ຢఏሏ？ ʢҰ࿽历ٱ໻৽త话题......ʣ Sunday, March 25, 2012 这ੋҰ࿽࿝话题ɻจ݅组织为ॄ㜮对લ୺䇖发དྷ说኷ॏཁɻલ୺䇖发ओཁ༻౸HTML/CSS/Javascriptɼ ૝૝ۙ႓೥这ࡾ䝅语ݴత发లɼ࿨ࡏ实际应༻தత䐾杂౓࿨୅码ྔతఏߴɻ组织ሏ们ɼ实际্ੋ؅ཧ䐾杂౓ɼఏߴ产඼త䇖发Ꮘ཰ɻಉ时ܥ统తղႊ᠓᜾ੑೳ问题ɻ

໨త࿨໨标 Sunday, March 25, 2012 [લ䫆఺ੋ实际۰౸త问题ɼଖதୈ1఺໬为严ॏ]讨论୅码组织ձ௚઀联ܥ౸ୈ1఺ɻୠ仅仅ղႊ๭Ұ问题౎ෆੋ኷޷తํࣜɻ 举࿽ྫࢠɼ༻CommonJSݪຊੋ኷޷త୅码໛块Խ组ํࣜɼሏߋ㭕߹༻ဋ单页తweb应༻ɼ䇖发时组织తੋ细ཻ౓త୅码໛ 块ɼ্线޳编译੒单࿽จ݅ɻୠሏ೗Ռ༻ဋ传统తେ规໛᠓᜾䇖发ब༗问题ɼෆ߹ኂ଄੒େྔখจ݅请ٻɼ߹ኂຢձ଄੒ެڞ จ݅ඇৗେɻཁฏߧ这ࠣ问题ಘग़Ұ࿽࠷终ํҊɼੋࠓఱཁ讨论ओཁ಺༰ɻզձઌဓୈ2఺ग़发ɼ牵ग़ॴ༗త问题ɻ

1. ެڞจ݅త৑༨ ʵ ໛块Խ ʵ ෼㩂业务逻辑୅码 ໨త࿨໨标 Sunday, March 25,
2012 [લ䫆఺ੋ实际۰౸త问题ɼଖதୈ1఺໬为严ॏ]讨论୅码组织ձ௚઀联ܥ౸ୈ1఺ɻୠ仅仅ղႊ๭Ұ问题౎ෆੋ኷޷తํࣜɻ 举࿽ྫࢠɼ༻CommonJSݪຊੋ኷޷త୅码໛块Խ组ํࣜɼሏߋ㭕߹༻ဋ单页తweb应༻ɼ䇖发时组织తੋ细ཻ౓త୅码໛ 块ɼ্线޳编译੒单࿽จ݅ɻୠሏ೗Ռ༻ဋ传统తେ规໛᠓᜾䇖发ब༗问题ɼෆ߹ኂ଄੒େྔখจ݅请ٻɼ߹ኂຢձ଄੒ެڞ จ݅ඇৗେɻཁฏߧ这ࠣ问题ಘग़Ұ࿽࠷终ํҊɼੋࠓఱཁ讨论ओཁ಺༰ɻզձઌဓୈ2఺ग़发ɼ牵ग़ॴ༗త问题ɻ

1. ެڞจ݅త৑༨ ʵ ໛块Խ ʵ ෼㩂业务逻辑୅码 ໨త࿨໨标 2. ఏߴ᠓᜾ੑೳ ʵ
ਚշల现಺༰ ʵ ਚշ㠳应༻户ަޓ Sunday, March 25, 2012 [લ䫆఺ੋ实际۰౸త问题ɼଖதୈ1఺໬为严ॏ]讨论୅码组织ձ௚઀联ܥ౸ୈ1఺ɻୠ仅仅ղႊ๭Ұ问题౎ෆੋ኷޷తํࣜɻ 举࿽ྫࢠɼ༻CommonJSݪຊੋ኷޷త୅码໛块Խ组ํࣜɼሏߋ㭕߹༻ဋ单页తweb应༻ɼ䇖发时组织తੋ细ཻ౓త୅码໛ 块ɼ্线޳编译੒单࿽จ݅ɻୠሏ೗Ռ༻ဋ传统తେ规໛᠓᜾䇖发ब༗问题ɼෆ߹ኂ଄੒େྔখจ݅请ٻɼ߹ኂຢձ଄੒ެڞ จ݅ඇৗେɻཁฏߧ这ࠣ问题ಘग़Ұ࿽࠷终ํҊɼੋࠓఱཁ讨论ओཁ಺༰ɻզձઌဓୈ2఺ग़发ɼ牵ग़ॴ༗త问题ɻ

ਚշల现಺༰ ʵ ਚշ㠳应༻户ަޓ 3. ‘‘૒ߴ’’త໨标∶ ߴՄ维护ੑ࿨ߴੑೳ Sunday, March 25, 2012 [લ䫆఺ੋ实际۰౸త问题ɼଖதୈ1఺໬为严ॏ]讨论୅码组织ձ௚઀联ܥ౸ୈ1఺ɻୠ仅仅ղႊ๭Ұ问题౎ෆੋ኷޷తํࣜɻ 举࿽ྫࢠɼ༻CommonJSݪຊੋ኷޷త୅码໛块Խ组ํࣜɼሏߋ㭕߹༻ဋ单页తweb应༻ɼ䇖发时组织తੋ细ཻ౓త୅码໛ 块ɼ্线޳编译੒单࿽จ݅ɻୠሏ೗Ռ༻ဋ传统తେ规໛᠓᜾䇖发ब༗问题ɼෆ߹ኂ଄੒େྔখจ݅请ٻɼ߹ኂຢձ଄੒ެڞ จ݅ඇৗେɻཁฏߧ这ࠣ问题ಘग़Ұ࿽࠷终ํҊɼੋࠓఱཁ讨论ओཁ಺༰ɻզձઌဓୈ2఺ग़发ɼ牵ग़ॴ༗త问题ɻ

ਚշల现಺༰ ʵ ਚշ㠳应༻户ަޓ 3. ‘‘૒ߴ’’త໨标∶ ߴՄ维护ੑ࿨ߴੑೳ 4. 㠥֎Ұ࿽໨标∶ ఏߴ䇖发Ꮘ཰ Sunday, March 25, 2012 [લ䫆఺ੋ实际۰౸త问题ɼଖதୈ1఺໬为严ॏ]讨论୅码组织ձ௚઀联ܥ౸ୈ1఺ɻୠ仅仅ղႊ๭Ұ问题౎ෆੋ኷޷తํࣜɻ 举࿽ྫࢠɼ༻CommonJSݪຊੋ኷޷త୅码໛块Խ组ํࣜɼሏߋ㭕߹༻ဋ单页తweb应༻ɼ䇖发时组织తੋ细ཻ౓త୅码໛ 块ɼ্线޳编译੒单࿽จ݅ɻୠሏ೗Ռ༻ဋ传统తେ规໛᠓᜾䇖发ब༗问题ɼෆ߹ኂ଄੒େྔখจ݅请ٻɼ߹ኂຢձ଄੒ެڞ จ݅ඇৗେɻཁฏߧ这ࠣ问题ಘग़Ұ࿽࠷终ํҊɼੋࠓఱཁ讨论ओཁ಺༰ɻզձઌဓୈ2఺ग़发ɼ牵ग़ॴ༗త问题ɻ

http://www.zhihu.com/question/20045953 Ҿࢠ ೂޅಞ်૫ഈ၂۱CVUUPOቋॹಞႨ޼ु֞ѩ౏ॖၛҠቔ Ⴕ၂۱๙ႨCVUUPO бೂğ๷ࡩCVUUPO ᄝ಩ޅ်૫׻ႵॖିႨ֞b໙ีЇݣğ ೂޅቋॹཁൕԛটbčࡌഡ෱ၘࣜᄝ်૫ौభ໊֥ᇂĎ CVUUPOႵׄࠌྛູđೂޅ࣐ॹԚ൓߄čԚ൓߄၇ঠKRVFSZĎ ቔູ๙Ⴈቆࡱđေॉ੮۲ᇕॖି౦ঃ֥႕ཙč఼ט൞۲ᇕॖି౦ঃĆĎ ۳ԛ၂۱ቋݺ֥ٚσĤ
ٳ۩ཌ ໙ีׄ҂ࣇࣇ൞Ⴊ߄࠯ెđط൞်૫ഈKT DTT֩ཋᇅၹ෍ೂޅܵ৘b Sunday, March 25, 2012 ද໘্؃这ੋղႊҰ࿽ಛྫతੑೳ问题ɼୠ实际্զੋ૝讨论೗Կߋշత㠳应༻户ߦ为这Ұኅᔟత问题ɻ༻户ଧ䇖页໘时౳଴㞆વੋਖ਼ৗతɻୠੋ༻户೗Ռ༗໌䉯తҙ图ɼଞձഭෆٸ଴఺ಹ࿽҈钮ɻ现ࡏత᠓页ঝ载ଠଟత东੢ɼ 动辄े႓ɺ႓े࿽JSɼ೗Կ组织ሏ们ɼ೗Կਚշత㠳应༻户తަޓߦ为ੋ࿽धཁࢥߟత问题ɻሏൺ单纯త௥ٻҰࠣ

धཁշ଎㠳应༻户ߦ为 Sunday, March 25, 2012 ࡏ实际产඼தɼ这䝅धཁշ଎㠳应త৘ႎੋ኷ීวతɻൺ೗ट页্తొ录ೖᅫɺ导ߤ্తࡊ单ɺ፺ࡧ ᐽɺ༻户频ൟ࢖༻తbutton౳౳

Sunday, March 25, 2012 ୠ实际৘ႎ޷ൺੋ٬运େ厅ɼਓগ时买ථɺ进᜾౎ҪҪ༗৚ɼୠ౸ਓଟ时进᜾తߦ为बձड౸֤䝅ׯ ᢗɻ೗Ռ޻࡞ਓ员仅仅ᯪ፤ணᄼჱᄲ这䝅简单త组织खஈɼجຊ্຅ॄ㜮༻ɻ页໘໵ੋ೗ࠑɼࠞ杂֤ྃ 䝅逻辑࿨ޭೳɼ䎔ܥ౸༻户ମ验తॏཁަޓबձඃׯᢗɻॴҎɼधཁݐཱ๭䝅“页໘டং”ɻ

1. bodyཬత资ݯจ݅ཁ౳౸ሏલ໘తJS执ߦ׬࠽䇖࢝Լ载 2. bodyཁ౳౸headཬతCSS࿨JSԼ载ኂ执ߦ׬࠽䇖࢝䘦છ 3. 资ݯจ݅㑌Ҭ໊ኂߦԼ载਺ߴ௿୺浏览ثࠩ䇗େ 4. ۰౸֎联JSɼ䘦છձఀࢭ௚౸JSԼ载ኂ执ߦ׬ 5. ۰౸಺联JSɼ䘦છձఀࢭ௚౸执ߦ׬
6. Ꮰ论֎҃಺联JSɼཁ౳౸ሏલ໘࠷ຫҰ࿽CSSԼ载׬࠽执ߦ 7. DOMContentReadyཁ౳࠷޳Ұ࿽JS执ߦ׬ ҰࠣӨ㠳页໘䘦છత结论 Sunday, March 25, 2012 这ੋҰࠣӨ㠳页໘䘦છత结论ɻߴ୺浏览ث㞆વ౎ࢧ࣋ߴኂߦԼ载਺࿨预Ճ载ɼୠੋ这䝅ኂߦձඃJSଧஅʢ结论1ʣɻ೚ԿҰ࿽JSɼ䬟ዑԼ载时间୞༗0ms҃执ߦ时间୞༗0msɼ໵ཁ౳ணሏલ໘࠷ຫతಹ࿽CSSʢ结论6ʣɻ这኷૾ࡏߴ଎্䇖车ɼલ໘༗Ұ辆ຫ㚌㚌త车ɼඇৗӨ㠳௨ߦᏈ ཰ɻheadṉ࠹bodyత䘦છੋӨ㠳࠷େతʢ结论2ʣɼ૝૝Ֆྃେ钱⃧㖘෰务ث೺㠳应时间Ճշྃ႓ඦmsɼ结Ռhead过ॏɼຢ኷轻қత࿘费ྃ ႓ඦms኷ෆ䎞ࢉɻဓ这ࠣ结论্؃ࣅݷ౎࿨JS༗௚઀䎔ܥɼୠJS䇖࢝执ߦຢඞ须౳ሏલ໘తCSSɻҼࠑલ୺తจ݅组织टઌबੋཁཧਗ਼这ࠣ䎔

<head> <link href=”base.css”> <link href=”movie.css”> <script> ᆳྛNT </script> </head> <body>
<div>؃౸զྃ</div> <img src=”avatar.png”> </body> <head> <script> ᆳྛNT </script> <link href=”base.css”> <link href=”movie.css”> </head> ... <head> <link href=”base.css”> <link href=”movie.css”> </head> ... <script> ᆳྛNT </script> </body> 300ms 400ms + 100ms 300ms 300ms 400ms 300ms 400ms 1. 2. 3. Sunday, March 25, 2012 ࡏ্ड़结论తج础্ɼ۩ମ෼ੳҰԼɻ

<head> <link rel="stylesheet" href="css1.css"> <link rel="stylesheet" href="css2.css"> </head> <body> <script
type="text/javascript"> </script> <img src="img1.jpg" alt="" /> <script type="text/javascript"> </script> <img src="img2.jpg" alt="" /> <script type="text/javascript"> </script> <img src="img3.jpg" alt="" /> <script type="text/javascript"> </script> <img src="img4.jpg" alt="" /> </body> scriptഁᆀኂߦԼ载ɼӽᯪલӨ㠳ӽେ 4. Sunday, March 25, 2012 资ݯจ݅ཁ౳ሏલ໘తJS执ߦ׬ʢ㞆વ୞༗ۭ֨తۭ标签ɼҙຯண0执ߦ时间ʣɼJS还ੋཁ౳ሏલ໘త CSSԼ载׬ɻ这样ኂߦԼ载ඃଧഁྃɼ೗Ռἥᎎࡏ页໘தత಺联JS执ߦ时间኷୹త话ɼআྃ对页໘load 时间༗Ө㠳֎ɼ对dom readyӨ㠳ෆେ还ೳ઀डɻ

ඃࠌ视త“蓝线” DOMContentLoaded (empty cache) DOMContentLoaded (primed cache) user.qzone.qq.com/id ~7s ~3s
renren.com/id ~10.8s ~8s weibo.com/id ~7s ~3.6s taobao.com ~9.5s ~5.6s news.163.com ~10s ~6.3s yongche.com ~8s ~5s douban.com ~3s ~1s Sunday, March 25, 2012 ௨过测试Ұࠣओྲྀ᠓᜾ɼDOM-readyత时间౎ൺ较长ɼզ૝ଞ们ੋෆ׶轻қ೺JS์ࡏDOM-ready޳执ߦతɻ这样ҙຯணJS୞ ೳૢ࡞ሏલ໘తDOMɻୠඞᰈձ༗લ໘త໛块࿨޳໘ަޓతՄೳɼ౰વՄҎ೺ॴ༗JS౎์ࡏ页໘࠷޳ɻୠ这样ఏߴྃ୅码维护 త੒ຊɻमվҰ࿽໛块ɼಉ时ཁࡏ㠥֎Ұ࿽஍ํमվሏతJSɼ时间长ྃඇৗ༰қ଄੒৑༨ɻ޳໘ձఏ౸೗Կฏߧ这࿽问题ɻ

ཧ૝తจ݅组织 1. ௥ٻ࠷轻తHEAD ʵ HEADཬෆ์೚ԿJSɼಉ时仅༗಺联CSSʢ຅༗ෆՄೳʣɼੋ࠷轻త ʵ HEADཬ์执ߦ时间ਚՄೳ୹త಺联JSɼಉ时JS์ࡏCSSલ໘ɼ઀ۙ࠷轻 2. ॴ༗页໘ॳ࢝Խ阶ஈඞ须తJS౎์ࡏจᑆ࠷޳ 3.
ඇ页໘ॳ࢝Խ阶ஈతJSࡃऔ҈धՃ载 Sunday, March 25, 2012 Ҏલ讨论จ݅组织׬શੋဓੑೳាԽ֯౓ग़发తɻዎ㜮߇੍ެڞจ݅త৑༨ɼዎ㜮߇੍จཻ݅౓࿨请ٻ ਺ɼዎ㜮؅ཧґ赖䎔ܥɼ页໘໛块࿨ሏ专ଐతCSSҎٴJSత维护问题......这ࠣ还౎຅༗㐪ٴ౸ɼॴҎ现ࡏ ؃དྷෆ䭧ཧ૝ɻ

ཧ૝తจ݅组织 1. ௥ٻ࠷轻తHEAD ʵ HEADཬෆ์೚ԿJSɼಉ时仅༗಺联CSSʢ຅༗ෆՄೳʣɼੋ࠷轻త ʵ HEADཬ์执ߦ时间ਚՄೳ୹త಺联JSɼಉ时JS์ࡏCSSલ໘ɼ઀ۙ࠷轻 2. ॴ༗页໘ॳ࢝Խ阶ஈඞ须తJS౎์ࡏจᑆ࠷޳ 3.
ඇ页໘ॳ࢝Խ阶ஈඞ须తJSࡃऔ҈धՃ载 4. 对େ规໛᠓᜾తจ݅组织དྷ说ɼ௥ٻੑೳෆੋ࠷ॏཁ 5. લ޳୺ڞಉܗ੒Ұ౟੩态จ݅组织؅ཧମܥ 6. จ݅组织ཁ၏౸“ࣗવ”ɼෆ额֎⃧Ճ环节ɼආ໔೺ࣄ৘“䐾杂Խ” 7. web应༻۠䫲对଴ Sunday, March 25, 2012 ੑೳఏঋ୞ੋจ݅组织达౸ᏈՌ೭Ұɼෆੋ།Ұ௥ٻత໨标ɻཁ实现Ұ࿽ཧ૝తจ݅组织ɼෆೳ仅ᯪલ ୺खஈɻจ݅组织ํࣜ应该ූ߹䇖发习惯ɼਚྔࣗ动Խʢෆ额֎⃧Ճ环节ʣɼ೗Ռ೺问题䐾杂Խबಘෆ 偿ࣦྃɻ㠥֎ɼେ规໛᠓᜾࿨web应༻తจ݅؅ཧ೭ಓੋෆಉతɻ

Sunday, March 25, 2012 显વ实现ཧ૝తจ݅组织ɼ规ᣂ࿨ഓ训ੋᯪෆॅతɻ޷ൺ؅ཧલ໘ಹ࿽٬运େ厅ɼᯪਓ፤ᄼჱᄲੋ远远 ෆ䭧తɻधཁҰࠣ“ߗ”ાࢪɻ

੩态จ݅؅ཧܥ统తᦻ੒ લ୺ʵDo (3.0) ૈཻ౓จ݅Ճ载࿨ґ赖؅ཧ ޳୺ʵ੩态จ݅؅ཧܥ统 a. 细ཻ౓໛块తҾ༻࿨预处ཧ b. 对໛൘த಺联JS/CSS处ཧ Web应༻ࡃ༻CommonJS标।త໛块Խ组织ɼ্线ଧแ߹ኂ为单Ұจ݅
a. େ规໛᠓᜾页໘਺ྔଟɺޭೳ෼ࢄ b. Web应༻௨ৗੋ单页໘ɺޭೳूத Sunday, March 25, 2012

Doత༝དྷ ݪ࢝ࣸ๏ <head> <script src="jQuery.js"></script> <link rel="stylesheet" href="common.css"> </head> <body>
<%include file=”mod.html” /> <script src="another.js"></script> <script> $('#bn').click(function(e){ ... }); </script> </body>  <div class="mod"> <a id="bn">link</a> </div> Sunday, March 25, 2012 ࢥߟ኷ଟ问题ଖ实౎应该ઌճ౸ݪ఺ɻ૝૝೗Ռ໛块༻౸తcss࿨js෼䇖์ɼ维护ىདྷੋଟ㜮ຑ烦ɻ Do1.0/2.0简单త说बੋ೺֎෦JSඇ્࠹తՃ载进དྷɼ໛块తHTML࿨ሏ专ଐతJSՄҎ์ࡏҰىɼ维护ى དྷํศଟྃɻDo3.0进Ұ㑊ఏঋੑೳɻ

<%include file=”mod.html” /> <script src="another.js"></script> <script> $('#bn').click(function(e){ ... }); </script> </body>  <div class="mod"> <a id="bn">link</a> </div>  <div class="mod"> <a id="bn">link</a> </div> <script> Do(‘another.js’, function(){ $('#bn').click(function(e){ ... }); }); </script> <head> <script src="do.js" data-corelib="jQuery.js"></script> <link rel="stylesheet" href="common.css"> </head> <body> <%include file=”mod.html” /> </body> Do1.0/2.0 Sunday, March 25, 2012 ࢥߟ኷ଟ问题ଖ实౎应该ઌճ౸ݪ఺ɻ૝૝೗Ռ໛块༻౸తcss࿨js෼䇖์ɼ维护ىདྷੋଟ㜮ຑ烦ɻ Do1.0/2.0简单త说बੋ೺֎෦JSඇ્࠹తՃ载进དྷɼ໛块తHTML࿨ሏ专ଐతJSՄҎ์ࡏҰىɼ维护ى དྷํศଟྃɻDo3.0进Ұ㑊ఏঋੑೳɻ

<%include file=”mod.html” /> <script src="another.js"></script> <script> $('#bn').click(function(e){ ... }); </script> </body>  <div class="mod"> <a id="bn">link</a> </div>  <div class="mod"> <a id="bn">link</a> </div> <script> Do(‘another.js’, function(){ $('#bn').click(function(e){ ... }); }); </script> <head> <script src="do.js" data-corelib="jQuery.js"></script> <link rel="stylesheet" href="common.css"> </head> <body> <%include file=”mod.html” /> </body> Do1.0/2.0 Do3.0 <head> <script> ${istatic(‘/js/lib/head.js’)|n} </script> <link rel="stylesheet" href="common.css"> </head> <body> <%include file=”mod.html” /> <script src="do.js" data-corelib="jQuery.js"></script> </body>  <div class="mod"> <a id="bn">link</a> </div> <script> Do(‘another.js’, function(){ $('#bn').click(function(e){ ... }); }); </script> Sunday, March 25, 2012 ࢥߟ኷ଟ问题ଖ实౎应该ઌճ౸ݪ఺ɻ૝૝೗Ռ໛块༻౸తcss࿨js෼䇖์ɼ维护ىདྷੋଟ㜮ຑ烦ɻ Do1.0/2.0简单త说बੋ೺֎෦JSඇ્࠹తՃ载进དྷɼ໛块తHTML࿨ሏ专ଐతJSՄҎ์ࡏҰىɼ维护ى དྷํศଟྃɻDo3.0进Ұ㑊ఏঋੑೳɻ

લ୺੩态จ݅؅ཧث ʵ Do 3.0 ʵ ໨标1ɿBodyਚշ䘦છ ʵ ໨标2ɿDOM-readyਚշ৮发 (ঘࡏ实验阶ஈ) <head>
<script>${istatic('/js/core/do/inline.js')|n}</script>  <link rel="stylesheet" href="core.css"> <link rel="stylesheet" href="product.css"> </head> <script src="do.js" data-corelib="jQuery.js"></script> </body> <body> ʢ׬શ݉༰Do1/2తࣸ๏ʣ Sunday, March 25, 2012 Do3త༻๏ɻ

<head> </head> <body> </body> <script> </script> <script src=”do.js”.. Sunday, March
25, 2012

<head> </head> <body> </body> var Do = function() { Do.actions.push([].slice.call(arguments));
}; Do.ready = function() { Do.actions.push([].slice.call(arguments)); }; Do.add = Do.define = function(name, opts) { Do.mods[name] = opts; }; Do.global = function() { Do.global.mods = Array.prototype.concat(Do.global.mods, [].slice.call(arguments)); }; Do.global.mods = []; // ఆ义શہ໛块 Do.mods = {}; // ఆ义໛块 Do.actions = []; // 处ཧ队ྻ ௒轻తDo઀ᅫఆ义ɿ <script> </script> <script src=”do.js”.. Sunday, March 25, 2012

<head> </head> <body> </body> var Do = function() { Do.actions.push([].slice.call(arguments));
}; Do.ready = function() { Do.actions.push([].slice.call(arguments)); }; Do.add = Do.define = function(name, opts) { Do.mods[name] = opts; }; Do.global = function() { Do.global.mods = Array.prototype.concat(Do.global.mods, [].slice.call(arguments)); }; Do.global.mods = []; // ఆ义શہ໛块 Do.mods = {}; // ఆ义໛块 Do.actions = []; // 处ཧ队ྻ ௒轻తDo઀ᅫఆ义ɿ <script> </script> <script src=”do.js”.. Do执ߦ队ྻ/Ճ载ث Sunday, March 25, 2012

લ୺੩态จ݅؅ཧث ʵ Do 3.0 <script src="../do.min.js"></script> (4.4k, gzip:1.8k) Doຊ਎ੋҰ࿽纯ហతจ݅Ճ载ث Do('js/tip.js',
function(){ $('#demo2 a').simpleTip(); }); Do({path: 'js/tip.js', requires:['tip-base.js']}, function(){ $('#demo2 a').simpleTip(); }); Do.define('lightBox-css', {path: '{URL}', type: 'css'}); Do.define('lightBox', {path: '{URL}', type: 'js', requires: ['lightBox-css']}); Do('lightBox', 'dialog', function(){ $('#demo3 a').lightBox(); }); Do(function(){ Do.getData('test-value', function(value){ console.log(value); //1000 }); }); Do('slow-js', function(){ Do.setData('test-value', 1000); }); Do.setConfig('timeoutCallback', function(url){ // log timeout file. }); 轻޼ 䈻׆ ໛块间௨ਝ ௒时/错误处ཧ Sunday, March 25, 2012

લ୺จ݅组织త问题 ʵ ໛块Խ࿨请ٻ਺తႌಥ ʵ CSSత໛块Խ问题 ʵ ެڞจ݅৑༨问题 ʵ ෆ㭕߹进ߦ预编译 ʵ
Doతํࣜձ᜗᜗ׯᢗኂߦԼ载 Sunday, March 25, 2012 લ୺खஈղႊෆྃత问题ɻ

޳୺੩态จ݅؅ཧܥ统 <head> <script> ${istatic(‘/js/lib/head.js’)|n} </script> <link rel="stylesheet" href="base.css"> </head> <body>
<%inluce file=”mod.html” /> <script src="do.js" data-corelib="jQuery.js"></script> </body>  <div class="mod"> <a id="bn">link</a> </div> <script> Do(‘another.js’, function(){ $('#bn').click(function(e){ ... }); }); </script> Sunday, March 25, 2012 ղႊ໛块专ଐCSSత问题ɻ໛൘ܥ统对લ୺䇖发དྷ说ੋॴ༗CSS/HTML/JS୅码త载ମɻॴҎधཁॆ෼䮽 ۷ሏతೳྗɻ ੜ੒页໘޳ձࣗ动෼㩂໛块专ଐతJS࿨CSSɻ

޳୺੩态จ݅؅ཧܥ统 <head> <script> ${istatic(‘/js/lib/head.js’)|n} </script> <link rel="stylesheet" href="base.css"> </head> <body>
<%inluce file=”mod.html” /> <script src="do.js" data-corelib="jQuery.js"></script> </body>  <div class="mod"> <a id="bn">link</a> </div> <script> Do(‘another.js’, function(){ $('#bn').click(function(e){ ... }); }); </script> <head> <script> ${istatic(‘/js/lib/head.js’)|n} </script> <link rel="stylesheet" href="base.css"> </head> <body> <%inluce file=”mod.html” /> <script src="do.js" data-corelib="jQuery.js"></script> </body> 专ଐCSS 专ଐJS HTML  <%block filter=”collect_css”%> .mod a { ... } </%block> <div class="mod"> <a id="bn">link</a> </div> <%block filter=”collect_js”> Do(‘another.js’, function(){ $('#bn').click(function(e){ ... }); }); </%block> Sunday, March 25, 2012 ղႊ໛块专ଐCSSత问题ɻ໛൘ܥ统对લ୺䇖发དྷ说ੋॴ༗CSS/HTML/JS୅码త载ମɻॴҎधཁॆ෼䮽 ۷ሏతೳྗɻ ੜ੒页໘޳ձࣗ动෼㩂໛块专ଐతJS࿨CSSɻ

Sunday, March 25, 2012 ਅ实త࢖༻场ܠɻ

޳ظ维护኷ํศ :) Sunday, March 25, 2012 ਅ实త࢖༻场ܠɻ

细ཻ౓໛块త组߹࿨预处ཧ લ୺؃౸తจ݅എ޳ੋ...... Sunday, March 25, 2012 处ཧଯ栈

细ཻ౓໛块త组߹࿨预处ཧ 组߹ 压缩 JS લ୺؃౸తจ݅എ޳ੋ...... Sunday, March 25, 2012 处ཧଯ栈

细ཻ౓໛块త组߹࿨预处ཧ 组߹ 压缩 JS 组߹ SASS编译压缩 CSS લ୺؃౸తจ݅എ޳ੋ...... Sunday,
March 25, 2012 处ཧଯ栈

细ཻ౓໛块త组߹࿨预处ཧ 组߹ 压缩 JS 组߹ SASS编译压缩 CSS ந㩂组߹
HTML લ୺؃౸తจ݅എ޳ੋ...... Sunday, March 25, 2012 处ཧଯ栈

/* button样ࣜ */ .bn-flat { display: inline-block; *display: inline; zoom:
1; vertical-align: middle; overflow: hidden; color: #444; border-width: 1px; border-style: solid; border-color: #bbb #bbb #999; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#ddd', GradientType=0 ); background-image: -webkit-gradient(linear, left top, left bottom,from(#f8f8f8),to(#dddddd)); background-image: -webkit-linear-gradient(top, #f8f8f8, #dddddd); background-image: -moz-linear-gradient(top, #f8f8f8, #dddddd); background-image: -ms-linear-gradient(top, #f8f8f8, #dddddd); background-image: -o-linear-gradient(top, #f8f8f8, #dddddd); background-image: linear-gradient(center top, #f8f8f8 0%, #dddddd 100%); } CSSӽདྷӽ䐾杂 Sunday, March 25, 2012 让cssߋ૾编ఔ语ݴɻ೺䐾杂҃Մॏ༻త规则෧૷ىདྷɻ诸೗css3, ௨༻UI对৅ɼഉ൛ํ໘౳౳ܗ੒Ұ౟ ௨༻CSS库ɻ

/* button样ࣜ */ .bn-flat { display: inline-block; *display: inline; zoom:
1; vertical-align: middle; overflow: hidden; color: #444; border-width: 1px; border-style: solid; border-color: #bbb #bbb #999; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#ddd', GradientType=0 ); background-image: -webkit-gradient(linear, left top, left bottom,from(#f8f8f8),to(#dddddd)); background-image: -webkit-linear-gradient(top, #f8f8f8, #dddddd); background-image: -moz-linear-gradient(top, #f8f8f8, #dddddd); background-image: -ms-linear-gradient(top, #f8f8f8, #dddddd); background-image: -o-linear-gradient(top, #f8f8f8, #dddddd); background-image: linear-gradient(center top, #f8f8f8 0%, #dddddd 100%); } CSSӽདྷӽ䐾杂 @import "_mixin_lib.css"; // button样ࣜ .bn-flat { @include inline_block; overflow:hidden; color:#444; border-width:1px; border-style:solid; border-color:#bbb #bbb #999; @include rounded(all, 3px); @include gradient(#f8f8f8, #ddd); } Sunday, March 25, 2012 让cssߋ૾编ఔ语ݴɻ೺䐾杂҃Մॏ༻త规则෧૷ىདྷɻ诸೗css3, ௨༻UI对৅ɼഉ൛ํ໘౳౳ܗ੒Ұ౟ ௨༻CSS库ɻ

pySCSS https://github.com/Kronuz/pyScss • Compass: Compass 0.11 Support • Nested rules
• Keyword arguments • Mixins: @mixin, @include • Functions: @function, @return • Inheritance: @extend • Conditions: @if, @else if, @else • Loops: @for, @each • Variables: $, @variables, @vars • Sprites: sprite-map(), sprite(), sprite-position(), sprite-url(), ... • Images: image-url(), image-width(), image-height(), ... • Embedded (inline) images: inline-image() • Colors handling: adjust-color(), scale-color(), opacify()/transparentize(), lighten()/darken(), mix(), ... • Math functions: sin(), cos(), tan(), round(), ceil(), floor(), pi(), ... • CSS Compression: @option compress:yes; Sunday, March 25, 2012

彻ఈղႊެڞจ݅త৑༨ ʵ 业务૬䎔తCSS / JS౎ඃ෼ࢄ౸໛块த ʵ ௨༻JS组݅҈धՃ载 ʵ ௨༻CSS: resetɺ෍ہɺجຊഉ൛样ࣜɺ௨༻UI对৅......(ෆ应该኷େ)
ʵ ௨༻JS: 页໘Ճ载தґ赖తutils...... (ෆ应该኷େ) ʵ “಺༻֎؅” ʢ಺联୅码౰၏֎෦จ݅维护ɼಉ时ڗड֎෦จ݅త֤䝅预处ཧʣ Sunday, March 25, 2012 㑌࿽໛块૾Ұ࿽খ页໘ɼ业务૬䎔తCSS/JS౎ूதࡏ໛块಺෦؅ཧɻ௨༻จ݅୞อཹ࠷௨༻࠷֩৺త෦ ෼ɻ಺༻֎؅࠷େతា఺ੋՄҎ೚ҙ组߹这ࠣจ݅໛块ɻ

彻ఈղႊެڞจ݅త৑༨ ʵ 业务૬䎔తCSS / JS౎ඃ෼ࢄ౸໛块த ʵ ௨༻JS组݅҈धՃ载 ʵ ௨༻CSS: resetɺ෍ہɺجຊഉ൛样ࣜɺ௨༻UI对৅......(ෆ应该኷େ)
ʵ ௨༻JS: 页໘Ճ载தґ赖తutils...... (ෆ应该኷େ) ʵ “಺༻֎؅” ʢ಺联୅码౰၏֎෦จ݅维护ɼಉ时ڗड֎෦จ݅త֤䝅预处ཧʣ <%def name="bottom_script()"> <script> ${istatic('/js/sns/tribe/manage_sites_groups.js', manage_type=manage_type)|n} </script> </%def> 䇖发环ڥ 线্环ڥ Sunday, March 25, 2012 㑌࿽໛块૾Ұ࿽খ页໘ɼ业务૬䎔తCSS/JS౎ूதࡏ໛块಺෦؅ཧɻ௨༻จ݅୞อཹ࠷௨༻࠷֩৺త෦ ෼ɻ಺༻֎؅࠷େతា఺ੋՄҎ೚ҙ组߹这ࠣจ݅໛块ɻ

ਓနવੋ䎔键Ҽૉɼ ࠶޷త޻۩໵ཁᯪਓདྷ驾驭 લ୺޻ఔ师త୅码设计ೳྗ૬౰ॏཁ (ڇbਓతटཁࢦ标) Sunday, March 25, 2012 ઀खҰ࿽项໨ɼዎ㜮ར༻্໘说౸త֤䝅޻۩组织จ݅ɼਓနવੋ࠷䎔键తҼૉɻ୅码设计ೳྗෆ仅ମ 现ࡏ应༻Սᦻ্ɼಉ样还ମ现ࡏจ݅组织্ɻ

21.3% 20.3% 4.2% 4.1% IE6 chrome14+ ﬁrefox8+ safari4+ 2012- Q1
Sunday, March 25, 2012 ະདྷલ୺୅码త组织࿨؅ཧ໘临త௅战ӽདྷӽେɻ

㠳应ੑ䇖发 ձ让这࿽话题继续Լڈ...... ઀Լདྷɿ Sunday, March 25, 2012

Everything Should Be Made as Simple as Possible, But Not
Simpler. - Albert Einstein Sunday, March 25, 2012 ࠷޳զ૝෼ڗҰ࿽޻۩䇖发త৺ಘɼဓݪ࢝धٻग़发ɼ೺޻۩၏తਚՄೳ简单ɼ扩లੑ㖘ɼ删আॴ༗ෆ ඞཁత环节ɻ㠥֎ཁਚշ༻ىདྷɼෆඞ౳౸Ұ࿽㖘େ׬ඒత޻۩၏޷ྃ࠶༻ሏɻ

问题ʁ 讨论ʁ ݐ议ʁ twitter: @kejunz douban.com/people/listenpro zhihu.com/people/kejun 谢谢 Sunday,
March 25, 2012

更好的文件组织

更好的文件组织

More Decks by Max

Other Decks in Programming

Featured

Transcript