ããé¦å
è¦ç¡®å®ï¼å³ä½¿æå¼æ¸¸æä¸è®ºï¼ä¸è¬çWebåºç¨æè
ç½ç«ï¼å®å
¨ç¨JavaScriptå¼åä¹æ¯å¯è¡çãæ¯å¦ExtJSãwebOSçEnyoçãä½æ¯ä¸»æµWebå¼åå¾å°éç¨å
¨JSçæ¹æ¡ãåå 大ä½æ以ä¸å ç¹ï¼
1. 注éèèé£äºæ æ³è¿è¡JSçç¨æ·ä»£çã
ç¨æ·ä½¿ç¨ä¸æ¯æJSçæµè§å¨ï¼æ¯å¦è¾èçææºæµè§å¨ï¼ï¼æè
ç¦ç¨èæ¬ãå½ç¶ä½ å¯ä»¥éæ©å¿½ç¥è¿ä¸å°æ®ç¨æ·ï¼å°¤å
¶æ¯ç°å¨ç»å¤§å¤æ°ç½ç«ååºç¨ä¹æ¯å¦æ¤éæ©çï¼ä½æ¯è³å°æ们åºè¯¥å¯¹åæèèæ JSæ
åµçå¼åè
äºä»¥åºæ¬çå°éãæ¤å¤ï¼å¦ Mobile Transcoderææäºææºæµè§å¨çâæé模å¼âæ¯åºäºæå¡å¨ç«¯å¯¹ç½é¡µç解æåéç»ï¼æ¯å¦è½æ¯æJSå¾å¤åã
æ´éè¦çå ç´ æ¯SEO friendlyãå¦ææ¯å
¨JSçæçç½é¡µï¼æç´¢å¼ææ æ³ç´¢å¼å
容ãè¿ä¸ç¹å¯¹äºè®¸å¤ç½ç«æ¯æ§å½æ¸å
³çã
注æï¼æ人æå°screen readerãä½ç»å¤§å¤æ°è¯»å±è½¯ä»¶æ¯æ ¹æ®DOMæ¥çï¼å æ¤å
¨é¨ç±JSçæDOMä¹ä¸ä¼æé®é¢ãç¶èè¿åææ¯JSæçæçDOMæ¯ç¬¦åaccessibilityè¦æ±çã
2. 注éHTML/CSSæ¬èº«çä¼ç¹ã
è¯ç¶JSæ¬èº«ä¹å¯ä»¥éè¿ç²¾å¿è®¾è®¡çæ¡æ¶ååºæ¥å®ç°å离çææHTML/CSS模åçä¼ç¹ãä½æ¯åå¨è®¸å¤ä¸ç¡®å®å ç´ ï¼
1) æ足å¤å¥½çæ¡æ¶ååºåï¼
è¦èèæ¯å¦è½æ»¡è¶³ä½ çä¸å¡éæ±ï¼è¿å¯è½è¦èèæ§è½ãå¯æ©å±æ§ãä¹åæå°çaccessibilityãå¦ä¹ æ²çº¿ãå·¥å
·é¾ï¼ä¹è³æ¤æ¡æ¶ååºçé¿ä¹
ççåï¼æ人维æ¤ï¼ä¿®bugãå æ°åè½æ¯å¦å¯¹HTML5æ°APIçæ¯æä¹ç±»çï¼ãå
³é®æ¯ï¼ç论ä¸è¯´JavaScriptå
·ææ´é«çå¼¹æ§ï¼ä½æ¯æ´å¤§çèªç±åº¦æªå¿
è½å¾å°æ´å¥½ç
2) æ¡æ¶ååºç»åºçæ½è±¡æ¨¡ååHTML/CSS模åçé»ææ¯å¦å¹é
ï¼
åå¦è¯¥æ¡æ¶æåºæ¬è´¨ä¸ä»ç¶ä½¿ç¨HTML/CSS模åï¼åªæ¯æ¹åäºè¯æ³ï¼æ¯å¦ä»markupæ¹ä¸ºjsonï¼ï¼é£ä¹å
¶æä¾ç好å¤å¨åªéï¼ä»
ä»
æ¯è¯æ³ç»ä¸ï¼
å¦æ该æ¡æ¶æåºæèªå·±ç¬ç«çæ½è±¡å±ï¼æ¯å¦widget/componentçï¼é£ä¹å®æ¯å»ºçå¨HTML/CSSä¹ä¸çé¢å¤æ½è±¡å±ï¼å³æç»æ å°å°HTML/CSSï¼ï¼è¿æ¯ä»
ä»
以HTML/CSS为纯粹å®ç°å·¥å
·ï¼å¯¹äºåè
ï¼å®é
ä¸æç»ä¼åå½HTML/CSS模åãèåè
ï¼å¯ä»¥åèçç»éªæè®å°±æ¯
http://ASP.NET WebFormåJSFã
3) æ¡æ¶ååºæ设å®ç约æè½å¦å¨å¼åä¸ä¸ä»¥è´¯ä¹çæ§è¡ï¼
æ 论æ¯ç论æè
ç°å®ï¼HTML/CSS模åé½ç®ä¸ä¸å®ç¾ãä½æ¯è³å°æ¯æ¸
æ°åè¾å®¹æ被ä¸è´çæ§è¡çãä½æ¯åä¸è¯è¨å³ä½¿æä¾åå±æºå¶ï¼ä¹å®¹æ被ç»è¿ââå°¤å
¶æ¯æ¡æ¶ååºæ¬èº«ä¸å¤å¥½çæ
åµä¸ï¼å¯è½ç±äºä¸è½æ»¡è¶³éæ±ãæbugçæ
åµèå¾åäºhackä¹ï¼æ´ä¸è¦è¯´deadline紧迫æ¶ã
3. 注éæ§è½ã
é¡»ç¥ï¼æç»Webåºç¨ã页é¢æ¯å¨æµè§å¨ä¸æ§è¡ï¼èæµè§å¨å®å
¨æ¯æç
§HTML/CSSæ设计ãæå¼Canvasä¸è®ºï¼çº¯JSçå®ç°æç»è¿æ¯è¦çæDOMãä»æ§è½çè§åº¦çï¼çº¯JSçæDOMèªç¶èµ¶ä¸ä¸ç´æ¥çmarkupãåæ ·çéçï¼å°±ç®ç¨CSSé¢å¤çå¨ä¹é½ä¼å¨é¨ç½²æ¶é¢å
ç¼è¯ââ尽管å¨è¿è¡æ¶å¯ä»¥ååºæ´çé¼çç¹æ§ï¼ç¶èå®é
ä¸ç®åæä¸ç¥éæä»»ä½CSSé¢å¤çå¨å¹²äºè¿æ ·çäºæ
ââå 为å®ä»¬é½æ¯æç
§é¢ç¼è¯çåºæ¯è®¾è®¡çï¼ï¼åå¦HTML/CSSæ¯æç
§æ¸è¿æ¾ç¤ºä¼åçï¼é¡µé¢ä¸ç¨å
¨ä¸è½½å®å°±å¯ä»¥çé¨åï¼ï¼è纯JSçæ¶æ没æç²¾å¿è®¾è®¡æ¯å¾é¾åå°çï¼æ¯å¦jsonæ°æ®å
¨é¨ä¸è½½å®ä½ æè½parseï¼æ°æ®æå¯ç¨ï¼DOMæè½çæï¼ã
[补å
ï¼å°½ç®¡LESSæ¯å¯ä»¥å¨è¿è¡æ¶æ§è¡çï¼ä½æ¯ä»æ§è½çè§åº¦åºåæ¯ä¸åéçï¼å 为CSSé常å¿
é¡»å¨é¡µé¢renderingä¹åå°±å
¨é¨å°±ä½ãèè¿è¡æ¶äº§çCSSï¼
å°±è¦æ±å¨é¡µé¢rendingä¹åè³å°è¦å
ä¸è½½æ§è¡LESSçèæ¬ï¼ç¶å解æç¼è¯ä½ ç.lessæºä»£ç ãè¿ä¸ªæ§è½å¼éè³å°ç®åè¿ä¸å®¹å¿½è§ãï¼½
[补å
ï¼æ§è½ä¼åçå¦ä¸ç¹æ¯åºäºHTML/CSSç声ææ§ç¹ç¹ï¼å³åªè¡¨æhigh-levelçç®æ ï¼æµè§å¨æè½è·å¾æ´å¤§çä¼åèªç±åº¦ãæ¯å¦CSS transition/animationï¼ä¸JavaScriptéè¿ä¿®æ¹styleè¾¾å°æææ¯ï¼åè
æ§è½è¡¨ç°è¦å¥½å¾å¤ãï¼½
4. 注éWebå¼åçç¬ç¹ç¹ç¹ã
1) HTML/CSS é½æ¯å£°æå¼çï¼ä¹å°±æ¯å
¶æ¬èº«å¹¶ä¸å¸ææ¯ç¨åºåæ¥ç¼ç¨ãå½ç¶ï¼ä¸ä¸ªç¼ç¨è¯è¨è½å¹²ææçäºæ
ï¼ä½æ¯å³ä½¿èèç¼ç¨æ¬èº«ï¼ä¸ºä»ä¹å¨éç¨ç¼ç¨è¯è¨ä¹å¤è¿è¦æSQLãè¿æ以åç§è¯æ³åçé
ç½®æ件ï¼
2) HTML/CSSæ¯åºäºæ åçãè¿ä¸
http://ASP.NET WebFormãJSFãFlash/Flexçç§æææ¯æä¸ä¸ªè¯è¨åå¹³å°ä¸çæ åæ天壤ä¹å«ãå
·ä½å°±ä¸å±å¼äºã
3) Webå¼ååä¸è¬åºç¨å¼åæ个é大åºå«æ¯ï¼Webåºç¨ãç½é¡µçæç»è¡¨ç°åè¡ä¸ºï¼æè
说Webçç¨æ·ä½éªï¼å¹¶ä¸æ¯å®å
¨ç±å¼åè
å³å®çï¼èæ¯å¼åè
åç¨æ·å
±åå³å®çãç¨æ·éæ©ä¸åç设å¤ãä¸åçæµè§å¨ãä¸åçæµè§å¨è®¾ç½®ãä¸åçæµè§å¨æ©å±çï¼é½è½å½±åç»æãè¿æ¯ç¼ºç¹ï¼ä¹æ¯ä¼ç¹ãçä½ å¦ä½ä½ä¼äºãè¿éå
·ä½ä¸å±å¼ãåªæ¯ä¸ç¹ï¼çº¯JavaScriptå¼åéå¸¸è¡¨ç¤ºä½ æ³æ´å¤çæ§å¶ç¨æ·ä½éªï¼ä½è¿å¹¶éç®åçå¤å代ç å°±è½åå°ã
[补å
ï¼ä¸¾ä¸ªä¾åï¼è¡¨åæ§ä»¶ä¸çautofocuså±æ§ï¼ä¹ä¸çèæ¬ä¹å¯ä»¥ååãä½æ¯å
¶å®èæ¬è¦å对å¾é¾ï¼æ¯å¦é¡µé¢å·²ç¶å è½½ä¸åï¼ç¨æ·å¼å§å¨æ个è¾å
¥æ¡éè¾å
¥äºï¼ä½æ¯åç»è½½å
¥çæ§ä»¶è¦æ±focusï¼å¦ææ¯èæ¬å®ç°ï¼é常就æ¦æçè°ç¨focus()ï¼ææäºç¨æ·è¾å
¥ï¼ç¹å«æ¯ä¸äºç¨æ·ä½¿ç¨è¾å
¥æ³æ¶è¢«ææå¾æ¯å伤ï¼ãèHTMLæ¬èº«æå®ä¹çå±æ§ï¼æ¯ç±æµè§å¨å®ç°ï¼åå¯ä»¥åæ°å½çå¤çãç¹å«æ³¨æçæ¯ï¼ä»èæµè§å¨å°æ°æµè§å¨çå级ï¼ä½ èªç¶å°±è·å¾äºç¨æ·ä½éªçæåãå¦ä¸æ¹é¢ï¼ç¨æ·å¯ä»¥ä¸»å¨éæ©ä»æ³ç¨çæµè§å¨ï¼æ¥ä¸»å¨å级ä»èªå·±çç¨æ·ä½éªãè¿æ ·çä¾åè¿æ许å¤è®¸å¤ï¼ä¸èæ举ãï¼½
以ä¸ã
ã