[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('.amui');

关闭特定组件的默认事件:

 

$(document).off('.modal.amui');

自定义事件

多数组件都定义了一些自定义事件。

自定义事件命名的方式为 {事件名称}:{组件名称}:amui,用户可以查看组件文档使用这些自定义事件。

 

$('#myAlert').on('close:alert:amui', function() {  // do something});

Web 组件截图:


wKioL1PIlZXz5sVAAAPbL5uuzxM831.jpg

spacer.gif

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


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 目前处在内测期,希望能尽可能多的收集到优秀的、有建设性的反馈建议和看法,与广大优秀前端开发者共同完善Amaze UI 的功能,推动中国移动跨屏前端技术的发展。


 本文转自 陈本峰 51CTO博客,原文链接:http://blog.51cto.com/wingeek/1439847,如需转载请自行联系原作者



相关文章
|
8月前
|
并行计算 前端开发 JavaScript
Web Worker:让前端飞起来的隐形引擎
在现代 Web 开发中,前端性能优化是一个至关重要的课题,尤其是对于计算密集型的应用,如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈,导致应用变得迟缓。Web Worker,作为一种强大的技术,使得前端能够在后台进行并行计算,从而实现高效的任务处理,不影响主线程的运行和用户的交互体验。
706 108
|
6月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
伪类:伪类这个叫法源自于它们跟类相似,但实际上并没有类会附加到标记中的标签上。 伪类分为两种(以及新增的伪类选择器): UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于连接上),为该元素应用CSS样式。 :hover 结构化伪类:会在标记中存在某种结构上的关系时 例如: 某元素是一组元素中的第一个或最后一个,为该元素应用CSS样式。 :not和:target(CSS3新增的两个特殊的伪类选择器)
715 2
|
8月前
|
JavaScript 前端开发 Java
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
735 72
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
938 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
10月前
|
移动开发 前端开发 JavaScript
前端web创建命令
本项目使用 Vite 搭建 Vue + TypeScript 开发环境,并基于 HTML5 Boilerplate 提供基础模板,快速启动现代前端开发。
172 2
|
10月前
|
Web App开发 编解码 移动开发
零基础音视频入门:你所不知道的Web前端音视频知识
本文回顾了Web端音视频的发展历程,同时还介绍了视频的编码、帧率、比特率等概念,提到了Canvas作为视频播放的替代方案,以及FFmpeg在音视频处理中的重要作用等知识。
305 1
|
9月前
|
人工智能 JSON 前端开发
如何解决后端Agent和前端UI之间的交互问题?——解析AG-UI协议的神奇作用
三桥君指出AG-UI协议通过SSE技术实现智能体与前端UI的标准化交互,解决流式传输、实时进度显示、数据同步等开发痛点。其核心功能包括结构化事件流、多Agent任务交接和用户中断处理,具有"一次开发到处兼容"、"UI灵活可扩展"等优势。智能体专家三桥君认为协议将AI应用从聊天工具升级为实用软件,适用于代码生成、多步骤工作流等场景,显著提升开发效率和用户体验。
2211 0
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
854 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
394 6

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1025
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    435
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    342
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    327
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    438
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    618
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    869
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    230
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    715
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    405
  • 下一篇
    开通oss服务