SDCC

ଆॶࡆᄛҦ੻ ࢃᆀࢀקდjosephj https://speakerdeck.com/u/josephj/p/sdcc Module Loader Strategy

ܱႿ໡ࢀקდ (josephj)

ܱႿ໡ࢀקდ ஝҄ߌ֛ c܋฿ cჿ؟܄৚ ୍ᄅٺ (josephj)

ܱႿ໡ࢀקდ ࿮޷అଉ cభ؊۽ӱഽ cYDN࠯ඌ҃֡ഽ cᇶေཛଢğᆩ് ஝҄ߌ֛ c܋฿ cჿ؟܄৚ ୍ᄅٺ
(josephj)

ܱႿ໡ࢀקდ ࿮޷అଉ cభ؊۽ӱഽ cYDN࠯ඌ҃֡ഽ cᇶေཛଢğᆩ് miiiCasa ᄉႥ॓࠯ cభ؊࠯ඌ๶ؒᇶܵ c࠯ඌ҃֡ഽ ஝҄ߌ֛
c܋฿ cჿ؟܄৚ ୍ᄅٺ ᇀࣂ (josephj)

2010.7ਆ฿၂၀֥Кࣘྛ਽༯ࠞധख़֥ႆའ

2010.7ਆ฿၂၀֥Кࣘྛ਽༯ࠞധख़֥ႆའ ք಩ࢃഽ ۋ྆ღѯĆ Ϥ؇ҕ٠

2010.7ਆ฿၂၀֥Кࣘྛ਽༯ࠞധख़֥ႆའ ք಩ࢃഽ ۋ྆ღѯĆ Ϥ؇ҕ٠ http://josephj.com/entry.php?id=336 КࣘWebRebuildဆᾣđ൬ὤ⁷ẵĆ https://speakerdeck.com/u/josephj/p/webrebuild ࡹ৫భ؊षؿ๶ؒ ֒ൈဆࢃᇶี

൉હ൞ଆॶĤ ॖၛФᇗگ০Ⴈ֥ჭࡱ

Ⴎ7۱҂๝ݓࡅ෮ิ܂֥50؟۱ଆॶ෮ܒӮ http://astronomy.wikia.com/wiki/International_Space_Station NASAૅݓ෾ॢሹඇ෾ॢᅟ

Ⴎ7۱҂๝ݓࡅ෮ิ܂֥50؟۱ଆॶ෮ܒӮ http://astronomy.wikia.com/wiki/International_Space_Station NASAૅݓ෾ॢሹඇ෾ॢᅟ ᄝ಩ޅٳ۽ࣚ༥֥۽ӱਵთ ଆॶ߄षؿ൞сಖ౴൝ğ wҐႨ࠻Ⴕଆॶaх૧ᇗྍյᄯ੽ሰx

GitHub

GitHub GitHub൞ೈุြࢸ֥w੽ሰࢌੀ౵x git submodule add ࣼॖၛ౞඾ࡆೆљದཿݺ֥ଆॶ

http://www.ﬂickr.com/photos/halfbisqued/2353845688/ ຩ်ᇏ֥ଆॶႻ൞൉હĤ

http://www.ﬂickr.com/photos/halfbisqued/2353845688/ ಩ޅॖၛФᄛೆ൐Ⴈ֥ )5.-a$44ა+BWB4DSJQU֖σ ຩ်ᇏ֥ଆॶႻ൞൉હĤ

http://www.ﬂickr.com/photos/halfbisqued/2353845688/ ಩ޅॖၛФᄛೆ൐Ⴈ֥ )5.-a$44ა+BWB4DSJQU֖σ ӑࠩݺႨ֥ਆ۱ଆॶğjQuery აTwitter Bootstrap ຩ်ᇏ֥ଆॶႻ൞൉હĤ ӱ྽ჴ္ॖၛቓԛ௎ਊຩᅟ

ᇶีğଆॶࡆᄛҦ੻

ᇶีğଆॶࡆᄛҦ੻ cԮ๤ଆൔ

ᇶีğଆॶࡆᄛҦ੻ cԮ๤ଆൔ c်Ҫࠩഡקଆൔ Page-level Setting

ᇶีğଆॶࡆᄛҦ੻ cԮ๤ଆൔ c်Ҫࠩഡקଆൔ Page-level Setting cଆॶҪࠩഡקଆൔ Module-level Setting

Ԯ๤ଆൔ

Ԯ๤ଆൔ ႨMJOLISFGࠇTDSJQUTSDቓࡆᄛ

ਆρ೘ֹ֥(JU)VCषؿᆀ https://github.com/josephj/github-chinese-developer ᆃՑဆࢃ֥ٓ২۵۽ऎ׻ᄝ҂๝֥#SBODIᇏ

ਆρ೘ֹ֥(JU)VCषؿᆀ https://github.com/josephj/github-chinese-developer ᆃՑဆࢃ֥ٓ২۵۽ऎ׻ᄝ҂๝֥#SBODIᇏ <link href="assets/stylesheets/bootstrap.min.css" rel="stylesheet"> <link href="assets/stylesheets/bootstrap-responsive.css" rel="stylesheet"> <link
href="assets/stylesheets/demo.css" rel="stylesheet"> <script src="assets/javascripts/jquery-1.8.1.min.js"></script> <script src="assets/javascripts/handlebars-1.0.0.beta.6.js"></script> <script src="assets/javascripts/demo.js"></script> ᆃဢ֥ཬທၩđड़קն҆ٳದ׻൞ᆰࢤࡆᄛଆॶ֥ Bootstrap CSS Bootstrap CSS Page CSS jQuery Handlebars Page JS

ؓႿ၂۱ຩᅟषؿ๶ؒط࿽đᆃဢቓ߶ཊೆࠁ੹ ླေ၂ק֥षؿଆൔট቎൯

်૫ଆॶğ၂ᇕ๶ؒषؿଆൔ ૄ۱်૫ଆॶ׻్ٳԛ)5.-a+BWB4DSJQUa$44

