移动前段框架比较

一.选择框架的视角和作为选择的标准：

（1）标准：

1.框架的设计理念：write less do more .轻，解耦，可扩展型，稳定性，兼容性

2.框架的使用场景：

3.框架的功能

4.框架的性能

5.学习成本难易

6.文档

7.社区

8.框架的特色及与项目的密合度

9.开发团队的技能

（2）任务：

开发一套移动端框架，兼顾ios与Androi的使用

二．框架基本介绍

1.SUI Mobile

1.0开发团队及其使用案例：阿里巴巴团队开发

网站：http://m.sui.taobao.org/

使用案例：淘宝，一淘

SUI Mobile 是一套基于 Framework7 开发的UI库。它非常轻量、精美，只需要引入我们的CDN文件就可以使用，并且能兼容到 iOS 6.0+ 和 Android 4.0+，非常适合开发跨平台Web App。

1.1轻量的UI库

SUI Mobile 非常轻量，核心库压缩Gzip后的JS、CSS网络传输体积总共只有52K，却提供了20+个常用的组件。

对于只有HTML&CSS的组件，你只需要复制HTML代码既可以使用。他的大部分JS组件都是独立的 Zepto 插件，并且提供了Zepto/jQuery 风格的API，你将会非常熟悉这种方式。

1.2炫酷的iOS风格

组件都是按照iOS风格设计的，所有有很多组件都是iOS独有的炫酷设计。

1.3功能强大的组件

此框架实现了下拉刷新、日历、省市区选择器等功能非常强大的组件，并且他们在安卓上也是同样好的体验。如果你还在为如何实现下拉刷新纠结，还在调试安卓日历输入框的bug，还在自己写收货地址选择，不如赶紧用SUI吧。

1.4实例片段

1.5特色

1.不重复造轮子

此框架并没有重复造轮子。主要借鉴 Framework7 的形态并以此为基础，参考Ratchet、Ionic、Onsen各种不同的思路，强化功能，精简体积，并提供国内最稳定快速的CDN支持。此外还定制增强了一些工具类开源库。

2.兼容性

兼容到 iOS 6+ 以及 Android 4.0+因为安卓机型众多，我们无法对每一台机器进行测试，如果你发现在安卓 4.0以上的机器上有bug，可以在 github 上给我们提 issue,或者直接联系我们

3.组件丰富多样

提供了常用的UI:按钮，列表搜索，侧栏，日历..见官方文档

4.学习难度低：学习难度低，上手快

5.移动端和PC端都有，sui3支持bootstrap风格

2.jQuery WeUI

2.0：开发团队：腾讯weui

网站：http://jqweui.com/components

美誉：微信公众号开发的瑞士军刀

案例：诸多微信公众号平台的开发

jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库，包含全部WeUI官方的CSS组件，并且额外提供了大量的拓展组件，丰富的组件库可以极大减少前端开发时间。

jQuery WeUI 的最大特点是它只提供UI组件，并不会对项目所使用的框架和其他库有任何的限制，几乎可以在任何环境下使用。无论你的项目是基于jQuery，还是 React, Angular, Vue，你都会发现 jQuery WeUI 能非常方便的和他们结合使用。既是你的项目是一个有很悠久历史的老项目，也几乎可以做到拿来即用。

jQuery WeUI 提供了总共30+ 个非常实用的组件：列表，表单，卡片，对话框，下拉刷新等。

2.1为什么选择jQuery WeUI

jQuery WeUI 的定位正如 jQuery 的定位：做一把锋利易用的小刀，而不是做一个笨重的大炮。

简单易用，无上手难度
丰富强大的组件库，并且还在不断完善中
轻量，无限制，可以结合任何主流JS框架使用，比如 Vue, Angular, React等
高性能的 CSS3 动画，低端手机上依然可以较流畅运行
详尽完善的官方文档
标准稳定的API，基本可以保证版本透明更新
基于 MIT 协议发布，免费开源

2.2简洁而不简单

按钮，列表之类的组件不需要JS，使用非常简单，只要从官网复制下来HTML代码并粘贴到你的项目中即可。

