组件方式开发 Web App全站-5-开发H5对象

来源：互联网发布：windows徽标编辑：程序博客网时间：2024/05/16 12:37

 1. 内容组织：添加页面，添加组件 2. 整合fullPage.js页面切换 3. 链式调用

这里写图片描述
jQuery对象，对一个Dom数组进行封装，提供一系列对Dom数据的操作，大部分的操作可以返回jQuery对象自身，从而可以方便的链式操作。
组件不知道添加到哪页？
小技巧：每次添加页面的时候会把Page最后一页记录下来；

page = this.page.slice(-1)[0]

小技巧：sublime安装DocBlockr插件在function上一行输入/**，然后按Tab就自动补全注释

fullpage()方法需要在每个页面的容器中添加class=section
断点调试

js组件代码：

/* 内容管理对象 */var H5 = function (){    this.id = ('h5_'+Math.random()).replace('.','_');    this.el = $('<div class="h5" id="' + this.id + '"></div>').hide();    this.page =[];    $('body').append( this.el );    /**     * 新增一个页     * @param {string} name 组建的名称，会加入到ClassName中     * @param {[type]}  text 页内的默认文本     * @return {H5} 可以重复使用H5对象支持的方法     */    this.addPage = function(name,text){        var page = $('<div class="h5_page section"></div>');        if(name != undefined){            page.addClass('h5_page_' + name);        }        if(text != undefined){            page.text(text);        }        this.el.append(page);        this.page.push(page);        return this;    }    this.addComponent = function(name,cfg){        var cfg = cfg || {};        // jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。        cfg = $.extend({            type : 'base'        },cfg);        var component; //定义一个变量，存储，组件元素        // 选中最后一页        var page = this.page.slice(-1)[0];        switch(cfg.type){            case 'base':                component = new H5ComponentBase(name,cfg);            break;            // default:        }        page.append(component);        return this;    }    this.loader = function(){        this.el.fullpage({            //触发事件              onLeave:function(index,nextIndex,direction){                    // debugger                   this.find('.h5_component').trigger('onLeave')                },                afterLoad:function(anchorLink,index){                    // debugger                    this.find('.h5_component').trigger('onLoad')                }        });        this.page[0].find('.h5_component').trigger('onLoad');        this.el.show();    }    return this;}

测试：

<!DOCTYPE html><html><head>    <meta charset="UTF-8"/>    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">    <title>IT学习网2015课程学习情况</title>    <!-- 基本资源库 -->    <script type="text/javascript" src="../js/lib/jquery.js"></script>    <script type="text/javascript" src="../js/lib/jquery-ui.min.js"></script>    <script type="text/javascript" src="../js/lib/jquery.fullPage.js"></script>    <!-- H5对象资源&管理内容：页-组件 -->    <script type="text/javascript" src="../js/H5.js"></script>    <link rel="stylesheet" type="text/css" href="../css/H5.css">    <script type="text/javascript" src="../js/H5ComponentBase.js"></script>    <link rel="stylesheet" type="text/css" href="../css/H5ComponentBase.css">    <style type="text/css">    </style></head><body>    <!-- 测试内容组织功能，以及fullPage页面切换&组件切换 -->    <!-- 内容组织管理，有可能会加载若干个资源 -->    <!-- loder作用：多个资源加载后呈现 -->    <script type="text/javascript">       var h5 = new H5();       h5       .addPage('face','首页')        .addComponent('logo',{            text : 'logo',            width : 400,            height : 100,            css : {backgroundColor:'red',top:200,opacity:0},            center :true,            animateIn:{opacity:1},            animateOut:{opacity:0}             })        .addComponent('logo',{text:'logo'})       .addPage('face','首页')        .addComponent('logo',{text:'logo'})       .addPage('face','首页')       .loader();    </script></body></html>

0 0