Upgrade to Pro — share decks privately, control downloads, hide ads and more …

生在幸福的 JS 年代

生在幸福的 JS 年代

Cain Chen

May 19, 2013
Tweet

More Decks by Cain Chen

Other Decks in Technology

Transcript

  1. 網頁會動好像很厲害 IE 5 Netscape 3 / 4 Opera 3.5 沒了(Mozilla

    在 1998 才開始改寫 Netscape Dymanic HTML d o c u m e n t . a l l d o c u m e n t . l a y e r s / d o c u m e n t . g e t E l e m e n t B y I d d o c u m e n t . g e t E l e m e n t B y I d 瀏覽器編年表
  2. 很厲害的代價... W3C 定的規則怎麼都不能用 IE 5, 5.5, 6 表示: Netscape 4+

    部分可以 Opera 4+ 都可以 JavaScript / JScript 傻傻分不清 IE 還有一招叫做 HTC
  3. 時代的眼淚 為了取得 DOM 元件 f u n c t i

    o n g e t D O M E l e m e n t ( n a m e ) { i f ( d o c u m e n t . g e t E l e m e n t B y I d ) { r e t u r n d o c u m e n t . g e t E l e m e n t B y I d t B y I d ( n a m e ) ; } e l s e i f ( d o c u m e n t . a l l ) { r e t u r n d o c u m e n t . a l l [ n a m e ] ; } e l s e i f ( d o c u m e n t . l a y e r s ) { r e t u r n d o c u m e n t . l a y e r s [ n a m e ] ; } }
  4. 時代的眼淚 為了設定 CSS 樣式 f u n c t i

    o n g e t D O M S t y l e ( n a m e ) { i f ( d o c u m e n t . g e t E l e m e n t B y I d ) { r e t u r n d o c u m e n t . g e t E l e m e n t B y I d t B y I d ( n a m e ) . s t y l e ; } e l s e i f ( d o c u m e n t . a l l ) { r e t u r n d o c u m e n t . a l l [ n a m e ] . s t y l e ; } e l s e i f ( d o c u m e n t . l a y e r s ) { r e t u r n d o c u m e n t . l a y e r s [ n a m e ] ; } }
  5. 時代的眼淚 為了 AJAX v a r d = d o

    c u m e n t . c r e a t e E l e m e n t ( ' d i v ' ) ; v a r s i d = " f r a m e _ " + M a t h . r a n d o m ( ) + " _ " + M a t h . r a n d o m ( ) ; d o c u m e n t . b o d y . a p p e n d C h i l d ( d ) ; d . i n n e r H T M L = ' < i f r a m e w i d t h = " 1 0 0 % " n a m e = " ' + s i d + ' " h e i g h t = " 0 " > < / i f r a m e > ' ; f o r m . t a r g e t = s i d ; f o r m . s u b m i t ( ) ;
  6. 時代的眼淚 實作糟糕的 Object 實體 f u n c t i

    o n m y O b j e c t ( n a m e , c m ) { t h i s . n a m e = n a m e ; t h i s . c m = c m + 3 0 ; } / / 好孩子不要學 v a r u s e r = n e w m y O b j e c t ( ' 閃光洽' , 1 8 ) ;
  7. 後來 不解釋! / * 取得元素 * / v a r

    e l e m = $ ( ' # e l e m e n t ' ) ; / * 設定樣式 * / e l e m . c s s ( ' b a c k g r o u n d ' , ' r e d ' ) ; / * A J A X * / $ . a j a x ( { u r l : ' / d o n t - h a c k - m e ' , s u c c e s s : f u n c t i o n ( d a t a ) { } , e r r o r : f u n c t i o n ( e r r ) { } } ) ; / * 我是鄉民 * / v a r u s e r = { n a m e : " 閃光洽" , c m : 3 0 } ;
  8. 瀏覽器大亂鬥 IE MUST DIE ? 說這句話之前,請先想想... 你做過多少 IE Hack ?

    你真的理解 IE 嗎? IE 6 存活了 10+ 年(起碼在台灣是這樣 為什麼你討厭 IE ? Firefox/Chrome/Opera 就真的不需要 Hack ?
  9. DOCUMENT.ALL Internet Explorer 5+ 判斷 IE 最靠譜的做法 悲劇 IE 6

    之後終於完全支援 document.getElementById IE 7 之後才加入對於 getElementBy(...) 系列支援 d o c u m e n t . a l l [ n ] d o c u m e n t . a l l [ " m y d i v I D " ] d o c u m e n t . a l l [ " m y d i v C l a s s N a m e " ] d o c u m e n t . a l l . t a g s ( " d i v " )
  10. DOCUMENT.GETELEMENTBY... 系列 IE 6+ / Netscape 4+ / Opera 3.5+

    拿近代瀏覽器來比不太公平 各瀏覽器 document.getElementByName 解讀不太 一樣 到頭來只有 document.getElementById 比較實用 要拿其他的東西只能用 NodeList
  11. 寫 DOM 最快的方法 適用任何版本的瀏覽器 d o c u m e

    n t . w r i t e ( ' < p > 我用 J S 我超強!< / p > ' ) ; d o c u m e n t . g e t E l e m e n t B y I d ( ' m y d i v ' ) . i n n e r H T M L ( ' < p > 我用 i n n e r H T M L 我超強!< / p > ' ) ;
  12. 寫得少,做得多 Implemented in JavaScript 1.0 with w i t h

    ( d o c u m e n t ) { w r i t e ( ' < p > 媽!我在這!< / p > ' ) ; w r i t e ( ' < p > 我寫 1 0 行省了十次 d o c u m e n t < / p > ' ) ; } v a r a = 0 ; w i t h ( M a t h ) { / * 所有跟 M a t h 有關的都可以省略不打 * / / * 現在你知道 J a v a S c r i p t 多討人厭了吧 * / a = P I * 5 * 5 ; b = r * c o s ( P I ) ; c = r * s i n ( P I / 2 ) ; }
  13. 除錯 這是除了 try ... catch 之外,貌似最多人用過的方法。 a l e r

    t ( ' 媽,我在這裡!' ) ; a l e r t ( ' 沒有用過的人舉一下手讓大家加一下 F B 好友!' ) ; / * 天真的以為這樣可以用 * / a l e r t ( f u n c t i o n ( ) { r e t u r n ' 哈哈,你看看你!' ; } ) ;
  14. 我們走了多少冤枉路? 小時候覺得我會寫網頁,現在才知道大人的世界很複雜。 JavaScript 對於前端除錯一直不算友善。 身為程式語言 JavaScript 有不少 的地方。 大型 IDE

    對於網頁編輯仍有不少缺憾。 瀏覽器對於部分 CSS 依舊存在 的狀態。 IE 直到 8.0+ 才完全依循 W3C 的 CSS 2.1 規範。 讓人詬病 各自表述
  15. 消失的十年 ECMAScript-262 3th (1999) ~ 5th (2009) Dojo Toolkit, 2004

    年 Prototype, 2005 年 MooTools, 2006 年 jQuery, 2006 年 YUI, 2006 年 ExtJS, 2006 年 Comparison of JavaScript frameworks
  16. 瀏覽器 再也不是那個 藍藍的東西 了! JavaScript Frameworks/Libraries 解決瀏覽器之亂 jQuery 2.0 移除

    IE 6/7/8 支援 Firefox/Chrome/Safari/IE9+ 表示: Opera 對於 JavaScript 嚴格到靠 X 現在的瀏覽器對於 JavaScript 的除錯都相當友善
  17. LEARNING JAVASCRIPT “ Crockford is inspirational and extraordinarily rewarding to

    watch and listen to. --Flubba ” Best resources to learn JavaScript