欢迎光临
我们一直在努力

史上较全的前端开发知识资料(不断更新中,欢迎补充)

网上流传着一张,拔赤的前端开发知识结构图,本文由达维营根据资料进一步进行了编辑整理(不断更新中),因资料太多,无法一一整理。

编辑日志:

1、2016.4.16 将该类文章全部整合(就是网上流传那张图片)

2、2016.4.28 添加前端工具合集,见附录

1、浏览器

IE6/7/8/9/10/11 (Trident)

Firefox (Gecko)

Chrome/Chromium (Blink)

Safari (WebKit)

Opera (Blink)

2、编程语言

JavaScript

Node.js

CoffeeScript

TypeScript

PHP/Python/Perl/Ruby/Bash Shell等服务端脚本语言

3、切页面

HTML/HTML5

CSS/CSS3

Sass/LESS/Stylus/postCSS

PhotoShop/Paint.net/Fireworks/GIMP/Sketch/illustrator

4、开发工具

(1)编辑器和IDE

VIM:是一个类似于Vi(Vi:Unix及Linux系统下标准的编辑器)的著名的功能强大、高度可定制的文本编辑器,在Vi的基础上改进和增加了很多特性。

Sublime Text2:是一个代码编辑器(Sublime Text 2是收费软件,但可以无限期试用),也是HTML和散文先进的文本编辑器,Sublime Text是为程序员准备的最好的文本编辑器之一(尽管不是最最好的)。Sublime 囊括了众多特性并且拥有很棒的界面外观,在三大主流桌面操作系统上均能运行,即 Windows, Mac 还有 Linux 之上。

Notepad++:Windows操作系统下的一套文本编辑器(软件版权许可证: GPL),有完整的中文化接口及支持多国语言编写的功能(UTF8技术)。

EditPlus:是一款由韩国 Sangil Kim (ES-Computing)出品的小巧但是功能强大的可处理文本、HTML和程序语言的Windows编辑器,你甚至可以通过设置用户工具将其作为C,Java,Php等等语言的一个简单的IDE。

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

IntelliJ IDEA(推荐):IDEA 全称 IntelliJ IDEA,是java语言开发的集成环境,IntelliJ在业界被公认为最好的java开发工具之一,尤其在智能代码助手、代码自动提示、重构、J2EE支持、各类版本工具(git、svn、github等)、JUnit、CVS整合、代码分析、 创新的GUI设计等方面的功能可以说是超常的。IDEA是JetBrains公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。它的旗舰版本还支持HTML,CSS,PHP,MySQL,Python等。免费版只支持Java等极少数语言。达维营

Emacs :著名的集成开发环境和文本编辑器。Emacs被公认为是最受专业程序员喜爱的代码编辑器之一,另外一个vim。

EmacsWiki :是Emacs编辑器的一个插件,它允许你从本地系统创建一个Wiki并输出为HTML页面。

Brackets :Adobe Brackets是一款开源、简洁强大的HTML、CSS和JavaScript集成开发环境,支持增加外挂程式以提供额外的功能扩展,目前可用的外挂程式例如支持增加侦错、浏览器特定CSS前缀、JSDoc注解等。

Atom :它由 Github 出品的一款各方面体验都很像 Sublime Text 的编辑器,目前免费。

Lime Text :Lime Text 的后端采用 Go 实现,前端则使用了 ermbox,Qt (QML) 及 HTML/JavaScript。开发正根据完全明确可见的目标逐步进行中。你能够在它的 Github 页面中为项目贡献自己的力量。

Light Table :是由Microsoft Visual Studio部门项目经理Chris Granger离职后开发的全新理念的IDE,支持多种语言。Light Table的理念也非常简单念:写程序需要的是真正的工作台,不只是编辑器和项目浏览器。

Codebox :Codebox 是一个完整的且模块化的云端 IDE。它可以运行在任何类 Unix 设备上(Linux、Mac OS X)。它是 codebox.io 的开源组件。

TextMate:是Mac下的著名的文本编辑器软件,与BBedit一起并称苹果机上的emacs和vim。尤其适合程序员使用,可以定制许多贴心使用的功能。

Neovim :VIM的fork项目。Vim 不支持异步并发,Neovim 支持。

Komodo IDE / Edit :可以在 Windows、Mac OS X 和 Linux 上运行,并支持通用的开源语言 —— Python、Perl、PHP 和 Ruby。代码智能引擎非常可靠。

Eclipse :是一个开放源代码的、基于Java的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。幸运的是,Eclipse 附带了一个标准的插件集,包括Java开发工具(Java Development Kit,JDK)。

