前端知识体系

1. 布局框架：

Bootstrap: Bootstrap · The most popular HTML, CSS, and JS library in the world.

Foundation: The most advanced responsive front-end framework in the world. | Foundation

Uikit: UIkit

Web Components:A Guide to Web Components | CSS-Tricks - CSS-Tricks

2. 构建工具及包管理器：

Grunt: Grunt: The JavaScript Task Runner

Yeoman: The web's scaffolding tool for modern webapps | Yeoman

Bower: Bower — a package manager for the web

NPM: npm

3. 代码优化：

Google Closure Compiler:

CSS Lint: CSS Lint

JSHint: JSHint, a JavaScript Code Quality Tool

JSLint: JSLint: The JavaScript Code Quality and Coverage Tool

4. CSS预处理器

Less: Getting started | Less.js

Sass: Sass: Syntactically Awesome Style Sheets

5. 调试工具：

Chrome：https://developers.google.com/chrome-developer-tools/

Firebug: Firebug

HTTPWatch: HttpWatch: An Advanced Network Debugger and HTTP Sniffer for Chrome, Edge and IE

Fiddler: Fiddler | Web Debugging Proxy and Troubleshooting Solutions

IE Developer Toolbar:

Weinre: weinre - Home

6. 文档工具：

JSDoc: GitHub - jsdoc/jsdoc: An API documentation generator for JavaScript.

Jekyll: Jekyll • Simple, blog-aware, static sites | Transform your plain text into static websites and blogs

7. IDE/文本编辑器

WebStorm: WebStorm: The Smartest JavaScript IDE, by JetBrains

8. 移动端 手势事件库：

GMU: http://gmu.baidu.com/

Hammer.js:< http://eightmedia.github.io/hammer.js/>

QuoJS: Tapquo | FindMyHosting

Zepto: Zepto.js: the aerogel-weight jQuery-compatible JavaScript library

Swipe: GitHub - thebird/Swipe: Swipe is the most accurate touch slider.

jQuery Mobile: jQuery Mobile

KendoUI:JavaScript UI Components - Build Better Apps Faster - Progress Kendo UI

Goratchet:Ratchet

9. 思维导图

XMind:Xmind - Mind Mapping App

10.模块加载器：

ESL:< https://github.com/ecomfe/esl>

RequireJS: RequireJS

SeaJS:http://seajs.org/docs/

11. 项目管理:

Github: GitHub: Let’s build from here · GitHub

GitLab: The DevSecOps Platform | GitLab

Redmine: Overview - Redmine

12. 原型设计:

Axure RP: Axure RP - UX Prototypes, Specifications, and Diagrams in One Tool

13. 富互联网应用框架

AngularJs: http://www.angularjs.org

Backbone: Backbone.js

AmpersandJSAmpersand.js - Home

Knockout: Knockout : Home

Underscore: Underscore.js

14. 模板引擎

EJS: Best Online Casino for Real Money with Paypal - Life-Changing Games

Handlebars: Handlebars

Jade: http://jade-lang.com/

Velocity: The Apache Velocity Project

15. 测试框架

Jasmine: http://pivotal.github.io/jasmine/

QUnit: QUnit

mocha: http://visionmedia.github.io/mocha/

16. 版本控制

Git: Git

Subversion: Apache Subversion

Mercurial(Hg): Mercurial SCM

17. WEB框架/服务器

Node: Node.js

Express: Express - Node.js web application framework

Apache: Welcome! - The Apache HTTP Server Project

Nginx: nginx news

18. CommonJS

Component: http://component.io/

19. WEB安全

XSS(跨站脚本攻击):

CSRF(跨站点伪造请求攻击):

跨iframe攻击:

Clickjacking安全漏洞:

20. 代码规范

Code Guide: http://alloyteam.github.io/code-guide/

编写可维护的CSS: 前端 - 编写可维护的CSS - SegmentFault_行业快讯 - SegmentFault 思否

GJS编码规范指南: http://alloyteam.github.io/JX/doc/specification/google-javascript.xml

jQueryJS规范: JavaScript Style Guide | Contribute to jQuery

21. HTML模块化

html5boilerplate: HTML5 Boilerplate: The web’s most popular front-end template

22. CSS模块化

Normalize.css: Normalize.css: Make browsers render all elements more consistently.

LESS:世界之最

OOCSS:博猫游戏平台-因为专业,所以卓越 Object-oriented CSS

CssReset:CSS Reset - 2019's most common CSS Resets to copy/paste, with documentation / tutorials

23. HTML5 Canvas

D3:D3.js - Data-Driven Documents

KINETIC:KineticJS

转自：前端知识体系 - nani前端知识体系 - naniJser - 博客园前端知识体系 - nani