专栏首页前端入门学习2019年最全的web前端知识体系汇总
原创

2019年最全的web前端知识体系汇总

必学(前端三剑客)

· HTML: https://developer.mozilla.org/zh-CN/docs/Web/HTML

· CSS: https://developer.mozilla.org/zh-CN/docs/Web/CSS

· JavaScript: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

UI布局框架

· Bootstrap: http://getbootstrap.com/

· antd: https://ant.design/index-cn

· Foundation: http://foundation.zurb.com/

· Uikit: http://www.getuikit.com/

· Web Components:http://css-tricks.com/modular-future-web-components//

构建工具/包管理器

· Grunt: http://gruntjs.com/

· Yeoman: http://yeoman.io/

· Bower: http://bower.io/

· NPM: https://www.npmjs.org/

css预处理器

· Less: http://lesscss.org/

· Sass: http://sass-lang.com/

· Stylus: http://stylus-lang.com/

数据可视化

· Web图形开发: https://developer.mozilla.org/zh-CN/docs/Web/Guide/Graphics

· Canvas: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

· WebGL: https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API

网络

· HTTP: https://developer.mozilla.org/zh-CN/docs/Web/HTTP

· TCP/IP详解卷1: 协议 http://www.52im.net/topic-tcpipvol1.html

浏览器

· 浏览器API/DOM: https://developer.mozilla.org/zh-CN/docs/Web/API

· 浏览器扩展: https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions

调试工具

· 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

代码优化

· CSS Lint: http://csslint.net/

· JSHint: http://www.jshint.com/

· JSLint: http://www.jslint.com/

代码规范

· 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/

HTML模块化

· html5boilerplate: http://html5boilerplate.com/

CSS模块化

· Normalize.css: http://necolas.github.io/normalize.css/

· OOCSS:http://www.oocss.cc/ http://oocss.org/

· CssReset:http://www.cssreset.com/

文档工具

· JSDoc: https://github.com/jsdoc3/jsdoc

· Jekyll: http://jekyllrb.com/

模拟数据

· mockjs: http://mockjs.com/

WEB框架/服务器

· Node: http://nodejs.org/

· Express: http://expressjs.com/

· Egg: https://eggjs.org/zh-cn/

· ThinkJS: https://thinkjs.org/

· Apache: http://httpd.apache.org/

· Nginx: http://nginx.org/

WEB安全

· XSS(跨站脚本攻击):

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

· 跨iframe攻击:

· Clickjacking安全漏洞:

测试框架

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

· QUnit: http://qunitjs.com/

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

编辑器

· WebStorm: http://www.jetbrains.com/webstorm/

· sublime text: http://www.sublimetext.com/

· vscode: https://code.visualstudio.com/

常用库/框架

· ReactJs: https://reactjs.org/docs/getting-started.html

· Redux: https://redux.js.org/

· React Router: https://github.com/ReactTraining/react-router#readme

· Mobx: https://mobx.js.org/

· Vue: https://cn.vuejs.org/

· vue-cli: https://cli.vuejs.org/zh/guide/cli-service.html

· vue-router: https://cn.vuejs.org/v2/guide/routing.html

· vuex: https://vuex.vuejs.org/

· Angular: https://angularjs.org/

· Angular(中文): https://www.angularjs.net.cn/

· jQuery: http://www.w3school.com.cn/jquery/index.asp

· Axios: http://www.axios-js.com/

· 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/

· D3:http://d3js.org/

· Three.js: https://threejs.org/

其他库

· KINETIC:http://kineticjs.com/

· Particles.js--web中创建炫酷的浮动粒子的库:

· Fullpage.js—快速实现全屏滚动特性:

· Highlight.js—web 语法高亮:

· Waypoints.js—滚动到某个元素位置时触发一个功能:

· Typed.js—打字机效果:

· Chart.js—使用 JavaScript 创建漂亮的图表

· Instantclick—能够明显加速网站加载时间,鼠标 hover 时预加载资源

· Chartist—另一个图表库

· Motio—一个基于动画和平移的雪碧图库

· Animsition—CSS 实现动画过渡的 jQuery 插件

