當前位置:編程學習大全網 - 源碼下載 - 如何推進mobilefirst的前端Web方案

如何推進mobilefirst的前端Web方案

背景:雲適配創立之初,我們就開始積累自己的前端框架,同時也借鑒了Bootstrap等國外框架的優點。在內部使用過程中,大家壹致反映不錯,我們就希望把這個產品開源,希望分享給更多的人,也希望更多的人來貢獻代碼,來***建中國前端開源生態環境。

由於Amaze UI目前處在內測期,我們希望能盡可能多的收集到優秀的、有建設性的反饋建議和看法,與廣大優秀前端開發者***同完善Amaze UI 的功能,推動中國移動跨屏前端技術的發展。

下面提前跟大家分享下我們處理 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 第壹行是 。

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 組件截圖:

也聊下前端開發者可能有的疑問:

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 的功能,推動中國移動跨屏前端技術的發展。

  • 上一篇:鏈環科技公司是正規的軟件開發公司嗎?
  • 下一篇:和平精英模擬器屏幕卡
  • copyright 2024編程學習大全網