Visual Studio/Visual Studio Code :Microsoft Visual Studio(简称VS)是美国微软公司的开发工具包系列产品。VS是一个基本完整的开发工具集,它包括了整个软件生命周期中所需要的大部分工具,如UML工具、代码管控工具、集成开发环境(IDE)等等。所写的目标代码适用于微软支持的所有平台

NetBeans :由Sun公司(2009年被甲骨文收购)在2000年创立,它是开放源运动以及开发人员和客户社区的家园,旨在构建世界级的Java IDE。NetBeans当前可以在Solaris、Windows、Linux和Macintosh OS X平台上进行开发,并在SPL(Sun公用许可)范围内使用。

Cloud9 IDE :是一个基于Node.JS构建的JavaScript程序开发Web IDE。它拥有一个非常快的文本编辑器支持为JS, HTML, CSS和这几种的混合代码进行着色显示。

HBuilder :一款国产的ID,我只想呵呵~

Nuclide :是Facebook开发的开发React Native的开发工具,基于Github的Atom开发,以Atom插件的形式存在。

Aptana:是一个非常强大,开源,JavaScript-focused的AJAX开发IDE。它的特点包括: JavaScript,JavaScript函数,HTML,CSS语言的Code Assist功能。

CygWin:是一个在windows平台上运行的类UNIX模拟环境,是cygnus solutions公司开发的自由软件(该公司开发的著名工具还有eCos,不过现已被Redhat收购)

(2)调试工具

Firebug :Firebug是firefox下的一个扩展,能够调试所有网站语言,如Html,Css等。

Firebug-lite:Firebug Lite是Firebug的一个子集,支持IE、Opera和Safari这三款主流浏览器。目前有些功能还不太完整,对CSS式样进行实时分析还不错,但Firefox版的Yslow功能却不可用。

Firecookie : 是一款基于firebug的cookie调试工具,可以方便的查看firefox上各个站点的cookie信息。

YSlow:是Yahoo发布的一款基于FireFox的插件,可以对网站的页面进行分析,并告诉你为了提高网站性能,如何基于某些规则而进行优化。

IEDeveloperToolbar :IE开发者工具

IETester :是一个WebBrowser控件,包含有5.5到11等几个版本的IE浏览器,界面美观。

Fiddler :是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的“进出”Fiddler的数据(指cookie,html,js,css等文件,这些都可以让你胡乱修改的意思)。

Chrome Dev Tools Chrome开发者工具。

Dragonfly :(Opera Dragonfly)是适用于 Opera 浏览器的跨设备、跨平台的调试环境 – 调试 JavaScript、检查和编辑 CSS 与 DOM,以及查看手机或计算机上的任何错误。

DebugBar :DebugBar插件是一款功能很强大的IE插件,用户可以从各个不同的角度剖析Web页面内部,包括页面 详细代码、CSS样式表、所有链接、所有图片代码、脚本信息等等

Venkman :作为基于Mozilla的浏览器(如Firefox)的扩展,Venkman JavaScript调试器提供了一个功能完整的JavaScript调试环境。

Web Inspector:Web检查器,是Safari浏览器提供的一组javascript工具。

Smushit:是一款免费在线图片压缩小工具,可最优化压缩你的图片文件大小,却不会影响图片的质量和视觉效果,比通过Photoshop软件来压缩图片好多了。

SuperPreview:是微软发布的网页开发调试工具,自带有很多元素查看工具,如箭头、移动、辅助线、对比……,在查看网页的IE6/IE7/IE8不同表现的同时,可以对比效果。

JsBeautifier:(在线版,可汉化)微型的美化器可以重新调整 bookmarklet 和丑陋的JavaScript的格式和缩进,也可以对使用流行的 Dean Edward 的 Packer 打包的脚本进行拆包,对通过javascriptobfuscator.com 混淆的脚本进行反混淆。具体可以参考:http://jsbeautifier.org/

Wireshark:(前称Ethereal)是一个网络封包分析软件。网络封包分析软件的功能是撷取网络封包,并尽可能显示出最为详细的网络封包资料。

TcpDump:可以将网络中传送的数据包完全截获下来提供分析。它支持针对网络层、协议、主机、网络或端口的过滤,并提供and、or、not等逻辑语句来帮助你去掉无用的信息。

(3)版本管理

工具:Git/SVN/Mercurial

代码托管: Github/GitLab/Bitbucket/Gitorious /GNU Savannah /Launchpad /SourceForge /TeamForge /Google Code

5、代码质量

(1)Coding style

JSLint :是一个JavaScript验证工具(非开源),可以扫描JavaScript源代码来查找问题。

JSHint :跟JSLint非常像,都是Javascript代码验证工具,这种工具可以检查你的代码并提供相关的代码改进意见。

jscs/ESLint

CSSLint :CSS Lint 能线上分析并检测你的网站 CSS 样式表有无任何潜在问题,http://csslint.net/。