· Barba.js—流式页面过渡

· TwentyTwenty—一个对比图片的可视化 diff 工具

· Vivus.js—在 SVG 上绘制动画

· Wow.js—滚动时展现动画

· Scrolline.js—页面滚动时显示滚动进度

· Velocity.js—快速流畅的 JavaScript 动画

· Animate on scroll—漂亮的页面滚动元素动画

· Handlebars.js—Javascript 模板

· jInvertScroll—视差滚动

· One page scroll—又一个页面滚动库

· Parallax.js—对智能设备方向变化做出响应的视差引擎

· Typeahead.js—搜索补全

· Dragdealer.js—炫酷拖拽

· Bounce.js—创建炫酷的 CSS3 动画

· Pagepiling.js—全屏滚动

· Multiscroll.js—两列垂直反向滚动

· Favico.js—动态 favicon

· Midnight.js—固定头部切换效果

· Anime.js—动画库

· Keycode—获取键盘按键的 JavaScriptkeycode

· Sortable—拖拽插件

· Flexdatalist—自动补全

· Slideout.js—移动应用侧滑导航

· Jquerymy—使用 jQuery 实现双向数据绑定

· Cleave.js—实时格式化输入内容

· Page—客户端单页应用路由

· Selectize.js—用来添加 tag 的 Hybrid 选择框

· Nice select—创建漂亮的选择框的 jQuery 库

· Tether—使用固定定位来创建相关元素

· Shepherd.js—为应用创建新手引导

· Tooltip—tooltip 提示框

· Select2—Jquery 选择框插件

· IziToast—通知弹窗实现

· IziModal—模态框实现

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 有史以来最详细的web前端学习攻略,还在等什么,直接收藏吧

    Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。

    用户5827212
  • 小白要学好Web前端,要从哪里入手?

    要说目前IT行业需求量最大的岗位是什么,Web前端工程师一定有姓名。Web前端工程师绝对是近几年火爆而且高薪的职业之一,当然,不同的公司也有不同的叫法,比如:网...

    用户5827212
  • 那么如何让你的 JS 写得更漂亮?

    JS是弱类型的,但是写代码的时候不能太随意,写得太随意也体现了编码风格不好。下面分点说明:

    用户5827212
  • 中国设立2000亿国家基金自主发展芯片,争取研发主动权

    据华尔街日报报道,上个月,中国在北京成立了一支国家半导体基金,其规模为2042亿元人民币(289亿美元),目的是培育国内芯片产业并缩小技术差距。

    大数据文摘
  • 问与答70: 如何记录指定单元格每次修改的时间?

    Q:我想要在用户修改工作表指定单元格的内容时,在另一工作表中记录修改的时间。例如,在工作表Sheet1的单元格B2中,每次用户将该单元格值修改为某一大于0的数值...

    fanjy
  • 软件分享 | AutoCAD 2012安装教程

    2、打开安装包,双击安装程序,点击Browse,选择解压目标文件夹,可在D盘或其它盘里面新建一个CAD2012文件夹,然后点击Install。

    课代表
  • 软件分享 | AutoCAD 2017安装教程

    2、打开安装包,双击安装程序,点击更改,选择解压目标文件夹,可在D盘或其它盘里面新建一个CAD2017文件夹,然后点击确定

    课代表
  • Spring AOP(二) 修饰者模式和JDK Proxy

     在上边一篇文章中我们介绍了Spring AOP的基本概念,今天我们就来学习一下与AOP实现相关的修饰者模式和Java Proxy相关的原理,为之后源码分析打下...

    程序员历小冰
  • Spring AOP(二) 修饰者模式和JDK Proxy

     在上边一篇文章中我们介绍了Spring AOP的基本概念,今天我们就来学习一下与AOP实现相关的修饰者模式和Java Proxy相关的原理,为之后源码分析打下...

    程序员历小冰
  • 快速学习JasperReport-Chart图表

    (3)创建chart图标 第一步:palette面板找到chart图表,拖拽到band中 第二步:选择需要的图表类型

    cwl_java

扫码关注云+社区

领取腾讯云代金券