²»ÌÆÍ»µÄJavaScriptµÄÆßÌõ×¼Ôò
Ó¢ÎÄÔÎÄ£ºThe seven rules of Unobtrusive JavaScript
ÔÎÄ×÷ÕߣºChris Heilmann
¾¹ý¶àÄêµÄ¿ª·¢¡¢½ÌѧºÍ±àд²»ÌÆÍ»µÄJavaScript£¬ ÎÒ·¢ÏÖÁËÏÂÃæµÄһЩ׼Ôò¡£ÎÒÏ£ÍûËüÃÇ¿ÉÒÔ°ïÖúÄã¶Ô“ΪʲôÕâÑùÉè¼ÆºÍÖ´ÐÐJavaScript±È½ÏºÃ”ÓÐÒ»µãÀí½â¡£ÕâЩ¹æÔòÔø¾°ïÖúÎÒ¸ü¿ìµØ½»¸¶²úÆ·£¬²¢ÇÒ²úÆ·µÄÖÊÁ¿¸ü¸ß£¬Ò²¸üÈÝÒ×ά»¤¡£
1.²»Òª×öÈκμÙÉè
£¨JavaScriptÊÇÒ»¸ö²»¿É¿¿µÄÖúÊÖ£©
¿ÉÄܲ»ÌÆÍ»µÄJavaScript µÄ×îÖØÒªµÄÒ»¸öÌØÐÔ¾ÍÊÇ——ÄãҪֹͣÈκμÙÉ裺
* ²»Òª¼ÙÉèJavaScriptÊÇ¿ÉÓõģ¬Äã×îºÃÈÏΪËüºÜÓпÉÄÜÊDz»¿ÉÓõ쬶ø²»ÊÇÖ±½ÓÒÀÀµÓÚËü¡£
* ÔÚÄã¾¹ý²âÊÔÈ·ÈÏһЩ·½·¨ºÍÊôÐÔ¿ÉÒÔʹÓÃ֮ǰ£¬²»Òª¼ÙÉèä¯ÀÀÆ÷Ö§³ÖËüÃÇ¡£
* ²»Òª¼ÙÉèHTML´úÂëÈçÄãÏëÏóµÄÄÇÑùÕýÈ·£¬Ã¿´Î¶¼Òª½øÐмì²é£¬²¢ÇÒµ±Æä²»¿ÉÓõÄʱºò¾ÍʲôҲ²»Òª×ö¡£
* ÈÃJavaScriptµÄ¹¦ÄܶÀÁ¢ÓÚÊäÈëÉ豸
* Òª¼ÇסÆäËûµÄ½Å±¾¿ÉÄÜ»áÓ°ÏìÄãµÄJavaScriptµÄ¹¦ÄÜ£¬ËùÒÔÒª±£Ö¤ÄãµÄ½Å±¾µÄ×÷ÓÃÓò¾¡¿ÉÄܵذ²È«¡£
ÔÚ¿ªÊ¼Éè¼ÆÄãµÄ½Å±¾Ö®Ç°£¬Òª¿¼ÂǵĵÚÒ»¼þÊÂÇé¾ÍÊǼì²éÒ»ÏÂÄãҪΪÆä±àд½Å±¾µÄHTML´úÂ룬¿´¿´ÓÐʲô¶«Î÷¿ÉÒÔ°ïÖúÄã´ïµ½Ä¿µÄ¡£
2.ÕÒ³ö¹³×ÓºÍ½Úµã¹ØÏµ
£¨HTMLÊǽű¾µÄ»ùʯ£©
ÔÚ¿ªÊ¼±àд½Å±¾Ö®Ç°£¬ÒªÏÈ¿´Ò»ÏÂÄãҪΪ֮±àдJavaScriptµÄHTML¡£Èç¹ûHTMLÊÇδ¾×éÖ¯µÄ»òÕßδ֪µÄ£¬ÄÇôÄ㼸ºõ²»¿ÉÄÜÓÐÒ»¸öºÃµÄ
½Å±¾±àд·½°¸——ºÜ¿ÉÄܾͻá³öÏÖÏÂÃæµÄÇé¿ö£ºÒªÃ´ÊÇ»áÓÃJavaScript´´½¨Ì«¶à±ê¼Ç£¬ÒªÃ´¾ÍÊÇÓ¦ÓÃÌ«ÒÀÀµÓÚJavaScript¡£
ÔÚHTMLÖÐÓÐһЩ¶«Î÷ÐèÒª¿¼ÂÇ£¬ÄǾÍÊǹ³×ÓºÍ½Úµã¹ØÏµ¡£
<1>.HTML ¹³×Ó
HTML×î³õµÄºÍ×îÖØÒªµÄ¹³×Ó¾ÍÊÇID£¬¶øÇÒID¿ÉÒÔͨ¹ý×î¿ìµÄDOM·½·¨——getElementById
·ÃÎʵ½¡£Èç¹ûÔÚÒ»¸öÓÐЧµÄHTMLÎĵµÖÐËùÓеÄID¶¼ÊǶÀÒ»ÎÞ¶þµÄ»°£¨ÔÚIEÖйØÓÚname ºÍ ID
ÓÐÒ»¸öbug£¬²»¹ýÓÐЩºÃµÄÀà¿â½â¾öÁËÕâ¸öÎÊÌ⣩£¬Ê¹ÓÃID¾ÍÊǰ²È«¿É¿¿µÄ£¬²¢ÇÒÒ×ÓÚ²âÊÔ¡£
ÆäËûһЩ¹³×Ó¾ÍÊÇÊÇHTMLÔªËØºÍCSSÀ࣬HTMLÔªËØ¿ÉÒÔͨ¹ýgetElementsByTagName·½·¨·ÃÎÊ£¬¶øÔÚ¶àÊýä¯ÀÀÆ÷Öж¼»¹²»ÄÜ
ͨ¹ýÔÉúµÄDOM·½·¨À´·ÃÎÊCSSÀà¡£²»¹ý£¬ÓкܶàÍⲿÀà¿âÌṩÁË¿ÉÒÔ·ÃÎÊCSSÀàÃû£¨ÀàËÆÓÚ getElementsByClassName£©
µÄ·½·¨¡£
<2>.HTML ½Úµã¹ØÏµ
¹ØÓÚHTMLµÄÁíÍâ±È½ÏÓÐÒâ˼µÄÒ»µã¾ÍÊDZê¼ÇÖ®¼äµÄ¹ØÏµ£¬Ë¼¿¼ÏÂÃæµÄÎÊÌ⣺
* ÒªÔõÑù²Å¿ÉÒÔ×îÈÝÒ×µØ
Ïà¹ØÎĵµ£º
ÐÂÎÅÀ´Ô´:tripwiremagazine.com
JavaScript ÊÇ Web ¿ª·¢ÓëÉè¼ÆÖв»¿É»òȱµÄ¶«Î÷£¬²»¹ÜÊÇÒ»¸ö¼òµ¥µÄÍøÒ³»¹ÊÇÒ»¸öרҵµÄÕ¾µã£¬Ò²²»¹ÜÄãÊǸßÊÖ»¹ÊDzËÄñ£¬Èç½ñ
JavaScript ¿âÔ½À´Ô½Ç¿´ó£¬¿ÉÒÔʤÈÎÐí¶à¸´ÔӵŤ×÷£¬È»¶øÍ¬Ê±£¬ÈËÃÇÔÚÖÚ¶à JavaScript ¿âÃæÇ°ÓÖ¾õµÃÎÞËùÊÊ´Ó£¬±¾ÎÄ£¬ÎÒÃǽ«Ê¹ÓÃ
Google ËÑË÷³öÅÅÃûǰ 10 λµ ......
ÔÚÉè¼ÆjavascriptµÄ¼Ì³ÐÌåϵʱ£¬ÓÐÒ»¸öÖØÒªÐèÇ󣬷½·¨Á´¡£Í¨Ë×µØËµ£¬ËµÊÇÔÚ·½·¨Öе÷Óø¸ÀàµÄͬÃû·½·¨¡£ÀàËÆjavaµÄthis.super().method()¡£ÈçºÎ°Ñ¸¸ÀàµÄͬÃû·½·¨°ü×°µ½×ÓÀàÖÐÄØ£¿Õâ¾ÍÒªÓõ½wrapperº¯Êý¡£Ö®ËùÒÔ½Ðwrapper£¬¶ø²»ÊÇwrap£¬ÒòΪËü±Èwrap¸ü¼Ówrapper¡£±ÈÈçÏñExtÄÇÖÖÉî¶È¼Ì³ÐµÄ½á¹¹ÖУ¬Èç¹û¸¸ÀàûÓÐÕÒ׿¸¸£¬×æ¸¸Ã»Ó ......
Google¿ªÔ´ÁËÆäÄÚ²¿Ê¹ÓõÄJavaScript¿ª·¢¹¤¾ßClosure£¬Ï£Íû°ïÖúÍⲿ³ÌÐòÔ±¿ª·¢³öËٶȸü¿ìµÄWebÓ¦ÓóÌÐò¡£GoogleÈÏΪͨ¹ýÔÊÐí¿ª·¢ÕßʹÓÃGoogle×Ô¼ºËùÓõŤ¾ß£¬ËûÃDz»½ö¿ÉÒÔ´´Ôì³ö¸ü¿ìµÄ¸»WebÓ¦ÓóÌÐò£¬¶øÇÒÄÜÕæÕýÈÃWeb²åÉϳá°ò¡£Closure JavaScript±àÒëÆ÷ºÍ¿âÔø±»GoogleÓÃÓÚ¿ª·¢Gmail¡¢Google Docs¡¢Google MapsÒÔ¼°ÆäËüÓ¦Ó ......
ÎÄÕÂÀ´×Ô£ºhttp://www.oschina.net/p/closure
Google¿ªÔ´ÁËÆäÄÚ²¿Ê¹ÓõÄJavaScript¿ª·¢¹¤¾ß£¬Ï£Íû°ïÖúÍⲿ³ÌÐòÔ±¿ª·¢³öËٶȸü¿ìµÄWebÓ¦ÓóÌÐò¡£GoogleÈÏΪͨ¹ýÔÊÐí¿ª·¢ÕßʹÓÃGoogle×Ô¼ºËùÓõŤ¾ß£¬ËûÃDz»½ö¿ÉÒÔ´´Ôì³ö¸ü¿ìµÄ¸»WebÓ¦ÓóÌÐò£¬¶øÇÒÄÜÕæÕýÈÃWeb²åÉϳá°ò¡£Closure JavaScript±àÒëÆ÷ºÍ¿âÔø±»GoogleÓÃÓÚ¿ª·¢Gmail ......
click() ¶ÔÏó.click() ʹ¶ÔÏó±»µã»÷¡£
closed ¶ÔÏó.closed ¶ÔÏó´°¿ÚÊÇ·ñÒѹرÕtrue/false
clearTimeout(¶ÔÏó) Çå³ýÒÑÉèÖõÄsetTimeout¶ÔÏó
clearInterval(¶ÔÏó) Çå³ýÒÑÉèÖõÄsetInterval¶ÔÏó
confirm("ÌáʾÐÅÏ¢") µ¯³öÈ·ÈÏ¿ò£¬È· ......