前端知识解构脑图(一张)和工具
一张图足以让你了解web前端工程师需要做哪些工作以及需要掌握哪些技能。
下面就是牛人整理的前端知识体系大全,让各位APP设计师想要转行做前端开发的同学们提供一些参考的文案和网址。
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/
NPM: https://www.npmjs.org/
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/
7. IDE/文本编辑器
WebStorm: http://www.jetbrains.com/webstorm/
8. 移动端 手势事件库:
GMU: http://gmu.baidu.com/
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/
9. 思维导图
XMind:http://www.xmind.net/
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/
17. WEB框架/服务器
Node: http://nodejs.org/
Express: http://expressjs.com/
Apache: http://httpd.apache.org/
Nginx: http://nginx.org/
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/
LESS:http://www.lesscss.net/
OOCSS:http://www.oocss.cc/ http://oocss.org/
CssReset:http://www.cssreset.com/
23. HTML5 Canvas
D3:http://d3js.org/
KINETIC:http://kineticjs.com/
第三部分:前端开发知识点:
HTML&CSS:
对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级、HTML5、CSS3、Flexbox
重点在于对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级及使用、document flow(文档流)、清除浮动,hasLayout 和 块格式化上下文 (block-formattin contexts) 、reflow&repaint、硬件加速、HTML5(离线 & 存储,多媒体,Web Sockets ,Web Workers,History API2D/3D 绘图)、CSS3、Flexbox、CSS预编译、动画、响应式布局、移动端开发等
JavaScript:
数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript 6、Nodejs
数据类型、面向对象、数组、DOM、BOM、Function、继承、闭包、内置对象、作用域、跨域、原型链、、JSON、XMLHttpRequest、 RegExp、模块化、内存泄漏、事件机制、异步装载回调、模板引擎、前端MVC、NodeJS、JSON、ajax、框架、算法等
其他:
移动端、响应式、自动化构建、HTTP、离线存储、WEB安全、优化、重构、团队协作、可维护、易用性、SEO、UED、架构、职业生涯、快速学习能力
前端知识解构脑图(一张)和工具相关推荐
- python 支付宝个人账单_金融支付财务融合业务-实践分享1:订单、账单、交易流水、账套知识解构、原理解析...
本文作者从实际工作实践出发,结合案例等分享了电商金融支付财务融合中的基本概念和相关原理解析,包括:订单.账单.交易流水和账知识解构,供大家一同参考和学习. 从事电商.进销存.金融.支付.财务的产品同学 ...
- 前端知识体系思维导图
前端知识体系思维导图 前言 hello大家好,我是"风不识途",本文是想分享一下,笔者在自学前端时所学到的知识,总结的思维导图(并不包含前端所有知识点),很多都是结合自己的笔记来进 ...
- 歌谣学前端之解构赋值
前言 我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 ...
- 百度脑图-便捷的思维工具
前沿:百度脑图作为百度出品的一款思维管理工具,用起来真心不错,特别是线上自动保存等功能也是非常到位的设计. 1.使用:百度脑图暂无客户端,完全依赖在线broswer,所以首先你得需要安装一个支持htm ...
- Web前端学习路线图(脑图)
- 超级好用的在线流程图、脑图、UML制作工具ProcessOn
今天元小白在记笔记时,发现我的笔记包含有道云.xmind.world.excle.visio好多好多,分布在不同地方,散落各处,我就在想是否有一款可以统筹部分类型笔记同时在线编辑的工具呢, 今天他来了 ...
- python实现xmind转excel_使用Python将xmind脑图转成excel用例(一)
最近接到一个领导需求,将xmind脑图直接转成可以导入的excel用例,并且转换成gui可执行的exe文件,方便他人使用. 因为对Python比较熟悉,所以就想使用Python3来实现这个功能,先理一 ...
- 项目研发,有哪些好用的免费脑图工具软件
思维脑图可以用来做什么 1.提前规划产品矩阵和需求规划 在开始设计产品和启动正式项目研发前,通过思维脑图可以梳理每个产品版块的需求结构和规划. 2.用鱼骨图规划每月.每周的需求迭代计划 使用鱼骨图,可 ...
- vue解构赋值_前端开发es6知识 模块化、解构赋值、字符串模板
项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍1.块级作用域 let const 2.箭 ...
最新文章
- NIPS论文排行榜出炉,南大周志华5篇论文入选
- 蓝桥杯 基础练习 十进制转十六进制(水题,进制转换)
- 鸟哥的linux私房菜-文件压缩于打包-2
- python哪一版好用-最好的 Python IDE,你们推荐使用哪一个?
- jep使用_JEP 277“增强弃用”非常好。 但这是一个更好的选择
- Java EE 8发生了什么?
- CS224n研究热点5 图像对话
- 他在计算机上工作英语翻译,英语翻译1.尽管他在手术中割破了手,但他仍在继续工作.(in spite of)2.计算机在现代生活中起着重要的作用.(...
- [转载] python机器学习第三章:使用scikit-learn实现机器学习分类算法
- todo游戏行业实战案例3:玩家等级停滞率
- 【三】多线程 —— 设计模式
- 模具工业及其发展趋势
- 读书笔记:《学会提问》
- transform:translate
- linux下PS1、PS2、PS3、PS4最全详解
- linux mtr 普通用户执行,Linux网站打开慢之mtr工具探测分析
- 用友U8+ V16.0 V15.1 V15.0 V13.0 V12.5 12.1 12.0 11.1 11.0注册
- 全能google地图下载器—原理
- 2022年中国研究生报考现状分析:考研热度只增不减,就业压力仍为主要因素[图]
- Tomcat 运行报错 - This is very likely to create a memory leak