百度移动云mobile UI组件GMU demo学习1-结构和初始化

问题导读：

1.百度移动云api在什么位置？

2.GMU是什么？

3.如何创建GMU demo？

阅读下面，首先我们需要知道

GMU是什么？

GMU是基于zepto的轻量级mobile UI组件库，符合jquery ui使用规范，提供webapp、pad端简单易用的UI组件.

这里在展示一下效果：

展示地址：http://gmu.baidu.com/demo/2.0.5/widget/，效果很不错，这个效果类似装在我们手机的效果。

下面我们继续：

动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部分

首先看看部分 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();
复制代码