组件方式开发 Web App全站-5-开发基本图文组件H5ComponentBase

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

侠客岛的含笑

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

阅读量1k

点赞数

分类专栏：前端组件化入门文章标签： web app 模块化函数对象 javascript

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

版权

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

9 篇文章 1 订阅

订阅专栏

这里先引申下什么叫做组件式开发？
组件式开发=(高内聚性和低耦合性)，js封装，分而治之、重复利用。
H5ComponentBase
- 基本图文组件（图，文设置）
- 接受onLoad,onLeave事件
- 独立模块化开发
css样式规划
这里写图片描述

/* 基本图文组件对象 */

var H5ComponentBase = function (name,cfg ) {
    var cfg = cfg || {};
    var id = ( 'h5_c_'+Math.random()).replace('.','_');

    // 把当前的组建类型添加到样式总进行标记

    var cls = 'h5_component_'+cfg.type +' h5_component_name_' + name;
    var component = $('<div class="h5_component '+cls+'" id="'+id+'">');
    // var component = $('<div class="h5_component">');
    cfg.text    &&  component.text(cfg.text);
    cfg.width   &&  component.width(cfg.width/2);
    cfg.height  &&  component.height(cfg.height/2);

    cfg.css && component.css( cfg.css );
    cfg.bg  && component.css('backgroundImage','url('+cfg.bg+')');

    if(cfg.center === true){
        component.css({
            marginLeft : ( cfg.width/4 * -1) + 'px',
            left:'50%'
        })
    }

    return component;


}

通用全局css

/* 基本图文组件样式 */
.h5_component{
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
}

测试

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

    <title>图文组件</title>

    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            background-color: #000;
            font-size: 12px;
        }

        .iphone{
            width: 340px;
            height: 540px;
            background-color: #fff;
            /*水平居中的方法*/
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -270px 0 0 -170px;
        }
    </style>

    <script type="text/javascript" src="../js/lib/jquery.js"></script>
    <script type="text/javascript" src="../js/H5ComponentBase.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/H5ComponentBase.css">

    <body>
        <!-- 用于开发测试 H5ComponentBase 对象（基本的图文组件） -->
        <div class="iphone">

        </div>

        <script type="text/javascript">

            var cfg = {
                type : 'base',
                // text  : "大家好",
                width : 514,
                height : 306,

                bg : './p1_people.png',
                css :{
                    left:50,
                    top:50
                },
                center : true,

            }

            var h5 = new H5ComponentBase('bob',cfg);
            $('.iphone').append(h5);

        </script>

    </body>

</html>

下面开始第二步：接受onLoad,onLeave事件

js文件内容添加onLoad和onLeave事件，添加class,如果animate**存在执行jquery的animate事件
component.on('onLoad',function(){
        component.addClass(cls+'_load').removeClass(cls + '_leave');
        cfg.animateIn && component.animate(cfg.animateIn);
        return false;
    }) 
    component.on('onLeave',function(){
         component.addClass(cls+'_leave').removeClass(cls + '_load');
         cfg.animateOut && component.animate(cfg.animateOut);
         return false;
    })

cfg对象添加内容；
animateIn:{bottom:78,opacity:1},
animateOut:{bottom:0,opacity:0},
添加body点击，判断Load或者是Leave,然后触发
var h5 = new H5ComponentBase('bob',cfg);
            $('.iphone').append(h5);

            var leave = true;
            $('body').click(function(){
                leave =!leave;
                $('.h5_component').trigger(leave ? 'onLeave' : 'onLoad')
            })

这里写图片描述

侠客岛的含笑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
组件方式开发 Web App全站-5-开发基本图文组件H5ComponentBase

这里先引申下什么叫做组件式开发？组件式开发=(高内聚性和低耦合性)，js封装，分而治之、重复利用。 H5ComponentBase - 基本图文组件（图，文设置） - 接受onLoad,onLeave事件 - 独立模块化开发 css样式规划 /* 基本图文组件对象 */var H5ComponentBase = function (name,cfg ) { v
复制链接

扫一扫

专栏目录