1.å端å¼ååwebå端å¼åçåºå«
2.HTML5åå°ç¨åºçåºå«
3.Webå端å¼å主è¦å¦åªäºï¼
å端å¼ååwebå端å¼åçåºå«
移å¨å端å¼ååwebå端å¼åé½å±äºå端å¼åï¼å ·ä½æ以ä¸åºå«ã1ãä¸å¡çåºç¨åºæ¯
webå端å¼å主è¦æä¼ ç»çPC端ç½é¡µå¼åï¼é¡µé¢ä¸»è¦æ¯è¿è¡å¨PC端æµè§å¨ä¸ï¼ç§»å¨å端å¼ååºæ¥ç页é¢ä¸»è¦æ¯è¿è¡å¨ææºä¸ã
ç´è§ä¸ä¼æè§ï¼PC端页é¢å¤§ä¸äºï¼ç§»å¨ç«¯é¡µé¢å°ä¸äºï¼ä½æ¯æ ¹æ®å¼åç»éªï¼é¡µé¢å¤§å¯å¹¶ä¸ä»£è¡¨ä¹¦åç代ç å¤æï¼é¡µé¢å°ä¹å¹¶ä¸æå³çå¼åç®åï¼é¾ä¸æ主è¦è¿æ¯åå³äºå ·ä½çä¸å¡éæ±ã
2ãæ°ææ¯ç使ç¨
ç±äºå¨ç§»å¨ç«¯ä¸»è¦ä»¥webkitå æ ¸ä¸ºä¸»ï¼å¯¹äºHTML5çæ°ææ¯æ¯æçæ´å¥½ï¼æ以å¯ä»¥æ´å¤§èå´ç使ç¨æ°ææ¯ï¼èPC端å¼åç±äºå¾å¤åºæ¯ä¸è¦æ±å ¼å®¹IEçèçæ¬æµè§å¨ï¼åºäºæµè§å¨å ¼å®¹æ§çèèï¼æäºæ åµä¸éå¶äºæ°ææ¯ç使ç¨ã
3ã页é¢çéé æ§
ä¼ ç»PC端ç页é¢å¼åä¸è¬é½ä¼éæ©ç»é¡µé¢è®¾å®ä¸ä¸ªåºå®å®½åº¦ï¼ä¸¤ä¾§æçç½ï¼ä½æ¯ç§»å¨ç«¯ç页é¢ç±äºå ¶è½½ä½ææºå±å¹æ¯PCè¦å°å¾å¤ï¼ä¸è¬é½ä¼éæ©å°½å¯è½å¤çå¨ææºå±å¹ä¸æ¾ç¤ºå 容ï¼è¿å°±è¦æ±ç§»å¨ç«¯é¡µé¢è¦è½å¤å åéåºåç§å±å¹å°ºå¯¸çææºå¹¶è¿è¡æ大ç¨åº¦çå©ç¨ã
ä»è¿ä¸ç¹ä¸æ¥è¯´ç§»å¨ç«¯é¡µé¢çéé é¾åº¦æ´é«ä¸äºã
4ã页é¢çæ§è½
PC端çç½ç»æ åµä¸è¬æ¯è¾ç¨³å®ï¼é½æ¯éè¿ç½çº¿æè Wi-Fiè¿æ¥ç½ç»ï¼ä½æ¯ç§»å¨ç«¯å°±æ¯è¾å¤æï¼é¤äºWi-Fiï¼è¿æ2Gã3Gã4Gçè³æ¯å¨å ç§ä¸åçç½ç»è¿æ¥ä¸äº¤æ¿åæ¢ä¹ç»å¸¸åçã
ä¸ç¨³å®çç½ç»è¿æ¥å¯¹é¡µé¢æ§è½å¸¦æ¥çæææ¯ç§»å¨ç«¯ç页é¢èµæºä¸è½å¤ªå¤§ï¼å¦åå¨æ¶å£ç½ç»æ åµä¸æ¶ï¼é¡µé¢å°ä¼æ æ³è®¿é® ï¼ä¸¥éå½±åç¨æ·ä½éªã
5ãæ¡æ¶éå
ç±äºç§»å¨ç«¯ç½ç»æ åµçä¸ç¨³å®ï¼å¯¼è´æ们å¨ç§»å¨ç«¯é¡µé¢æ¡æ¶éåæ¶ï¼ä¸è¬åªèèå°èç¾çæ¡æ¶ï¼ä¾å¦åzepto.jsè¿æ ·çå缩ä¹ååªæ9.6Kï¼å°±è½æ»¡è¶³ä¸è¬ä¸å¡çéè¦ï¼å¦ææ¯æ³è¦æ建æ´å¤æçå页é¢åºç¨ï¼å¯ä»¥éæ©åvue.jsè¿æ ·çæ¡æ¶ï¼åè½å¼ºå¤§ï¼ä½ä½ç§¯å缩åå´åªæå¤Kã
èweb端ç¸å¯¹éæ©çèå´å°±æ¯è¾å¤§ï¼ä¸äºæ¯è¾éåçæ¡æ¶ä¹å¯ä»¥æ ¹æ®é¡¹ç®éæ±å 以èèï¼ä¾å¦å¤èä½åºå¤§çext.jsï¼ä¾ç¶ååçä¼å¤UIç»ä»¶æ´»è·å¨ä¸äºä¼ä¸çåå°ç®¡çç³»ç»é¡¹ç®ä¸ã
æ©å±èµæ
Webå端å¼åéè¦ææ¡çææ¯ï¼
1ãçç»ææ¡å端å¼åææ¯(HTML5ãJSãJSONãXHTMLãCSS3)ï¼äºè§£å项ææ¯çç¸å ³æ åã
2ãææ¡Ajaxå¼æ¥ç¼ç¨ï¼è½å¤ååºé«æ§è½ãå¯å¤ç¨çå端ç»ä»¶ã
3ã对OOãMVCãMVVMçç¼ç¨ææ³ãå端æ¡æ¶ææ·±å»ç解ï¼çç»ææ¡ä¸ä¸ªå端æ¡æ¶ï¼å¸¸ç¨å端æ¡æ¶ Vuejsï¼AngularJSï¼Reactï¼Bootstrapï¼QUICK UIï¼ç§»å¨ç«¯æï¼Frozen UIï¼weUI ï¼SUIï¼MUIï¼AUIï¼äºè§£å ¶åçï¼æ¡æ¶æå¾å¤ï¼éæ©ä¸¤ä¸ä¸ªä¸»æµçæ¡æ¶ï¼çç»ï¼æ·±åº¦äºè§£æå¯ä»¥ï¼ã
4ãåäºWebæ§è½ä¼åï¼å¯è®¿é®æ§ã对SEOçæè¯å¥½çä½éªï¼ç解表ç°å±ä¸æ°æ®å±å离çæ¦å¿µã Webè¯ä¹åï¼è¿äºä¹æ¯å¨æ¾å·¥ä½ä¸ï¼å¾æç¨çå å项ï¼ã
5ãäºè§£å端å®å ¨æºå¶ï¼çæHTTPå议以åæµè§å¨ç¼åçç¥ã
6ãçæ常è§JSå¼åæ¡æ¶æºç å®ç°ï¼ï¼å¦ï¼prototypeãjQueryãMootoolsï¼Extï¼ Dojoï¼underscoreãYUIãKissyï¼ï¼è³å°çç»ä¸ç§ï¼å½ç¶ä¹ä¸è¦å»éä¸äºç¨ç人å¾å°çæ¡æ¶ï¼è¦æç½å¤§é¡¹ç®é½æ¯å¢éåï¼ä¸è½èªå·±æä¸å¥ï¼ã
7ãæ¥æè¯å¥½ç代ç ç¼åï¼è®¾è®¡ææ¡£æ°åçç»éªï¼çç»ä½¿ç¨Gitççæ¬æ§å¶å·¥å ·ã
8ã对常è§çæµè§å¨å ¼å®¹é®é¢ææ¸ æ°çç解ï¼å¹¶æå¯é ç解å³æ¹æ¡ï¼å¦IE6/7/8/9ã FirefoxãSafariãChromeã
9ãå ·æè¾é«ç审ç¾ï¼è¿ä¸ªå¾éè¦ï¼å¤å»è§è¯ä¸äºæ¨¡æ¿ï¼é«ç«¯ç项ç®ï¼å°±è½æè§å°æå¤å¤§çå·®è·ï¼ã
HTML5åå°ç¨åºçåºå«
ä¸ãè¿è¡ç¯å¢çä¸åãä¼ ç»çHTML5çè¿è¡ç¯å¢æ¯æµè§å¨ï¼å æ¬webviewï¼è微信å°ç¨åºçè¿è¡ç¯å¢å¹¶éå®æ´çæµè§å¨ï¼å¤§å®¶æ³¨æï¼æè¿éåçæ¯âéå®æ´çæµè§å¨âï¼æ以ä¸å 个åå
å°ç¨åºçå¼åè¿ç¨ä¸ä¼ç¨å°HTML5ç¸å ³çææ¯(并éå ¨é¨)
å°ç¨åºæåçåå¸ä¸çº¿éè¦å¾®ä¿¡å®¡æ ¸ï¼å¾®ä¿¡å¨ä¸æ´æ°èªèº«è½¯ä»¶çæ åµä¸å¯ä»¥å°å°ç¨åºæ´æ°å°èªèº«è½¯ä»¶å ï¼è¿å°±èæ³å°äºReact Nativeæ¡æ¶,源码x源码作者并ä¸å·²ç»æå¼åè å¨å¾®ä¿¡å°ç¨åºçå¼åå·¥å ·æºç ä¸åç°ä½¿ç¨äºReactåNodeWebkitåº
å®æ¹ææ¡£ä¸çé强è°äºèæ¬å æ¯æ æ³ä½¿ç¨æµè§å¨ä¸å¸¸ç¨çwindow对象ådocument对象ï¼åºäºè¿ä¸ç¹ï¼åzepto/jqueryè¿ç§æä½domçåºå°±è¢«å®å ¨æå¼äºï¼
æ以æ个人认为ï¼å°ç¨åºçè¿è¡ç¯å¢å¾æå¯è½æ¯å¾®ä¿¡å¼åå¢éåºäºæµè§å¨å æ ¸å®å ¨éæçä¸ä¸ªå 置解æå¨ï¼é对å°ç¨åºä¸é¨åäºä¼åï¼é åèªå·±å®ä¹çå¼åè¯è¨æ åï¼æåäºå°ç¨åºçæ§è½ã
ä¸è¿ç±äºå¾®ä¿¡ç»å¼åè æä¾äºå¼åå·¥å ·ï¼èå¼åå·¥å ·ä¸ä¹å ç½®äºç¼ç¨ãè°è¯ãå¼åç¯å¢ãåå¸äºä¸èº«ï¼æ们ä¹ä¸ç¨åæ¢è®¨å®çæç»è¿è¡ç¯å¢äºï¼åªè¦æç §å®æ¹ææ¡£è¿è¡å¼åå°±å¯ä»¥äºã并ä¸ä»å¾®ä¿¡å¢éç»å¼åè æä¾å¼åå·¥å ·è¿ä¸ä¸¾å¨ï¼è®©æèæ³å°äºè¹æç»å¼åè æä¾çX-CODEå¼åå·¥å ·ï¼å¯ä»¥æ³è±¡å¾®ä¿¡çâéå¿âå¯è§ä¸æ
äºãå¼åææ¬çä¸åã
è¿éææåºäºä¸ä¸ªé®é¢ï¼å½æ们é¢å¯¹ä¸ä¸ªHTML5 webå¼åéæ±æ¶ï¼æ们éè¦èèä»ä¹å¢ï¼æå»å¼åå·¥å ·ï¼vscodeãsublimtextãAtomçï¼ä¸è°ï¼å¤§å°å端æ¡æ¶ï¼Angularãreactãvueãbackboneçï¼ã模å管çå·¥å ·ï¼Webpack ãBrowserify çï¼ãä»»å¡ç®¡çå·¥å ·ï¼GruntãGulpçï¼ï¼å°å°UIåºéæ©ãæ¥å£è°ç¨å·¥å ·ï¼ajaxãFetch Apiçï¼ãæµè§å¨å ¼å®¹æ§çé½è¦æ们ä¸ä¸èç¥ï¼åä¸æµç¨jqeryæ件åH5ï¼ä¹è¦å¨å¼åè¿ç¨ä¸å»å¯»æ¾åéçjqueryæ件æ¥é å项ç®ã尽管è¿äºå·¥å ·å¯å®å¶åé常é«ï¼å¹¶ä¸æé«äºå¼åè çå¼åæçï¼ä½æç¸ä¿¡é¡¹ç®å¼åçé 置工ä½å·²ç»æ¶èäºä¸å°ç²¾åï¼å°½ç®¡å¤§é¨åå¼åè é½æèªå·±çé 置模æ¿ï¼ä½é¿ä¹ 以æ¥å¯¹äºé¡¹ç®ä¸ä½¿ç¨çåç§å¤é¨åºççæ¬è¿ä»£ãçæ¬å级æ产ççææ¬åºè¯¥ä¹ä¸ä½ã
èå½æ们é¢å¯¹ä¸ä¸ªå¾®ä¿¡å°ç¨åºçå¼åéæ±æ¶ï¼æ们éè¦èèä»ä¹å¢ï¼å¾®ä¿¡å¢éæä¾äºå¼åè å·¥å ·ï¼å¹¶ä¸è§èäºå¼åæ åï¼å端常è§çHTMLãCSSåæäºå¾®ä¿¡èªå®ä¹çWXMLãWXSSï¼WXMLä¸å°½ç®¡å ¨é¨æ¯èªå®ä¹æ ç¾ï¼ä½å®æ¹ææ¡£ä¸é½ææç¡®ç使ç¨ä»ç»ï¼ç¸ä¿¡ä¸æåºè¯¥æ¯é常容æçï¼WXSSãJSONåJSæ件ä¸çåæ³ç¨æéå¶ï¼ä½æ´ä½ç¸å·®ä¸å¤ãå¨ç»ä¸äºè¿äºæ åä¹åï¼ä½ä¸ºä¸ä¸ªå¼åè ï¼ä½ ä¼åç°ï¼èªå·±åªè¦ä¸æ³¨åç¨åºå°±å¯ä»¥äºï¼
å½éè¦è°ç¨å端æ¥å£æ¶ï¼è°ç¨å起请æ±API
å½éè¦ä¸ä¼ ä¸è½½æ¶ï¼è°ç¨ä¸ä¼ ä¸è½½API
å½éè¦æ°æ®ç¼åæ¶ï¼è°ç¨æ¬å°åå¨API
å¼å ¥å°å¾ã使ç¨ç½çãè°ç¨æ¯ä»ãè°ç¨æ«ç ççåè½é½å¯ä»¥ç´æ¥ä½¿ç¨
UIåºæ¹é¢ï¼æ¡æ¶èªç¶å¸¦æèªå®¶weuiåºå æ
并ä¸å¨ä½¿ç¨è¿äºAPIæ¶ï¼ä½ ä¸ç¨åå»é¡¾èæµè§å¨å ¼å®¹æ§ï¼ä¸ç¨æ å¿ç产ç¯å¢ä¸åºç°ä¸å¯é¢æçå¥å¦BUGï¼å¯è§å¾®ä¿¡å°ç¨åºçå¼åææ¬ç¡®å®ç¸æ¯ä»¥å¾çwebå¼åä½å¾å¤ã
ä¸ãè·åç³»ç»çº§æéçä¸åã
微信å°ç¨åºç¸å¯¹äºHTML5 webåºç¨è½è·å¾æ´å¤çç³»ç»æéï¼æ¯å¦ç½ç»éä¿¡ç¶æãæ°æ®ç¼åè½åçï¼è¿äºç³»ç»çº§æéé½å¯ä»¥å微信å°ç¨åºæ ç¼è¡æ¥ï¼ä¹å°±æ¯å®æ¹å®£ç§°çæ¥æNative Appçæµç æ§è½ï¼èè¿ä¸ç¹æ°å·§æ¯HTML5 webåºç¨ç»å¸¸è¢«è¯ç çå°æ¹ï¼è¿ä¹æ¯HTML5ç大å¤åºç¨åºæ¯è¢«å®ä½å¨ä¸å¡é»è¾ç®åãåè½åä¸çåå ã
åãåºç¨å¨ç产ç¯å¢çè¿è¡æµç 度ã
è¿æ¡æ 论对äºç¨æ·è¿æ¯å¼åè æ¥è¯´ï¼é½æ¯æç´è§çæåãé¿ä¹ 以æ¥ï¼å½HTML5åºç¨é¢å¯¹å¤æçä¸å¡é»è¾æè 丰å¯ç页é¢äº¤äºæ¶ï¼å®çä½éªæ»æ¯ä¸å°½äººæï¼éè¦ä¸æç对项ç®ä¼åæ¥æåç¨æ·ä½éªãä½æ¯ç±äºå¾®ä¿¡å°ç¨åºè¿è¡ç¯å¢ç¬ç«ï¼å°½ç®¡åæ ·ç¨htmlcssjså»å¼åï¼ä½é å微信ç解æå¨æç»æ¸²æåºæ¥çæ¯åçç»ä»¶çææï¼èªç¶ä½éªä¸å°ä¼æ´è¿ä¸æ¥ã请使ç¨ææº"æ«ä¸æ«"x
Webå端å¼å主è¦å¦åªäºï¼
å端ç¥è¯æ¯ä¸ç§å¾ç«çææ¯ï¼ä¸ç´å¨ç¼ç¨è¯è¨ä¸åååè ï¼èä¸éçæµè§å¨ææ¯ä¸æåå±ï¼è¿æä¼å¾å¤æ©å±çå¯è½æ§ï¼æ¯å¦3Då¯è§åï¼è°·æåå¸ä¸ä¸ªå ¨æ°çå¾å½¢å·¥å ·TensorFlow Graphicsï¼ç»å计ç®æºå¾å½¢å¦å计ç®æºè§è§ææ¯ï¼ä»¥æ çç£çæ¹å¼è§£å³å¤æ3Dè§è§ä»»å¡ï¼æ çè°·ææµè§å¨ä¹ä¼æ¯æ3Då¾åï¼å端ææ¯å®ç°å¨çº¿å¯è§åå¼åï¼åºäºwebglç3Dæ¡æ¶æthingjsï¼three.jsã
thingjsæ¯è¿ä¸¤å¹´æ°å ´ç3Dæ¡æ¶ï¼æ´å ç®åï¼å®ç½æ注åä¼æ å«éè¿~ç论ç¥è¯æ¯åºç¡ï¼å¯¹äºå端å¼åè æ¥è¯´ï¼ææ¯åºç¨æ¯è¿ä¸æ¥çéæ±ï¼æ以thingjsæä¾å è´¹3Dæºç å3D模ååºï¼è®©ä½ å¨é¡¹ç®å¼åè¿ç¨ä¸æä¸é£å©åï¼å¨å®æçè¿ç¨ä¸ä½ ä¼æ´å¥½å°å¸æ¶å端ææ¯ç¥è¯ï¼
å端ææ¯è¯å®ä¸æ¯æç»çç®çï¼åæä¸ä¸ªæä»·å¼çåä¸é¡¹ç®ï¼æè½è®©ä½ æ´ææå°±æï¼