`
p7engqingyang
  • 浏览: 70858 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

基于事件模型的同域内全局事件监听触发实现

阅读更多
构思:
1、在应用中,由于用了iframe,为了方便各个页面不用window.parent.parent这样的调用考虑利用事件模型对此问题进行解决。

2、应用
$.bindge("eventname",function(event,...){
   ...
});
$.triggerge("eventname",params);


3、实现
/**
 * 客户端统一事件管理器
 */
(function($, undefined)
{
    /**
     * 定义全局事件管理器
     */
    var _globalEventManagerWin_ = window;
    var _$globalEventManager = null;
    while (!_$globalEventManager)
    {
        try
        {
            if (!_globalEventManagerWin_.closed
                    && _globalEventManagerWin_._$globalEventManager)
            {
            	_$globalEventManager = _globalEventManagerWin_._$globalEventManager;
                break;
            }
        }
        catch (e)
        {
            // do nothing
        }

        if (!_globalEventManagerWin_.closed
                && _globalEventManagerWin_.parent != null
                && _globalEventManagerWin_.parent != _globalEventManagerWin_)
        {
            _globalEventManagerWin_ = _globalEventManagerWin_.parent;
        }
        else if (!_globalEventManagerWin_.closed
                && _globalEventManagerWin_.opener != null
                && _globalEventManagerWin_.opener != _globalEventManagerWin_)
        {
            _globalEventManagerWin_ = _globalEventManagerWin_.opener;
        }
        else
        {
        	//全局事件管理器
        	var GlobalEventManager = function(config){
        		
        	};
        	//全局事件管理器属性:
        	GlobalEventManager.prototype.$globalEventHandle = $("<_global_event_handle/>");
        	//
        	GlobalEventManager.prototype.eventTypeCallbackMapping = {};
        	
        	//全局事件管理器方法:
        	//添加事件监听器
        	GlobalEventManager.prototype.bind = function(eventType, data, callbackFn){
        		var _self = this;
        		if(!callbackFn && $.isFunction(data)){
        			callbackFn = data;
        			data = [];
        		}
        		//压入堆栈
        		if(!_self.eventTypeCallbackMapping[eventType]){
        			_self.eventTypeCallbackMapping[eventType] = $.Callbacks("unique");
        			_self.$globalEventHandle.bind(eventType, data, function(event){
        				console.log(Array.prototype.slice.call(arguments));
        				_self.eventTypeCallbackMapping[eventType].fireWith(callbackFn,Array.prototype.slice.call(arguments));
        			});
        		}
        		var _whenExceptionRemoveAbleFunction = function(){
        			try{
        				callbackFn.apply(callbackFn,arguments);
        			}catch(e){
        				//console.log('fire bind global event exception: ' + e);
        				_self.eventTypeCallbackMapping[eventType].remove(_whenExceptionRemoveAbleFunction);
        			}
        		};
        		_self.eventTypeCallbackMapping[eventType].add(_whenExceptionRemoveAbleFunction);
        	};
        	GlobalEventManager.prototype.trigger = function(eventType, params){
        		this.$globalEventHandle.trigger(eventType, params)
        	};
        	
            /**
             * 事件管理器全局对象
             */
        	_$globalEventManager = new GlobalEventManager();
        	
        	_globalEventManagerWin_._$globalEventManager = _$globalEventManager;
        	//循环调度,用以清理全局事件管理器中,已经被回收的对象
        	//setInterval(function(){
        	//	
        	//},60 * 1000 );
        }
    }
    //释放引用
    _globalEventManagerWin_ = null;

    var _globalEventCallbacks = {};
    $.extend(
    {
        triggerGlobalEvent : function(eventType, params)
        {
            _$globalEventManager.trigger(eventType, params);
        }, 
        bindGlobalEvent : function(eventType, data, callbackFn)
        {
            _$globalEventManager.bind(eventType, data, callbackFn);
        }
    });
    $.triggerGE = $.triggerge = $.triggerGlobalEvent;
    $.bindGE = $.bindge = $.bindGlobalEvent;
})(jQuery);
分享到:
评论

相关推荐

    Angularjs全局变量被作用域监听的正确姿势

    开发者应当注意在控制器或指令中使用$scope.$watch,而不是$rootScope.$watch,除非确实需要在全局范围内监听某些变化。同时,合理利用AngularJS提供的机制来手动清理不再需要的监听器和事件绑定,可以避免内存泄漏...

    AngularJS 0005:作用域

    - `$apply`: 当在AngularJS外部(比如JavaScript事件处理函数)修改了作用域中的数据时,需要调用`$apply`来触发`$digest`循环。例如,`$scope.$apply(function() { $scope.myVariable = newValue; })`。 **作用域...

    基于MVC的JavaScript+Web富应用开发(英文版).

    ### 基于MVC的JavaScript+Web富应用开发 #### 一、MVC与类的概念 MVC架构模式在前端开发领域中的热度持续上升,它不仅为开发者提供了一种组织代码的有效方式,还帮助他们更好地管理应用程序的状态。在《JavaScript...

    JavaScript 45 道面试题及答案.docx

    在事件中,this 指向触发这个事件的对象,特殊的是,IE 中的 attachEvent 中的 this 总是指向全局对象 Window。 事件模型 事件模型有三种:冒泡型事件、捕获型事件和 DOM 事件流。冒泡型事件:子级元素先触发,父级...

    深化浅析JavaScript中数据共享和数据传递_.docx

    - 事件监听和触发:在事件驱动的编程模型中,事件可以作为数据传递的一种手段,通过监听和触发事件来传递信息。 - 导入/导出(模块系统):在ES6引入模块系统后,可以使用`import`和`export`关键字在模块间传递数据...

    一些用js实现的特效

    在编写特效时,遵循模块化、可维护性的原则,使用立即执行函数(IIFE)避免污染全局作用域,注释代码以提高可读性,利用版本控制系统(如Git)管理代码。 以上就是JavaScript特效的一些核心知识点,通过学习和实践...

    JavaScript中的变量监听:实时捕捉变化的利器 .pdf

    在现代Web开发中,变量监听是一项重要的技术,它允许开发者实时捕捉变量的变化,并在这些变化发生时触发相应的事件处理逻辑。这项技术对于构建动态、响应式的用户界面至关重要。本文将深入探讨如何在JavaScript中...

    javascript+css实现的离开网站时显示模态弹窗特效源码.zip

    我们可以通过在全局作用域注册事件监听器来捕获这个事件: ```javascript window.addEventListener('beforeunload', function(event) { // 在这里添加你的代码,例如弹出模态窗口 }); ``` 在事件监听器内部,我们...

    腾讯网首页首屏基于js的可重播的巨幅广告代码

    本文将深入探讨腾讯网首页首屏上基于JavaScript实现的可重播的巨幅广告代码的相关知识点,帮助开发者理解其背后的原理和实现方式。 首先,JavaScript(简称JS)是网页动态效果和交互的核心语言,它允许我们在用户与...

    《Javascript源码大全1.0版》

    2. **作用域**:JavaScript有全局作用域和局部作用域,变量在函数内部定义的为局部作用域,在函数外部定义的为全局作用域。理解作用域规则对于避免变量冲突至关重要。 3. **函数**:函数是JavaScript中可重用的代码...

    JavaScript面试题及答案-共50道.docx

    回调函数简单但可能导致回调地狱,事件监听和发布/订阅能实现解耦,Promise则为异步操作提供了一致的接口,便于管理链式操作。 6. **事件流**:事件流包括事件捕获和事件冒泡。事件冒泡是指事件从最具体的元素开始...

    javascript中文教程

    - 事件对象提供了关于事件的详细信息,如`event.target`指向触发事件的元素。 6. **异步编程** - 回调函数:传统的异步处理方式,但可能导致回调地狱问题。 - Promise:提供了一种处理异步操作的方法,可以链式...

    AS2toAS3.pdf

    - 由于 AS3 中的可视元素不再自动触发事件,因此需要更加关注事件的绑定和解绑操作。 #### 四、事件的转换 **1. 监听事件的方式(Handling the events)** AS3 采用了基于事件流的新模型,这意味着事件的触发和...

    JavaScript忍者秘籍(第2版)笔记、习题与解析

    书中讲解了事件监听、事件触发、事件冒泡和事件捕获,以及Promise和async/await的使用,帮助理解异步编程的核心原理。 6. **DOM操作**:DOM是HTML和XML文档的对象模型,JavaScript可以通过DOM API来操作网页元素。...

    经典javascript源码(打包).rar

    事件是用户与网页交互时触发的特定情况,JavaScript通过事件监听器来响应这些事件,如点击、鼠标移动、键盘输入等。事件处理模型分为传统事件处理和现代事件处理(事件委托)。 6. **AJAX** AJAX(Asynchronous ...

    JavaScript参考手册.rar

    闭包则允许函数访问并操作其词法作用域内的变量,即使在其外部。 事件驱动是JavaScript的重要特性,网页上的用户交互如点击按钮、滚动页面等都会触发特定的事件。JavaScript通过事件监听器来响应这些事件,实现与...

Global site tag (gtag.js) - Google Analytics