`
Blackbaby
  • 浏览: 183281 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

javascript自定义事件管理

阅读更多
 /**
 * 回调函数机制
 * 支持多个回调函数绑定
 * @author		tangbin
 * @see			http://www.planeart.cn/?p=1182
 * @namespace
 */
var callback = (function () {
	var that = this,
		cache = {},
		fName = '${callback}',
		fVal = 1;

	/**
	 * @scope callback
	 */
	return {
		/**
		 * 绑定回调函数
		 * @example var loadEndFn = function (photoId, photoIndex) {
		 * 	// [code..]
		 * };
		 * callback.bind('getData', loadEndFn);
		 * @param	{String}	名称
		 * @param	{Function}	要绑定的回调函数
		 */
		bind: function (name, callback) {
			!cache[name] && (cache[name] = {});
			!callback[fName] && (callback[fName] = fVal ++);
			cache[name][callback[fName]] = callback;
		},

		/**
		 * 移除回调函数
		 * @example var loadEndFn = function (photoId, photoIndex) {
		 * 	// [code..]
		 * };
		 * callback.unbind('getData', loadEndFn);
		 * @param	{String}	名称
		 * @param	{Function}	要卸载的回调函数
		 */
		unbind: function(name, callback) {
			callback === undefined ?
			delete cache[name] :
			callback[fName] && (delete cache[name][callback[fName]]);
		},

		/**
		 * 触发回调函数
		 * @example var photoId = 34356, photoIndex = 0;
		 * callback.trigger('getData', [photoId, photoIndex]);
		 * @param	{String}	名称
		 * @param	{Array}		(可选)传递给事件处理函数的附加参数
		 */
		trigger: function (name, data) {
			var i, ret, callbacks = cache[name];
			if (callbacks) for (i in callbacks) ret = callbacks[i].apply(that, data);
			return ret;
		}

	};

})();

 

 

    原文链接:http://www.planeart.cn/?p=1182

 

    

var _cache = {};
var broadcast = {
    /**
     * 派发
     * @param  {[type]} type 事件类型
     * @param  {[type]} data 回调数据
     * @return {[type]}      [description]
     */
    fire:function(type, data){
        var listeners = _cache[type],len = 0;
        if(!$.isUndefined(listeners)){
            var args = [].slice.call(arguments);
            args = args.length > 2 ? args.splice(2, args.length-1) : [];
            args = [data].concat(args);

            len = listeners.length;
            for(var i = 0; i<len;i++){
                var listener = listeners[i];
                if(listener && listener.callback) {
                    args = args.concat(listener.args);
                    listener.callback.apply(listener.scope, args);
                }
            }
        }
        return this;
    },
    /**
     * 订阅广播事件
     * @param  {[type]}   types     事件类型,支持,分隔符
     * @param  {Function} callback 回调函数
     * @param  {[type]}   scope    回调函数上下文
     * @return {[type]}            this
     */
    subscribe:function(types, callback, scope){
        types = types || [];
        var args = [].slice.call(arguments);

        if($.isString(types)){
            types = types.split(',');
        }
        var len = types.length;
        if(len===0){
            return this;
        }
        args = args.length > 3 ? args.splice(3, args.length-1) : [];
        for(var i = 0;i<len;i++){
            var type = types[i];
            _cache[type] = _cache[type] || [];
            _cache[type].push({callback:callback,scope:scope,args:args});
        }
        return this;
    },
    /**
     * 退订
     * @param  {[type]}   type     [description]
     * @param  {Function} callback 假如传入则移出传入的监控事件,否则移出全部
     * @return {[type]}            [description]
     */
    unsubscribe:function(type, callback, scope){
        var listeners = _cache[type];
        if (!listeners) {
            return this;
        }
        if(callback){
            var len = listeners.length,
                tmp = [];

            for(var i=0; i<len; i++) {
                var listener = listeners[i];
                if(listener.callback == callback && listener.scope == scope) {
                } else {
                    tmp.push(listener);
                }
            }
            listeners = tmp;
        }else{
            listeners.length = 0;
        }
        return this;
    },
    /**
     * 订阅别名
     * @return {[type]} [description]
     */
    on:function(){
        return this.subscribe.apply(this,arguments);
    },
    /**
     * 退订别名
     * @return {[type]} [description]
     */
    un:function(){
        return this.unsubscribe.apply(this,arguments);
    },
    dispatch:function(){
        return this.fire.apply(this,arguments);
    },

    removeAll:function(){
        _cache = {};
        return this;
    }
};

    

broadcast.fire('event name', json);
broadcast.on('event name', function(data){
    console.log(data);
});

 

  

 

 

分享到:
评论

相关推荐

    javascript自定义事件功能与用法实例分析.docx

    ### JavaScript自定义事件功能与用法实例分析 #### 概述 在JavaScript中,自定义事件(也称为自定义事件)是一种强大的工具,允许开发者在不同的模块或组件之间建立通信渠道。这种通信机制基于观察者模式,即一个...

    javascript 自定义事件初探

    这种做法模拟了事件触发的过程,但没有使用原生的事件系统,而是基于对象属性来管理事件处理器。 6. **事件委托**: 虽然示例中没有提到事件委托,但它是一个相关的概念,可以用来优化事件处理。事件委托允许在一...

    Javascript自定义菜单插件(免费开放)

    在本项目中,“Javascript自定义菜单插件”是一个专门为网页设计的交互式菜单工具,开发者通过编写JS代码实现了这个插件,旨在提供一个灵活、可定制的菜单解决方案。虽然最初希望该插件能带来经济效益,但最终决定将...

    javascript十个最常用的自定义函数.pdf

    Dean Edwards 的 `addEvent` 实现则更加复杂,它不仅支持事件绑定,还提供了解绑事件的功能,并且通过哈希表的方式管理事件处理器,使得每个事件处理器可以被唯一标识。 ```javascript // addEvent/removeEvent ...

    Javascript自定义菜单插件

    JavaScript自定义菜单插件是一种基于Web的交互式用户界面组件,它允许开发者为网页或应用程序创建可定制的、动态的菜单系统。JavaScript是Web开发中的关键脚本语言,用于实现客户端的动态功能,而js是它的缩写。在这...

    详解JavaScript中的自定义事件编写

    自定义事件可以通过原生的JavaScript对象Event、CustomEvent以及dispatchEvent来创建和管理。Event是所有事件的基类,而CustomEvent继承自Event并允许开发者创建包含额外数据的事件对象。使用CustomEvent时,可以在...

    详解javascript实现自定义事件

    自定义事件不仅可以帮助我们在复杂的单页面应用(SPA)中管理状态和行为,还可以在开发组件化界面时,实现组件间的解耦和通信。理解和掌握自定义事件的实现机制,对于前端开发者来说是一项十分重要的技能。

    loadtree 延迟加载 自定义事件(右键或子节点)

    自定义事件则允许开发者根据需求扩展功能,增加交互性。在这个场景下,我们讨论的是如何在树结构组件中实现`loadtree`的延迟加载,并通过自定义事件处理用户交互,如右键点击或子节点操作。 延迟加载,或称为按需...

    改造之后的fullCalendar(改事件背景、标题自定义、无星期、左右按钮)

    fullCalendar是一款广受欢迎的JavaScript日历插件,它能够方便地在网页中展示日程安排和事件管理。通过对原版fullCalendar进行改造,我们可以实现更加个性化的功能,如改变事件背景色、自定义事件标题、去除星期显示...

    ArcGIS API for JavaScript 4.14 自定义测量工具(测距、测面,附源码)

    《ArcGIS API for JavaScript 4.14 自定义测量工具详解》 在Web GIS开发中,ArcGIS API for JavaScript是一个强大的工具,它提供了丰富的功能,包括地图显示、数据操作、地理分析等。本文将深入探讨如何利用ArcGIS ...

    自定义JavaScript弹出框组件

    3. 实现JavaScript逻辑:在JavaScript中,我们需要创建一个函数或者类来管理弹出框的状态。这包括初始化弹出框、显示和隐藏弹出框、处理用户交互以及执行动画效果。 四、实际应用 自定义JavaScript弹出框组件广泛...

    Arcgis for javascript 加载天地图及自定义图

    本话题主要聚焦于如何利用ArcGIS for JavaScript加载天地图以及添加自定义图层。 首先,让我们深入了解ArcGIS for JavaScript的核心概念。它基于ESRI的地理信息系统技术,提供了丰富的API接口,可以实现地图的创建...

    基于JavaScript的可视化流程自定义设计器

    在IT领域,基于JavaScript的可视化流程自定义设计器是一种强大的工具,它允许用户通过图形界面来构建、编辑和管理流程图。这种技术广泛应用于业务流程管理(BPM)、工作流自动化、系统集成等领域,使得非技术人员也...

    jQuery实现自定义事件的方法

    自定义事件是JavaScript编程中的一个高级概念,允许开发者创建并触发不在标准事件列表中的事件。在jQuery中,通过`.trigger()`和`.bind()`方法,我们可以方便地实现自定义事件的创建、绑定和触发,从而增强代码的可...

    使用自定义异常对象处理JavaScript错误消息

    这些事件处理程序可以捕获到JavaScript通过AJAX发送的异常,并生成一个自定义的响应,包含详细的错误信息,但要确保在生产环境中不会泄露敏感信息。 结合使用自定义异常对象和ASP.NET的错误处理,我们可以构建一个...

    自定义alert样式

    本教程将详细介绍如何在JavaScript中自定义Alert样式的实践方法。 首先,我们要明白,由于JavaScript的Alert是浏览器内置的功能,其样式受浏览器控制,不能直接通过CSS修改。但是,我们可以通过创建自定义的HTML和...

    js自定义事件及事件交互原理概述(一)

    在示例中,`MyEvent` 类提供了一个基础框架来管理和触发自定义事件。`MyEvent` 类包含一个`handler`属性来存储事件处理程序,以及`addHandler`、`fire`和`removeHandler`方法来分别添加、触发和移除事件处理程序。 ...

    JavaScript 事件绑定及深入

    **解决方案**:创建一个自定义的事件处理函数来管理事件的触发逻辑。 ```javascript function addEvent(obj, type, fn) { var saved = obj['on' + type] || function(){}; obj['on' + type] = function() { ...

    JavaScript_LLM自定义聊天机器人控制台.zip

    在"JavaScript_LLM自定义聊天机器人控制台.zip"这个压缩包中,我们可以推测其主要内容是关于如何使用JavaScript来构建一个聊天机器人的控制台。下面将详细探讨JavaScript在聊天机器人开发中的应用和相关知识点。 1....

Global site tag (gtag.js) - Google Analytics