最全web前端资料整理

叁歲伎倆 2022-07-17 03:49 246阅读 0赞

# Awesome JavaScript #

[JavaScript][]是一个仅在一周就被发明出来的小玩意， 所以，它有着有多的缺陷，即使是这样，它已经存在了20年，全世界几乎每台电脑都至少装有一个JavaScript解释器， 况且今天这个当初的小玩意的目标是编写大型的企业应用。如果你对JavaScript的理解仅限于DOM操纵，页面动画，jQuery等等， 本列表将为你展现JavaScript的更多的令人震撼的功能。

## 专题列表 ##

*  [React相关资源][React]
 *  [AngularJS相关资源][AngularJS]
 *  [JavaScript语法解析][JavaScript 1]

## 基础 ##

### 开发准备 ###

1.  安装 [Node.js][]
2.  安装 [PhantomJS - 没有界面的浏览器][PhantomJS -]
3.  安装 [Python27][] (Node有些模块对Python有依赖)
4.  安装 [Git][]
5.  编辑器 [WebStorm][] 或 [Visual Studio Code][]

### 推荐的书 ###

*  [JavaScript DOM编程艺术][JavaScript DOM]
 *  [JavaScript高级程序设计（第3版）][JavaScript_3]
 *  [JavaScript语言精粹][JavaScript 2]
 *  [Speaking JavaScript][]
 *  [You Don't Konw JS][You Don_t Konw JS]
 *  JavaScript权威指南
 *  Eloquent JavaScript
 *  JavaScript忍者禁术
 *  [Superhero.js - JS学习资料集][Superhero.js - JS]
 *  [阮一峰：JavaScript标准参考教程][JavaScript 3]

### 源代码阅读 ###

*  [Github: Backbone][Github_ Backbone]
 *  [Github: Underscore][Github_ Underscore]
 *  [Github: Immutable][Github_ Immutable]

### 敏捷方法与工具 ###

1.  持续集成与部署
    
     *  [Continuous Delivery vs Continuous Deployment vs Continuous Integration - Wait huh?][Continuous Delivery vs Continuous Deployment vs Continuous Integration - Wait huh]
     *  [Jenkins：开源的可扩展持续集成服务器][Jenkins]
     *  [CircleCI：Ship better code, faster.][CircleCI_Ship better code_ faster.]
     *  [Travis CI: 一个针对开源社区的持续集成托管服务][Travis CI_]
2.  敏捷相关的几个概念
    
     *  Scrum: [Scrum Guide][]
     *  TDD: Test-Driven Development by Example (book)
     *  Pair Programming

### Web安全 ###

1.  [跨站脚本攻击 - XSS][- XSS]
2.  [跨站请求伪造 - CSRF][- CSRF]
3.  [SQL注入][SQL]
4.  [拒绝服务 - DDoS][- DDoS]
5.  [An Introduction to Content Security Policy][]
6.  More: [Web Application Security Testing Cheat Sheet][]

### JavaScript ###

核心基础语法点

*  [this][]
 *  [闭包][Link 1]

核心概念

1.  [Functional Programming 函数式编程][Functional Programming]
2.  [Prototyped-based OOP 基于原型的面向对象编程][Functional Programming]
3.  [Async/Concurrent Programming 异步/并发编程][Functional Programming]

关键知识点

*  [正则表达式][Link 2]

Other topics

1.  [日期和时间字符串][Link 3]
2.  [处理Cookies][Cookies]
3.  [Promise][]
    
     *  Github: [bluebird][]
     *  Github: [q][]
4.  [JavaScript与有限状态机][JavaScript 4]
5.  [Fetch API][]
    
     *  Github: [fetch polyfill][]
6.  [什么是shims和polyfills][shims_polyfills]
7.  [严格模式][Link 4]
8.  [ES5增加的新特性][ES5]
9.  [ES6基本介绍][ES6]
10. [JavaScript的模块化进程][JavaScript 5]
11. [Command Line API参考手册][Command Line API]

### ECMAScript 2015 (ES6) ###

阅读材料

1.  [Understanding ES6][] by Nicholas C.Zakas
2.  [Exploring ES6][] by Axel Rauschmayer

语法转换 ES6 to ES5

1.  [Babel][] - 推荐！杀手级特性"human-readable output"
2.  [Traceur][]
3.  [Babelify][]: 将`babel`引入到Gulp, Grunt, npm run等构建过程
4.  [A Brief History of ES6 Tooling][]

入门

1.  [Learn ES2015][]
2.  [ES6 - New features Overview & Comparison][ES6 - New features Overview _ Comparison]
3.  [ES6 Overview in 350 Bullet Points][]
4.  百度EFE：[使用ES6进行开发的思考][ES6 1]
5.  [ES6 Features][]

其他

1.  [ES5/ES6 compatibility table][ES5_ES6 compatibility table]
2.  [ES6 Cheatsheet][]

## Node.js ##

### 图书 ###

1.  [Node.js In Action][]
2.  [深入浅出Node.js][Node.js 1]

### 开发实践 ###

基础知识

1.  [NODE\_PATH][NODE_PATH]

垃圾回收

1.  [A tour of V8: Garbage Collection][A tour of V8_ Garbage Collection] | [CHN][]
2.  [Top Node.js metrics to watch][]
3.  [Goole V8的垃圾回收][Goole V8]
4.  [浅谈V8引擎中的垃圾回首机制][V8]

性能对比

1.  [Performance Comparison Between Node.js and Java EE][]
2.  [Java EE threads vs Node.js - which is better for concurrent data processing operations][]
3.  [What Makes Node.js Faster Than Java][]

### 最佳实践 ###

1.  [Node.js最佳实践：第一部分][Node.js 2]
2.  [Node.js最佳实践：第二部分][Node.js 3]

### 风格指南 ###

1.  [Node.js风格指南（中文）][Node.js 4]

### 常用的Node Web框架 ###

1.  传统的Node框架：[Express][]
2.  下一代Node.js框架：[Koa][]
3.  专注于构建可重用的应用逻辑：[Hapi][]
4.  [其他Node框架][Node]

### 常用NPM工具模块 ###

> 感兴趣的可以参考NPM中被[依赖次数最多的模块][Link 5]列表

1.  JS工具函数库：[lodash][]
2.  JavaScript编写同步代码辅助工具包：[async][]
3.  精简版HTTP请求客户端：[request][]
4.  配置管理工具包：[nconf][]
5.  基于生成器的控制流管理工具包：[co][]
6.  轻量级模块调试工具：[debug][]
7.  构建请求: [superagent][]
8.  辅助测试工具：[Sinon.js][]

### 调试、性能与安全 ###

1.  [Node.js的代码调试和性能调优][Node.js 5]
2.  [Node.js安全清单][Node.js 6]
3.  [Debug with Source Maps][]
4.  雅虎: [网站性能优化建议][Link 6]

## 开发工具和库 ##

对于前端开发而言，如果你需要查找一些库或框架来帮你解决问题， 下面两个网站可能会帮助你选择：

1.  [JavaScripting.com][]
2.  [JavaScriptOO][]

借助上面的两个网站，你能够迅速的找到相关的工具。你还可以参考这篇文章来了解[JavaScript必备的工具和库][JavaScript 6]。 下面会继续列举一些常用的工具、库、或框架：

1.  版本控制
    
     *  [Git][] | [try git][]
     *  [Github][]
     *  [SVN][]
     *  [Read more...][]
2.  自动构建
    
     *  [Gulp][] | [Introduction][]
     *  [Grunt][] | [Introduction][Introduction 1]
3.  代码质量
    
     *  [JSLint][], by Dogulas Crockford
     *  [JSHint][], by Anton Kovalyov
     *  [ESLint][], by Nicholas Zaks
     *  [JSCS][]
     *  [A Comparision of JavaScript Linting Tools][]
4.  前端工具
    
     *  浏览器特性检测工具：[Modernizr][]
     *  高级JavaScript调试工具库：[debug util][]
5.  文档生成
    
     *  [JSDoc][]
     *  [YUIDoc][]
     *  [Read more...][Read more... 1]
6.  工具库
    
     *  提供大量工具函数：[Underscore.js][]
     *  工具函数库：[Lo-Dash][]
     *  正则表达式库：[XRegExp][]
     *  图形化解释正则表达式：[RegExper][]
     *  代码压缩丑化：[UglifyJS][] and [YUI Compressor][]
     *  浮点数工具库：[Accounting.js][]
     *  日期时间工具库：[Moment.js][] | [Tutorial][]
7.  UI框架
    
     *  [Bootstrap - 最常用的UI框架][Bootstrap - _UI]
     *  [Semantic UI - Human-friendly][]
     *  [Foundation - Most advanced responsive FE framework][]
8.  前端框架
    
     *  [React - UI层库，组件驱动开发][React - UI]
     *  [AngularJS - MVVM][]
     *  [Polymer - web components][]
     *  [Vue.js][]
9.  可视化库
    
     *  [D3.js - Data Driven Documents][]
     *  [ECharts - 百度可视化工具包][ECharts -]
     *  [HighCharts - 注重交互][HighCharts -]
     *  [Chart.js - Simple, clean and engaging charts][Chart.js - Simple_ clean and engaging charts]
     *  [Angular Chart - AngularJS指令封装版Chart.js][Angular Chart - AngularJS_Chart.js]
     *  [Epoch - for real-time visualizations][]
10. 模块系统和包管理器
    
     *  模块系统
        
         *  CommonJS (Node, 同步加载)
         *  AMD：[RequireJS][](浏览器，异步加载)
         *  [ES6 Module][]
         *  [A primer on module management][]
     *  包管理器
        
         *  [npm][](Node包管理器)
         *  [Bower][]（主要是前端资源包）
         *  [Browserify][](将Npm包转为浏览器友好的) | [Intro][]
11. 单元测试
    
     *  [Mocha][]
     *  [Jasmine][] | [Intro][Intro 1]
     *  [QUnit][] | [Intro][Intro 2]
     *  Tape
     *  Jest - React组件单元测试
     *  Karma
     *  跨平台多浏览器测试
        
         *  [BrowserStack][]
         *  [Sauce Labs][] | [Guide][]
12. 代码衡量
    
    High code coverage means lower chances for your program to contains bugs.
    
     *  [Istanbul][] - 衡量测试覆盖率
     *  [Plato][] - 可视化代码复杂度
     *  [An article on code metrics][]
13. 实时应用
    
     *  [Meteor][]
     *  [SocketStream][]
     *  [Socket.io][]
     *  [构建基于Node.js的聊天室][Node.js 7]
14. 单页应用SAP
    
     *  [AngularJS][AngularJS - MVVM]
     *  [Backbone][]
     *  [Ember][]
     *  [React][React - UI]
     *  [KnockoutJS][]
15. 函数式JavaScript
    
     *  [UnderscoreJS][Underscore.js]
     *  [Lodash][lodash]
     *  [An introduction to functional programming in JavaScript][]
16. 模版引擎
    
     *  [Handlebars][] | [Guide][Guide 1]
     *  [Mustache][] | [Guide][Guide 2]
     *  [Jade][]
17. 前端资源CDN服务：
    
     *  [BootCDN][]
     *  [360前端资源CDN服务][360_CDN]
     *  [七牛前端资源CDN服务][CDN]

## Future ##

很遗憾，这里只能列举一些常用的资料，但幸运的是，互联网极大便利了我们获取信息的方式， 下面几个链接或许是你正在寻找的：

1.  [Frontend Rescue][] - 帮助你获取前端资源
2.  [JSbooks][] - 帮助你寻找和JS相关的书
3.  [Cooper Press 订阅][Cooper Press]

### Other links ###

1.  [JavaScript Training Sucks][]
2.  [The Two Pillars of JavaScript: part one - how to escape the 7th circle of hell][The Two Pillars of JavaScript_ part one - how to escape the 7th circle of hell]

[JavaScript]: http://javascript.crockford.com/zh/javascript.html
[React]: https://github.com/didiaohu/awesome-javascript/blob/master/sections/React
[AngularJS]: https://github.com/didiaohu/awesome-javascript/blob/master/sections/Angular
[JavaScript 1]: https://github.com/didiaohu/awesome-javascript/blob/master/sections/Ast
[Node.js]: https://nodejs.org/en/
[PhantomJS -]: http://phantomjs.org/
[Python27]: https://www.python.org/downloads/
[Git]: https://git-scm.com/
[WebStorm]: https://www.jetbrains.com/webstorm/
[Visual Studio Code]: https://code.visualstudio.com/
[JavaScript DOM]: http://www.ituring.com.cn/book/42
[JavaScript_3]: http://book.douban.com/subject/10546125/
[JavaScript 2]: http://book.douban.com/subject/11874748/
[Speaking JavaScript]: http://speakingjs.com/es5/index.html
[You Don_t Konw JS]: https://github.com/getify/You-Dont-Know-JS
[Superhero.js - JS]: http://superherojs.com/
[JavaScript 3]: http://javascript.ruanyifeng.com/
[Github_ Backbone]: https://github.com/jashkenas/backbone
[Github_ Underscore]: https://github.com/jashkenas/underscore
[Github_ Immutable]: https://facebook.github.io/immutable-js/
[Continuous Delivery vs Continuous Deployment vs Continuous Integration - Wait huh]: http://blog.assembla.com/assemblablog/tabid/12618/bid/92411/Continuous-Delivery-vs-Continuous-Deployment-vs-Continuous-Integration-Wait-huh.aspx
[Jenkins]: http://jenkins-ci.org/
[CircleCI_Ship better code_ faster.]: https://circleci.com/
[Travis CI_]: https://travis-ci.org/
[Scrum Guide]: http://www.scrumguides.org/
[- XSS]: http://www.cnblogs.com/TankXiao/archive/2012/03/21/2337194.html
[- CSRF]: https://www.wikiwand.com/zh-cn/%E8%B7%A8%E7%AB%99%E8%AF%B7%E6%B1%82%E4%BC%AA%E9%80%A0
[SQL]: https://technet.microsoft.com/zh-cn/library/ms161953.aspx
[- DDoS]: https://www.wikiwand.com/zh-cn/%E9%98%BB%E6%96%B7%E6%9C%8D%E5%8B%99%E6%94%BB%E6%93%8A
[An Introduction to Content Security Policy]: http://www.html5rocks.com/en/tutorials/security/content-security-policy
[Web Application Security Testing Cheat Sheet]: https://www.owasp.org/index.php/Web_Application_Security_Testing_Cheat_Sheet
[this]: http://www.ibm.com/developerworks/cn/web/1207_wangqf_jsthis/index.html
[Link 1]: http://wwsun.github.io/posts/javascript-closure.html
[Functional Programming]: https://github.com/didiaohu/awesome-javascript/blob/master
[Link 2]: http://qntm.org/files/re/re.html
[Link 3]: https://msdn.microsoft.com/library/ff743760
[Cookies]: http://www.sitepoint.com/how-to-deal-with-cookies-in-javascript/
[Promise]: http://javascript.ruanyifeng.com/advanced/promise.html
[bluebird]: https://github.com/petkaantonov/bluebird
[q]: https://github.com/kriskowal/q
[JavaScript 4]: http://javascript.ruanyifeng.com/advanced/fsm.html
[Fetch API]: http://www.sitepoint.com/introduction-to-the-fetch-api/
[fetch polyfill]: https://github.com/github/fetch
[shims_polyfills]: http://speakingjs.com/es5/ch30.html#shim_vs_polyfill
[Link 4]: http://javascript.ruanyifeng.com/advanced/strict.html
[ES5]: http://speakingjs.com/es5/ch25.html
[ES6]: http://javascript.ruanyifeng.com/advanced/ecmascript6.html
[JavaScript 5]: http://www.cnblogs.com/lvdabao/p/js-modules-develop.html
[Command Line API]: https://developers.google.com/web/tools/chrome-devtools/debug/command-line/command-line-reference?hl=en
[Understanding ES6]: https://leanpub.com/understandinges6/read/
[Exploring ES6]: http://exploringjs.com/es6/
[Babel]: https://babeljs.io/
[Traceur]: https://github.com/google/traceur-compiler
[Babelify]: https://github.com/babel/babelify
[A Brief History of ES6 Tooling]: https://ponyfoo.com/articles/a-brief-history-of-es6-tooling
[Learn ES2015]: https://babeljs.io/docs/learn-es2015/
[ES6 - New features Overview _ Comparison]: http://es6-features.org/
[ES6 Overview in 350 Bullet Points]: https://ponyfoo.com/articles/es6
[ES6 1]: http://efe.baidu.com/blog/es6-develop-overview/
[ES6 Features]: http://www.sitepoint.com/20-docs-guides-front-end-developers/
[ES5_ES6 compatibility table]: http://kangax.github.io/compat-table/es6/
[ES6 Cheatsheet]: http://help.wtf/es6
[Node.js In Action]: http://book.douban.com/subject/25870705/
[Node.js 1]: http://book.douban.com/subject/25768396/
[NODE_PATH]: http://docs.spmjs.org/doc/environment#%E8%AE%BE%E7%BD%AE-path-%E5%92%8C-node-path
[A tour of V8_ Garbage Collection]: http://www.jayconrod.com/posts/55/a-tour-of-v8-garbage-collection
[CHN]: http://newhtml.net/v8-garbage-collection/
[Top Node.js metrics to watch]: https://www.oreilly.com/ideas/top-nodejs-metrics-to-watch
[Goole V8]: http://www.infoq.com/cn/news/2015/08/Google-V8
[V8]: http://segmentfault.com/a/1190000000440270
[Performance Comparison Between Node.js and Java EE]: https://dzone.com/articles/performance-comparison-between
[Java EE threads vs Node.js - which is better for concurrent data processing operations]: http://bijoor.me/2013/06/09/java-ee-threads-vs-node-js-which-is-better-for-concurrent-data-processing-operations/
[What Makes Node.js Faster Than Java]: https://strongloop.com/strongblog/node-js-is-faster-than-java/
[Node.js 2]: http://wwsun.me/posts/node-best-practices.html
[Node.js 3]: http://wwsun.github.io/posts/node-best-practices-2.html
[Node.js 4]: https://github.com/wwsun/node-style-guide
[Express]: http://expressjs.com/
[Koa]: http://koajs.com/
[Hapi]: http://hapijs.com/
[Node]: http://nodeframework.com/index.html#home
[Link 5]: https://www.npmjs.com/browse/depended
[lodash]: https://lodash.com/
[async]: https://github.com/caolan/async
[request]: https://github.com/request/request
[nconf]: https://github.com/indexzero/nconf
[co]: https://github.com/tj/co
[debug]: https://www.npmjs.com/package/debug
[superagent]: https://www.npmjs.com/package/superagent
[Sinon.js]: http://sinonjs.org/
[Node.js 5]: http://www.barretlee.com/blog/2015/10/07/debug-nodejs-in-command-line/
[Node.js 6]: http://segmentfault.com/a/1190000003860400
[Debug with Source Maps]: http://blog.getsentry.com/2015/10/29/debuggable-javascript-with-source-maps.html
[Link 6]: https://developer.yahoo.com/performance/rules.html
[JavaScripting.com]: http://www.javascripting.com/
[JavaScriptOO]: http://www.javascriptoo.com/
[JavaScript 6]: http://www.sitepoint.com/essential-tools-libraries-modern-javascript-developers/
[try git]: https://try.github.io/levels/1/challenges/1
[Github]: https://github.com/
[SVN]: https://subversion.apache.org/
[Read more...]: http://www.sitepoint.com/version-control-software-2014-what-options/
[Gulp]: http://gulpjs.com/
[Introduction]: http://www.sitepoint.com/introduction-gulp-js/
[Grunt]: http://gruntjs.com/
[Introduction 1]: http://www.sitepoint.com/introduction-grunt/
[JSLint]: http://jslint.com/
[JSHint]: http://jshint.com/
[ESLint]: http://eslint.org/
[JSCS]: http://jscs.info/
[A Comparision of JavaScript Linting Tools]: http://www.sitepoint.com/comparison-javascript-linting-tools/
[Modernizr]: https://modernizr.com/
[debug util]: https://github.com/amasad/debug_utils
[JSDoc]: http://usejsdoc.org/
[YUIDoc]: http://yui.github.io/yuidoc/
[Read more... 1]: http://www.sitepoint.com/products-documentation-good-enough/
[Underscore.js]: http://underscorejs.org/
[Lo-Dash]: http://lodash.com/
[XRegExp]: http://xregexp.com/
[RegExper]: http://www.sitepoint.com/regexper-regular-expressions-explained/
[UglifyJS]: http://lisperator.net/uglifyjs/
[YUI Compressor]: http://yui.github.io/yuicompressor/
[Accounting.js]: http://openexchangerates.github.io/accounting.js/
[Moment.js]: http://momentjs.com/
[Tutorial]: http://www.sitepoint.com/managing-dates-times-using-moment-js/
[Bootstrap - _UI]: http://getbootstrap.com/
[Semantic UI - Human-friendly]: http://semantic-ui.com/
[Foundation - Most advanced responsive FE framework]: http://foundation.zurb.com/
[React - UI]: http://facebook.github.io/react/
[AngularJS - MVVM]: https://angularjs.org/
[Polymer - web components]: https://www.polymer-project.org/1.0/
[Vue.js]: http://cn.vuejs.org/
[D3.js - Data Driven Documents]: http://d3js.org/
[ECharts -]: http://echarts.baidu.com/
[HighCharts -]: http://www.highcharts.com/
[Chart.js - Simple_ clean and engaging charts]: http://www.chartjs.org/
[Angular Chart - AngularJS_Chart.js]: http://jtblin.github.io/angular-chart.js/
[Epoch - for real-time visualizations]: https://fastly.github.io/epoch/
[RequireJS]: http://requirejs.org/
[ES6 Module]: https://github.com/didiaohu/awesome-javascript/blob/master/www.2ality.com/2014/09/es6-modules-final.html
[A primer on module management]: http://www.sitepoint.com/understanding-requirejs-for-effective-javascript-module-loading/
[npm]: https://npmjs.org/
[Bower]: http://bower.io/
[Browserify]: http://browserify.org/
[Intro]: http://www.sitepoint.com/getting-started-browserify/
[Mocha]: http://visionmedia.github.io/mocha/
[Jasmine]: http://pivotal.github.io/jasmine/
[Intro 1]: http://www.sitepoint.com/testing-javascript-jasmine-travis-karma/
[QUnit]: https://qunitjs.com/
[Intro 2]: http://www.sitepoint.com/getting-started-qunit/
[BrowserStack]: https://www.browserstack.com/
[Sauce Labs]: https://saucelabs.com/
[Guide]: http://www.sitepoint.com/testing-in-the-cloud-using-saucelabs/
[Istanbul]: http://gotwarlost.github.io/istanbul/
[Plato]: https://github.com/es-analysis/plato
[An article on code metrics]: http://www.sitepoint.com/code-metrics-and-you/
[Meteor]: https://www.meteor.com/
[SocketStream]: http://www.socketstream.org/
[Socket.io]: http://socket.io/
[Node.js 7]: http://www.sitepoint.com/build-node-js-powered-chatroom-web-app-getting-started/
[Backbone]: http://documentcloud.github.io/backbone/
[Ember]: http://emberjs.com/
[KnockoutJS]: http://knockoutjs.com/
[An introduction to functional programming in JavaScript]: http://www.sitepoint.com/introduction-functional-javascript/
[Handlebars]: http://handlebarsjs.com/
[Guide 1]: http://www.sitepoint.com/a-beginners-guide-to-handlebars/
[Mustache]: http://mustache.github.io/
[Guide 2]: http://www.sitepoint.com/creating-html-templates-with-mustachejs/
[Jade]: http://jade-lang.com/
[BootCDN]: http://www.bootcdn.cn/
[360_CDN]: http://libs.useso.com/
[CDN]: http://www.staticfile.org/
[Frontend Rescue]: https://uptodate.frontendrescue.org/
[JSbooks]: http://jsbooks.revolunet.com/
[Cooper Press]: https://cooperpress.com/
[JavaScript Training Sucks]: https://medium.com/javascript-scene/javascript-training-sucks-284b53666245#.cbq5ijonh
[The Two Pillars of JavaScript_ part one - how to escape the 7th circle of hell]: https://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3#.47bfua546