자바스크립트 이벤트 관리

이번에는 JavaScript 이벤트 관리, JavaScript 이벤트 관리 사용 시 주의사항은 무엇인지, 실제 사례를 살펴보겠습니다.

JavaScript xxsdk를 설계할 때 호출자가 워크플로에 참여할 수 있도록 고려하고 콜백 함수를 사용하기 시작했습니다. 다음과 같습니다:

this.foo = function(args,callbackFn) {      //do something
        //then  if callbackFn is a function       callbackFn();
 };

또는 초기화 중에 구성을 전달합니다.

 function SDK(config) {            var configs = {
                onInit: function() {
                },
                onFoo: function () {
                },                // on....            };            //合并参数
            configs = $.extend(configs, config);            this.foo = function (args) {                //do something                configs.onFoo();
            };
}

하지만 여기에 문제가 있습니다. 함수가 더 많기 때문에 첫 번째 방법은 매우 짜증납니다. 각 메서드의 매개 변수 뒤에는 하나 이상의 콜백 함수가 와야 하며 코드가 깨끗하지 않은 것처럼 보이며 사용자가 호출할 때만 작동합니다. 콜백이 실행되며 사용자에게 노출되지 않는 메서드에는 사용되지 않습니다. 두 번째 방법은 함수가 많을수록 구성이 길어지고 구성 코드가 보기 흉해 보이는 반면, 한 메서드는 하나의 콜백만 트리거합니다. 마지막으로 다음과 같은 방법을 사용했습니다

이벤트 관리

먼저 이벤트 관리자를 정의합니다. 주요 아이디어는 각 이벤트 유형을 콜백 목록에 대응시켜 동일한 이벤트가 외부와 여러 번 연관될 수 있도록 하는 것입니다. 연결을 취소하는 것은 해당 이벤트 유형의 함수 목록에서 콜백 함수를 제거하는 것입니다. 트리거링은 목록의 모든 기능을 실행하는 것입니다. 물론 매개변수도 포함됩니다.

 var eventManger = {                
                handlers: {},                //类型,绑定事件 
                addHandler:function(type,handler) {                    if (typeof this.handlers[type] == "undefined") {                        this.handlers[type] = [];//每个事件都可以绑定多次                    }                    this.handlers[type].push(handler);
                },
                removeHandler:function(type, handler) {                    var events = this.handlers[type];                    for (var i = 0, len = events.length; i < len; i++) {                        if (events[i] == handler) {
                            events.splice(i, 1);                            break;
                        }
                    }
                },
                trigger: function (type) {                    if (this.handlers[type] instanceof Array) {                        var handlers = this.handlers[type];                        var args = Array.prototype.slice.call(arguments, 1);                        for (var i = 0, len = handlers.length; i < len; i++) {                            handlers[i].apply(null, args);
                        }
                    }
                }
            };

그런 다음 SDK에 연결 및 제거 방법을 게시합니다.

 //给外部绑定事件
            this.on = function(type, event) {
                eventManger.addHandler(type,event);
            };            //移除事件
            this.off = function(type, event) {
                eventManger.removeHandler(type, event);
            };

실행 프로세스 중에 각각 이벤트를 트리거합니다.

           this.init = function() {                //do init
                eventManger.trigger('init');
            };            this.start = function() {                //do start
                eventManger.trigger('start');
            };            this.connect = function() {
                eventManger.trigger('connect');
            };            this.messages = function() {                var msgs = [];
                msgs.push("你好吗");
                msgs.push("我很好");                eventManger.trigger('messages',msgs);
            };            this.disconnect = function() {
                eventManger.trigger('disconnect');
            };

그러면 사용자가 사용하기가 더 편리해집니다.

//绑定connect
 sdk.on('connect', function () {
            console.log('connect');
        });//绑定messages
        sdk.on('messages', function (data) {            if (!data) return;            if (data instanceof Array) {                for (var i = 0; i < data.length; i++) {
                    console.log(data[i]);
                }
            } else {
                console.log(data);
            }
       });

먼저 묶고 떼어낸 후 묶을 수도 있어요.

var oninit = function() {
            console.log('init...');
        };
 sdk.on('init', oninit);
 sdk.on('init', function () {
            console.log('other init');
        });
 sdk.off('init', oninit);
        sdk.init();

모든 코드:

    function SDK() {            var eventManger = {                
                handlers: {},                //类型,绑定事件 
                addHandler:function(type,handler) {                    if (typeof this.handlers[type] == "undefined") {                        this.handlers[type] = [];//每个事件都可以绑定多次                    }                    this.handlers[type].push(handler);
                },
                removeHandler:function(type, handler) {                    var events = this.handlers[type];                    for (var i = 0, len = events.length; i < len; i++) {                        if (events[i] == handler) {
                            events.splice(i, 1);                            break;
                        }
                    }
                },
                trigger: function (type) {                    if (this.handlers[type] instanceof Array) {                        var handlers = this.handlers[type];                        var args = Array.prototype.slice.call(arguments, 1);                        for (var i = 0, len = handlers.length; i < len; i++) {
                            handlers[i].apply(null, args);
                        }
                    }
                }
            };            //给外部绑定事件
            this.on = function(type, event) {
                eventManger.addHandler(type,event);
            };            //移除事件
            this.off = function(type, event) {
                eventManger.removeHandler(type, event);
            };            this.init = function() {                //do init
                eventManger.trigger('init');
            };            this.start = function() {                //do start
                eventManger.trigger('start');
            };            this.connect = function() {
                eventManger.trigger('connect');
            };            this.messages = function() {                var msgs = [];
                msgs.push("你好吗");
                msgs.push("我很好");
                eventManger.trigger('messages',msgs);
            };            this.disconnect = function() {
                eventManger.trigger('disconnect');
            };            this.autoRun = function() {                this.init();                this.start();                this.connect();                this.messages();                this.disconnect();
            };
            
        }        var sdk = new SDK();        var oninit = function() {
            console.log('init...');
        };
        sdk.on('init', oninit);
        sdk.on('start', function () {
            console.log('start');
        });
        sdk.on('connect', function () {
            console.log('connect');
        });
        sdk.on('messages', function (data) {            if (!data) return;            
            if (data instanceof Array) {                for (var i = 0; i < data.length; i++) {
                    console.log(data[i]);
                }
            } else {
                console.log(data);
            }
        });
        sdk.on('disconnect', function () {
            console.log('disconnect');
        });
        sdk.autoRun();
        sdk.on('init', function () {
            console.log('other init');
        });
        sdk.off('init', oninit);
        sdk.init();

코드 보기

실행 결과:

일부 메소드를 Once(), RemoveListener(), removeAllListeners() 등을 확장할 수도 있습니다.

요약: 이벤트 처리 방법이 더 간단하고 확장성이 뛰어납니다. jquery의 이벤트 메커니즘은 이벤트 수신 기능을 DOM 요소에 바인딩하지 않고 데이터 캐시 모듈을 기반으로 관리됩니다. 참고로, 동일한 이벤트 유형의 모든 청취 객체 handleObj는 청취 객체 배열 핸들을 구성합니다. dom 작업이 포함되지 않기 때문에 비교적 간단합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

WeChat 스캔 코드 결제를 위한 Asp.Net MVC 개발

ss3의 그라데이션 사용 방법

jQuery, Angular 및 node의 Promise에 대한 자세한 설명

위 내용은 자바스크립트 이벤트 관리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!