前端Js框架汇总

个人觉得node.js 是服务器端的，而不是前端的，你们觉得呢

JavaScript(前端语言)+nodejs(JavaScript的运行环境)=实现服务器上的开发(后端技术)，也就是说js+nodejs实现了后端开发的技术

前端Js框架汇总

　　Web、无线、物联网、VR、PC从不同方向推进着技术的融合与微创新。程序员在不同业务场景下的角色互换。而随着node.js的出现语言的角色也在发生着转变，Js扮演了越来越重要的角色。也就有了茶余饭后也把了解到的知识整理一下。看过“你的知识需要管理”后，强烈的意识到杂乱且范范的知识储备远不如整理后条理清晰的知识带来好处多。所以，是的，我们需要时不时的回来对掌握的知识梳理归类，以备不时之需。

一、前端框架库：

1.Zepto.js

• 地址：http://www.css88.com/doc/zeptojs/
• 描述：Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。关于Zepto认知我也是通过与一位腾讯朋友聊天的时候知道的，只作了些基础的了解。

 

2.SUI Mobile

• 地址：http://m.sui.taobao.org
• 描述：SUI Mobile 是一套基于 Framework7 开发的UI库。它非常轻量、精美，只需要引入我们的CDN文件就可以使用，并且能兼容到 iOS 6.0+ 和 Android 4.0+，非常适合开发跨平台Web App。
• 用途：你也看到了，他是用于无线端的Web App的开发。

 

3.Node.Js

• 地址：http://www.runoob.com/nodejs/nodejs-tutorial.html (中文网)
• 描述：Node.js是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进行了封装。V8引 擎执行Javascript的速度非常快，性能非常好。Node.js对一些特殊用例进行了优化，提供了替代的API，使得V8在非浏览器环境下运行得更好。

　　Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用 事件驱动 ， 非阻塞 I/O  模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

　　简单的说 Node.js 就是运行在服务端的 JavaScript。

　　Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。

　　Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

• 用途：

　　1. RESTful API

　　这是NodeJS最理想的应用场景，可以处理数万条连接，本身没有太多的逻辑，只需要请求API，组织数据进行返回即可。它本质上只是从某个数据库中查找一些值并将它们组成一个响应。由于响应是少量文本，入站请求也是少量的文本，因此流量不高，一台机器甚至也可以处理最繁忙的公司的API需求。

　　2. 统一Web应用的UI层

　　目前MVC的架构，在某种意义上来说，Web开发有两个UI层，一个是在浏览器里面我们最终看到的，另一个在server端，负责生成和拼接页面。

不讨论这种架构是好是坏，但是有另外一种实践，面向服务的架构，更好的做前后端的依赖分离。如果所有的关键业务逻辑都封装成REST调用，就意味着在上层只需要考虑如何用这些REST接口构建具体的应用。那些后端程序员们根本不操心具体数据是如何从一个页面传递到另一个页面的，他们也不用管用户数据更新是通过Ajax异步获取的还是通过刷新页面。

　　3. 大量Ajax请求的应用

例如个性化应用，每个用户看到的页面都不一样，缓存失效，需要在页面加载的时候发起Ajax请求，NodeJS能响应大量的并发请求。　　总而言之，NodeJS适合运用在高并发、I/O密集、少量业务逻辑的场景。

 

4.angular.Js

• 地址：http://www.runoob.com/angularjs/angularjs-tutorial.html (中文网)
• 描述：AngularJS[1]  诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
• 用途：通过描述我们应该就能很好的明白AngularJS的真实用途了，MVVM，模块化，自动化双向数据绑定等等。除了简单的dom操作外，更能体现Js编程的强大。当然应用应该视场合而定。

 

5.JQuery Mobile

• 地址：http://www.w3school.com.cn/jquerymobile/    (中文网)
• 描述：Query Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。
• 用途：jQuery Mobile 是创建移动 web 应用程序的框架。

　　　　　　jQuery Mobile 适用于所有流行的智能手机和平板电脑。

　　　　　　jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。

 

6.requirejs

• 地址：http://www.requirejs.cn/
• 描述：RequireJS的目标是鼓励代码的模块化，它使用了不同于传统<script>标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。

RequireJS以一个相对于baseUrl的地址来加载所有的代码。 页面顶层<script>标签含有一个特殊的属性data-main，require.js使用它来启动脚本加载过程，而baseUrl一般设置到与该属性相一致的目录。

• 用途：模块化动态加载。

 

7.Vue.js

