前端技能学习导航

编辑工具

WebStormJetbrains公司旗下一款JavaScript 开发工具，被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能

Sublime Text一套跨平台的文本编辑器，支持基于Python的插件。Sublime Text 是专有软件，可通过包（Package）扩充本身的功能。大多数的包使用自由软件授权发布，并由社区建置维护

Aptana一个基于Eclipse的集成式Web开发环境，其最广为人知的是它非常强悍的JavaScript编辑器和调试器

Notepad++一套自由软件的纯文本编辑器，由台湾人侯今吾基于同是开放源代码的Scintilla文本编辑组件并独力研发

Brackets一个免费、开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具)。该项目由 Adobe 创建和维护，根据MIT许可证发布，支持 Windows、Linux 以及 OS X 平台

Dreamweaver第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页

TopStyle一款 CSS 开发辅助工具，即 HTML5 / CSS3 编辑器，它专注于 HTML CSS 设计辅助，提供比较多的功能，如 CSS 代码检查等，据称 TopStyle 的帮助文件非常好，有详细的 CSS 指令，适于初次接触 CSS 的学习之用

Komodo一个跨平台支持多种程序语言的Integrated Development Environment （IDE）软件，目前他支持了在Windows与Linux上，Pythone, Ruby, Rails, Perl, HTML, CSS, and JavaScript,等的程序语言开发，以及多种程序语言语法着色

ChocolatMac系统上最新出现的一款强大的文本编辑器，兼具原生的Cocoa及强大的文本编辑功能。Chocolat支持多种编程语言的关键字高亮显示、窗口分割、标签页、色彩主题等功能。界面和MacVim非常相似

AtomGithub 专门为程序员推出的一个跨平台文本编辑器。具有简洁和直观的图形用户界面，并有很多有趣的特点：支持CSS，HTML，JavaScript等网页编程语言。它支持宏，自动完成分屏功能，集成了文件管理器

在线IDE

Dabblet跨浏览器兼容，对前端攻城师们来说是一个不得不处理的问题。为了在浏览器间呈现统一的显示效果，攻城师们不仅要为每个游览器添加CSS前缀，甚至还需要用到一些特殊的CSS Hack技巧。于是，jsFiddle、JSBin等前端代码的在线测试工具应运而生。然而，使用jsFiddle仍有很多不便之处。为了解决这个问题，前端攻城师Lea Verou自己动手，开发了一个名为Dabblet的HTML和CSS代码段在线测试工具

JsfiddlejsFiddle是一个在线的shell编辑器，通过流行的JS框架创建自定义的环境，以简化JS代码。可以用于测试示例代码。不仅如此，你还可以添加一个Ajax echo后端，并且通过一系列的JavaScript框架自动载入资源，如MooTools, jQuery, Dojo, Prototype, YUI, Glow,Vanilla等

CodeMirror又一款“Online Source Editor”，基于Javascript，短小精悍，实时在线代码高亮显示，他不是某个富文本编辑器的附属产品，他是许多大名鼎鼎的在线代码编辑器的基础库

JS BinJSBin 是一个 Web 应用，主要用于帮助测试 JavaScript 和 CSS 的代码片段。功能与 jsFiddle 网站一致

Cloud9利用了云技术，运行在浏览器中，允许你随时随地运行、调试和部署应用程序。一个完整的game-changer会永久性的改变应用程序的开发方式。Cloud 9可以让你集中精力编程，不用顾及到搭建环境等琐事中

JS框架

AngularJSGoogle收购，用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程，提供web应用的架构，无需进行手工DOM操作。 AngularJS很小，只有60K，兼容主流浏览器，与 jQuery 配合良好

Backbone.js一种种重量级javascript MVC 应用框架,通过Models进行key-value绑定及custom事件处理,通过Collections提供一套丰富的API用于枚举功能,通过Views来进行事件处理及与现有的Application通过RESTful JSON接口进行交互

Ember.js一个雄心勃勃的Web应用程序，消除了样板，并提供了一个标准的应用程序架构的JavaScript框架

knockout一个轻量级的UI类库，通过应用MVVM模式使JavaScript前端UI简单化

todomvc帮助你选择一个MV*框架

Spine.js通常与 Backbone.js 进行比较；它受到 Backbone.js 的影响，并在使用率方面与前者接近。Spine.js 包含类、模型、控制器和视图，这比 Backbone.js 引入的集合更加传统一些

Polymer加盟Google的原Palm webOS开发团队打造，是一套以“一切皆组件、最少化代码量、最少框架限制”为设计理念的Web UI框架。Web Components则提供了一种更彻底的解耦方式，更加方便了UI的开发和模块化，可以说是Polymer的基础之一

