标签：前端
背景：云适配创立之初，我们就开始积累自己的前端框架，同时也借鉴了Bootstrap等国外框架的优点。在内部使用过程中，大家一致反映不错，我们就希望把这个产品开源，希望分享给更多的人，也希望更多的人来贡献代码，来共建中国前端开源生态环境。
由于Amaze UI目前处在内测期，我们希望能尽可能多的收集到优秀的、有建设性的反馈建议和看法，与广大优秀前端开发者共同完善Amaze UI 的功能，推动中国移动跨屏前端技术的发展。（内测地址：http://amazeui.org/landing）
下面提前跟大家分享下我们处理 mobile first 的前端 Web 方案。
1. Amaze UI 之 CSS
1.1 移动优先：
Amaze UI 以移动优先的理念开发，需要在 meta 中设置相关 viewport 属性。
width=device-width, initial-scale=1 是必须的，而且我们认为好的设计是不需要用户去操作窗口缩放的，所以加上了 maximum-scale=1, user-scalable=no。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
1.2 使用 HTML5
Amaze UI 在 HTML5 下开发，没有测试其他 DOCTYPE，使用之前确保你的 HTML 第一行是 <!DOCTYPE html>。
<!DOCTYPE html>
<html>
...
</html>2. Amaze UI 之 JavaScript
Amaze UI JavaScript 组件基于 Zepto.js 开发，使用时确保在 Amaze UI 的脚本之前引入了 Zepto.js（1.1.3）。
由于模块内部指定了 $ = window.Zepto，目前并不支持使用 jQuery 替换 Zepto.js，后续的工作中会增加 jQuery 支持。
组件的调用方式和 jQuery 类似，具体细节请查看各个组件的文档。
Amaze UI 目前使用 Sea.js 组织、管理模块，使用 Sea.js 的用户可以通过源码查看相关接口。
Amaze UI 通过特定的 HTML 来绑定默认的事件，多数 JS 组件通过 HTML 标记就可以实现调用。这些默认事件都在amui 命名空间下，用户可以自行关闭。
关闭所有默认事件：
$(document).off(‘.amui‘);
关闭特定组件的默认事件：
$(document).off(‘.modal.amui‘);
多数组件都定义了一些自定义事件。
自定义事件命名的方式为 {事件名称}:{组件名称}:amui，用户可以查看组件文档使用这些自定义事件。
$(‘#myAlert‘).on(‘close:alert:amui‘, function() { // do something});
Web 组件截图：
也聊下前端开发者可能有的疑问：
1. 现在前端框架这么多，为什么还要开发Amaze UI？
国内前端框架确实不少，但能解决浏览器存在的跨屏适配和兼容性问题的技术却很少。加上国内对开源技术的思想意识不够，很多成熟的技术主要封闭在自己的公司内，这样造成整个产业链在技术上很难互惠互通。同时，移动、跨屏已经成为了的当下互联网最热门的技术，而前端开发者在开发网页时，时常会陷入重复解决繁复的跨屏、适配问题，耗费精力，影响工作效率，产品开发进度慢这样的恶性循环中。公司内部用 Amaze UI 对这类问题的解决反映挺好，我们就打算开源出去，希望能对前端开发有些帮助。
2. Amaze UI 相对其他前端框架有哪些优势?
不可避免的需要跟 Bootstrap 做比较，我觉得 Amaze UI 可能有下面几种优势：
0. 能良好的兼容已有前端框架的优势；
1. 加入更多符合中国市场特性的元素：中文排版更优化，兼容中国本土主流浏览器 ；
2. 更轻量化，不仅适用于桌面端，更适合移动端 ；
3. 包含一些封装好的Widgets，其他框架则没有；
3. Amaze UI 推进 mobile first 前端 Web 方案的思路是什么？
通过拆分、封装一些常用的网页组件，以规范化通过云适配平台开发的移动网站，统一用户体验。
具体措施上：
语义化。Amaze UI开发遵循语义化原则，意图通过类名（class）等信息直观传达元素的功能角色，同时关注结构、样式、行为分离，降低各部分的耦合程度，提高开发效率和可维护性。
移动优先，跨屏适配。遵循 “移动优先（Mobile First）”、“渐进增强（Progressive enhancement）”的理念，可先从移动设备开始开发网站，逐步在扩展的更大屏幕的设备上，专注于最重要的内容和交互，适应移动互联潮流。轻松创建跨屏适配的网页。
模块化，按需定制。AMUI使用LESS编写样式，结构良好，易扩展，易维护；使用Seajs模块化开发、组织 JavaScript，自然、优雅。
专注于HTML5。AMUI 基于轻量的Zepto.js开发，有效减少为兼容旧浏览器的臃肿代码；基于 CSS3 的交互效果，平滑、高效。AMUI专注于现代浏览器（支持HTML5），不再为过时的浏览器耗费资源，为更有价值的用户提高更好的体验。
本地化支持：相比国外的前端框架，Amaze UI专注解决中文排版优化问题，根据操作系统调整字体，实现最佳中文排版效果；针对国内主流浏览器及App内置浏览器提供更好的兼容性支持，为你节省大量兼容性调试时间。
后记：
Amaze UI 目前处在内测期，希望能尽可能多的收集到优秀的、有建设性的反馈建议和看法，与广大优秀前端开发者共同完善Amaze UI 的功能，推动中国移动跨屏前端技术的发展。
注：部分文字源于 InfoQ 的采访。
本文出自 “IE浏览器研发” 博客，请务必保留此出处http://wingeek.blog.51cto.com/1226974/1439847
[Amaze UI] 如何推进 mobile first 的前端 Web 方案,布布扣,bubuko.com
[Amaze UI] 如何推进 mobile first 的前端 Web 方案
标签：前端
原文地址：http://wingeek.blog.51cto.com/1226974/1439847
