前端知识体系¶
统计信息:字数 12507 阅读26分钟
第二期¶
第一期¶
1. 布局框架:¶
Bootstrap: http://getbootstrap.com/
Foundation: http://foundation.zurb.com/
Uikit: http://www.getuikit.com/
Web Components:http://css-tricks.com/modular-future-web-components//
2. 构建工具及包管理器:¶
Grunt: http://gruntjs.com/
Yeoman: http://yeoman.io/
Bower: http://bower.io/
3. 代码优化:¶
Google Closure Compiler:
CSS Lint: http://csslint.net/
JSHint: http://www.jshint.com/
JSLint: http://www.jslint.com/
4. CSS预处理器¶
Less: http://lesscss.org/
Sass: http://sass-lang.com/
5. 调试工具:¶
Chrome:https://developers.google.com/chrome-developer-tools/
Firebug: https://getfirebug.com/
HTTPWatch: http://www.httpwatch.com/
Fiddler: http://www.telerik.com/fiddler
IE Developer Toolbar:
Weinre: http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html
6. 文档工具:¶
JSDoc: https://github.com/jsdoc3/jsdoc
Jekyll: http://jekyllrb.com/
8. 移动端 手势事件库:¶
Hammer.js:< http://eightmedia.github.io/hammer.js/>
QuoJS: http://quojs.tapquo.com/
Zepto: http://zeptojs.com/
Swipe: http://swipejs.com/
jQuery Mobile: http://jquerymobile.com/
KendoUI:http://www.telerik.com/kendo-ui
Goratchet:http://goratchet.com/
10.模块加载器:¶
ESL:< https://github.com/ecomfe/esl>
RequireJS: http://requirejs.org/
SeaJS:http://seajs.org/docs/
11. 项目管理:¶
Github: https://github.com/
GitLab: https://about.gitlab.com/
Redmine: http://www.redmine.org/
12. 原型设计:¶
Axure RP: http://www.axure.com/
13. 富互联网应用框架¶
AngularJs: http://www.angularjs.org
Backbone: http://backbonejs.org/
AmpersandJShttp://ampersandjs.com//
Knockout: http://knockoutjs.com/
Underscore: http://underscorejs.org/
14. 模板引擎¶
EJS: http://www.embeddedjs.com/
Handlebars: http://handlebarsjs.com/
Jade: http://jade-lang.com/
Velocity: http://velocity.apache.org/
15. 测试框架¶
Jasmine: http://pivotal.github.io/jasmine/
QUnit: http://qunitjs.com/
mocha: http://visionmedia.github.io/mocha/
16. 版本控制¶
Git: http://git-scm.com/
Subversion: http://subversion.apache.org/
Mercurial(Hg): http://mercurial.selenic.com/
18. CommonJS¶
Component: http://component.io/
19. WEB安全¶
XSS(跨站脚本攻击):
CSRF(跨站点伪造请求攻击):
跨iframe攻击:
Clickjacking安全漏洞:
20. 代码规范¶
Code Guide: http://alloyteam.github.io/code-guide/
编写可维护的CSS: http://segmentfault.com/a/1190000000388784/
GJS编码规范指南: http://alloyteam.github.io/JX/doc/specification/google-javascript.xml
jQueryJS规范: http://contribute.jquery.org/style-guide/js/
21. HTML模块化¶
html5boilerplate: http://html5boilerplate.com/
22. CSS模块化¶
Normalize.css: http://necolas.github.io/normalize.css/
OOCSS:http://www.oocss.cc/ http://oocss.org/
CssReset:http://www.cssreset.com/
23. HTML5 Canvas¶
KINETIC:http://kineticjs.com/
CSS¶
css布局 干货!各种常见布局实现+知名网站实例分析 BFC 学习 BFC (Block Formatting Context) flex Flex 布局教程:语法篇 Flex 布局教程:实例篇 移动端 腾讯移动Web前端知识库 css3综合 个人总结(css3新特性) css3动画优化 高性能 CSS3 动画 综合 12个HTML和CSS必须知道的重点难点问题
JavaScript¶
js基础 JavaScript深入系列15篇正式完结! 闭包 破解前端面试(80% 应聘者不及格系列):从闭包说起 原型 深度解析原型中的各个难点 this、apply、call、bind相关问题 this、apply、call、bind js执行机制 JavaScript:彻底理解同步、异步和事件循环(Event Loop) 这一次,彻底弄懂 JavaScript 执行机制 dom 破解前端面试(80% 应聘者不及格系列):从 DOM 说起 原生JS中DOM节点相关API合集 dom里各种尺寸区别(offsetWidth,scrollWidth,clientWidth,innerWidth....) 跨域 前端常见跨域解决方案(全) 常见工具函数手写(节流,防抖,扁平,柯里化...) JavaScript专题系列20篇正式完结! 正则 JS正则表达式完整教程(略长) es6综合 ECMAScript 6 入门 promise promise用法:八段代码彻底掌握 Promise promise实现原理:手把手教你实现一个完整的 Promise Generator,async/await相关 阮一峰:Generator,async,Thunk,co 系列
webpack¶
其他¶
模块化 前端模块化:CommonJS,AMD,CMD,ES6 前端规范 前端开发规范:命名规范、html规范、css规范、js规范 移动端适配 使用Flexible实现手淘H5页面的终端适配 vw、vh:再聊移动端页面的适配 PC端兼容性 浏览器兼容性问题解决方案 · 总结 移动端兼容性 移动 Web 开发问题和优化小结 调试技巧 web调试优化-chrome开发者工具不完全指南 常见数据结构与算法 我接触过的前端数据结构与算法 十大经典排序算法总结(JavaScript描述) 设计模式 Javascript常用的设计模式详解
版本控制问题(git/svn)¶
前端部署代码问题¶
前端持续集成 实战笔记:Jenkins打造强大的前端自动化工作流 https 分分钟让你理解HTTPS http2.0 HTTP/2协议–特性扫盲篇
浏览器工作原理¶
浏览器工作机制全面梳理 浏览器缓存机制 浏览器缓存知识小结及应用 浏览器综合 从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系! 前端安全 xss/csrf问题:前端安全知识 sql注入问题:网络攻击技术开篇——SQL Injection 劫持类问题:Web 前端页面劫持和反劫持 SEO 前端SEO技巧总结