[Amaze UI] 如何推进 mobile first 的前端 Web 方案
背景：云適配創(chuàng)立之初，我們就開始積累自己的前端框架，同時(shí)也借鑒了Bootstrap等國(guó)外框架的優(yōu)點(diǎn)。在內(nèi)部使用過(guò)程中，大家一致反映不錯(cuò)，我們就希望把這個(gè)產(chǎn)品開源，希望分享給更多的人，也希望更多的人來(lái)貢獻(xiàn)代碼，來(lái)共建中國(guó)前端開源生態(tài)環(huán)境。
由于Amaze UI目前處在內(nèi)測(cè)期，我們希望能盡可能多的收集到優(yōu)秀的、有建設(shè)性的反饋建議和看法，與廣大優(yōu)秀前端開發(fā)者共同完善Amaze UI 的功能，推動(dòng)中國(guó)移動(dòng)跨屏前端技術(shù)的發(fā)展。（內(nèi)測(cè)地址：http://amazeui.org/landing）
下面提前跟大家分享下我們處理 mobile first 的前端 Web 方案。
1. Amaze UI 之 CSS
1.1 移動(dòng)優(yōu)先：
Amaze UI 以移動(dòng)優(yōu)先的理念開發(fā)，需要在?meta?中設(shè)置相關(guān)?viewport?屬性。
width=device-width, initial-scale=1?是必須的，而且我們認(rèn)為好的設(shè)計(jì)是不需要用戶去操作窗口縮放的，所以加上了?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 下開發(fā)，沒有測(cè)試其他 DOCTYPE，使用之前確保你的 HTML 第一行是?<!DOCTYPE html>。
?
<!DOCTYPE html><html>
...
</html>
2. Amaze UI 之?JavaScript?
基于 Zepto.js
Amaze UI JavaScript 組件基于?Zepto.js?開發(fā)，使用時(shí)確保在 Amaze UI 的腳本之前引入了 Zepto.js（1.1.3）。
由于模塊內(nèi)部指定了?$ = window.Zepto，目前并不支持使用 jQuery 替換 Zepto.js，后續(xù)的工作中會(huì)增加 jQuery 支持。
組件調(diào)用
組件的調(diào)用方式和 jQuery 類似，具體細(xì)節(jié)請(qǐng)查看各個(gè)組件的文檔。
高級(jí)使用
基于 Sea.js
Amaze UI 目前使用?Sea.js?組織、管理模塊，使用 Sea.js 的用戶可以通過(guò)源碼查看相關(guān)接口。
默認(rèn)事件接口
Amaze UI 通過(guò)特定的 HTML 來(lái)綁定默認(rèn)的事件，多數(shù) JS 組件通過(guò) HTML 標(biāo)記就可以實(shí)現(xiàn)調(diào)用。這些默認(rèn)事件都在amui?命名空間下，用戶可以自行關(guān)閉。
關(guān)閉所有默認(rèn)事件：
關(guān)閉特定組件的默認(rèn)事件：
?
$(document).off('.modal.amui');自定義事件
多數(shù)組件都定義了一些自定義事件。
自定義事件命名的方式為?{事件名稱}:{組件名稱}:amui，用戶可以查看組件文檔使用這些自定義事件。
?
$('#myAlert').on('close:alert:amui', function() { ?// do something});Web 組件截圖：
也聊下前端開發(fā)者可能有的疑問(wèn)：
1.?現(xiàn)在前端框架這么多，為什么還要開發(fā)Amaze UI？
國(guó)內(nèi)前端框架確實(shí)不少，但能解決瀏覽器存在的跨屏適配和兼容性問(wèn)題的技術(shù)卻很少。加上國(guó)內(nèi)對(duì)開源技術(shù)的思想意識(shí)不夠，很多成熟的技術(shù)主要封閉在自己的公司內(nèi)，這樣造成整個(gè)產(chǎn)業(yè)鏈在技術(shù)上很難互惠互通。同時(shí)，移動(dòng)、跨屏已經(jīng)成為了的當(dāng)下互聯(lián)網(wǎng)最熱門的技術(shù)，而前端開發(fā)者在開發(fā)網(wǎng)頁(yè)時(shí)，時(shí)常會(huì)陷入重復(fù)解決繁復(fù)的跨屏、適配問(wèn)題，耗費(fèi)精力，影響工作效率，產(chǎn)品開發(fā)進(jìn)度慢這樣的惡性循環(huán)中。公司內(nèi)部用 Amaze UI 對(duì)這類問(wèn)題的解決反映挺好，我們就打算開源出去，希望能對(duì)前端開發(fā)有些幫助。
2. Amaze UI 相對(duì)其他前端框架有哪些優(yōu)勢(shì)?
不可避免的需要跟 Bootstrap 做比較，我覺得 Amaze UI 可能有下面幾種優(yōu)勢(shì)：
0. 能良好的兼容已有前端框架的優(yōu)勢(shì)；
1. 加入更多符合中國(guó)市場(chǎng)特性的元素：中文排版更優(yōu)化，兼容中國(guó)本土主流瀏覽器 ；
2. 更輕量化，不僅適用于桌面端，更適合移動(dòng)端 ；
3. 包含一些封裝好的Widgets，其他框架則沒有；
3. Amaze UI 推進(jìn) mobile first 前端 Web 方案的思路是什么？
通過(guò)拆分、封裝一些常用的網(wǎng)頁(yè)組件，以規(guī)范化通過(guò)云適配平臺(tái)開發(fā)的移動(dòng)網(wǎng)站，統(tǒng)一用戶體驗(yàn)。
具體措施上：
語(yǔ)義化。Amaze UI開發(fā)遵循語(yǔ)義化原則，意圖通過(guò)類名（class）等信息直觀傳達(dá)元素的功能角色，同時(shí)關(guān)注結(jié)構(gòu)、樣式、行為分離，降低各部分的耦合程度，提高開發(fā)效率和可維護(hù)性。
移動(dòng)優(yōu)先，跨屏適配。遵循 “移動(dòng)優(yōu)先（Mobile First）”、“漸進(jìn)增強(qiáng)（Progressive enhancement）”的理念，可先從移動(dòng)設(shè)備開始開發(fā)網(wǎng)站，逐步在擴(kuò)展的更大屏幕的設(shè)備上，專注于最重要的內(nèi)容和交互，適應(yīng)移動(dòng)互聯(lián)潮流。輕松創(chuàng)建跨屏適配的網(wǎng)頁(yè)。
模塊化，按需定制。AMUI使用LESS編寫樣式，結(jié)構(gòu)良好，易擴(kuò)展，易維護(hù)；使用Seajs模塊化開發(fā)、組織 JavaScript，自然、優(yōu)雅。
專注于HTML5。AMUI 基于輕量的Zepto.js開發(fā)，有效減少為兼容舊瀏覽器的臃腫代碼；基于 CSS3 的交互效果，平滑、高效。AMUI專注于現(xiàn)代瀏覽器（支持HTML5），不再為過(guò)時(shí)的瀏覽器耗費(fèi)資源，為更有價(jià)值的用戶提高更好的體驗(yàn)。
本地化支持：相比國(guó)外的前端框架，Amaze UI專注解決中文排版優(yōu)化問(wèn)題，根據(jù)操作系統(tǒng)調(diào)整字體，實(shí)現(xiàn)最佳中文排版效果；針對(duì)國(guó)內(nèi)主流瀏覽器及App內(nèi)置瀏覽器提供更好的兼容性支持，為你節(jié)省大量兼容性調(diào)試時(shí)間。
后記：
Amaze UI 目前處在內(nèi)測(cè)期，希望能盡可能多的收集到優(yōu)秀的、有建設(shè)性的反饋建議和看法，與廣大優(yōu)秀前端開發(fā)者共同完善Amaze UI 的功能，推動(dòng)中國(guó)移動(dòng)跨屏前端技術(shù)的發(fā)展。
?本文轉(zhuǎn)自 陳本峰 51CTO博客，原文鏈接：http://blog.51cto.com/wingeek/1439847，如需轉(zhuǎn)載請(qǐng)自行聯(lián)系原作者
總結(jié)
以上是生活随笔為你收集整理的[Amaze UI] 如何推进 mobile first 的前端 Web 方案的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： COBBLER无人值守安装-----已用
- 下一篇： IntelliJ IDEA 使用 Liv