• 地址：http://cn.vuejs.org/
• 描述：Vue.js 是用于构建交互式的 Web  界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。从技术上讲， Vue.js 集中在 MVVM 模式上的视图模型层，并通过双向数据绑定连接视图和模型。实际的 DOM 操作和输出格式被抽象出来成指令和过滤器。相比其它的 MVVM 框架，Vue.js 更容易上手。

 

8.backbone.js

• 地址：http://www.css88.com/doc/backbone/
• 描述：Backbone 为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。其中模型用于绑定键值数据和自定义事件；集合附有可枚举函数的丰富API； 视图可以声明事件处理函数，并通过RESTful JSON接口连接到应用程序。

 

9.React

• 地址：http://reactjs.cn/react/docs/why-react.html
• 描述：React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很多人认为 React 是 MVC 中的 V（视图）。我们创造 React 是为了解决一个问题：构建随着时间数据不断变化的大规模应用程序。为了达到这个目标，React 采用下面两个主要的思想。

 

10.Ionic 

• 地址：http://www.ionic.wang/js_doc-index.html
• 描述：Ionic既是一个CSS框架也是一个Javascript UI库。许多组件需要Javascript才能产生神奇的效果，尽管通常组件不需要编码，通过框架扩展可以很容易地使用，比如我们的AngularIonic扩展。

  Ionic遵循视图控制模式，通俗的理解和 Cocoa 触摸框架相似。在视图控制模式中，我们将界面的不同部分分为子视图或包含其他视图的子视图控制器。然后视图控制器“驱动”内部视图来提供交互和UI功能。一个很好的例子就是标签栏（Tab Bar）视图控制器处理点击标签栏在一系列可视化面板间切换。

  浏览我们的API文档来了解视图控制器和Ionic中可用的Javascript实用工具。

  Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它 提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定，使用它成为 Web 和移动开发者的共同选择。

 

二、前端UI框架

1.Pure

• 地址：http://purecss.org/layouts/
• 描述：Pure精心设计，只为可以在任何Web项目中使用。为了例证这一点，我们制作了如下几个模板。这些模板都是响应式的，并且没有使用任何JavaScript。
• 用途：真的是很精美的一个样式框架，便于我们快事构建一些个人产品，当然也可以服务于工作中的一些项目。

 

2.bootstrap

• 地址：http://www.bootcss.com/
• 描述：简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

 

3.EasyUI

• 地址：http://www.jeasyui.net/  (中文网)
• 描述：easyui是一种基于jQuery的用户界面插件集合。

　　　　　　easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。

　　　　　　使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。

　　　　　　easyui是个完美支持HTML5网页的完整框架。

　　　　　　easyui节省您网页开发的时间和规模。

　　　　　　easyui很简单但功能强大的。

 4.Ant Design

• 地址：http://ant.design/
• 描述：一个 UI 设计语言，一套提炼和应用于企业级后台产品的交互语言和视觉体系

 

三、可视化组件

1.Echarts

• 地址：http://echarts.baidu.com/
• 描述：ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

 

2.tableau(收费)

• 地址：http://www.yuandingit.com/special/tableau/index.html
• 描述：Tableau 是桌面系统中最简单的商业智能工具软件，Tableau 没有强迫用户编写自定义代码，新的控制台也可完全自定义配置。在控制台上，不仅能够监测信息，而且还提供完整的分析能力。Tableau控制台灵活，具有高度的动态性。

 

四、前端构建工具

1.gulp

• 地址：http://www.gulpjs.com.cn/
• 描述：易于使用

　　　　　　通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。

　　　　　　构建快速

　　　　　　利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。

　　　　　　插件高质

　　　　　　Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

　　　　　　易于学习

　　　　　　通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。

 

五、博客搭建 

1.技术组合

　　HEXO+Github,搭建属于自己的博客。

　　站点：http://www.jianshu.com/p/465830080ea9

　　HEXO介绍： Hexo是一个开源的静态博客生成器,用node.js开发,作者是台湾大学生tommy351

　　准备： git  + node.js + markdown编辑 + gitcafe + 域名

