[Amaze UI] 如何推进 mobile first 的前端 Web 方案-阿里云开发者社区

开发者社区> 技术小胖子> 正文

[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,如需转载请自行联系原作者



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
22592 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4397 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
7734 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
5409 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
9406 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
16737 0
13262
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载