ããjQuery
ããjQuery æ¯ä¸ä¸ªæ éä»ç»çåºãå®åä¸å·±ä¹å让跨æµè§å¨ç½ç«ä½¿ç¨æ为ç°å®ï¼åæ¶æ web 带å°ä»å¤©çä½ç½®ãWeb æ åå·²ç»è¢«å¤§å¤æ°æµè§å¨å¶é åé纳并çæ£å°å°éï¼jQuery æ¯å ¶ä¸çåå ä¹ä¸ãjQuery åºéä¼ç使å½æ¯âéè¿å¼æºè½¯ä»¶çå¼ååæ¯æï¼ä»¥åå¼å社åºçåä½ï¼æ¹åå¼æ¾ç webï¼è®©æ¯ä¸ä¸ªäººé½å¯ä»¥è®¿é®å®ãâ
ããjQuery æ¯ä¸çä¸æ常ç¨ç JavaScript åºï¼ææåºç¨ç¨åºé½åºè¯¥ä½¿ç¨å®ï¼é¤éä½ ä¸å¨æç¨åºåçå·¥ä½æçãå®ä½¿å¾ DOM éåãäºä»¶å¤çãå¨ç»ãAJAX å¨æææµè§å¨ä¸åå¾æ´ç®åãæ´å®¹æã
ããä½æ¶ä½¿ç¨ jQueryï¼ä¸ç´ä½¿ç¨ï¼é¤éä½ æ³ä½¿ç¨ä¸ä¸ªå Zepto çè½»é级çæ¬ã
ããGitHub:https://github.com/jquery/jquery/jquery
ããAngularJS
ããAngular æ¯æµè¡çä¼ä¸çº§æ¡æ¶ï¼è®¸å¤å¼å人åé½å¨ä½¿ç¨å®æ¥æ建åç»´æ¤å¤æç web åºç¨ç¨åºãAngular ç人æ°é常é«ï¼å æ¬ Dominoâs Pizza, Ryanair, iTunes Connect, PayPal Checkout, è°·æçä¼ä¸é½å¨ä½¿ç¨å®ãAngular æ¯ä¸ä¸ªç±è°·ææ¯æçå¼æºæ¡æ¶ãAngular èªç§°æ¯ HTML çä¸ä¸ªæ©å±ï¼ç¨æ¥æ建å¤æç web åºç¨ç¨åºãå¦å¤å¦æä½ çæ TypeScriptï¼ Angular 2å°±æ¯ç¨å®æ建çã
ããAngular æ¯ä¸ä¸ª MVC ç±»åçæ¡æ¶ãå®æä¾äºæ¨¡ååè§å¾ä¹é´çååæ°æ®ç»å®ã该æ°æ®ç»å®å 许æ¯å½æ°æ®æ¹åæ¶ï¼ä¸¤è¾¹èªå¨æ´æ°ã å®ä½¿ä½ è½å¤æ建å¯å¤ç¨çè§å¾ç»ä»¶ãå®æä¾äºä¸ä¸ªæå¡æ¡æ¶ï¼ä½¿å¾å端-å端æå¡éä¿¡æ´å®¹æãæåï¼å®åªæ¯æ®éç JavaScriptã
ããä½æ¶ä½¿ç¨ AngularJSï¼å½ä½ æ£å¨æ建ä¸ä¸ªå¤æç web å端åºç¨ç¨åºï¼åæ¶éè¦ä¸ä¸ªæ¨¡ååçæ¡æ¶æ¥å¤çä¸åæ¶ã
ããGitHub:https://github.com/angular/angular.js
ããReact
ããReact æ¯ä»å¹´æå欢è¿ç JavaScript 项ç®ï¼æ¯ä¸ªäººé½ä¼¼ä¹å¨è°è®º ReactJSãå»å¹´æåå çæ¯ä¸ä¸ªä¼è®®ï¼è³å°æ好å 个议é¢æ¯å ³äº React åå家æçå ¶ä»åºï¼Flux, Reduxï¼çãReact æ¯å¼æºè½¯ä»¶ï¼ä¸»è¦ç± Facebook å¼åï¼å ¶ä»å¤§åç§æå ¬å¸ä¹æè´¡ç®ãReact èªç§°æ¯ä¸ä¸ªç¨äºæ建ç¨æ·çé¢ç JavaScript åºã
ããReact 主è¦æ¯ MVC ä¸ç Vãå®çéç¹å®å ¨å¨ MVC ç V é¨åï¼å¿½è§åºç¨ç¨åºæ¶æçå ¶ä½é¨åãå®æä¾äºä¸ä¸ªç»ä»¶å±ï¼ä½¿å¾å建 UI å ç´ ï¼ç»åå ç´ åå¾æ´å®¹æãå®ä½¿ç¨èæ DOMï¼å æ¤ä¼åäºæ¸²æï¼ä¸å è®¸ä» node.js 渲æ Reactãæ¤å¤ï¼å®å®ç°äºååååºçæ°æ®æµï¼å æ¤æ¯å ¶ä»æ¡æ¶æ´å®¹æç解å使ç¨ã
ããä½ä¸º MVC ä¸ç Vï¼å¾å¤é¡¹ç®å° React ç»å Angular æ Ember è¿æ ·çæ¡æ¶ä½¿ç¨ã
ããä½æ¶ä½¿ç¨ Reactï¼å½ä½ æ³è¦ä¸ä¸ªå¼ºå¤§çè§å¾å±ï¼ä½ä¸éè¦å¨åºç¨ç¨åºçå ¶ä½é¨å使ç¨ä¸ä¸ªå¤æçæ¡æ¶ï¼æè ä½ å¨ AngularãBackbone æ Ember åºç¨ä¸éè¦ä¸ä¸ªè§å¾å±æ¶ãå½ä½ æ£è¯å¾å»ºç«ä¸ä¸ªåæ web æ¡æ¶æ¶ã
ããGitHub:https://github.com/facebook/react
ããBackbone
ããBackbone æ¯ä¸ä¸ªèåçç®ææ¡æ¶ï¼éåå个 JavaScript æ件ãBackbone å·²ç»åå¨æä¸æ®µæ¶é´äºï¼æ¯ä»¥ CoffeeScript å Underscore é»åç Jeremy Ashkenas æå¼åçã对äºä¸äºä¸ºå°å web åºç¨å¯»æ¾ä¸ä¸ªç»æç®åçæ¡æ¶ï¼èä¸æ³å¼å ¥å¦ Angular æ Ember è¿äºå¤§åæ¡æ¶çå¢éï¼Backbone ç¹å«å欢è¿ã
ããBackbone æä¾ä¸ä¸ªå®æ´ç MVC æ¡æ¶ä»¥åè·¯ç±ã模åå 许é®-å¼ç»å®åæ°æ®ååçäºä»¶å¤çã模åï¼åéåï¼å¯ä»¥è¿æ¥å°RESTful APIãè§å¾å ·æ声æå¼äºä»¶å¤çï¼è·¯ç±å¨å¤ç URL åç¶æ管çä¸åçå¾åºè²ãå®å å«ä½ å建ä¸ä¸ªå页é¢åºç¨ç¨åºæéè¦çä¸åï¼ä¸æ²¡ææä¾å¤ªå¤ä¸è¥¿ï¼æ²¡æä¸å¿ è¦çå¤æ度ã
ããä½æ¶ä½¿ç¨ Backboneï¼Backbone æ¯æå建ç®å web åºç¨ç¨åºçé¦éæ¡æ¶ã
ããGitHub:https://github.com/jashkenas/backbone/
ããEmber
ããEmber æ¯ä¸ä¸ªåºæ§ç web åºç¨ç¨åºæ¡æ¶ï¼å ³æ³¨ç¨åºåçå·¥ä½æçãEmber æ¯è¾æµè¡ï¼å®çæ ¸å¿å¢éå æ¬åæ¾æ¯ Ruby on Rails å jQuery æ ¸å¿å¢éæåç Yehuda Katz çèªæ人ãEmber èªç§°æ¯âä¸ä¸ªç¨äºå建大è§æ¨¡ web åºç¨ç¨åºçæ¡æ¶âï¼ä¸ä¸æµªè´¹ä½ çæ¶é´ãå®å¾åºæ§ï¼ä¸ºä½ æä¾äºå¾å¤éæ©ã
ããEmber ä¹æ¯ä¸ä¸ª MVC æ¡æ¶ãå®å æ¬ä¸ä¸ªæ¨¡æ¿åè§å¾å¼æï¼å½æ°æ®ååæ¶èªå¨æ´æ°ï¼å°±å Angularï¼Backbone å React ä¸æ ·ãå®å å« webç»ä»¶ çææ³ï¼è®©ä½ 使ç¨èªå·±æ ç¾æ©å± HTMLï¼å°±å Angular ä¸æ ·ï¼ãå®ä¹æä¸ä¸ªç¥éå¦ä½ä¸ä½ ç RESTful API ä¸èµ·å·¥ä½çè·¯ç±å模åå¼æã
ããä½æ¶ä½¿ç¨ Emberï¼å½ä½ åªéè¦ä¸ä¸ªå¯ä»¥è¿è¡çæ¡æ¶æ¶ãå½ä½ å 为é¢ç®ç´§å¼ æå·¥æå¾çèä¸éè¦çµæ´»æ§æ¶ï¼è¯·ä½¿ç¨ Emberã
ããGitHub:https://github.com/emberjs/ember.js
ããUnderscore &lodash
ããææ¶å JavaScript å ç½®çåè½å¯¼è´ç¨åºåçæç并ä¸é«ãæ»æ¯ç¼ºå°ä¸ä¸ªå·¥å ·å½æ°æä¸ä¸ªå¯ä»¥ç®å代ç çå½æ°ãUnderscoreï¼å lodashï¼æ¯ä¸ä¸ª JavaScript åºï¼å®æä¾äºä¸æ´å¥å·¥å ·å½æ°ï¼ä¸éè¦å¯¹å ç½® JavaScript 对象æè¡¥ä¸ã两个åºåæä¾è¶ è¿ 100 个åè½å©æåå ¶ä»ä¸ç¨åè½ï¼å æ¬ mapï¼filterï¼invokeï¼reduceï¼template, throttle, bind, extend, pick, clone çæ´å¤çå½æ°ã
ããä½æ¶ä½¿ç¨ Underscoreï¼å½ä½ éè¦ä¸ä¸ªåç¬ç JavaScript æ件ï¼æ¥ç«å³æåç¨åºåçå·¥ä½æçæ¶ã
ããGitHub:https://github.com/jashkenas/underscore
ããä½æ¶ä½¿ç¨ lodashï¼å½ä½ éè¦æ¨¡åååæ§è½ç¨å¼ºçæ¬ç Underscoreï¼åæ¶æ´å®¹æå°æ¯æ AMD å社åºæ件æ¶ã
ããLodashGitHub:https://github.com/lodash/lodash
ããD3.js
ããæ°æ®å¯è§ååå¾è¡¨æ¯ä¸ç§å¸¸è§ç web åºç¨ç¨åºéæ±ãD3.js æ¯ä»»ä½æ°æ®æä½åå¯è§åçäºå®æ åãå®æ¯ GitHubä¸æå欢è¿ç项ç®ä¹ä¸ï¼è¢«æ°ä»¥ç¾è®¡çç»ç»ä½¿ç¨ã大éçå¾å½¢ï¼å¾è¡¨åå¯è§ååºå¨ D3 ä¸æ建ã
ããD3 å è®¸ä½ æä½ä»»ä½æ¥æºçæ°æ®ææ¡£ï¼è½¬æ¢æ DOM æ/å SVG æ/å CSSãD3 å ³æ³¨ç°ä»£ web æ åï¼ç¡®ä¿ä½ ä¸åä»»ä½ä¸ææ ¼å¼ç约æï¼æ¯å¦ Flash å Silverlightã
ããä½æ¶ä½¿ç¨ D3.jsï¼å¨ä½ éè¦ä»»ä½å½¢å¼çå¯è§åçæ¶åã
ããGitHub:https://github.com/mbostock/d3
ããBabylon.js
ããæ³è¦æ建å®å ¨ç¬¦åç°ä»£ web æ åä¸è·¨æµè§å¨çè§é¢æ¸¸æåï¼çç Babylon.jsï¼å®æ¯åºäº WebGL å JavaScript ç 3d 游æå¼æãä½ å¯ä»¥å建令人é¾ä»¥ç½®ä¿¡çå å«ç©çãé³é¢åç²åç³»ç»çççé«è´¨é游æã
ããä½æ¶ä½¿ç¨ Babylon.jsï¼æ 论ä½æ¶ï¼åªè¦ä½ æ³åä¸ä¸ªè§é¢æ¸¸ææä»»ä½ç±»åçå¤æä¸ç»´åºæ¯ï¼é½è½ç¨ä¸ã
ããGitHub:https://github.com/BabylonJS/Babylon.js
ããThree.js
ããæ³è¦æ建ä¸ä¸ª 3D å¯è§ååºæ¯ï¼ä½ä¸éè¦ä¸ä¸ªå®æ´ç游æå¼æï¼three.js æä¾äºä¸ä¸ªè½»é级ç 3d åºï¼å 许渲æ 3d 为 HTML5 ç»å¸ãSVG å WebGLãå®æ¯ç¸å½ç®åçåºï¼å¨ three.js çå±ç¤ºéææ°ç¾ä¸ªä¼ç¾çä¾åã
ããä½æ¶ä½¿ç¨Three.jsï¼å½ä½ éè¦ä¸ä¸ªè½è¾åºä¸º Canvas çç®åç 3D å¯è§ååºæ¯æ¶ã
ããGitHub:https://github.com/mrdoob/three.js/
ããMocha& Chai
ããJavaScript å¨å¾é¿ä¸æ®µæ¶é´å æ¯é常ç¦äººçãæµè¯ä»»ä½ä»£ç é常é½è¢«è®¤ä¸ºæ¯æ¼äººçï¼ä½å®å´æ¯æ¯ä¸ªå¼å人åé½åºè¯¥åçäºæ ãæ¯ä¸ªå¼å人åä¼¼ä¹æ»æ¯èè§å忽ç¥å®ï¼èä¸æµè¯ä»ä»¬ç代ç ãè¿ä¸ªæ¼äººçä¸è¥¿æä¸ä¸ªè§£å³åæ³ï¼é£å°±æ¯ Mocha å Chaiã两个åºçååé½æ¥èªç¾å³çç饮æï¼å®ä»¬é½è½å¸®ä½ æµè¯ä»£ç ï¼ä½æ¹å¼ä¸åã
ããMocha æ¯ä¸ä¸ª JavaScript æµè¯æ¡æ¶ï¼ä½¿å¾ä½ å¨ node 模ååæµè§å¨ app ä¸æµè¯å¼æ¥ä»£ç åå¾æ´å®¹æãMocha æµè¯å¯ä»¥ä¸²èè¿è¡ï¼å¯ä»¥ä¸ºæ£ç¡®çæµè¯ç¨ä¾æ·»å å¼å¸¸è·è¸ªçè½åã
ããChai æ¯ä¸ä¸ªè¡ä¸ºé©±å¨å¼å/æµè¯é©±å¨å¼åçæè¨åºï¼å¯ä»¥æé Mocha 使ç¨ãå®å¯ä»¥æä½ éè¦æµè¯çä¸è¥¿ç¨å¯è¯»çé£æ ¼ç®åå°è¡¨è¾¾åºæ¥ã
ããä½æ¶ä½¿ç¨ Mocha & Chaiï¼æ»æ¯ï¼è¯·æµè¯ä½ ç代ç ï¼è®©ä¸çåå¾æ´ç¾å¥½ã
ããChai GitHub:https://github.com/chaijs/chai
ããKarma
ããæ¢ç¶å·²ç»æ Mocha å Chai å å«å¨è¿ä¸ªå表ä¸äºï¼å¦æä¸å å«ç¨æ¥è¿è¡è¿äºæµè¯æ设置æç»éææµè¯çæµè¯è¿è¡å¨ï¼é£å°æ¯ä¸å®æ´çãKarma æ¯ä¸æ¬¾æ¨å¨å¸®å©ä½ å¨ä¸åçæµè§å¨ä¸èªå¨è¿è¡æµè¯çå·¥å ·ãå®å¯ä»¥å¸®å©ä½ å¨æææµè§å¨ä¸è¿è¡ Mocha å Chai æµè¯ã
ããä¸æ¯æ¯ä¸ªæµè§å¨é½è¿è¡å¨ææå¹³å°ï¼ä½å¹¸è¿çæ¯å¯ä»¥ä½¿ç¨ä¸äºå è´¹å·¥å ·æ¥æµè¯å ¶ä»æµè§å¨ï¼çç Browser Screenshotsãå¦æä½ æ£å¨ OS X ä¸è¿è¡ä»£ç ï¼æ³æµè¯ Edge æ IEï¼å¯ä»¥ å è´¹ 使ç¨è¿ä¸ªå·¥å ·ã
ããä½æ¶ä½¿ç¨ Karmaï¼å½ä½ çåºç¨ç¨åºæä¸ä¸ªå®åçæµè¯å¥ä»¶ï¼å¹¶å¸æç¡®ä¿æµè¯å¨æææµè§å¨ä¸éè¿æ¶ã
ããGitHub:https://github.com/karma-runner/karma
ããPhantomJS
ããè¿è¡å®æ´çæµè§å¨æ¥æµè¯ä½ ç代ç æ¯è¾èå åå CPUãPhantomJS å è®¸ä½ è¿è¡ä¸ä¸ªè½»éç WebKit ââ Safari åChromeï¼ç°å¨æ¯ Blinkï¼åå°ç渲æå¼æãå®å è®¸ä½ éè¿ JavaScript API è¿è¡æµè¯ï¼æææªå¾ï¼çæ§ç½ç»åèªå¨æµè§é¡µé¢ã
ããä½æ¶ä½¿ç¨ PhantomJS ?å½ä½ éè¦è¿è¡æ´å¤çæµè¯ï¼æä½é¡µé¢åçè§ç½ç»è¯·æ±æ¶ã
ããGitHub:https://github.com/ariya/phantomjs
ããGrunt & Gulp
ãã为ç产ç¯å¢æ建ç½ç«ï¼é常æ¶åå°æé«æ§è½çä»»å¡ï¼æ¯å¦ JavaScript å CSS çåç¼©ï¼ CoffeeScript/TypeScript çç¼è¯ï¼åå æµè¯ï¼è¯æ³æ£æ¥ãä¹è®¸ä½ å·²ç»æä¸ä¸ªä¸ºç½ç«åå¸å°ç产ç¯å¢çå·¥å ·é¾ï¼å¦æ没æï¼ä½ å¯ä»¥ä½¿ç¨ä»»å¡è¿è¡å¨ï¼æ¯å¦ Grunt æGulpã两è é½æ大éå ³äºç½ç«çä»»ä½è½¬æ¢çæ件ï¼ä¸ºåå¸å°ç产ç¯å¢å好åå¤ã
ããä½æ¶ä½¿ç¨ Gruntï¼å½ä½ å欢åé ç½®æ件åæ¶ä¸ä»æä½ çä»»å¡è¿è¡å¨çæä¸é´æ件æ¶ã
ããGrunt GitHub:https://github.com/gruntjs/grunt
ããä½æ¶ä½¿ç¨ Gulpï¼å½ä½ å欢å¨é ç½®ä¸å代ç åå©ç¨ node.js çæµåè½æ¥å å¿«ä»»å¡æ§è¡æ¶ã
ããGulp GitHub:https://github.com/gulpjs/gulp
ããBabel
ããJavaScript è¯è¨æ£å¨è¿ éåå±ãECMAScript2015 äºå»å¹´å¤å¤©åå¸ï¼å®ç许å¤æ°ç¹æ§å¨ææ°çæµè§å¨ä¸å®ç°äºãå¦æä½ æ³çç ECMAScript 2015 çå ¼å®¹æ§ï¼ä½ å¯ä»¥ççæ¥èª @kangax çè¿ä¸ª 表ãä½ ä¼æ³¨æå°ï¼ææ°çæ¬ç Edgeï¼Firefox å Chrome å·²ç»å ä¹å®å ¨å ¼å®¹äºã
ããæ们并ä¸æ¯çæ´»å¨ä¸ä¸ªå®ç¾çä¸çãä½ä¸ºå¼å人åï¼æ们éè¦ç»§ç»æ¯ææ§çæµè§å¨ï¼å®ä»¬æ²¡æææ°æ好ç JavaScript ç¹æ§ãæ们è¦æ¨è¿ web åæ¹åæ们ç代ç åºãBabel æ¯ä¸ä¸ª JavaScript ç¼è¯å¨ï¼ç¨äºæææ°ç JavaScript æ åç¼è¯æå¯å¨ IE9 çèæµè§å¨ä¸è¿è¡çå ¼å®¹ES5ç JavaScriptãå®æä¸äºæ件ï¼ä½¿å¾ React å¼åæ´å®¹æï¼çè³å¯ä»¥ä½¿ç¨ä¸äºä¸å±äºè¯¥è§èçç¹æ§ï¼ä¾å¦ES7ï¼ã
ããä½æ¶ä½¿ç¨ Babelï¼å½ä½ æ³ä½¿ç¨æ°ç JavaScript è¯è¨ç¹æ§ï¼åæ¶è¿è¦æ¯æèçæ¬æµè§å¨æ¶ã
ããGitHub:https://github.com/babel/babel
ããå¼èªï¼
ããæä½³ç JavaScript å端æ¡æ¶ãåºåå·¥å ·