Markup Validation Service :W3C提供免费的Markup Validation Service ,这是一个可以验证Html/XHtml文档的语法规范的公共服务。http://validator.w3.org/

HTML Validator :代码规范性检测。

(2)单元测试

QUnit :是一个强大的JavaScript单元测试框架,该框架是由jQuery团队的成员所开发,并且是jQuery的官方测试套件。http://qunitjs.com/

Jasmine :是一款 JavaScript 测试框架,它不依赖于其他任何 JavaScript 组件。它有干净清晰的语法,让您可以很简单的写出测试代码。对基于 JavaScript 的开发来说,它是一款不错的测试框架选择。http://jasmine.github.io/

Mocha :测试框架,是一个简单、灵活有趣的 JavaScript 测试框架,用于Node.js和浏览器上的JavaScript应用测试。http://mochajs.org

Should :断言库 should : https://github.com/tj/should.js

Chai :是一套TDD(测试驱动开发)/BDD(行为驱动开发)的断言框架。http://chaijs.com/

Expect :追求极简的 BDD 风格断言库。

Unit JS

better-assert:C-style TDD 断言库,

istanbul :测试率覆盖工具

assert

(3)自动化测试

WebDriver :webdriver自动化俗称Selenium 2.0测试Web应用程序工具。

Protractor

Karma Runner

Sahi

phantomjs

SourceLabs

BrowserStack

Testacular:又名Karma。Google 已开源 Testacular,一个基于Node.js的JavaScript 测试执行过程管理工具(Test Runner)。该工具可用于测试所有主流Web浏览器,也可集成到 CI (Continuous integration)工具,也可和其他代码编辑器一起使用,可以在不同的桌面或移动设备浏览器上,或在持续集成的服务器上测试JavaScript代码。

Watir:全称是“Web Application Testing in Ruby”,发音类似“water”。它是一种基于网页模式的自动化功能测试工具。

6、前端库/框架

Web Atoms

Dhtmlx :是一个JavaScript 库,提供了一套完整的Ajax驱动的UI 组件。使用 dhtmlxSuite 生成企业级 web 应用程序有干净的界面、 快速的性能和丰富的用户体验。

qooxdoo :是一个全面和创新的AJAX。利用面向对象的JavaScript允许开发令人印象深刻的跨浏览器的应用。没有HTML,CSS知识,也不是必要的。

Brick

vue.js :数据驱动的组件,为现代化的 Web 界面而生

(1)MVC框架

React :React.js(React)是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。Facebook开源了React,这是该公司用于构建反应式图形界面的JavaScript库,已经应用于构建Instagram网站及Facebook部分网站。最近出现了AngularJS、MeteorJS 和Polymer中实现的Model-Driven Views等框架,React也顺应了这种趋势。React基于在数据模型之上声明式指定用户界面的理念,用户界面会自动与底层数据保持同步。与前面提及的框架不同,出于灵活性考虑,React使用JavaScript来构建用户界面,没有选择HTML。

AngularJS :诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

Batarang :Angular chrome 插件 Batarang

Backbone.js :是一个开源的、轻量级的MVC框架。它诞生于2010年,发展的非常迅速,很快就成长为一种替代笨重的、全功能MVC架构(比如ExtJS)的JavaScript框架。

Ember.js :EmberJS要追述源头得回到2007年,它源于SproutCore MVC框架,SproutCore框架最初是由SproutIt公司开发,后来由Apple接手并演进和维护。直到2011年,Yehuda Katz(他是jQuery项目和Ruby on Rails项目的核心贡献者)发起了EmberJS项目。

Polymer:polymer是Google创造的一个web components规范的一个实现。而angularjs是一个MVVM的框架。本质上的区别在于一个是创造小而美的组件,一个是创造大而全的框架。

Knockout.js :严格来说并不是MVC框架,而是MVVM(Model -View-ViewModel)框架

(2)DOM操作

jQuery :JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。

Underscore :是一个 JavaScript 工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象。 他解决了这个问题:“如果我面对一个空白的 HTML 页面,并希望立即开始工作,我需要什么?” 他弥补了 jQuery 没有实现的功能,同时又是 Backbone 必不可少的部分。Underscore 提供了100多个函数,包括常用的:map、filter、invoke — 当然还有更多专业的辅助函数,如:函数绑定、JavaScript 模板功能、创建快速索引、强类型相等测试等等。

Mootools :MooTools是一个简洁,模块化,面向对象的开源JavaScript web应用框架。它为web开发者提供了一个跨浏览器js解决方案。在处理js、css、html时候。它提供了一个比普通js更面向对象的documentAPI。