<div id=”nav”> <div class=”hd”> <h2>標題</h2> </div> <div class=”bd”> <p>內文</p> </div>
<div class=”ft”> <a href=”...”>更多... </a> </div> </div> ်૫ଆॶ֥)5.-ࢲܒ

<div class=”ft”> <a href=”...”>更多... </a> </div> </div> <div id=”nav”> <div class=”hd”> <h2>標題</h2> </div> <div class=”bd”> <p>內文</p> </div> <div class=”ft”> <a href=”...”>更多... </a> </div> </div> ်૫ଆॶ֥)5.-ࢲܒ

<div class=”ft”> <a href=”...”>更多... </a> </div> </div> <div id=”nav”> <div class=”hd”> <h2>標題</h2> </div> <div class=”bd”> <p>內文</p> </div> <div class=”ft”> <a href=”...”>更多... </a> </div> </div> ်૫ଆॶ֥)5.-ࢲܒ ၂۱*%սі၂۱ଆॶ ҂ିᇗگ

<div class=”ft”> <a href=”...”>更多... </a> </div> </div> <div id=”nav”> <div class=”hd”> <h2>標題</h2> </div> <div class=”bd”> <p>內文</p> </div> <div class=”ft”> <a href=”...”>更多... </a> </div> </div> ်૫ଆॶ֥)5.-ࢲܒ ၂۱*%սі၂۱ଆॶ ҂ିᇗگ IE CE GUսіଆॶ֥ѓ ๨aଽಸaѓແࢲܒ

ၹૄ۱ଆॶ*%׿৫a$44҂߶޺ཌྷ໪ಙ ՎଆॶࢡZLQTC ZLQ൞ཛଢ෪ཿaTC൞4FBSDI#PY֥⅜⇔

<div id=”ykpsb”> <div class=”bd clearfix”> <form ...> ... </form> <div
class=”extra”> ... </div> </div> </div> form .extra [HTML] ၹૄ۱ଆॶ*%׿৫a$44҂߶޺ཌྷ໪ಙ ՎଆॶࢡZLQTC ZLQ൞ཛଢ෪ཿaTC൞4FBSDI#PY֥⅜⇔

<div id=”ykpsb”> <div class=”bd clearfix”> <form ...> ... </form> <div
class=”extra”> ... </div> </div> </div> form .extra [HTML] <style> #ykpsb { margin-bottom:10px; } #ykpsb form { float:left; } #ykpsb .extra { float:right; } </style> [CSS] ၹૄ۱ଆॶ*%׿৫a$44҂߶޺ཌྷ໪ಙ ՎଆॶࢡZLQTC ZLQ൞ཛଢ෪ཿaTC൞4FBSDI#PY֥⅜⇔

঺֡෮ิ֥ JavaScript ଆॶଆൔ window.mods[“ykpsb”] = function () { }();

঺֡෮ิ֥ JavaScript ଆॶଆൔ window.mods[“ykpsb”] = function () { }(); //
利用闭包与外界隔绝 var privateVar, publicFn; // 内部自行处理，不会影响其他模块 privateVar = "123"; publicFn = function () {};

利用闭包与外界隔绝 var privateVar, publicFn; // 内部自行处理，不会影响其他模块 privateVar = "123"; publicFn = function () {}; return { // 仅揭露需公开的方法 publicFn: publicFn };

利用闭包与外界隔绝 var privateVar, publicFn; // 内部自行处理，不会影响其他模块 privateVar = "123"; publicFn = function () {}; return { // 仅揭露需公开的方法 publicFn: publicFn }; // 外界仅可存取公开方法 mod["ykpsb"].publicFn();

Nicholas Zakas Former Principal Front End Engineer, Yahoo! Zakas֥Scalable JavaScript
ଆॶ ܴҳᆀଆൔğ ൌቔোර)VCܼѬ۵ࡓ๐ ֥ྛູđղ֞҂൐Ⴈಆთэ ඔॴଆቆ܎๙֥ଢ֥b https://github.com/miiicasa/module

http://www.nipic.com/show/2/55/d96dde66860c5190.html ؿᅚ֞၂קܿଆđھೂޅ࿊ᄴૄ်෮ླ֥ଆॶ֖଻Ĥ ်૫ଆॶ߄߶్ٳԛޓ؟ਬ೛֥֖σđೂޅᄛೆ൞၂૊࿐໙

http://www.nipic.com/show/2/55/d96dde66860c5190.html ฿ଧĆ໡ھೂޅԩ৘ ᆃહ؟ଆॶ֖σ଻Ĥ ؿᅚ֞၂קܿଆđھೂޅ࿊ᄴૄ်෮ླ֥ଆॶ֖଻Ĥ ်૫ଆॶ߄߶్ٳԛޓ؟ਬ೛֥֖σđೂޅᄛೆ൞၂૊࿐໙

http://www.ﬂickr.com/photos/billjacobus1/123644872/ ᆃൈ໡ૌླေ၂۱Loaderࠏᇅ ླྀᇹᄛೆਬ೛౏؟֥ଆॶ֖σ

်Ҫࠩഡקଆൔ ୍aКࣘ8FC3FCVJMEၰีᆭ၂ https://speakerdeck.com/u/josephj/p/webrebuild

http://josephj.com/lab/2012/github-chinese-develope/ ਆρ೘ֹ֥षؿᆀ ࡌഡ໡ૌႨࢠႵܿଆ֥w်૫ଆॶଆൔxটषؿ

ਆρ೘ֹ֥षؿᆀ ࡌഡ໡ૌႨࢠႵܿଆ֥w်૫ଆॶଆൔxটषؿ http://josephj.com/lab/2012/github-chinese-develope/

ਆρ೘ֹ֥षؿᆀ 条件过滤模块 _filter.php _filter.css _filter.js ࡌഡ໡ૌႨࢠႵܿଆ֥w်૫ଆॶଆൔxটषؿ http://josephj.com/lab/2012/github-chinese-develope/

