[Amaze UI] 如何推进 mobile first 的前端 Web 方案
背景：云適配創立之初，我們就開始積累自己的前端框架，同時也借鑒了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?
基于 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('.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 的功能，推動中國移動跨屏前端技術的發展。
?本文轉自 陳本峰 51CTO博客，原文鏈接：http://blog.51cto.com/wingeek/1439847，如需轉載請自行聯系原作者
總結
以上是生活随笔為你收集整理的[Amaze UI] 如何推进 mobile first 的前端 Web 方案的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： COBBLER无人值守安装-----已用
- 下一篇： V-3-3 在没有vCenter的情况下