[Amaze UI] 如何推进 mobile first 的前端 Web 方案

比眉伴天荒 2022-08-23 11:59 217阅读 0赞

背景： 云适配创立之初，我们就开始积累自己的前端框架，同时也借鉴了Bootstrap等国外框架的优点。在内部使用过程中，大家一致反映不错，我们就希望把这个产品开源，希望分享给更多的人，也希望更多的人来贡献代码，来共建中国前端开源生态环境。

由于Amaze UI目前处在 [内测][Link 1]期，我们希望能尽可能多的收集到优秀的、有建设性的反馈建议和看法，与广大优秀前端开发者共同完善Amaze UI 的功能，推动中国移动跨屏前端技术的发展。（内测地址： [http://amazeui.org/landing][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` 。

**1.2 使用 HTML5**

Amaze UI 在 HTML5 下开发，没有测试其他 DOCTYPE，使用之前确保你的 HTML 第一行是`<!DOCTYPE html>`。

<!DOCTYPE html>
    <html>
    ...
    </html>

**2. Amaze UI 之 JavaScript**

### 基于 Zepto.js ###

# Amaze UI JavaScript 组件基于[Zepto.js][]开发，使用时确保在 Amaze UI 的脚本之前引入了 Zepto.js（1.1.3）。  由于模块内部指定了`$ = window.Zepto`，目前并不支持使用 jQuery 替换 Zepto.js，后续的工作中会增加 jQuery 支持。 #

### 组件调用 ###

# 组件的调用方式和 jQuery 类似，具体细节请查看各个组件的文档。 #

## 高级使用 ##

### 基于 Sea.js ###

# 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 组件截图：

![SouthEast][]

![Image 1][]

也聊下前端开发者可能有的疑问：

1. 现在前端框架这么多，为什么还要开发Amaze UI？

国内前端框架确实不少，但能解决浏览器存在的跨屏适配和兼容性问题的技术却很少。加上国内对开源技术的思想意识不够，很多成熟的技术主要封闭在自己的公司内，这样造成整个产业链在技术上很难互惠互通。 同时，移动、跨屏已经成为了的当下互联网最热门的技术，而前端开发者在开发网页时，时常会陷入重复解决繁复的跨屏、适配问题，耗费精力，影响工作效率，产品开发进度慢这样的恶性循环中。公司内部用 Amaze UI 对这类问题的解决反映挺好，我们就打算开源出去，希望能对前端开发有些帮助。

2. Amaze UI 相对其他前端框架有哪些优势。

不可避免的需要跟 Bootstrap 做比较，我觉得 Amaze UI 可能有下面几种优势：

0. 能良好的兼容已有前端框架的优势；

1. 加入更多符合中国市场特性的元素：中文排版更优化，兼容中国本土主流浏览器 ；  
2. 更轻量化，不仅适用于桌面端，更适合移动端 ；  
3. 包含一些封装好的Widgets，其他框架则没有；

3. Amaze UI 推进 mobile first 前端 Web 方案的思路是什么？

通过拆分、封装一些常用的网页组件，以规范化通过云适配平台开发的移动网站，统一用户体验。

具体措施上：

1.  语义化。Amaze UI开发遵循语义化原则，意图通过类名（class）等信息直观传达元素的功能角色，同时关注结构、样式、行为分离，降低各部分的耦合程度，提高开发效率和可维护性。
2.  移动优先，跨屏适配。遵循 “移动优先（Mobile First）”、“渐进增强（Progressive enhancement）”的理念，可先从移动设备开始开发网站，逐步在扩展的更大屏幕的设备上，专注于最重要的内容和交互，适应移动互联潮流。轻松创建跨屏适配的网页。
3.  模块化，按需定制。AMUI使用LESS编写样式，结构良好，易扩展，易维护；使用Seajs模块化开发、组织 JavaScript，自然、优雅。
4.  专注于HTML5。AMUI 基于轻量的Zepto.js开发，有效减少为兼容旧浏览器的臃肿代码；基于 CSS3 的交互效果，平滑、高效。AMUI专注于现代浏览器（支持HTML5），不再为过时的浏览器耗费资源，为更有价值的用户提高更好的体验。
5.  本地化支持：相比国外的前端框架，Amaze UI专注解决中文排版优化问题，根据操作系统调整字体，实现最佳中文排版效果；针对国内主流浏览器及App内置浏览器提供更好的兼容性支持，为你节省大量兼容性调试时间。

后记：

Amaze UI 目前处在[内测][http_amazeui.org_landing]期，希望能尽可能多的收集到优秀的、有建设性的反馈建议和看法，与广大优秀前端开发者共同完善Amaze UI 的功能，推动中国移动跨屏前端技术的发展。

注：部分文字源于 InfoQ 的采访。

[Link 1]: http://amazeui.org/
[http_amazeui.org_landing]: http://amazeui.org/landing
[Zepto.js]: http://zeptojs.com/
[Sea.js]: http://seajs.org/
[SouthEast]: /images/20220823/fdcb2aa8ebd6408a9209c0c4d4304f9d.png
[Image 1]: