201603102057_《Javascript之观察者模式(模块间通讯)》
2016-03-10 21:04
561 查看
<!-- Html代码--> <button type="button" id="count"> 点我</button> <div id="show"></div>
/*********************** * Javascript代码 * ***********************/ window.onload = function(){ //将"发布者"与"订阅者"联系起来的"中介者" var Event = (function() { var clientList = [], listen, trigger, remove; listen = function(key, fn) { if (!clientList[key]) { clientList[key] = []; } clientList[key].push(fn); }; trigger = function() { var key = Array.prototype.shift.call(arguments), fns = clientList[key]; if (!fns || fns.length === 0) { return falsse; } for (var i = 0, fn; fn = fns[i++];) { fn.apply(this, arguments); } }; remove = function(key, fn) { var fns = clientList[key]; if (!fns) { return false; } if (!fn) { fns && (fns.length = 0); }else{ for (var l = fns.length - 1; l >= 0; l--) { var _fn = fns[l]; if (_fn === fn) { fns.splice(l, 1); } } } }; return { listen: listen, trigger: trigger, remove: remove } })(); var MOUDLE_A = (function(){ var count = 0; var oBtn = document.getElementById('count'); oBtn.onclick = function(){ Event.trigger('add',count++); }; })(); var MOUDLE_B = (function(){ var oDiv = document.getElementById('show'); Event.listen('add', function(count){ oDiv.innerHTML = count; }); })(); };
相关文章推荐
- Three.js研究小结
- js面向对象与原型
- 【秘密花园笔记】js的对象和函数方面知识
- javascript 基础2
- IE浏览器开启对JavaScript脚本的支持
- Angular的fromJson与toJson方法
- 客户端——解析json数据
- JS里的onclick事件
- JS中数组去除重复的方法
- js模块化编程
- JavaScript创建表格的两种方式
- PhantomJS 安装步骤
- 体验Impress.js
- Javascript滑屏切换场景
- JS背景音乐
- 【翻译】在Ext JS 5种使用ViewControllers
- 深入理解JavaScript中的this关键字
- JSONModel解析数据成Model
- 开源C++项目Google JavaScript引擎V8挑战实录,带你进入V8之旅
- Angular用ng-repeat生成表单并绑定ng-click时的一个细节