ReactFacebook开源的JavaScript库，用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件

LABjsLoading 指异步并行加载，Blocking 是指同步等待执行。LABjs 通过优雅的语法（script 和 wait）实现了这两大特性，核心价值是性能优化

RequireJS鼓励代码的模块化，它使用了不同于传统 script 标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址

Sea.js简单友好的模块定义规范：Sea.js 遵循 CMD 规范，可以像 Node.js 一般书写模块代码。自然直观的代码组织方式：依赖的自动加载、配置的简洁清晰，可以让我们更多地享受编码的乐趣

Kissy淘宝开源，一款跨终端、模块化、高性能、使用简单的 JavaScript 框架。除了完备的工具集合如 DOM、Event、Ajax、Anim 等，它还提供了经典的面向对象、动态加载、性能优化解决方案。作为一款全终端支持的 JavaScript 框架，KISSY 为移动终端做了大量适配和优化，让你的程序在全终端均能流畅运行。

UI框架

Bootstrap目前开源社区最受欢迎的项目之一，可谓大名鼎鼎了，最新版本3.x兼容IE9+

Foundation属于WEB前端框架的先驱者，知名度被Bootstrap反超，但其优秀程度相比Bootstrap只强不弱！最新版本5.x兼容IE9+

Semantic UIUI框架的后起之秀，UI动画效果很棒，一个很有潜力的项目！兼容IE9+

knockout一个轻量级的UI类库，通过应用MVVM模式使JavaScript前端UI简单化

PureIE7+，大名鼎鼎的Yahoo!支持开发的UI框架，其特点简洁小巧，对于喜欢简洁的朋友来说是一个不可多得的好项目!

YAMLIE6+，一个历史悠久的前端框架，功能单一小巧，模块化的 CSS 框架，特点是灵活、可访问和响应式

jQuery UIIE6+,以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件

Famo.us用于构建移动应用以及桌面应用，独特之处在于其javaScript渲染引擎和3D物理引擎，它向开发者展示了使用JavaScript也能达到原生应用程序动画的质量

Concise适合从头构建移动应用，而且还包含了一个简单的网格布局系统、漂亮的印刷字体，以及少量花哨的特性

OnSenUI适合PhoneGap/Cordova混合应用的开发，它注重差劲可用的移动应用

Tuktuk一个轻量级的面向对象的CSS框架，使用它可以轻松地创建响应式、可扩展的网站。它包括多达12列的网格布局，以及表单、按钮、表格、打印字体等等

JS库

jQuery最新版v2.1.3 兼容IE9+，文档说明很全很想起，社区很大。操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能

Prototype最新版v1.7.2 兼容IE6+，非常优雅的javascript基础类库，对javascript做了大量的扩展，而且很好的支持Ajax

Zepto最新版v1.7.2 兼容IE10+，一个轻量级的针对现代高级浏览器的JavaScript库，它与jquery有着类似的api

YUI最新版v3.18.1 兼容IE10+，建立一个高互动的网页，它采用了AJAX, DHTML 和 DOM 等程式码技术

Underscore.js提供了100多个函数,包括常用的: map, filter, invoke — 当然还有更多专业的辅助函数,如:函数绑定, JavaScript模板功能,创建快速索引, 强类型相等测试, 等等

snapsvg用于在HTML前端生成SVG的JavaScript工具集；SVG的工具集其实有很多，如svg.js、raphaeljs，离开了这些工具，我们依然可以实现SVG作图，只不过要自己写SVG XML

Dojo让你更容易使Web页面具有动态能力，或者在任何能够稳定支持JavaScript语言的环境中发挥作用

MochiKit一个轻量级的js框架。MochiKit 主要受到 Python 和 Python 标准库提供的很多便利之处的启发，另外还缓解了浏览器版本之间的不一致性。

MooTools一个简洁，模块化，面向对象的JavaScript框架。它能够帮助你更快，更简单地编写可扩展和兼容性强的JavaScript代码。Mootools跟prototypejs相类似，语法几乎一样。但它提供的功能要比prototypejs多，而且更强大。比如增加了动画特效、拖放操作等等

Mock.js一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。根据数据模板生成模拟数据、模拟 Ajax 请求，生成并返回模拟数据、基于 HTML 模板生成模拟数据

Three.jsJavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象

D3.js最流行的可视化库之一，它可以将任意数据绑定到DOM（Document Object Model，文档对象模型），然后对该文件提供数据驱动转换。还可以将一组数据生成基本的HTML表，或生成一个SVG条形图