Prototype.js :prototype.js 是Sam Stephenson写的一个非常优雅的javascript基础类库,对javascript做了大量的扩展,而且很好的支持Ajax,国内外有多个基于此类库实现的效果库,也做得很棒。prototype.js不仅是一个有很大实用价值的js库,而且有很高的学习价值。

Zepto

YUI Library(YUI2/YUI3)

YUI3/Dojo/ExtJS/KISSY

Django :是由 Python 开发的一个免费的开源网站框架,可以用于快速搭建高性能,优雅的网站!

(3)模板引擎

A、Underscore.js

B、Handlebars.js :是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板。

C、mustache.js

(4)UI框架

Bootstrap

Semantic UI

Juice UI

(5)图表

A、three.js

B、D3.js

C、KineticJS

D、EaselJS

E、Processing.js

(5)JavaScript的取代品

在为了提高运行速度而意图取代JavaScript的语言或工具中,人气最高的为以下五个:

A、CoffeeScript

B、TypeScript

C、Dart

D、Haxe

E、JSX

(6)CSS预处理器

A、Less

B、Sass

C、Stylus

(7)JavaScript测试工具

最后,在测试JavaScript脚本代码时可以使用的工具中,人气最高的为以下四个:

A、QUnit

B、Jasmine

C、Mocha(支持Node.js)

D、JsTestDriver

Smarty

YUI Test :对JavaScript 进行单元测试的工具

Zend

 

7、前端标准/规范

HTTP/1.1: RFCs 7230-7235

HTTP/2

ECMAScript3/5

ECMAScript6

W3C: DOM/BOM/XHTML/XML/JSON/JSONP/…

CommonJS Modules/AMD

HTML5/CSS3

Semantic Web:MicroData/RDFa

Web Accessibility:WCAG/Role Attribute/WAI-ARIA

 

 

POSH、XOXO、RSS/ATOM,RDF

YAML,JSON_RPC,Bayeux,

Microformat,WF2.0

8、性能

JSPerf

YSlow 35 rules

PageSpeed

HTTPWatch

DynaTrace’s Ajax

高性能JavaScript

 

WebPageTest

ShowSlov/YSlow/34Rule

Charles

9、编程知识储备

数据结构

OOP/AOP

原型链/作用域链

闭包

编程范型

设计模式

Javascript Tips

面向对象、切面编程

函数式编程

 

10、流程/部署

(1)压缩合并

YUI Compressor

Google Clousure Complier

UglifyJS

CleanCSS

JSMin

TPacker-minifier

(2)文档输出

JSDoc

Dox/Doxmate/Grunt-Doxmate

(3)项目构建工具

make/Ant

GYP

Grunt

Gulp

Yeoman

FIS

Mod

11、代码组织

(1)类库模块化

CommonJS/AMD

YUI3模块

webpack

(2)业务逻辑模块化

bower/component

(3)文件加载

LABjs

SeaJS/Require.js

(4)模块化预处理器

Browserify

12、安全

