jquery中的观察者
在jquery中观察者依赖下面原理实现:
<div id="observer"></div>
<script type="text/javascript">
// 注册事件
$("#observer").on('hello', function(evt, param) {
console.log(param);
});
// 发布事件
$("#observer").trigger('hello', ['hello world!']);
</script>
下面是一个简单进度条解耦范例:
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<style type="text/css">
.content {
border: solid 1px red;
}
.bar {
height: 20px;
background: yellow;
}
</style>
<div id="observer"></div>
<div class="content">
<div style="width: 1px" class="bar"></div>
</div>
<div id="num">0</div>
<script type="text/javascript">
$("#observer").on('progress', function(evt, param) {
$("#num").html(param);
});
progress();
function progress() {
var width = $(".bar").width() / 1;
width += 2;
$(".bar").css('width', width + 'px');
$("#observer").trigger('progress', [width]);
if (width < 100) {
setTimeout(function() {
progress();
}, 300);
}
}
</script>