CSS库

Kite一个灵活的布局助手CSS库。Kite使用`inline-block`而不是最新的CSS语法。它注重实际，易于理解且容易使用。Kite用法与flexbox相似：justify-content,等等。你可以很轻松地创建复杂的模块。Kite是基于OOCSS 与 MindBEMding，它可以帮助您快速构建自己的组件。Kite支持几乎所有浏览器，它属于MIT许可

DynCSS将您的CSS解析成-dyn-(attribute)规则。这些规则是模拟浏览器事件(如滚动和缩放)的javascript表达式。其结果会应用到上面指出的CSS属性。你可以将任何CSS属性设置为动态–前提是它对于jQuery的css()方法是可写的。你可以通过附加-dyn-前缀并指定一个引用的javascript表达式来实现

Hover.CSS一个有用的CSS3悬停效果集合，可用于动作调用，按钮，商标，特性图片等。自定或直接应用到你自己的元素上都非常的简单。 hover.css可以用多种方式来使用; 可以复制粘贴你喜欢的效果到你自己的样式表里，也可以引用样式表。然后只需向你想要的元素需添加对应效果的class名称即可。如果你只打算使用一个或几个效果，最佳实践是复制粘贴一个效果。

Spinkit一个酷炫的加载动画CSS集合。 Spinkit使用CSS动画来创建吸引人的易于自定义的动画。该集合目标不是提供所有浏览器的解决方案–如果你需要支持哪些还没实现CSS动画属性（像是IE9及之前的版本）的浏览器，你需要检测下这些动画属性并实现一个变通方案。

Magic CSS3 Animations一个特殊效果的CSS3动画库，你可以免费用于你的web项目。简单的引用CSS样式：magic.css或精简版magic.min.css即可

Buttons一个可以创建高度自定义、灵活和现代感十足的web按钮的CSS库。该库由Sass+Compass构建，支持正方形、圆角矩形或者圆形的按钮，并且可选是否扁平以及其他自定义的效果（如发光）。所使用到的尺寸、颜色、效果和字体可以通过变量的帮助进行修改，并且可以非常容易的进行扩展。

CSS Spinner一个CSS螺旋动画加载的集合。每个旋转包含一个使用‘loader’ class的div，其文本内容为‘Loading…’。文本是为屏幕阅读器使用的且可用作老浏览器的后退的状态。

Typebase.css是个最小化的、可定制的字体样式表。它有less和SASS版本，所以能够很容易地修改融入现代的Web项目。它提供了所有排版所必要的基础工具且不需添加其他任何设计内容。它被创建用来完成项目发展和成长期时的修改，能和normalize.css很好的工作

Beautons一个用来创建漂亮、简洁按钮的易用库。你可以应用各种样式、函数已经其他的更多内容到按键上，包括改变它们的大小，设置它们的可用与否以及更多设置

Hint.css一个使用SASS构建只使用CSS和HTML的提示库。该库使用数据属性、内容属性、伪元素以及CSS3转换。提示框简洁漂亮，有箭头且可放置在父元素的任何一边

工程化工具

Gulp用自动化构建工具增强你的工作流程！

GruntJavaScript 世界的构建工具

FIS3解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题

Webpackwebpack is a module bundler. It packs CommonJs/AMD modules i. e. for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand.

NPM一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。

国外牛人

Paul Irish著名的前端开发工程师，同时他也是Chrome开发者关系团队成员，jQuery团队成员，Modernizr、 Yeoman、CSS3 Please和HTML5 Boilerplate的lead developer

TJ Holowaychuk程序员兼艺术家，Koa、Co、Express、jade、mocha、node-canvas、commander.js 等知名开源项目的创建和贡献者

Addy Osmani谷歌前端开发工程师，创建了 TodoMVC、jQuery UI Bootstrap、jQuery Plugin Patterns 和 Backbone Paginator，出版了《Learning JavaScript Design Patterns》和《Developing Backbone.js Applications》两本技术书籍，而且还是著名的 jQuery、Modernizr 以及Backbone.js 框架的贡献者

John ResigjQuery的创始人和技术领袖，目前在Mozilla担任JavaScript工具开发工程师。著有《Pro JavaScript Techniques》（即《精通JavaScript》）等经典JavaScript书籍

Douglas CrockfordJavaScript开发社区最知名的权威，是JSON、JSLint、JSMin和ADSafe之父，是《JavaScript: The Good Parts》的作者。他同时也服务于ECMA的JavaScript2.0技术委员会（TC39）