ਆρ೘ֹ֥षؿᆀ 列表模块 _list.php _list.css _list.js 条件过滤模块 _filter.php _filter.css _filter.js ࡌഡ໡ૌႨࢠႵܿଆ֥w်૫ଆॶଆൔxটषؿ
http://josephj.com/lab/2012/github-chinese-develope/

ਆρ೘ֹ֥षؿᆀ 资讯模块列表模块 _info.php _info.css _info.js _list.php _list.css _list.js 条件过滤模块
_filter.php _filter.css _filter.js ࡌഡ໡ૌႨࢠႵܿଆ֥w်૫ଆॶଆൔxটषؿ http://josephj.com/lab/2012/github-chinese-develope/

Ԯ๤ቔمड़ק߶ӁളИख c)551౨౰ඔਈݖ؟ c߶ᄯӮ်૫ቅೖ c֖σଽಸໃ࿢෪ cླႨಆთэඔ܎๙ cᄛೆ֤ॉ੮༵ުඨ྽ cીႵౢԣ֥ࡏܒaၞཊೆࠁ੹

MINI ๩ݖഡק֖ ࡼ؟۱ẵσކѩaቋཬ߄ ֥षؿߌ࣢۽ऎ http://www.flickr.com/photos/prettypony/2644225789/ https://github.com/josephj/mini

Mini֥ഡק֖ ൅ٳಸၞഡק

࿙ᅳ֖σ֥ਫ਼ࣥđॖၛഡק؟۱ %&7@3005൞7JSUVBM)PTU֥ߌ࣢эਈ Mini֥ഡק֖ ൅ٳಸၞഡק

࿙ᅳ֖σ֥ਫ਼ࣥđॖၛഡק؟۱ %&7@3005൞7JSUVBM)PTU֥ߌ࣢эਈ קၬEFNPႵଧུ$44ა+4֖ Mini֥ഡק֖ ൅ٳಸၞഡק

ᆷקtypeაmoduleࠧॖሱ׮ކѩ౏ቋཬ߄

ᆷקtypeაmoduleࠧॖሱ׮ކѩ౏ቋཬ߄ /mini?module=<module>&type=<css|js>

ીႵMiniൈ֥౦ঃ

๩ݖMiniॖၛնږࡨഒ౨౰ඔਈ

ႮႿMiniીႵߏթࠏᇅaᆺିႨᄝषؿߌ࣢ ᄝbuildൈ֤ყ༵Ӂളކѩࠣቋཬ߄ު֥֖σ

ႮႿMiniીႵߏթࠏᇅaᆺିႨᄝषؿߌ࣢ ᄝbuildൈ֤ყ༵Ӂളކѩࠣቋཬ߄ު֥֖σ ཌഈ֥CSS/JSᄝBuildުӮູֆ၂֖σ

်Ҫࠩഡקଆൔ֥ᆜุࡏܒ

်Ҫࠩഡקଆൔ֥ᆜุࡏܒ ޓᆰत֥ᄛೆࠏᇅđॖၛႵֹིࡼଆॶ֖σކѩ࿢෪

ᆃ൞NJJJ$BTBՖ၂ष൓ࣼ൐Ⴈ֥ଆॶࡆᄛٚൔ ຩᅟഈཌު׻ޓ໗קaޓડၩ ֌ෛᇷࠫՑ֥ڿϱđ໡ⁿứགྷਔ҂ഒ໙ี ်Ҫࠩഡקଆൔ

ڿϱсקϴෛᇷଆॶ ۿି ֥ྍᄹaྩڿa၍Ԣ ྩڿ.JOJ֥ቆ෿ഡק҂ࣼݺਔગĤ ಌׄົ޹҂ၞ

ڿϱсקϴෛᇷଆॶ ۿି ֥ྍᄹaྩڿa၍Ԣ ྩڿ.JOJ֥ቆ෿ഡק҂ࣼݺਔગĤ ಌׄົ޹҂ၞ ڿϱ֞ྍϱުđႵ۱်૫ଆॶླေ၍Ԣ čࠎЧࣼႵ۱֖σླ၍ԢĎ

֌ଆॶ၇ঠܱ༢൞٤ӈگᄖ֥Ć http://www.ﬂickr.com/photos/kalavinka/4617897952/

֌ଆॶ၇ঠܱ༢൞٤ӈگᄖ֥Ć ်૫ଆॶJavaScript http://www.ﬂickr.com/photos/kalavinka/4617897952/

֌ଆॶ၇ঠܱ༢൞٤ӈگᄖ֥Ć ۿିଆॶ JavaScript ်૫ଆॶJavaScript http://www.ﬂickr.com/photos/kalavinka/4617897952/

֌ଆॶ၇ঠܱ༢൞٤ӈگᄖ֥Ć YUI CSS ်૫ଆॶCSS ۿିଆॶ JavaScript ်૫ଆॶJavaScript http://www.ﬂickr.com/photos/kalavinka/4617897952/

֌ଆॶ၇ঠܱ༢൞٤ӈگᄖ֥Ć YUI CSS ်૫ଆॶCSS ۿିଆॶ JavaScript ်૫ଆॶJavaScript མေ၍Ԣ၂۱်૫ଆॶ ଧུۿିଆॶ္ླေ၂ఏ၍Ԣ଻Ĥ http://www.ﬂickr.com/photos/kalavinka/4617897952/

ࢳथ၇ঠ໙ีđቋ࣍ޓࠅಣ֥".%ࡏܒ

6006 // 定义⼀一个 AMD 模块 define(“editor”, [“handlebars”], function () {
function Editor { /* Constructor */ } return Editor; },); ࢳथ၇ঠ໙ีđቋ࣍ޓࠅಣ֥".%ࡏܒ

6006 // 定义⼀一个 AMD 模块 define(“editor”, [“handlebars”], function () {
function Editor { /* Constructor */ } return Editor; },); ࢳथ၇ঠ໙ีđቋ࣍ޓࠅಣ֥".%ࡏܒ ֻؽ۱ҕඔॖၛקၬՎଆॶླေଧུଆॶ