CSRF 即 CSRF, CSRF(Cross-site request forgery 跨站请求伪造,也被称成为 “one click attack”或者 session riding,通常缩写为 CSRF 或者 XSRF,是一种对网站的恶意利用。尽管听起来像跨站脚本( XSS),但它与 XSS 非常不同,并且攻击方式几 乎相左。 XSS 利用站点内的信任用户,而 CSRF 则通过伪装来自受信任用户的请求来 利用受信任的网站。与 XSS 攻击相比,CSRF 攻击往往不大流行(因此对其进行防范 的资源也相当稀少)和难以防范,所以被认为比 XSS 更具危险性。

XSS

CSP

Same-origin policy

ADsafe/Caja/Sandbox

13、移动Web

HTML5/CSS3

响应式网页设计

Zeptojs/iScroll

V5/Sencha Touch

PhoneGap

jQuery Mobile

W3C Mobile Web Initiative

W3C mobileOK Checker

Open Mobile Alliance

React Native

iPhone/iPad/IOS/Android

14、JavaScript生态

MongoDB/CouchDB

15、开放服务

YAP,BOSS,SearchMonkey,

AppEngine

GoogleAjax API,Flickr Services,Search API,

Google Map,51Map等 地图服务

16、前沿技术社区/会议

D2/WebRebuild

NodeParty/W3CTech/HTML5梦工厂

JSConf/沪JS(JSConf.cn)

QCon/Velocity/SDCC

JSConf/NodeConf

CSSConf

YDN/YUIConf

HybridApp

WHATWG

MDN

codepen

w3cplus

CNode

UED Teams

17、计算机知识储备

编译原理

计算机网络

操作系统

算法原理

软件工程/软件测试原理

Unicode

18、软技能

知识管理/总结分享

沟通技巧/团队协作

需求管理/PM

交互设计/可用性/可访问性知识

SEO

19、可视化

SVG/Canvas/VML

SVG: D3/Raphaël/Snap.svg/DataV

Canvas: CreateJS/KineticJS

WebGL/Three.JS

20、后端工程师

(1)编程语言

C/C++/Java/PHP/Ruby/Python/…

(2)网页服务器

Nginx

Apache

Lighttpd

LAMP:Linux+Apache+Mysql/MariaDB+Perl/PHP/Python一组常用来搭建动态网站或者服务器的开源软件,本身都是各自独立的程序,但是因为常被放在一起使用

(3)数据库

SQL

MySQL/PostgreSQL/Oracle/DB2

MongoDB/CouchDB

(4)数据缓存

Redis

Memcached

(5)文件缓存/代理

Varnish

Squid

(6)操作系统

Unix/Linux/OS X/Windows

(7)数据结构

转载请注明出处:达维营 史上较全的前端开发知识资料(不断更新中,欢迎补充)

参考资料:

https://github.com/JacksonTian/fks

http://html5ify.com/fks/fks_chart/

附:前端工具合集:

前端组织

虽混过外企俩家,但劳资英文这项的技能点还是灰色的…so,俺关注的站点主要以中文为主

名称 推荐指数 备注/说明
Git ★★★★★ 劳资清楚这不是个纯粹的前端社区… 但作为全球最大的搞基社区,无数前端项目在这启航 没Git都不好意思面基有木有!
MDN ★★★★★ 不解释,无数的资源再等着你探索
Awesomes.cn ★★★★☆ 国人维护的前端资源库,深度对接到 Github
慕课 ★★★★☆ 大量的在线计算机课程。 虽然初、中级居多,但是不乏有巨作值得细细品尝
W3Cplus ★★★★☆ 大漠(《图解CSS3》作者)在国内的影响力杠杠的 Sass专家级
百度Web前端研发部 ★★★★ 确实对得起“研发”这个称呼 FIS、UEditor等就是他们搞出来的
前端乱炖 ★★★☆ 前端社区太多,乱炖还算做的不错的
极客学院 ★★★ 和慕课类似,但是内容更杂、更丰富 PS:貌似比较新颖的教程都是收费的
Div.IO ★★★ 主要内容是最新的前端库和前沿技术
腾讯全端AlloyTeam ★★★ 腾讯Web前端团队

前端博客

值得长期占坑的前端个人博客,都是偶经常关注的

名称 推荐指数 备注/说明
如何跟上前端开发的最新前沿 ★★★★★ RT
阮一峰 ★★★★★ 关注多年,拜读其ES6系列… 虽网传靠写书进鸟阿里,但博客内容确实够丰富
粉丝日志for张丹 ★★★★★ 大爱作者写的Node系列
张鑫旭 ★★★★★ 成名多年的、高产的前端大湿

博客搭建

名称 推荐指数 备注/说明
hexo ★★★★★ 快速、简洁且高效的博客框架
jekyll ★★★★ 将纯文本转化为静态网站和博客
Tumblr ★★★ 轻博客的祖师爷
WordPress 这玩意古老到我都不想介绍鸟

使用hexo/jekyll + GitPage,前端搭建静态博客那是相当easy。用Markdown写文章做记录,再push到Git上,分分钟高大上有木有

CSS

名称 推荐指数 备注/说明
LoadersCSS ★★★★☆ 用CSS技术实现loading动画; 补一句,想熟悉、理解keyframes、animation、transform、transition的童鞋可以直接去读其源码(只有千把行代码),读完就算出师鸟:)
WeUI ★★★★☆ 一套同微信原生视觉体验一致的基础样式库 为微信Web开发量身设计,令用户的使用感知更加统一
HINT.css ★★★★ 一款非常小巧的提示框效果
Hover.css ★★★★ 很多鼠标Hover态的效果,可以给产品学习一下:)
csscss ★★★★ 用于检查css代码冗余
purecss ★★★☆ 小巧的响应式CSS库,Yahoo!出品

浏览端JS

名称 推荐指数 备注/说明
Echarts ★★★★★ 好用,最关键的是支持的图表展示非常之多,强烈推荐
Swiper ★★★★★ 强大的Slider库 其实这类效果库非常多,但文档能那么专业的就很少鸟
fullPage ★★★★☆ 非常好用的全屏滑动库,看demo就明白
PhotoSwipe ★★★★☆ 偶常用的js库 官网上有这么一句很关键、重要”no dependencies”
Vuejs ★★★★☆ 比较喜欢其作者… 所以劳资正在看源码学习学习
emojify.js ★★★★ 能够将emoji关键词转换为emoji图片的JS插件 可以快速的为你的网站提供emoji表情支持
Highcharts ★★★★ Highcharts中文网,又是一个图表库 确实功能强大,但是觉得不好看… PS:官网就做的不好看,脏脏的赶脚
videojs ★★★☆ 当下视频需求都用上<video>鸟 样式和交互统一的问题交给videojs搞定:)
clipboard ★★★☆ 仅2kb大小,搞定剪贴板功能,屌不屌~ 但是,Safari不支持…
impress.js ★★☆ 用来写PPT不错,偶也曾为其写过一篇impress.js初体验
Cropper ★★☆ 国人开发的图片裁剪库

