显示隐藏模块实现的几种方式

红太狼 2022-05-18 08:52 250阅读 0赞

# 显示隐藏模块实现的几种方式 #

网页结构：

<style>
    body {
        width: 400px;
        margin: 0 auto;
    }
    .btn {
        width:50%;
        height: 30px;
    }
    #box {
        width: 200px;
        height：100px;
        background-color: red;
        overflow: hidden;
    }
    </style>
    
    <button id="btn-show" class="btn">显示</button>
    <button id="btn-hide" class="btn">隐藏</button>
    <div id="box" class=""> </div>

1、传统jQuery代码：

//函数的定义
    var silent = {
        show: function ($elem) {
        
            $elem.html('<p>我要显示了</p>');
            $elem.show();
            setTimeout(function () {
        
                $elem.html($elem.html() + '<p>我已经显示了</p>');
            }, 1000)
        },
        hide: function ($elem) {
        
            $elem.hide();
        }
    };
    //函数的执行
    var $box = $('#box');
    $('#btn-show').on('click', function () {
        
        silent.show($box);
    });
    $('#btn-hide').on('click', function () {
        
        silent.hide($box);
    });

2、通过回调函数实现解耦

var silent = {
        show: function ($elem, showCallback, shownCallback) {
        
            if (typeof showCallback === 'function') showCallback();
            $elem.show();
            if (typeof shownCallback === 'function') shownCallback();
        },
        hide: function ($elem) {
        
            $elem.hide();
        }
    };
    
    var $box = $('#box');
    $('#btn-show').on('click', function () {
        
        silent.show($box, function () {
        
            $box.html('<p>我要显示了</p>');
        }, function () {
        
            setTimeout(function () {
        
                $box.html($box.html() + '<p>我已经显示了</p>');
            }, 1000)
        });
    });
    $('#btn-hide').on('click', function () {
        
        silent.hide($box);
    });

3、发布订阅模式

发布订阅模式可以让不同的人增加新的功能而互不影响。

var silent = {
        inti:function($elem){
        
            if($elem.is(':hidden')){
                $elem.data('status','hidden');
            }else{
                $elem.data('status','shown');
            }
        },
        show: function ($elem) {
        
            if ($elem.data('status') === 'show') return;
            if ($elem.data('status') === 'shown') return;
            $elem.data('status','show').trigger('show'); //绑定状态,阻止连续点击带来的资源浪费
            $elem.show();
            $elem.data('status','shown').trigger('shown');
        },
        hide: function ($elem) {
        
            $elem.data('status','hide').trigger('hide');
            $elem.hide();
            $elem.data('status','hidden').trigger('hidden');
        }
    };
    
    //触发事件
    var $box = $('#box'); 
    silent.inti($box);
    $('#btn-show').on('click',function () {
        
        silent.show($box);
    });
    
    //小A同学对事件绑定的时间
    $box.on('show shown hide hidden',function(e){
        
        if(e.type === 'show'){
            $box.html('<p>我要显示了</p>');
        }else if(e.type === 'shown'){
            setTimeout(function () {
        
                $box.html($box.html() + '<p>我已经显示了</p>');
            }, 1000);
        }
    });
    $('#btn-hide').on('click', function () {
         
        silent.hide($box);
    });

发表评论取消回复

表情：

评论列表（有 0 条评论，250人围观）

还没有评论，来说两句吧...

相关阅读

相关原生js与jQuery显示隐藏div的几种方法

原生Js与jQuery显示隐藏div的几种方法简介：本文将会讲解，如何使用原生的JS和jquery来实现对于这个div盒子的隐藏 js 方式一首先是进行

た入场券/ 2024年03月26日 11:05/ 0 赞/ 4 阅读

相关 Vue显示图片的几种方式

前言最近在做自己的项目，有这么一个需求，用户列表需要展示用户的头像，之前一直没有处理，趁着这次机会，正好分享下我的解决过程。头像这一栏空荡荡的，我这种强迫症患者难受

心已赠人/ 2023年09月24日 16:38/ 0 赞/ 70 阅读

相关 Python模块常用的几种安装方式

一、方法1：单文件模块直接把文件拷贝到 $python\_dir/Lib 二、方法2：多文件模块，带setup.py 下载模块包，进行解压，进入模块文件夹，执行

旧城等待，/ 2022年08月08日 13:52/ 0 赞/ 214 阅读

相关 JS实现继承的几种方式

前言 JS作为面向对象的弱类型语言，继承也是其非常强大的特性之一。那么如何在JS中实现继承呢？让我们拭目以待。 JS继承的实现方式既然要实现继承，那么首先我们得有一

墨蓝/ 2022年06月17日 07:50/ 0 赞/ 262 阅读

相关 Ajax 的几种实现方式

> 文章是本人大三期间的学习笔记，一些论断取自书籍和网上博客，碍于当时的技术水平有一些写得不够好的地方，可以在评论处理智讨论~ 一、什么是 Ajax ---------

た入场券/ 2022年05月27日 05:56/ 0 赞/ 292 阅读

相关 android statusbar隐藏的几种方式

android statusbar 用来显示电池信号通知小图标等的最上部的条，隐藏它才能全屏，以下属性备忘以下。 View content = findViewByI

偏执的太偏执、/ 2022年05月25日 00:04/ 0 赞/ 466 阅读

相关显示隐藏模块实现的几种方式

显示隐藏模块实现的几种方式网页结构： <style> body { width: 400px; margin: 0 a

红太狼/ 2022年05月18日 08:52/ 0 赞/ 251 阅读

相关关于页面之间局部显示的几种方式

第一种：这里使用到了easyui+ssm <body class="easyui-layout"> <div data-options="region

悠悠/ 2022年05月12日 17:18/ 0 赞/ 223 阅读

相关 jquery实现div模块的隐藏和显示

-------------------- 1、点击按钮 <button id="fat-btn" class="btn btn-primary" type="bu

深碍√TFBOYSˉ_/ 2022年02月24日 12:28/ 0 赞/ 324 阅读

相关 JS实现继承的几种方式

前言 JS作为面向对象的弱类型语言，继承也是其非常强大的特性之一。那么如何在JS中实现继承呢？让我们拭目以待。既然要实现继承，那么首先我们得有一个父类，代码如下：

你的名字/ 2021年01月27日 16:07/ 0 赞/ 758 阅读