6006 6006 // 定义⼀一个 AMD 模块 define(“editor”, [“handlebars”], function ()
{ function Editor { /* Constructor */ } return Editor; },); ࢳथ၇ঠ໙ีđቋ࣍ޓࠅಣ֥".%ࡏܒ // 使用⼀一个 AMD 模块 require(["editor"], function (Editor) { new Editor(); }); ֻؽ۱ҕඔॖၛקၬՎଆॶླေଧུଆॶ ᄝ൐Ⴈൈၛ׮෿ᄛೆٚൔࡼཌྷܱଆॶ֖σ၂ѩᄛೆ

ಌׄBuildݻൈݖࣲ ໡ૌ܋Ⴕᆃહ؟်֥૫ླყ༵#VJMEğ

NJJJ$BTB#VJMEੀӱᇏ ູ֤෮Ⴕ်૫ࡹᇂ࣡෿֖ Վֆཛቔြ֤ݻൈٳ϶Ć ಌׄBuildݻൈݖࣲ ໡ૌ܋Ⴕᆃહ؟်֥૫ླყ༵#VJMEğ

NJJJ$BTB#VJMEੀӱᇏ ູ֤෮Ⴕ်૫ࡹᇂ࣡෿֖ Վֆཛቔြ֤ݻൈٳ϶Ć ֌൞ӻ࿃ᆜކ֥ѓሙ൞ ປᆜ#VJME҂ႋӑݖٳᇒ ಌׄBuildݻൈݖࣲ ໡ૌ܋Ⴕᆃહ؟်֥૫ླყ༵#VJMEğ

ಌׄཌഈԢԋ঒଴

ಌׄཌഈԢԋ঒଴ ࠧ൐ࣜݖ#FBVUJGJFSಯ҂ၞྩڿaߎ൞֤#VJMEaؓေ౰ૹࢮषؿࣼҵਔུ

ૄ်֥+4ა$44֖σ׻൞ປಆ҂ᇗگ֥ ္ၹՎીႵϷمቓ֞ॴ်ࡗ֥ߏթ ಌׄߏթིੱҵ

miii_index_my_contact_18fa331dfbf2bd392660925ba8f41239.js miii_index_my_contact_34945d9e0efb63c7dc62dcbbc3442a60.css ਆ်Ⴕྸ؟܋Ⴈ်֥૫ଆॶaಏ໭ߏթ֥ݺԩ miii_index_my_device_704b3ae3682d178a94465c066b0f6d42.js miii_index_my_device_623f7e30575a7180ddeb11fd748aed31.css ಌׄߏթིੱҵ ުট໡ૌູਔߏթaԎ৖ԛ၂ུ܋Ⴈ.JOJଆॶ ֌ᆃဢቓّطಞഡק۷଴ၞົ޹

ଆॶҪࠩഡקଆൔ ᆇᆞ֥ଆॶ֝ཟषؿĆ

໡ྏଢᇏ֥໩ກϹĆ ಞଆॶ߄षؿ҂ླေᄜႵِସ်૫஥ᇂĆ

໡ྏଢᇏ֥໩ກϹĆ षؿᆀህᇿႿֆ၂ଆॶ֥षؿ ഡקՎଆॶླေଧུ၇ঠଆॶ ಞଆॶ߄षؿ҂ླေᄜႵِସ်૫஥ᇂĆ ଆॶࡏܒ

໡ྏଢᇏ֥໩ກϹĆ -PBEFS࠹ෘԛ်૫ Ⴕଧུଆॶླᄛೆ षؿᆀህᇿႿֆ၂ଆॶ֥षؿ ഡקՎଆॶླေଧུ၇ঠଆॶ ಞଆॶ߄षؿ҂ླေᄜႵِସ်૫஥ᇂĆ ଆॶࡏܒ ଆॶ-PBEFS

໡ྏଢᇏ֥໩ກϹĆ -PBEFS࠹ෘԛ်૫ Ⴕଧུଆॶླᄛೆ षؿᆀህᇿႿֆ၂ଆॶ֥षؿ ഡקՎଆॶླေଧུ၇ঠଆॶ ಞଆॶ߄षؿ҂ླေᄜႵِସ်૫஥ᇂĆ ଆॶࡏܒ ଆॶ-PBEFS ჹ؊ଆॶᄛೆࠏᇅ ڛༀఖაᛍফఖ؊ࢌ޺஥ކ
ሱ׮ၛིିቋࡄ߄ٚൔᄛೆჹ؊ଆॶ

3FRVJSF+4൞ଢభቋ୤Я֥".%ൌቔ

3FRVJSF+4൞ଢభቋ୤Я֥".%ൌቔ ॖၛሱ׮၂۱၂۱ᄛೆ၇ঠ֥ଆॶ ࠇؿ҃భ๩ݖSKTቓކѩࠣቋཬ߄ // AMD Module define(“editor”, [‘a’,’b’,’c’], function ()
{ function Editor { /* Constructor */ } return Editor; }); require(["editor"], function (Editor) { new Editor(); });

3FRVJSF+4൞ଢభቋ୤Я֥".%ൌቔ ॖၛሱ׮၂۱၂۱ᄛೆ၇ঠ֥ଆॶ ࠇؿ҃భ๩ݖSKTቓކѩࠣቋཬ߄ // AMD Module define(“editor”, [‘a’,’b’,’c’], function ()
{ function Editor { /* Constructor */ } return Editor; }); require(["editor"], function (Editor) { new Editor(); }); ކѩაቋཬ߄ಯಖ߶ႵཌഈԢհ঒଴ა #VJMEൈࡗݖࣲ֥ਆ۱໙ีa മᇀଆॶ၂؟ؓषؿ෎؇္߶ᄯӮԊࠌ 3FRVJSF+4֥ࡏܒၹՎ҂෾ژކ໡֥ླ౰

ݓଽࢠഒದ൐Ⴈ֥:6*ݦൔ९

ݓଽࢠഒದ൐Ⴈ֥:6*ݦൔ९ ᄪᄝ೘୍భaᄅࣼิԛ֥ଆॶࡏܒ