Swiper/PhotoSwipe/fullPage有这仨库,微信里常见的H5页完全不是问题哒

NodeJS

作为一名大前端甚至是多端,Node绝逼是必备的一块

社区活跃、部署方便都是令我对Node爱不释手的主要原因

推荐Package

这里介绍些有特色且前端有必要知道的包
名称 推荐指数 备注/说明
anywhere ★★★★★ 随时随地将你的当前目录变成一个静态文件服务器的根目录
supervisor ★★★★★ 监控Node代码,自动重启。 A supervisor program for running nodejs programs
nodemon ★★★★★ 监控Node代码,自动重启。 Nodemon is a utility that will monitor for any changes in your source and automatically restart your server.
pm2 ★★★★★ 是一个带有负载均衡功能的Node应用的进程管理器
async ★★★★☆ 一个流程控制工具包,提供直接而强大的异步功能
lodash ★★★★☆ JS工具库Underscore.js的一个fork发展而来
socket.io ★★★★☆ 预计Node的实时框架 聊天室、页游等对实时性有高要求的较适用
Mongoose ★★★★☆ 让NodeJS更容易操作Mongodb数据库; 附上一篇Mongoose学习参考文档
koa ★★★★☆ 玩Node都知道express,但使用koa的就少很多,门槛比Ex稍高 通过generator避免繁琐的回调函数嵌套,强烈推崇官方的文章教程
Shipit ★★★★☆ 一个强大的自动化部署工具。 shipit很多地方非常类似gulp,他们的核心都是任务系统。
node-inspector ★★★★☆ Node调试工具,使用起来跟Chrome的JS调试器很相似
winston ★★★★☆ Node服务最流行的日志库之一
thenify-all ★★★★ 把异步的方法变成Promise的 Promisifies all the selected functions in an object
PhantomJS ★★★★ 一般用来做抓取截图和无界面测试 也可以用来操作DOM和网络监测,很好玩的库Quick Start
Mocha ★★★★ Node里最常用的测试框架; 它支持多种node的assert libs; 同时支持异步和同步的测试,同时支持多种方式导出结果; 也支持直接在browser上跑JS代码测试。
everyauth ★★★★ OAuth的集成解决方案
shelljs ★★★☆ 写Node时难免需要用shell去操作些神马 shelljs是基于Node的shell工具,Api及其简单
hashids ★★★☆ 看名称就懂,给userid加解密用的
colors ★★☆ 花俏的小工具 让打印console.log时有更好的展示样式

supervisornodemon这俩都是监控Node代码,使得每次修改代码后会,开发Node程序必备

以上库俺都有使用过,甚至有不少都是项目开发中、各种特定场景下必用的,有任何使用问题欢迎沟通哈:)

Node学习指南

名称 推荐指数 备注/说明
node.js中文资料导航 ★★★★★ Node的中文资料导航,start1300+
从零开始nodejs系列文章 ★★★★★ 基本上每一篇都看过,强烈推荐
Node.js 包教不包会 ★★★★★ 值得阅读,看完绝不用买书鸟
七天学会NodeJS ★★★★★ 劳资还没看,不过看目录还不错:)

Build 项目构建

Gulp+Webpack的使用套路参考:learning-gulp

Gulp资料收集:use-gulp

推荐篇与Webpack相关的文章《CSS Modules

Webpack用起来吼吼:webpack-howto

名称 推荐指数 备注/说明
Webpack ★★★★★ 项目构建工具,由于过于复杂和太强大,所以劳资还没去深入研究。精选阅读中有篇资料就是介绍Webpack和React的工作机制。
Gulp ★★★★★ Gulp是基于Node实现Web前端自动化开发的工具。 学习资料附上GulpBook
Bower ★★★★☆ 前端项目的包管理其实是件复杂的事 谁谁谁依赖谁谁谁,谁谁谁依赖谁谁谁的某个版本…卧槽 Bower就是搞定这件事儿的,亲爹是Twitter 推荐篇Bower的中文文章:《bower解决js的依赖管理》
Grunt ★★★★☆ 和Gulp类似,都是项目构建的常见选择 对比这俩的文章可谓不少,推荐篇《Gulp vs Grunt》英盲又想看文档,可以去Grunt中文网
Gitlab CI ★★★★ 一套基于Gitlab的持续集成服务