Mike Bostock纽约时报图形编辑，知名可视化库 D3.js的主要作者

Mark OttoTwitter前设计师，与Jacob Thornton合作开发了大名鼎鼎的CSS/HTML框架Bootstrap

James Hallidaynode社区最活跃的贡献者，NPM排名仅次于TJ Holowaychuck，在写代码之外他还是个自成一派的插画家。目前substack在NPM上发布了300+的模块

Mr.doobJS三维模型库three.js, Code Editor（编码器）的作者

Jessica Lord2013年5月份加入Github设计团队。是开源项目sheetsee.js的作者

Steve Souders就职于Google；《High Performance Web Sites》的作者，创建了YSlow，位居Firefox扩展TOP25的首位，创建了很多其他的性能工具和服务，包括HTTP Archive、Cuzillion、Jdrop、SpriteMe、ControlJS和Browserscope，担任Velocity的联合主席，Firebug Working Group的联合创始人，在斯坦福大学教授 “CS193H: High Performance Web Sites”科目，经常进行公开演讲

Mathias Bynens协助开发多个开源项目，如jsPerf、HTML5 Boilerplate

国内牛人

玉伯淘宝前端类库 KISSY、前端模块化开发框架SeaJS、前端基础类库Arale的创始人

阮一峰70年代生于上海。毕业于上海财经大学，经济学博士，同时也是程序员，个人博客访问量过千万，译有《黑客与画家》、《软件随想录》。目前供职于一所上海本地高校。本文为阮一峰笔记体博客文集《如何变得有思想？》和《一个寻找作者的读者》的代序

老赵金融行业程序员，目前就职于摩根大通（香港）。多年微软MVP，InfoQ中文站兼职编辑。虽然广泛涉猎各类技术，但早就被人民群众贴上“微软”标签，现已认命

朴灵阿里数据平台数据产品部资深工程师。致力前端、数据可视化、Node等领域

克军前雅虎中国前端工程师，现豆瓣前端工程师，休闲范儿长发帅哥一枚

司徒正美著名的JavaScript专家，去哪儿网前端架构师，立志做考古学家的日语系工程师，穿梭于二次元与二进制间的“魔法师”，做过陶艺，写过小说，涉猎Java、Ruby、 JavaScript。曾出版《JavaScript框架设计》一书

Winter阿里巴巴高级技术专家，著名JavaScript专家。曾参与Bambook开发，更早为微软工作，开发Windows CE平台的IE浏览器

周爱民Node-Webkit的项目发起人。目前任职于Intel公司开源技术中心（OTC），从事Web和浏览器技术开发工作。现在主要工作是开发和维护Node-Webkit项目。此前从事过MeeGo、Tizen和JNI xml性能库的开发和数据中心解决方案服务。毕业于中科大少年班，在计算机系获得博士学位，研究方向为高性能计算

小鱼国内资深前端开发工程师，Web 标准布道者，前支付宝前端开发部 CSS 样式库负责

苏千淘宝网数据产品部资深Web开发工程师，CNode.org社区核心成员

汤姆大叔熟悉Waterfall、Agile(Scrum&XP)，染指C#、ASP.NET、MVC、EF、NHibernate、SQL Server、Oracle、JavaScript、HTML5、CSS3、JQuery、Knockout、Silverlight、WPF、WCF、ADFS等技术

何去何从

内推网内推网，一个接地气的互联网招聘社区，专注于做互联网行业内部推荐、公司直招类型的网络招聘；内推网打造内推行业最大最专业的互联网招聘、内部推荐的网络招聘平台，内推网(neitui.me)，互联网招聘内部推荐直招平台。内推网(neitui.me)，互联网招聘内部推荐直招平台

拉勾网拉勾网于2013年7月20日上线，专业的互联网领域招聘平台，专注于为互联网从业者提供更好的职业机会，企业覆盖领域包括互联网、移动互联网、电子商务、游戏、O2O、大数据、云计算、社交网络、互联网金融、在线教育、在线旅游、等25个互联网细分市场

周伯通公司源于豆瓣小组上的积累，组长冯涛（兽汰姆）创业做了周伯通招聘。冯涛给周伯通划定的方

今天的文章前端技能学习导航分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/14679.html

前端技能学习导航

编辑工具

在线IDE

UI框架

JS库

CSS库

推荐书籍

工程化工具

国外牛人

何去何从

发表回复

前端技能学习导航

编辑工具

在线IDE

UI框架

JS库

CSS库

推荐书籍

工程化工具

国外牛人

何去何从

相关推荐

发表回复