ݓଽࢠഒದ൐Ⴈ֥:6*ݦൔ९ ᄪᄝ೘୍భaᄅࣼิԛ֥ଆॶࡏܒ // AMD Module define(‘editor’, [‘a’,’b’,’c’], function () {
function Editor { /* Constructor */ } return Editor; }); require(["editor"], function (Editor) { new Editor(); });

ݓଽࢠഒದ൐Ⴈ֥:6*ݦൔ९ ᄪᄝ೘୍భaᄅࣼิԛ֥ଆॶࡏܒ ۵ಀ୍ҌႵ֥".%a෮ေࢳथଆॶ၇ঠྟ֥නਫ਼൞၂ᇁ֥ // AMD Module define(‘editor’, [‘a’,’b’,’c’], function ()
{ function Editor { /* Constructor */ } return Editor; }); require(["editor"], function (Editor) { new Editor(); }); // YUI Module YUI.add("editor", function () { function Editor { /* Constructor */ } Y.Editor = Editor; }, “VERSION”, {requires:[‘a’,’b’,’c’]}); YUI.use("editor", function (Y) { new Y.Editor(); });

ၛYUI DataTableູٓ২

ၛYUI DataTableູٓ২ ҂Reload֥ྛູޓ؟ğ ߐ်aஆ྽aᆰࢤщࠠb္ ॖၛࢤ൳۲োሧਘটჷđ൞ ޓگᄖ֥ଆቆ

ᆺေࠫྛս઒ࣼॖၛᄛೆ෮ླଆॶ

ᆺေࠫྛս઒ࣼॖၛᄛೆ෮ླଆॶ <script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js"></script>

ᆺေࠫྛս઒ࣼॖၛᄛೆ෮ླଆॶ <script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js"></script> <script> </script> YUI().use('datatable', function (Y) { });

ᆺေࠫྛս઒ࣼॖၛᄛೆ෮ླଆॶ <script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js"></script> <script> </script> YUI().use('datatable', function (Y) { });
ିམཞྛս઒Мުđቓਔ؟ഒ൙౦ગĤ alert(Y.DataTable);

yui (Seed) ࠹ෘ෮ླଆॶ֥ੀӱ

yui (Seed) ࠹ෘ෮ླଆॶ֥ੀӱ YUI().use('datatable')

yui (Seed) widget datatable-core base-build datatable-head datatable-body ࠹ෘ෮ླଆॶ֥ੀӱ YUI().use('datatable')

escape yui (Seed) widget datatable-core base-build datatable-head datatable-body model-list node-event-delegate
base-base attribute event-focus base-plugin-host node-base node-style classnamemanager view ࠹ෘ෮ླଆॶ֥ੀӱ YUI().use('datatable')

base-base attribute event-focus base-plugin-host node-base node-style classnamemanager view yui-base event-delegate pluginhost event-synthetic attribute-core attribute-events attribute-extras array-extras array-invoke arraylist json-parse model ࠹ෘ෮ླଆॶ֥ੀӱ YUI().use('datatable')

base-base attribute event-focus base-plugin-host node-base node-style classnamemanager view yui-base event-delegate pluginhost event-synthetic attribute-core attribute-events attribute-extras array-extras array-invoke arraylist json-parse model ࠹ෘ෮ླଆॶ֥ੀӱ YUI().use('datatable') ൌ࠽ഈdatatable܋Ⴕ64ἠଆॶ֖ླᄛೆ ၂۱၂۱ᄛೆ߶ޓҠིି YUI֥ԩ৘ٚൔູޅĤ

఼ն֥࿢෪ࠏCombo

఼ն֥࿢෪ࠏCombo ࿮޷֥Combo ࠏᇅ ᆰࢤၛGETҕඔࡼ҂๝ଆॶ֖σԱ৵ѩቋཬ߄

఼ն֥࿢෪ࠏCombo ࿮޷֥Combo ࠏᇅ ᆰࢤၛGETҕඔࡼ҂๝ଆॶ֖σԱ৵ѩቋཬ߄ http://yui.yahooapis.com/combo? ଆॶ1֥ؓႋਫ਼ࣥ ଆॶ2֥ؓႋਫ਼ࣥ ଆॶ3֥ؓႋਫ਼ࣥ ଆॶn֥ؓႋਫ਼ࣥ

ѩྛ٤؁ೖࡆᄛ YUI().use('datatable')

YUI ᇕሰ֖σ ѩྛ٤؁ೖࡆᄛ YUI().use('datatable')

YUI ᇕሰ֖σ ᄛೆཌྷܱCSS ѩྛ٤؁ೖࡆᄛ YUI().use('datatable')

ࡼ෮ླJavaScriptଆॶٳ೛౨౰aѩྛ༯ᄛ YUI ᇕሰ֖σ ᄛೆཌྷܱCSS ѩྛ٤؁ೖࡆᄛ YUI().use('datatable')