Gulp推荐包

Gulp最基础的库就不列在下表格中鸟,其中包括:

名称 推荐指数 备注/说明
gulp-webpack ★★★★★ webpack与gulp配合,开启前端Build新纪元 webpack plugin for gulp
gulp-rev ★★★★☆ 高大上第一步,静态文件名称变成HASH名称
gulp-rev-collector ★★★★☆ 配合gulp-rev使用,自动用HASH替换模板内静态文件名
run-sequence ★★★★ Gulp任务机制为并行,RS使得有依赖的任务可串行执行 使用gulp-rev时得用RS配合 要不并行的生成配置和处理.html文件不能同事生效
gulp-util ★★★★ 内含一套方法库,功能太多 个人感觉更喜欢功能单一的包,不太喜欢这种大杂烩
gulp-connect ★★★★ 有reload功能的Run Webserver工具 我一般用来livereload,即保存之后自动刷新页面
gulp-load-plugins ★★★★ 可加载package.json内与Gulp相关的插件 省去鸟一行一行require的功夫咯
gulp-clean ★★★☆ 移除文件或文件夹的包
gulp-replace ★★★☆ 其功能看名字就知道,用做字符串替换的
gulp-autoprefixer ★★★☆ 叼炸天的自动处理浏览器前缀的包 文档地址:usage
gulp-rename ★★★ 把文件重命名 结构设计的好不太会用到这个
gulp-flatten ★★★ 删除或替换文件的相对路径; 一般我这用来移动img或者其他静态文件到新目录 同上:结构设计的好不太会用到这个

精选阅读

以下内容不包括NodeJS面试相关的,俺已经单独准备好鸟

名称 推荐指数 备注/说明
stream-handbook ★★★★★ 如果学习Nodejs,那么流一定是需要掌握的概念
ReactNative 中文版 ★★★★☆ 翻译自官方的中文文档
Mac设置指南 ★★★★☆ Mac使用必看 尤其适合 偏执狂/强迫症 患者:)
MongoDB极简实践入门 ★★★★☆ 入门推荐的套路,非常浅显易懂
ReactWebpackCookBook ★★★★☆ 此书会引导读者是进入ReactWebpack的世界。 俩都是非常前沿的技术,同时使用会更有趣。
ReactNative学习指南 ★★★★ 新玩意层出不穷… 对于能持续学习的童鞋,这是个美好的时代
HTML/CSS 编码规范 ★★★☆ 编写灵活、稳定、高质量的HTMLCSS代码的规范
GulpBook ★★★☆ Gulp是基于Node实现Web前端自动化开发的工具
Markdown资料 ★★★☆ 简单看些语法入门,快速用起来

前端面试

名称 推荐指数 备注/说明
在LinkedIn做面试官的故事 ★★★★★ 非面试题,介绍LinkedIn的面试过程 文章有很多中肯的建议和想法,推荐阅读
大漠:写给前端面试者 ★★★★★ 这篇文章不涉及任何的面试题 大漠与大家聊聊面试者与被面者之间的感受…
前端面试题 ★★★★☆ Git上非常火的前端面试题,start17k+

工具/软件

Web

名称 推荐指数 备注/说明
CanIuse ★★★★★ 前端必备;查看浏览器对各种新特性的兼容情况
百度脑图 ★★★★★ 非常方便的思维导图工具
ProcessOn ★★★★☆ 和百度脑图的功能类似,脑图工具。
VimAwesome ★★★★☆ Vim插件集合,Vim党必备
Tower ★★★★☆ 小而美的多人协同工具。 不光只有Web版,还有iPhone、iPad、Android、微信版。
smallpdf ★★★★ 提供各种格式和pdf互相转换
Cmd Markdown ★★★★ 好用的Web版Markdown编辑器
StackEdit ★★★★ 又是一款Web版Markdown编辑器
墨刀 ★★★★ 一个在线移动应用原型制作工具。 旨在帮助产品经理快速制作可在手机端展示的移动应用原型。
htm2pdf ★★★★ HTML to PDF
Speaker Deck ★★★★ 在线的演讲稿展示平台

APP

以下列表中的APP都是不区分系统平台的

名称 推荐指数 备注/说明
印象笔记 ★★★★★ 免费账号完全够用,跨平台跨终端的记录软件
多看阅读 ★★★★ kindle确实好,但是懒得随身带着 多看还算不错,书较多且偶尔有特价比较爽
Android
名称 推荐指数 备注/说明
小米桌面 ★★★★☆ 多好看、多漂亮谈不上,关键是没有广告
iPhone
名称 推荐指数 备注/说明
Monkey ★★★★ Monkey是iPhone上一个GitHub第三方客户端。 展示 GitHub 上的开发者的排名,以及仓库的排名