目前来看，JS框架以及一些开发包和库类有如下几个，Dojo 、Scriptaculous 、Prototype 、yui-ext 、Jquery、Mochikit、mootools 、moo.fx
Dojo （JS library and UI component ）：
Dojo是目前最为强大的j s框架，它在自己的Wiki上给自己下了一个定义，dojo是一个用JavaScript编写的开源的DHTML工具箱。dojo很想做一个“大一统”的工具箱，不仅仅是浏览器层面的，野心还是很大的。Dojo包括ajax, browser, event, widget等跨浏览器API，包括了JS本身的语言扩展，以及各个方面的工具类库，和比较完善的UI组件库，也被广泛应用在很多项目中，他的UI组件的特点是通过给html标签增加tag的方式进行扩展，而不是通过写JS来生成，dojo的API模仿Java类库的组织方式。 用dojo写Web OS可谓非常方便。dojo现在已经4.0了，dojo强大的地方在于界面和特效的封装，可以让开发者快速构建一些兼容标准的界面。
优点：库相当完善，发展时间也比较长，功能强大，据说利用dojo的io.bind()可以实现comet，看见其功能强大非一般，得到IBM和SUN的支持
缺点：文件体积比较大，200多KB，初次下载相当慢，此外，dojo的类库使用显得不是那么易用，j s语法增强方面不如prototype。
Prototype （JS OO library）：
是一个非常优雅的JS库，定义了JS的面向对象扩展，DOM操作API，事件等等，以prototype为核心，形成了一个外围的各种各样的JS扩展库，是相当有前途的JS底层框架，值得推荐，感觉也是现实中应用最广的库类（RoR集成的AJAX JS库），之上还有 Scriptaculous 实现一些JS组件功能和效果。
优点：基本底层，易学易用，甚至是其他一些js特效开发包的底层，体积算是最小的了。
缺点：如果说缺点，可能就是功能是他的弱项
Scriptaculous （JS UI component based on prototype）：
Scriptaculous是基于prototype.js框架的JS效果。包含了6个js文件，不同的文件对应不同的js效果，所以说，如果底层用 prototype的话，做js效果用Scriptaculous那是再合适不过的了，连大名鼎鼎的digg都在用他，可见不一般
优点：基于prototype是最大的优点，由于使用prototype的广泛性，无疑对用户书锦上添花，并且在《ajax in action》中就拿Scriptaculous来讲述js效果
缺点：刚刚兴起，需要时间的磨练
yui-ext (JS UI component)：
基于Yahoo UI的扩展包yui-ext是具有CS风格的Web用户界面组件能实现复杂的Layout布局，界面效果可以和backbase媲美，而且使用纯javascript代码开发。真正的可编辑的表格Edit Grid，支持XML和Json数据类型，直接可以迁入grid。许多组件实现了对数据源的支持，例如动态的布局，可编辑的表格控件，动态加载的Tree 控件、动态拖拽效果等等。1.0 beta版开始同Jquery合作，推出基于jQuery的Ext 1.0，提供了更多有趣的功能。
优点：结构化，类似于java的结构，清晰明了，底层用到了Jquery的一些函数，使整合使用有了选择，最重要的一点是界面太让让人震撼了。
缺点：太过复杂，整个界面的构造过于复杂。
Jquery ：
jQuery是一款同prototype一样优秀js开发库类，特别是对css和XPath的支持，使我们写js变得更加方便！如果你不是个js高手又想写出优秀的js效果，jQuery可以帮你达到目的！并且简介的语法和高的效率一直是jQuery追求的目标，
优点：注重简介和高效，js效果有yui-ext的选择，因为yui-ext 重用了很多jQuery的函数
缺点：据说太嫩，历史不悠久。
Mochikit ：
MochiKit自称为一个轻量级的js框架。MochiKit 主要受到 Python 和 Python 标准库提供的很多便利之处的启发，另外还缓解了浏览器版本之间的不一致性。其中的 MochiKit.DOM 尤其方便，能够以比原始JavaScript 更友好的方式处理 DOM 对象。MochiKit.DOM 大部分都是针对 XHTML 文档定制的，如果与 MochiKit 和 Ajax 结合在一起，使用 XHTML 包装的微格式尤其方便。Mochikit可以直接对字符串或者数字格式化输出，比较实用和方便。它还有自己的 js 代码解释器
优点：MochiKit.DOM这部分很实用，简介也是很突出的
缺点：轻量级的缺点
mootools ：
MooTools是一个简洁，模块化，面向对象的JavaScript框架。它能够帮助你更快，更简单地编写可扩展和兼容性强的JavaScript代码。Mootools跟prototypejs相类似，语法几乎一样。但它提供的功能要比prototypejs多，而且更强大。比如增加了动画特效、拖放操作等等。
优点：可以定制自己所需要的功能，可以说是prototypejs的增强版。
缺点：不大不小，具体应用具体分析
moo.fx ：
moo.fx是一个超级轻量级的javascript特效库（7k）,能够与prototype.js或mootools框架一起使用。它非常快、易于使用、跨浏览器、符合标准，提供控制和修改任何HTML元素的CSS属性，包括颜色。它内置检查器能够防止用户通过多次或疯狂点击来破坏效果。moo.fx整体采用模块化设计，所以可以在它的基础上开发你需要的任何特效。
优点：小块头有大能耐
缺点：这么小了，已经不错了