ࡼ෮ླJavaScriptଆॶٳ೛౨౰aѩྛ༯ᄛ YUI ᇕሰ֖σ ᄛೆཌྷܱCSS ѩྛ٤؁ೖࡆᄛ ٳ೛აComboઆࠠॉ੮ਔğwଆॶ༵ުඨ྽xawଆॶඔਈxawᛍফఖ๝ൈ౨౰ඔ ਈxawᛍফఖ(&5Ӊ؇ཋᇅxđ٤ӈ֥ሱ׮߄bሱ࠭ေቓᆃဢ֥ࠏᇅ٤ӈ҂ၞb YUI().use('datatable')

YUI().use('datatable')

ՖᇕሰэӮնඎࣇ޽ਔ323ms 323ms YUI().use('datatable')

ՖᇕሰэӮնඎࣇ޽ਔ323ms 323ms ҂ਔࢳଽ౦֥ದ߶ඪ:6*ޓ٧ޓஔն ൌ࠽ഈ෱ᆺᄛೆླေ֥ଆॶaః෰ݦൔ९㢻Ⴕ≾∄ི֥ੱ YUI().use('datatable')

ՖᇕሰэӮնඎࣇ޽ਔ323ms 323ms ҂ਔࢳଽ౦֥ದ߶ඪ:6*ޓ٧ޓஔն ൌ࠽ഈ෱ᆺᄛೆླေ֥ଆॶaః෰ݦൔ९㢻Ⴕ≾∄ི֥ੱ YUI().use('datatable') ২ೂğ൐ႨK2VFSZᆇ֥ૄ်׻Ⴈ֥֞BKBYᆃ۱ݦൔગĤ

John Resig The creator of jQuery http://www.quora.com/How-could-YUI3-improve-its-image-compared-to-jQuery-MooTools-etc YUIᄛೆٚൔൌᄝ෾SexyਔaႋФն৯๷ܼĆ

John Resig The creator of jQuery YUI().use() + pulling code
off of Yahoo's CDN is damn sexy and should be promoted *VERY* heavily. http://www.quora.com/How-could-YUI3-improve-its-image-compared-to-jQuery-MooTools-etc YUIᄛೆٚൔൌᄝ෾SexyਔaႋФն৯๷ܼĆ

ႵଆॶࡏܒaႵଆॶ-PBEFSa ஥ކቋࡄ߄֥ჹ؊ଆॶᄛೆࠏᇅĆ ߎ֩൉હĤॹ֞Ⴈᄝຩᅟ်૫ଆॶ֥ᄛೆࠏᇅഈĆ :6*֥ࡏܒᆞ൞໡෮௹ஏ֥

໙ีğ࿙ᅳComboࠏᇅู֥ս௖

໙ีğ࿙ᅳComboࠏᇅู֥ս௖ ࿮޷֥$PNCPࣇ܂ଽ҆൐ႨaߎݺႵದཿਔูս௖Ć ໡࿊ᄴ֥൞.JOJGZᆃ۱۽ऎđ၂ဢ߶Ϻ໡ቓයڛఖ؊ ֥ߏթaކѩა֖σቋཬ߄

໙ีğ࿙ᅳComboࠏᇅู֥ս௖ ࿮޷֥$PNCPࣇ܂ଽ҆൐ႨaߎݺႵದཿਔูս௖Ć http://code.google.com/p/minify/ Minify (PHP5) https://github.com/mrclay/minify ໡࿊ᄴ֥൞.JOJGZᆃ۱۽ऎđ၂ဢ߶Ϻ໡ቓයڛఖ؊ ֥ߏթaކѩა֖σቋཬ߄

໙ีğ࿙ᅳComboࠏᇅู֥ս௖ ࿮޷֥$PNCPࣇ܂ଽ҆൐ႨaߎݺႵದཿਔูս௖Ć http://code.google.com/p/minify/ Minify (PHP5) https://github.com/mrclay/minify http://<your host>/minify?f= ଆॶ1֥ؓႋਫ਼ࣥ ଆॶ2֥ؓႋਫ਼ࣥ
ଆॶn֥ؓႋਫ਼ࣥ ໡࿊ᄴ֥൞.JOJGZᆃ۱۽ऎđ၂ဢ߶Ϻ໡ቓයڛఖ؊ ֥ߏթaކѩა֖σቋཬ߄

঒଴ؽğ:6*ሱרଆॶቆ෿ഡקگᄖ

঒଴ؽğ:6*ሱרଆॶቆ෿ഡקگᄖ ٤:6*Чദ֥ଆॶ֤ਸ਼ຓקၬđ֌ᆃဢ҂ݺົ޹

঒଴ؽğ:6*ሱרଆॶቆ෿ഡקگᄖ YUI_config = {"filter":"raw","async":true,"combine":true,"comboBase":"combo/?f=","comboSep":",","root":"lib/yui/ build/","langs":"zh-TW,en-US","groups":{"mui":{"combine":true,"fetchCSS":true,"root":"lib/mui/","lang":["en-US","zh- TW"],"modules":{"platform-core":{"path":"platform/core.js","requires":["node-base","event-base","platform- sandbox"]},"platform-sandbox":{"path":"platform/sandbox.js"},"lang-service":{"path":"platform/lang_service.js","requires": ["platform-core","platform-sandbox","intl"]},"scroll-pagination":{"path":"scroll-pagination/scroll- pagination.js","requires":["event","event-resize","node-event-delegate","datasource","scroll-pagination-css"]},"scroll- pagination-css":{"path":"scroll-pagination/assets/scroll-pagination.css","type":"css"},"shjs":{"path":"shjs/
sh_php.min.js","requires":["shjs-core","shjs-css"]},"shjs-css":{"path":"shjs/sh_nedit.css","type":"css"},"mui-cssbutton": {"path":"cssbutton/assets/skins/miiicasa/cssbutton-skin.css","type":"css"},"shjs-core":{"path":"shjs/ sh_main.min.js"}}},"index":{"combine":true,"fetchCSS":false,"root":"index/","lang":["en-US","zh-TW"],"modules":{"welcome": {"path":"welcome/welcome.js","lang":["en-US","zh-TW"],"requires":["platform-core","platform-sandbox","lang- service","console"]},"welcome/_notification":{"path":"welcome/_notification.js","requires":["substitute","scroll- pagination","yql","panel","node-event-delegate","handlebars"]},"charming/_masthead":{"path":"charming/ _masthead.js","requires":["panel","shjs"]},"common/_sidebar":{"requires":["mui-cssbutton"]}}}}}; YUI().use("welcome","welcome/_notification","charming/_masthead","common/_sidebar"); ٤:6*Чദ֥ଆॶ֤ਸ਼ຓקၬđ֌ᆃဢ҂ݺົ޹

঒଴೘ğ$44҂ൡႨႿ׮෿ࡆᄛ

঒଴೘ğ$44҂ൡႨႿ׮෿ࡆᄛ :6*ა3FRVJSF+4׻ॖၛࡆᄛ$44a ֌׻ᆺିҐႨ׮෿ࡆᄛ

঒଴೘ğ$44҂ൡႨႿ׮෿ࡆᄛ $44ྶᄝ)5.-ཁൕభࣼሙСݺđ ҂ಖᛍফఖྶ၂ᆰᇗྍ߻ᇅđؓຩᅟིି߶൞ޓն֥Ԋࠌ :6*ა3FRVJSF+4׻ॖၛࡆᄛ$44a ֌׻ᆺିҐႨ׮෿ࡆᄛ

঒଴೘ğ$44҂ൡႨႿ׮෿ࡆᄛ $44ྶᄝ)5.-ཁൕభࣼሙСݺđ ҂ಖᛍফఖྶ၂ᆰᇗྍ߻ᇅđؓຩᅟིି߶൞ޓն֥Ԋࠌ <link rel="stylesheet" href="page.css" media="all"> :6*ა3FRVJSF+4׻ॖၛࡆᄛ$44a ֌׻ᆺିҐႨ׮෿ࡆᄛ

:6*ࢳथਔն҆ٳ֥ླ౰ ഺ༯֥ూਃ֤ሱ࠭ࡹഡĆ http://www.flickr.com/photos/defenceimages/6771187177/

https://github.com/josephj/static-loader ၂ѩࢳथ:6*ቆ෿֥گᄖ؇ა ಞ$44Ԯ๤ࡆᄛ :6*ࢳथਔն҆ٳ֥ླ౰ ഺ༯֥ూਃ֤ሱ࠭ࡹഡĆ http://www.flickr.com/photos/defenceimages/6771187177/

ਆρ೘ֹ֥षؿᆀ ᆃ߭໡ૌေࡆഈଆॶ၇ঠܱ༢Ć http://josephj.com/lab/2012/github-chinese-develope/ 资讯模块列表模块 _info.php _info.css _info.js _list.php _list.css
_list.js 条件过滤模块 _filter.php _filter.css _filter.js

ਆρ೘ֹ֥षؿᆀ ᆃ߭໡ૌေࡆഈଆॶ၇ঠܱ༢Ć http://josephj.com/lab/2012/github-chinese-develope/ 资讯模块列表模块 _info.php _info.css _info.js _list.php _list.css
_list.js 条件过滤模块 _filter.php _filter.css _filter.js module, cookie •module • node-event-delegate • node-style • node-screen • cache • jsonp • handlebars • event-resize •cookie •module • node-base •handlebars

ૄ۱ଆॶ֥ቆ෿ഡק ҂ᄜ→Ὂ ර.JOJ֥∉૫℟ק

ૄ۱ଆॶ֥ቆ෿ഡק ଆॶקၬሱദ+4ა$44໊ᇂ ࠣ၇ঠܱ༢ ҂ᄜ→Ὂ ර.JOJ֥∉૫℟ק

ᆷקՎ်૫Ⴕଧ်ུ૫ଆॶ ޓᆰत֥ᆷקٚൔ

ᆷקՎ်૫Ⴕଧ်ུ૫ଆॶ ҂ླᆩ֡Мᗥ֥၇ῳଆΰĆᆺေᆷק်૫ଆॶ ၍Ԣ္҂ླေքྏ႕ཙљ֥ଆॶ ޓᆰत֥ᆷקٚൔ

౞ၞࡼ෮Ⴕླေ֥ഡקაѓదൻԛ گᄖ֥൙౦ႋھࢌ۳ӱൔটቓάĆ

ࡆᄛ֥ٚൔ൅ٳႪၳ

ࡆᄛ֥ٚൔ൅ٳႪၳ ၛԮ๤ٚൔࡆᄛᇕሰა်૫$44

ࡆᄛ֥ٚൔ൅ٳႪၳ ٳ೛❣ứ֥+4౨౰ ൞ሱ׮࠹ෘ၇ঠܱ༢طളӮ ၛԮ๤ٚൔࡆᄛᇕሰა်૫$44

ໃটषؿॖၛປಆህᇿᄝଆॶഈ

ໃটषؿॖၛປಆህᇿᄝଆॶഈ "๙ᆩ࿟༏ଆॶ (_notification) ଆॶषؿᆀ" ଆॶ଀ӫ welcome/_notification $44֖σ welcome/_notification.css +4֖σ welcome/_notification.js
ཌྷ၇ଆॶ scroll-pagination, node-event-delegate, viewer

ໃটषؿॖၛປಆህᇿᄝଆॶഈ "๙ᆩ࿟༏ଆॶ (_notification) ଆॶषؿᆀ" #်൮ଆॶ (_masthead) ଆॶषؿᆀ# ଆॶ଀ӫ welcome/_notification $44֖σ
welcome/_notification.css +4֖σ welcome/_notification.js ཌྷ၇ଆॶ scroll-pagination, node-event-delegate, viewer ଆॶ଀ӫ common/_masthead $44֖σ common/_masthead.css +4֖σ common/_masthead.js ෮ླଆॶ panel, device-navigation

ໃটषؿॖၛປಆህᇿᄝଆॶഈ "๙ᆩ࿟༏ଆॶ (_notification) ଆॶषؿᆀ" #်൮ଆॶ (_masthead) ଆॶषؿᆀ# $ҧшণଆॶ (_sidebar) ଆॶषؿᆀ$
ଆॶ଀ӫ welcome/_notification $44֖σ welcome/_notification.css +4֖σ welcome/_notification.js ཌྷ၇ଆॶ scroll-pagination, node-event-delegate, viewer ଆॶ଀ӫ common/_masthead $44֖σ common/_masthead.css +4֖σ common/_masthead.js ෮ླଆॶ panel, device-navigation ଆॶ଀ӫ welcome/_sidebar $44֖σ welcome/_sidebar.css +4֖σ ↥ ෮ླଆॶ ↥

ቋުᄜ$POUSPMMFSᆷק်૫ଆॶࠧॖ ֨ೆު൮် welcome.php 页面开发者

ቋުᄜ$POUSPMMFSᆷק်૫ଆॶࠧॖ ֨ೆު൮် welcome.php 页面开发者 Վ်૫Ⴕၛ༯ଆॶğ ·•welcome/_notification ·•charming/_masthead ·•common/_sidebar

߭Ἢ်Ҫࠩഡק෮ᄥმ֥঒଴

߭Ἢ်Ҫࠩഡק෮ᄥმ֥঒଴ c #VJMEིੱ໙ี ҂ᄜ#VJMEđႮ.JOJGZᄝཌഈሱ׮ކѩa࿢෪aϱЧ॥ܵb

߭Ἢ်Ҫࠩഡק෮ᄥმ֥঒଴ c #VJMEིੱ໙ี ҂ᄜ#VJMEđႮ.JOJGZᄝཌഈሱ׮ކѩa࿢෪aϱЧ॥ܵb c ཌഈԢհ໙ี ჰ൓֖σࢥթᄝđॖၛᆰࢤྩᆞ໙ีđᆺေϜ.JOJGZؓႋ֥ߏթीוࠧॖ

߭Ἢ်Ҫࠩഡק෮ᄥმ֥঒଴ c #VJMEིੱ໙ี ҂ᄜ#VJMEđႮ.JOJGZᄝཌഈሱ׮ކѩa࿢෪aϱЧ॥ܵb c ཌഈԢհ໙ี ჰ൓֖σࢥթᄝđॖၛᆰࢤྩᆞ໙ีđᆺေϜ.JOJGZؓႋ֥ߏթीוࠧॖ c ົ޹ྟ໙ี Ῐứᆀᆺקၬሱദଆॶ֥ཌྷ၇ྟaᆜ်෮ླଆΰႮ:6*-PBEFSίෘᗥሱọ≘
ೆđܵ৘ಸၞྸ؟b

߭Ἢ်Ҫࠩഡק෮ᄥმ֥঒଴ c #VJMEིੱ໙ี ҂ᄜ#VJMEđႮ.JOJGZᄝཌഈሱ׮ކѩa࿢෪aϱЧ॥ܵb c ཌഈԢհ໙ี ჰ൓֖σࢥթᄝđॖၛᆰࢤྩᆞ໙ีđᆺေϜ.JOJGZؓႋ֥ߏթीוࠧॖ c ົ޹ྟ໙ี Ῐứᆀᆺקၬሱദଆॶ֥ཌྷ၇ྟaᆜ်෮ླଆΰႮ:6*-PBEFSίෘᗥሱọ≘
ೆđܵ৘ಸၞྸ؟b c ܋Ⴈ֥ߏթ໙ี Ԣਔಆთ܋ႨҐႨ.JOJGZᇏ֥HSPVQ$POGJHđఃᘧ҂ԩ৘aх૧ົ޹໙ี

ࢲე

်Ҫ֥ࠩഡᇂॖམӮwᇏနࠢಃx ഡᇂಸၞbԚ௹၂ଢਔಖđ֌ܿଆэնࣼܵ৘҂ၞb ࢲე

်Ҫ֥ࠩഡᇂॖམӮwᇏနࠢಃx ഡᇂಸၞbԚ௹၂ଢਔಖđ֌ܿଆэնࣼܵ৘҂ၞb ଆॶҪࠩ℟קᄵ൞wֹٚሱᇍx ഡᇂࢠگᄖaؓӉ௹ົ޹ࢠႵིੱb ஥ކཌྷ၇ྟ࠹ෘaሱ׮ކѩa٤๝҄༯ᄛ֩ࠏᇅ ಞ်૫ଆॶᆇ֥ቓ֞ෛҬࠧႨ ࢲე

ࢲე

#JH1JQF൞ޓ؟ຩᅟམൌቔ֥ଢѓ ֌൮༵୆֤wࡹ৫ଆॶཌྷ၇ྟxawҐႨ်૫ଆॶषؿଆൔx ༵ࡹ৫ଆॶ֝ཟषؿଆൔҌॖିႵൌቔ֥ࠏ߶ ܝৣࢠऎܿଆ֥ຩᅟष൓ສᆃٚཟ၍׮ ࢲე

ཌྷܱ৵ࢲ c2010ࡹ৫భ؊षؿ๶ؒ IUUQXXXTMJEFTIBSFOFUTEDD cॴଆॶ܎๙ࠏᇅ IUUQHJUIVCDPNNJJJDBTBNPEVMF cMiniࡆᄛ۽ऎ IUUQHJUIVCDPNKPTFQIKNJOJ cଆॶࡆᄛࠏᇅ IUUQHJUIVCDPNKPTFQIKTUBUJDMPBEFS cਆρ೘ֹ֥GitHubषؿᆀ
IUUQHJUIVCDPNKPTFQIKHJUIVCDIJOFTFEFWFMPQ c໡֥Ѱग़ğᆃဢቓࣼؓਔ IUUQKPTFQIKDPN c໡֥EmailğKPTFQIK!HNBJMDPN 今天看到的所有程式码或工具都是可分享的！

Questions?

miiiCasa ࡅ๖≐aࡹ৫ࡅᇏ֥SNS 在北京工作的⼀一家人

miiiCasa ࡅ๖≐aࡹ৫ࡅᇏ֥SNS 在北京工作的⼀一家人在老家重慶的奶奶

miiiCasa ࡅ๖≐aࡹ৫ࡅᇏ֥SNS 在北京工作的⼀一家人在老家重慶的奶奶位於家中、可存放照片的分享器

miiiCasa ࡅ๖≐aࡹ৫ࡅᇏ֥SNS 在北京工作的⼀一家人在老家重慶的奶奶位於家中、可存放照片的分享器 ޺৵ຩ

miiiCasa ࡅ๖≐aࡹ৫ࡅᇏ֥SNS 在北京工作的⼀一家人在老家重慶的奶奶想看孫女只要换个频道就可以了位於家中、可存放照片的分享器 ޺৵ຩ

SDCC

SDCC

More Decks by Joseph Chiang

Other Decks in Programming

Featured

Transcript