对于需要用到JS的组件，如果你使用过jQuery，那么你使用jQuery WeUI 将没有任何障碍。所有的JS组件都是标准的jQuery插件：

//显示一个对话框$.alert("我是一个对话框");

//弹出一个actionsheet$.actions({

actions: [{

text: "编辑",

onClick: function() {

//do something

}

},{

text: "删除",

onClick: function() {

//do something

}

}]});

当然，前提是你需要引入相关的CSS和JS文件

2.3组件展示

这里展示一些组件的截图，仅作展示之用，具体请参阅基础组件和拓展组件页面，其中页面右侧的手机模拟器可以模拟组件的绝大多数操作(除缩放等复杂的手势外）。

2.4.实例片段

2.5特色

简单易用，无上手难度
丰富强大的组件库，并且还在不断完善中
轻量，无限制，可以结合任何主流JS框架使用，比如 `Vue, Angular, React` 等
高性能的 CSS3 动画，低端手机上依然可以较流畅运行
详尽完善的官方文档
标准稳定的API，基本可以保证版本透明更新
基于 MIT 协议发布，免费开源

3.Mui

3.1开发团队：HBuiler团队

官网：http://dev.dcloud.net.cn/mui/

3.2轻量

追求性能体验，是我们开始启动MUI项目的首要目标，轻量必然是重要特征；MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K

3.3原生UI

鉴于之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是我们的重要目标MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件

3.4流畅体验

下拉刷新侧滑导航滑动触发操作菜单

3.5实例片段

4.Bootstrap

4.0开发团队：推特团队

网站：http://www.bootcss.com/

案例：推特，知乎

4.1使命：

为所有开发者、所有应用场景而设计。

Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。

4.2简介：

4.3特色：

1.响应式布局

V3之后在移动端有重大的突破

2.Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

3.兼容性好，并且有丰富的第三方组件

3.学习难度较大

5.vue.js

5.0:开发团队：

尤雨溪已加入阿里巴巴

网站：https://cn.vuejs.org/

5.1介绍：

5.2.Vue.js 是什么

Vue.js（读音 /vjuː/，类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

6.Weex

6.0：开发团队：阿里巴巴

网站：http://weex.apache.org/cn/

6.1：介绍：

Weex 是一套简单易用的跨平台开发方案，能以 web 的开发体验构建高性能、可扩展的 native 应用，为了做到这些，Weex 与 Vue 合作，使用 Vue 作为上层框架，并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API，这样一来，你甚至可以使用其他框架驱动 Weex，打造三端一致的 native 应用。

6.2性能

7.React

7.0开发团队：facebook

网站：http://goratchet.com/

7.1介绍：

React 是一个用于构建用户界面的 JAVASCRIPT 库。

React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

7.2性能

8.AngularJS

8.0：开发团队：google

官网：http://www.angularjs.cn/

8.1介绍：

AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。

AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。

ngularJS 通过 ng-directives 扩展了 HTML。

ng-app 指令定义一个 AngularJS 应用程序。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-bind 指令把应用程序数据绑定到 HTML 视图。

8.2性能

9.light7

9.0开发团队：国外

官网：http://light7.org/

9.1功能强大

它只是一个UI库，但不是一个框架。它提供20个有用的组件，只有82K JS和117K CSS文件。大多数时候你只是复制组件的HTML代码并粘贴到你的项目中，它的工作原理！

Light7依赖于jQuery或zeptojs，没有什么可以学习，如果你以前使用过Zepto / jQuery。

9.2iOS特定

感谢Framework7，Light7可以精确地实现像素完美的iOS原生应用的界面。

9.3强大的组件

Light7提供了许多功能强大的组件，如拉式刷新，动作单和通知。

9.4主题

我们有四种不同的颜色主题，一个夜晚的主题，看主题。

彩色主题

颜色主题只改变原色。添加theme-{color}到body或.page或.content更改它的颜色。

有三个buildin颜色主题：

.theme-pink

.theme-green

.theme-yellow

9.5特色