移动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);进行页面更新
