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

来源：互联网发布：辣鸭头淘宝配方编辑：程序博客网时间：2024/06/05 04:58

这里先引申下什么叫做组件式开发？
组件式开发=(高内聚性和低耦合性)，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