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

最新推荐文章于 2024-07-19 13:36:23 发布

侠客岛的含笑

最新推荐文章于 2024-07-19 13:36:23 发布

阅读量1.1k

点赞数

分类专栏：前端组件化入门文章标签： web app jquery 对象数据 dom

本文链接：https://blog.csdn.net/qq_33936481/article/details/70432260

版权

前端组件化入门专栏收录该内容

9 篇文章 1 订阅

订阅专栏

 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>