移动web现在已经是zepto的天下，但是一直找不到合适UI库，找了一段时间，终于找到了百度的ui库gum和inter 的 appframework UI库
相比之下，百度的UI库更接地气，配合百度强大的用户群，在各种山寨机和山寨浏览器上也可以取得不错的体验，最近终于有时间学习下这个ui库希望等一步一步进入移动web开发领域。
这是在线的api http://gmu.baidu.com/doc/
这是Github 地址 https://github.com/gmuteam/GMU
下载下来后 项目结构如下
在运行了基本的npm install和grunt dist 后就可以打开demo查看效果了
在线demo 地址 http://gmu.baidu.com/demo/ 手机扫描二维码即可打开
GUM 是基于 zepto 增加了 zepto的一些扩展 然后在写的ui 库，so 学习GUM 要实现
1 zepto 的灵活使用
2zepto的扩展是如何写的
3如何基于GUM写自己的ui控件，
首先看看demo 的index 文件结构
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <meta charset="utf-8"> <title>GMU Demos</title> <link rel="stylesheet" type="text/css" href="../assets/reset.css" /> <link rel="stylesheet" type="text/css" href="./assets/demo.css" /> <script type="text/javascript" src="../dist/zepto.js"></script> <script type="text/javascript" src="../src/extend/highlight.js"></script> <script type="text/javascript" src="./assets/app.js"></script> <script type="text/javascript" src="./assets/widgets.js"></script> <script type="text/javascript" src="./assets/demos.js"></script> <script type="text/javascript" src="./assets/iscroll.js"></script> </head> <body> <div class="pages"> <section id="S_widgets" class="__page__ widget_page"> <div id="scroller1"> <h3>Widgets</h3> </div> </section> <section id="S_demos" class="__page__ demo_page"> <div id="scroller2"> <h3><a class="btn_back"></a><span>Demos</span></h3> </div> </section> </div> </body> </html>
首先看demo引用的js部分
<script type="text/javascript" src="../dist/zepto.js"></script> 最基础的 zepto.js库
<script type="text/javascript" src="../src/extend/highlight.js"></script> 对zepto.js进行拓展的js
<script type="text/javascript" src="./assets/app.js"></script> 这个demo主要的初始化js
<script type="text/javascript" src="./assets/widgets.js"></script> 这个demo 首页主要数据结构
<script type="text/javascript" src="./assets/demos.js"></script>这个demo首页数据结构对应的具体内容
<script type="text/javascript" src="./assets/iscroll.js"></script>iscroll 插件 ps:我还没了解过这个插件，今年得了解下，否则就太OUT了
首先看看部分 widgets.js 的内容, 里面存储了首页列表的每一项的KEY 、简介、和图片，作为数据源
在看看demo.js 里面存储的数据，里面主要存储了每一项对应的url地址和title。
一段一段的来看app.js 里面的代码
$(function(){
var html = '<ul id="J_widgetList">';
for(var i in widgets){
html += '<li><a href="' + i +'"><img src="./assets/img/' + widgets[i]['icon'] + '" alt="' + widgets[i]['name'] + '">' +
'<span class="title">' + widgets[i]['name'] + '</span><span class="desc">' + widgets[i]['description'] + '</span></a></li>';
}
html += '</ul>';
$('#scroller1 ul').remove();
$('#scroller1').append(html);
// $('.pages').height($('#J_widgetList').height());
setTimeout(function(){
new iScroll('S_widgets');
$(window).trigger('resize');
}, 200);
});
这段代码主要完了这几件事情
1页面加载的时候执行数据初始化，读取存储在widgets里面的数据，拼接字符串，填满第一页的版面，至
2于为什么要在setTimeout里面执行回调函数调整Scroll，我猜测是填充完内容后会出现滚动条，所以加了这个操作
第二小段代码，是存储的和图片延迟加载相关的数据
$(function(){
demos.imglazyload = [
{
file: '../extend/imglazyload/imglazyload.html',
title: '图片延迟加载'
},{
file: '../extend/imglazyload/imglazyload_addimg.html',
title: '点击加载图片'
}
,{
file: '../extend/imglazyload/imglazyload_error.html',
title: '图片加载错误处理'
},{
file: '../extend/imglazyload/imglazyload_iscroll.html',
title: 'iScroll中使用图片延迟加载'
}
];
});
第3小段代码很长，分成一小段一小段的来看
//获取页面的两个部件
var widgetSection = $('#S_widgets').show(),
demoSection = $('#S_demos');
// $('.pages').css('overflow', 'hidden');
demoSection.css('-webkit-transform', 'translateX(100%)');
$('.__page__').css('-webkit-transition', 'all .3s ease-in-out');
//列表中每个连接绑定事件
$('#S_widgets a').click(function(e){
var widgetName = $(this).attr('href');
location.hash = widgetName;
e.preventDefault();
});
//返回按钮绑定切换事件
$('.btn_back').click(function(){
widgetSection.css('-webkit-transform', 'translateX(0)');
demoSection.css('-webkit-transform', 'translateX(100%)');
location.hash = '';
});
下面一小段代码
var updateDemoSection = function(widget){
var demolist = demos[widget],
html = '<ul id="J_demoList">';
demolist.forEach(function(item, index){
html += '<li><a href="./widget/' + item.file + '">' + item.title + '</a></li>';
});
html += '</ul>';
$('#scroller2 ul').remove();
$('#scroller2').append(html);
$('#scroller2 h3 span').html(widget + ' Demos');
new iScroll('S_demos');
}
这段代码的参数是一个widget的名称，然后在demos里面找相关的数据，最后拼接好字符串，填充页面，填充完页面初始化iScroll，没弄明白每次都要初始化iScroll？
在看下一小段代码
var updatePage = function(){
var widgetName = location.hash.replace('#', '');
if(widgetName === '' || !demos[widgetName]){
widgetSection.css('-webkit-transform', 'translateX(0)');
demoSection.css('-webkit-transform', 'translateX(100%)');
}else{
updateDemoSection(widgetName);
widgetSection.css('-webkit-transform', 'translateX(-100%)');
demoSection.show();
window.scrollTo(0, 0);
setTimeout(function(){
demoSection.css('-webkit-transform', 'translateX(0)');
}, 0);
}
}
window.onhashchange = function(e){
updatePage();
}
updatePage();
这里的window.onhashchange 事件是url变化例如url后面#abc变为#123会触发这个事件，我也是第一次见这个事件，以前没用过
每当url描点变化的时候会触发updatePage，updatePage 主要是根据不同描点名称更新页面
如果widgetName 为空，或不在demos里面则切换到首页，
如果demos包含widgetName，则执行updateDemoSection(widgetName);进行页面更新