显示隐藏模块实现的几种方式
显示隐藏模块实现的几种方式
网页结构:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
//函数的定义 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、通过回调函数实现解耦
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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、发布订阅模式
发布订阅模式可以让不同的人增加新的功能而互不影响。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
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); }); |