慕课网实战—《用组件方式开发 Web App全站》笔记二

来源：互联网发布：加购软件编辑：程序博客网时间：2024/05/16 06:14

运用HTML5、CSS3、JS流行技术，采用组件式开发模式，开发Web App全站！技术大牛带你统统拿下不同类型的HTML5动态数据报告！
《用组件方式开发 Web App全站》

项目JS类开发

静态页思路验证

jQuery全屏滚动插件fullPage.js

使用参考：Fullpage入门指南

组件切换，入场，出场动画

这里写图片描述

DOM事件循环传播-无限循环

使用return false;或者triggerHander()方法阻止事件向上传播。

JS对象规划

内容组织类：H5

作用：

组织H5报告的内容结构
设置H5报告的切换效果（fullpage.js），当页面切换时，通知页内所有的组件。

方法；

添加一个页 addPage
添加一个组件 addCompoent
展现所以页面 Loader

图文组件类（H5CompoentBase）

作用：输出一个DOM，内容可以是图片或者文字

事件：

当前页载入：onLoad
当前页移出：onLeave

图片组件类（H5Compoent？？？）

作用一：在H5ComponentBase的基础之上插入DOM结构或CANVAS图形

事件：

当前页载入移除：onLoad，onLeave
图表组件本身的生长动画

项目JS类总结

这里写图片描述

通用图文组件类-H5ComponentBase(开发准备)

基本图文组件（图文设置）
接受onLoad,onLeave事件
开发方法：独立模块开发

    // 设置随机唯一的ID    var id = ( 'h5_c_'+Math.random() ).replace('.','_');    // 把当前的组件类型添加到样式中进行标记    var cls = name+' h5_component_'+cfg.type;    var component = $('<div class="h5_component '+cls+' h5_component_name_'+name+'" id="'+id+'">');

相关代码

HTML

<body>        <!-- 用于开发测试 H5ComponentBase 对象（基本的图文组件） -->        <div class="iphone">        </div>        <script type="text/javascript">            var cfg = {                type : 'base',                bg : './p1_people.png',                width : 514,                height : 306,                css:{                    bottom:0,                    opacity:0,                },                animateIn:{ bottom:80,opacity:1},                animateOut:{ bottom:0,opacity:0 },                center:true,            }            var h5 = new H5ComponentBase('myName',cfg);            $('.iphone').append(h5);            var leave = true;            $('body').click(function(){                leave = !leave;                $('.h5_component').trigger( leave ? 'onLeave' : 'onLoad');            });        </script>    </body>

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

JavaScript

/* 基本图文组件对象 */var H5ComponentBase = function( name,cfg ){    var cfg = cfg || {};    // 设置随机唯一的ID    var id = ( 'h5_c_'+Math.random() ).replace('.','_');    // 把当前的组件类型添加到样式中进行标记    var cls = name+' h5_component_'+cfg.type;    var component = $('<div class="h5_component '+cls+' h5_component_name_'+name+'" id="'+id+'">');    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%',        })    // ...很多自定义的参数    }    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;        })    return component;}

CSS样式规则

这里写图片描述

通用图表组件

内容组织，添加页面，添加组件
整合fullpage.js支持页面切换
链式调用

相关代码

HTML

<!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页面切换&组件切换 -->    <!-- 内容组织管理，有可能会加载若干个资源 -->    <script type="text/javascript">     $(function () {        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('slogan',{                        text:'slogan',                        width:'400',                        height:'100',                        css:{backgroundColor:'green',top:300,opacity:0},                        center:true,                        animateIn: {opacity:1},                        animateOut: {opacity:0}                    })              .addPage('desc')                    .addComponent('caption',{                        text:'核心理念',                        width:'400',                        height:'100',                        css:{backgroundColor:'blue',top:300,opacity:0},                        center:true,                        animateIn: {opacity:1},                        animateOut: {opacity:0}                    })              .addPage('page-3')                    .addComponent('caption',{                        text:'课程方向分布',                        width:'400',                        height:'100',                        css:{backgroundColor:'yellow',top:300,opacity:0},                        center:true,                        animateIn: {opacity:1},                        animateOut: {opacity:0}                    })              .loader(); // 添加若干图片资源    })    </script></body></html>

/* H5对象的全局样式 */.h5{    height: 100%;   }.h5_page{    position: relative;    height: 100%;    width: 100%;    background-color: #ddd;    background-size: 100%;    background-repeat: no-repeat;    text-align: center;}

JavaScript

/* 内容管理对象 */var H5 = function () {    this.id = ('h5_'+Math.random()).replace('.','_');    this.el = $('<div class="h5" id="'+this.id+'">').hide();    this.page = [];    $('body').append( this.el );    /**     * 新增一个页     * @param {string} name 组件的名称，会加入到ClassName中     * @param {string} text 页内的默认文本     * @return {H5} [description] H5对象，可以重复使用H5对象支持的方法     */    this.addPage = function( name,text ){        var page = $('<div class="h5_page section">');        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 || {};        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;    }    /*H5对象初始化呈现*/    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;}

0 0

慕课网实战—《用组件方式开发 Web App全站 》笔记二

项目JS类开发

静态页思路验证

jQuery全屏滚动插件fullPage.js

组件切换，入场，出场动画

DOM事件循环传播-无限循环

相关代码

JS对象规划

内容组织类：H5

图文组件类（H5CompoentBase）

图片组件类（H5Compoent？？？）

项目JS类总结

通用图文组件类-H5ComponentBase(开发准备)

相关代码

CSS样式规则

通用图表组件

相关代码

慕课网实战—《用组件方式开发 Web App全站》笔记二