首页 > 代码库 > [转载]Frontend Knowledge Structure
[转载]Frontend Knowledge Structure
https://github.com/JacksonTian/fks
http://code.csdn.net/news/2819224
本文为大家整理了一系列关于JavaScript的常用工具，包括常用工具、前端和后端工具，从测试到构建，内容丰富，值得收藏。下面是根据推荐工具整理的思维导图。
点此看大图
常规工具
脚手架工具
- Yeoman：它旨在为开发者提供一系列健壮的工具、程序库和工作流，帮助开发者快速构建漂亮的Web应用。
构建工具（自动）
- Grunt.js：生态强大，发展速度快，有大量可选插件；
- Gulp.js：流式项目构建工具；
- Browserify.js：Node.js模块，主要用于改写现有的CommonJS模块，使得浏览器端也可以使用这些模块；
- Uglify.js：JavaScript解析器、压缩工具和代码美化库。
软件包管理工具
- Homebrew (Mac OS)：Apple Mac OS下的软件安装工具；
- Apt：Debian、Ubuntu等系列Linux系统的软件包管理工具，可用来安装、删除、升级软件等；
- NPM：Node.js的官方软件包管理器；
- Bower：twitter的一个开源项目，用于web包管理。
前端
MVC框架
- Backbone.js：提Web开发的框架，为复杂的Javascript应用程序提供模型(models)、集合(collections)、视图(views)结构；
- Ember.js：可以创建功能丰富的Web应用程序，并提供一个标准的应用程序架构的JavaScript框架；
- Angular.js：一组用来开发Web页面的框架、模板以及数据绑定和丰富UI的组件，无需进行手工DOM操作，还允许为App扩展HTML类库。
模板
- Handlebars.js：JavaScript页面模板库，可以为开发者提供必需的语义模板；
- Mustache.js：是Mustache模板系统的JavaScript实现，语法逻辑比较简单，适用于C++、Clojure、Erlang、Go、Java、JavaScript等语言；
- Jade：Node模板引擎，主要用于Node.js里的服务端模板；
- Haml-js：允许在JavaScript项目中使用Haml语法，与原生的Haml拥有差不多的功能；
- Eco：可以用来将CoffeeScript逻辑嵌入到标记中。
测试
- Casper.js：CasperJS是一个为PhantomJS和SlimerJS准备的导航脚本及测试工具；
- Zombie.js：Zombie.js是一个轻量级的框架，可以在一个模拟的环境下测试客户端的 JavaScript 代码，且不需要浏览器的帮助。
后端
服务器
- Express：Node的web应用框架；
- Node：Node.js是构建于Chrome JavaScript运行时基础上的一个平台，可快速构建网络应用。
数据库
- MongoDB：开源的文档存储数据库，也是领先的非关系型数据库；
- Postgresql：开源的对象-关系数据库服务器；
- SQL：结构化查询语言，可用来存取数据以及查询、更新和管理关系数据库系统。
架构
- RESTful：目前流行的互联网软件架构，结构清晰、易于理解、方便扩展。
测试
- Cucumber.js：采用受欢迎的行为驱动开发工具并将其应用到JavaScript堆栈中。
- Jasmine：行为驱动的开发测试框架，不依赖浏览器、DOM或任何其他JavaScript架构，较适合网站、Node.js项目或应用在任何可以运行JavaScript的地方。
- Mocha：运行在Node.js和浏览器之上，主要用于异步测试。
- Q-Unit：单元测试框架，常用于jQuery、jQuery UI和jQuery移动项目，也可以用于测试常规的JavaScript代码。
断言库（Assertion Libraries）
- Chai：一个用于Node的BDD/TDD断言库（Assertion Libraries），可与任何JavaScript测试框架进行搭配。
函数式编程工具
- Underscore.js：JavaScript库，提供了大量有用的函数编程工具，无需扩展任何内置对象；
- Lo-Dash：提供自定义、性能和一致性的JavaScript库。
大家可以在 Github上查看本推荐列表的最新状况。
Via CodeFellows
延伸阅读
前端技能汇总：https://github.com/JacksonTian/fks
---------------------------------------------------------
Frontend Knowledge Structure
项目起源
还记得@jayli 的这幅前端知识结构图么。
图片的形式具有诸多的不便。缺失源图的我们，无法为此图贡献些什么，随着时间的迁移，或许有些技术点会发生改变，所以有了这个GitHub项目。我们可以通过协作的方式来共同维护这个项目。Git的历史记录也可以见证前端行业的一些变迁。
可视化效果
前端开发知识结构
前端工程师
- 浏览器
- IE6/7/8/9/10/11 (Trident)
- Firefox (Gecko)
- Chrome/Chromium (Blink)
- Safari (WebKit)
- Opera (Blink)
- 编程语言
- JavaScript/Node.js
- CoffeeScript
- TypeScript
- 切页面
- HTML/HTML5
- CSS/CSS3
- PhotoShop/Paint.net/Fireworks/GIMP
- 开发工具
- 编辑器和IDE
- VIM/Sublime Text2
- Notepad++/EditPlus
- WebStorm
- Emacs EmacsWiki
- Brackets
- Atom
- Lime Text
- Light Table
- Codebox
- TextMate
- Neovim
- Komodo IDE / Edit
- Eclipse
- Visual Studio
- NetBeans
- Cloud9 IDE
- 调试工具
- Firebug/Firecookie
- YSlow
- IEDeveloperToolbar/IETester
- Fiddler
- Chrome Dev Tools
- Dragonfly
- DebugBar
- Venkman
- 版本管理
- Git/SVN/Mercurial
- Github/Bitbucket/Google Code/Gitorious/GNU Savannah/Launchpad/SourceForge
- 编辑器和IDE
- 代码质量
- Coding style
- JSLint/JSHint/jscs
- CSSLint
- Markup Validation Service
- HTML Validators
- 单元测试
- QUnit/Jasmine
- Mocha/Should/Chai/Expect
- Unit JS
- 自动化测试
- WebDriver/Karma Runner/Sahi
- phantomjs
- Coding style
- 前端库/框架
- jQuery/Underscore/Mootools/Prototype.js
- YUI3/Dojo/ExtJS/KISSY
- Backbone/KnockoutJS/Emberjs
- AngularJS
- Batarang
- Bootstrap
- Semantic UI
- Juice UI
- Web Atoms
- Polymer
- Dhtmlx
- qooxdoo
- React
- Brick
- Knockout
- 前端标准/规范
- HTTP/1.1: RFCs 7230-7235
- HTTP/2
- ECMAScript3/5
- W3C: DOM/BOM/XHTML/XML/JSON/JSONP/...
- CommonJS Modules/AMD
- HTML5/CSS3
- Semantic Web
- MicroData
- RDFa
- Web Accessibility
- WCAG
- Role Attribute
- WAI-ARIA
- 性能
- JSPerf
- YSlow 35 rules
- PageSpeed
- HTTPWatch
- DynaTrace‘s Ajax
- 高性能JavaScript
- SEO
- 编程知识储备
- 数据结构
- OOP/AOP
- 原型链/作用域链
- 闭包
- 编程范型
- 设计模式
- Javascript Tips
- 部署流程
- 压缩合并
- YUI Compressor
- Google Clousure Complier
- UglifyJS
- CleanCSS
- 文档输出
- JSDoc
- Dox/Doxmate/Grunt-Doxmate
- 项目构建工具
- make/Ant
- GYP
- Grunt
- Gulp
- Yeoman
- FIS
- Mod
- 压缩合并
- 代码组织
- 类库模块化
- CommonJS/AMD
- YUI3模块
- 业务逻辑模块化
- bower/component
- 文件加载
- LABjs
- SeaJS/Require.js
- 模块化预处理器
- Browserify
- 类库模块化
- 安全
- CSRF/XSS
- CSP
- Same-origin policy
- ADsafe/Caja/Sandbox
- 移动Web
- HTML5/CSS3
- 响应式网页设计
- Zeptojs/iScroll
- V5/Sencha Touch
- PhoneGap
- jQuery Mobile
- W3C Mobile Web Initiative
- W3C mobileOK Checker
- Open Mobile Alliance
- 前沿技术社区/会议
- D2/WebRebuild
- NodeParty/W3CTech/HTML5梦工厂
- JSConf/沪JS(JSConf.cn)
- QCon/Velocity/SDCC
- JSConf/NodeConf
- CSSConf
- YDN/YUIConf
- HybridApp
- WHATWG
- 计算机知识储备
- 编译原理
- 计算机网络
- 操作系统
- 算法原理
- 软件工程/软件测试原理
- Unicode
- 软技能
- 知识管理/总结分享
- 沟通技巧/团队协作
- 需求管理/PM
- 交互设计/可用性/可访问性知识
- 可视化
- SVG/Canvas/VML
- SVG: D3/Raphaël/Snap.svg/DataV
- Canvas: CreateJS/KineticJS
- WebGL/Three.JS
- 浏览器
后端工程师
- 编程语言
- C/C++/Java/PHP/Ruby/Python/...
- 网页服务器
- Nginx
- Apache
- Lighttpd
- 数据库
- SQL
- MySQL/PostgreSQL/Oracle/DB2
- MongoDB/CouchDB
- 数据缓存
- Redis
- Memcached
- 文件缓存/代理
- Varnish
- Squid
- 操作系统
- Unix/Linux/OS X/Windows
- 数据结构
- 编程语言
前端书籍推荐
★越少越简单,越适合入门,★多的要么是难度比较高,要么是比较适合在后面看,比如讲性能之类的书.
CSS
- Eric Meyer 谈 CSS（卷二）★★★
- CSS权威指南 （第3版）★★
- 精通CSS★★★
JavaScript
- JavaScript DOM编程艺术 （第2版）★
- JavaScript高级程序设计（第3版）★★
- 锋利的jQuery★★
- 高性能JavaScript★★★
- JavaScript语言精粹★★★
- JavaScript权威指南★★★
- 编写可维护的JavaScript★★★
- JAVASCRIPT语言精髓与编程实践★★★
- Effective Javascript★★★
- Secrets of the JavaScript Ninja★★★
- JavaScript模式★★★
- JavaScript设计模式★★★★
- 基于MVC的JavaScript Web富应用开发★★★
性能实践
- Web性能实践日志★★★
- Web性能权威指南★★★
版本控制工具
- 版本控制之道 (git)★★
- Pro Git★★★
- Git权威指南★★★★
后端书籍推荐
Linux管理
- Linux 系统管理技术手册
- 鸟哥的 Linux 私房菜
- Linux 101 Hacks
- UNIX Shell Scripting
- The Linux Command Line
- Linux Network Administrator‘s Guide
Linux编程
- Linux程序设计
- Linux系统编程
- Unix环境高级编程
- Unix编程艺术
- The Linux Programming Interface
- 程序员的自我修养
- 深入理解Linux内核
- Unix网络编程
- TCP/IP高级编程
C/C++
- Linux C编程一站式学习
- C和指针
- C陷阱与缺陷
- C专家编程
- C语言核心技术
- 彻底搞定C指针
- 征服C指针
- C++编程思想
- 高质量程序设计指南---C/C++语言
- Inside the C++ Object Model
- A Tour of C++
- The C++ Programming Language
- The C++ Standard Library - A Tutorial and Reference
- The C++ Standard (INCITS/ISO/IEC 14882-2011)
- Overview of the New C++
前端工作面试
- 前端工作面试问题
[转载]Frontend Knowledge Structure
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。