现常用框架介绍及工具网站整理

流行的UI框架.

流行的前端UI框架：

Bootstrap（美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。） 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。 [2]

jQuery UI（jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。所有插件测试能兼容IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, 和GoogleChrome。）。它包含了许多维持状态的小部件（Widget），因此，它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件（Widget）使用相同的模式，所以，只要您学会使用其中一个，您就知道如何使用其他的小部件（Widget）

组件构成编辑
jQuery UI 主要分为3个部分：交互、微件和效果库。
交互
交互部件是一些与鼠标交互相关的内容，包括Draggable,Droppable,Resizable,Selectable和Sortable等。
微件
主要是一些界面的扩展，包括Accordion,AutoComplete,ColorPicker,Dialog,Slider,Tabs,DatePicker,Magnifier,ProgressBar,Spinner等，新版本的UI将包含更多的微件。
效果库
用于提供丰富的动画效果，让动画不再局限于jQuery的animate()方法。

流行的前端框架：

Node.Js ： 采用一系列“非阻塞”库来支持事件循环的方式。本质上就是为文件系统、数据库之类的资源提供接口。向文件系统发送一个请求时，无需等待硬盘（寻址并检索文件），硬盘准备好的时候非阻塞接口会通知Node。该模型以可扩展的方式简化了对慢资源的访问， 直观，易懂。

（Node作为一个新兴的前端框架，后台语言，有很多吸引人的地方：
● 使用RESTful API架构。
● 单线程。Node可以在不新增额外线程的情况下，依然可以对任务进行并发处理 ——  Node.js通过事件循环（event loop）来实现并发操作，对此，我们应该要充分利用这一点 —— 尽可能的避免阻塞操作，取而代之，多使用非阻塞操作。
● 非阻塞IO：以异步来执行函数，先执行同步任务，耗时任务放在事件队列中，以此轮询执行。
● 事件驱动：Node.js采用了一个称为“事件循环(event loop）”的架构，使得编写可扩展性高的服务器变得既容易又安全

Angular.Js: HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。为了克服HTML在构建应用上的不足而设计的。让浏览器做设计者想要它做的事。
AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的库。它可通过 < script > 标签添加到HTML 页面。
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中。

通常，我们是通过以下技术来解决静态网页技术在构建动态应用上的不足：
类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有：jQuery等
框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout、sproutcore等。
AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令(directives)的结构，让浏览器能够识别新的语法。例如：
使用双大括号{{}}语法进行数据绑定；
使用DOM控制结构来实现迭代或者隐藏DOM片段；
支持表单和表单的验证；
能将逻辑代码关联到相关的DOM元素上；
能将HTML分组成可重用的组件。

Vue.js:是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。以易用、灵活、性能被人们关注并广泛使用。

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件   。
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。

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

特点：
1.声明式设计：React采用声明范式，可以轻松描述应用。
2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活：React可以与已知的库或框架很好地配合。

工具网站

一、配色类网站

http://colorhunt.co
这个网站给我们提供了很多的配色方案，我们直接使用就OK了。使用方法也很简单，鼠标移动到对应的颜色上，我们就可以看到颜色的十六进制码，复制这个颜色到工具里就可以使用了。
https://webgradients.com/
180种渐变方案供你选择，还可以直接复制CSS样式应用到网页中
https://color.adobe.com/zh/create/color-wheel
这个是Adobe公司出的，他提供了多种配色方案。我们点击圆盘中间的点，就可以调整出我们想要的配色方案。
http://www.colorhunter.com/

二、图标类网站

http://www.iconfont.cn/plus
这是阿里巴巴旗下的图标库网站，直接搜索关键词就可以找到大批的图标。下载图标的时候我们还可以选择颜色、大小、格式，根据自己的需要下载就好了。
http://www.easyicon.net/iconsearch/ios/
这也是一个非常有名的图标库，与上面那个不同的是，这里的图标不是单一颜色的，而是设计好的颜色。下载图标也很简单，直接点击对应图标上面的格式就可以下载。

三、插件类网站

http://www.jq22.com/
这个网站分享jQuery插件和提供各种jQuery特效的详细使用方法,在线预览,jQuery插件下载及教程
http://www.htmleaf.com/
这个网站与上一个网站类似，也提供了大量的jQuery插件
http://www.layui.com/
这是一个强大的模块化前端框架

四、素材类网站

http://588ku.com/
千库网，一个免费下载图片素材的网站
https://unsplash.com/
Unsplash是一个分享免费高质量照片的网站，照片分辨率都挺大，而且都是真实的摄影师作品，图片多是风景和静物。

五、字体类网站

http://www.youziku.com/onlinefont/index
有字库，一个免下载字体，直接在线引用字体的网站。

六、工具类

http://tool.lu/
一个在线工具网站，包含大量在线工具
https://tinypng.com/
一个在线图片压缩工具，可以批量使用
http://www.css88.com/
各种前端类工具和技术文章
破解软件网站：https://alltoshare.com/product/548.html
前端模板网站:http://www.templatesy.com/