Mac

对于美好事务的追求无论何时都不算晚,前年公司给配了台Mac用做测试开发机,于是开始在Mac下办公。Windows?回不去鸟…

名称 推荐指数 备注/说明
Homebrew ★★★★★ 没它程序猿没法好好干活…Homebrew使OS X更完美。 使用gem来安装gems、用brew来搞定那些依赖包
iTerm2 ★★★★☆ Mac终端功能少又不好看,iTerm2可以解救你~
BrowseShot ★★★★☆ 我正在使用的网页截图工具,强烈推荐
WebStorm ★★★★☆ 功能超强的前端IDE,不多介绍,谁用谁知道
Atom ★★★★ 2015年7月之前,在桌面环境下我最喜欢的编辑器是Sublime。 但之后就是Atom,俺也专门为它写了篇使用纪要
马克鳗 ★★★★ MarkMan,非常强大好用的标注、测量工具。 日常工作免费版就完全可以满足,强烈推荐
Wireshark ★★★☆ 说实话,Mac下木有Fiddler挺不习惯,不过在有更强大的替代品
SourceTree ★★★☆ 一款好用的的Git客户端工具,重点是支持中文:)
focus booster ★★★ 因为比较在意时间管理,所以这软件是俺工作时间的必备之物
Mou ★★ 小清新的Markdown编辑器

Linux

名称 推荐指数 备注/说明
oh-my-zsh ★★★★★ 终端党必用的好工具,强烈推荐
tree ★★★★ linux以树状图逐级列出目录的内容
oneapm ★★★★ 强大的运维工具,提供多种监控客户端; 有采集、分析、展示等一套功能; PS:我这用了服务器监控(免费哦)
httpie ★★★☆ 一个CLI中的HTTP客户端 用法简单、易读

Chrome浏览器插件

名称 推荐指数 备注/说明
JSONView ★★★★★ 麻麻再也不用担心偶调试接口啦
wappalyzer ★★★★☆ 分析网站使用的技术 它可以检测网页的web服务器、JS框架等等
二维码生成器 ★★★★☆ RT
User-Agent Switcher ★★★★ 模拟各种终端的UA,达到调试目的
GitPlug ★★★☆ 在Git项目页中嵌入有关的图表信息
Infinity ★★☆ 针对Chrome的插件,新标签页会让你耳目一新

Git

名称 推荐指数 备注/说明
Git教程-廖雪峰 ★★★★☆ 俺有看过不少Git的文章,确实这个系列是最通俗易懂的
GitAwards ★★★★ Git工具,可以查看Git排名
Git速查 ★★★★ 分类清晰的速查表
Git简明指南 ★★★☆ 入门Git的简明指南,木有高深内容:)
git学习资料整理 ★★★ 内容包括很多git的相关资料,star1200+

Redis

MongoDB

名称 推荐指数 备注/说明
Mongoose ★★★★☆ 让NodeJS更容易操作Mongodb数据库。 附上一篇Mongoose学习参考文档

杂七杂八

放些开发中较有用的杂物在这儿

名称 推荐指数 备注/说明
QQ群规 ★★★★☆ 突然某天,有个QQ群让我加群 原本我是拒绝的,但当我看完这篇QQ群规后… 劳资真的被感动到了,太牛逼、够专业! 最后,我默默加群鸟:)
.gitignore文件 ★★★★☆ 介绍不同语言项目的gitignore模板
Codebabes ★★★ 编程的网站。 重点是每通过一个测试,尼玛对应的妞会脱一件衣服… PS:要FQ哦~
ReadmeSample 项目高大上的第一步就是包装,所以来看看README的书写套路吧 PS:劳资怎么这么无聊…

前端炫技-_炫酷狂拽叼炸天站点_

名称 推荐指数 备注/说明
windows93 ★★★★☆ 模拟Win93桌面,思路、体验和整体效果比较有意思
GeekTyper ★★★★☆ 好玩又具有Geek精神的网站,虽然创建的目的是个恶作剧 PS:网站需要FQ
Mapbox ★★★★ 非常叼的开源项目,有方便的JSAPI(还有SDK)。 不过免费版只能浅尝,流量有限。 PS:网站需要FQ
SuperScrollorama ★★★☆ 好玩好看的动画库,链接是SuperScrollorama的展示页
parallax.js ★★★ 一个视差引擎的官网,在电脑和手机上都有很好的体验
墨刀 ★★ 一个在线移动应用原型制作工具。 旨在帮助产品经理快速制作可在手机端展示的移动应用原型。
版权归原作者所有,如有侵权请告知。达维营-前端网 » 史上较全的前端开发知识资料(不断更新中,欢迎补充)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址