자바스크립트 이벤트 관리

이번에는 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 <p style="text-align: left;">그런 다음 SDK에 연결 및 제거 방법을 게시합니다. </p><pre class="brush:php;toolbar:false"> //给外部绑定事件
            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 <p style="text-align: left;">먼저 묶고 떼어낸 후 묶을 수도 있어요. </p><pre class="brush:php;toolbar:false">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 <p style="text-align: left;">코드 보기</p><p style="text-align: left;">실행 결과: </p><p style="text-align: left;"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/90ac8234e9699492d50c725f11bf054a-2.jpg?x-oss-process=image/resize,p_40" class="lazy" alt=""></p><p   style="max-width:90%">일부 메소드를 Once(), RemoveListener(), <em>removeAllListeners() 등을 확장할 수도 있습니다.</em></p><p style="text-align: left;">요약: 이벤트 처리 방법이 더 간단하고 확장성이 뛰어납니다. <a href="http://www.php.cn/wiki/1495.html" target="_blank">jquery</a>의 이벤트 메커니즘은 이벤트 수신 기능을 DOM 요소에 바인딩하지 않고 데이터 캐시 모듈을 기반으로 관리됩니다. 참고로, 동일한 이벤트 유형의 모든 청취 객체 <a href="http://www.php.cn/wiki/60.html" target="_blank">handleObj는 청취 객체 배열 핸들을 구성합니다. </a>dom 작업<a href="http://www.php.cn/code/5682.html" target="_blank">이 포함되지 않기 때문에 비교적 간단합니다. </a></p>이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! <p></p>추천 자료: <p></p><p style="text-align: left;">WeChat 스캔 코드 결제를 위한 Asp.Net MVC 개발<a href="http://www.php.cn/weixin-kaifa-388825.html" target="_blank"></a><br></p><p style="text-align: left;">ss3의 그라데이션 사용 방법<a href="http://www.php.cn/css-tutorial-388822.html" target="_blank"></a><br></p><p style="text-align: left;">jQuery, Angular 및 node의 Promise에 대한 자세한 설명<a href="http://www.php.cn/js-tutorial-388820.html" target="_blank"></a><br></p>

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