重構，以減少在幾個事件偵聽器重複

我有以下代碼重複一些模式重構，以減少在幾個事件偵聽器重複

document.querySelector("form").addEventListener("submit",function(event){ 
    event.preventDefault(); 
    myFn.eventActionTrigger(); 
    myFn.spinner("on"); 
    }); 
    document.querySelector("button").addEventListener("click",function(event){ 
    event.preventDefault(); 
    myFn.eventActionTrigger(); 
    myFn.spinner("on"); 
    }); 
    document.querySelector(".seeMore").addEventListener("click",function(event){ 
    event.preventDefault(); 
    myFn.eventActionTrigger("seeMore"); 
    myFn.spinner("on"); 
    });

我怎麼能重構監聽事件功能，有一個通用的函數，該函數的參數，並根據是，聽的權利事件並觸發內部功能。

來源

2017-04-16 Nicc

您可以創建函數，它選擇，事件和回調函數。

function action1() {alert('Form submited')} 
 
function action2() {alert('Button clicked')} 
 

 
function eventFunc(selector, event, callback) { 
 
    document.querySelector(selector).addEventListener(event, function(e) { 
 
    e.preventDefault(); 
 
    callback() 
 
    }) 
 
} 
 

 
eventFunc('form', 'submit', action1) 
 
eventFunc('button', 'click', action2)

<form action=""><input type="submit" value="Submit"></form> 
 
<button>click</button>

如果你想傳遞多個回調函數，你可以在回調使用其他參數和運行每一個使用forEach循環

function action1() {alert('Form')} 
 
function another() {alert('Another function')} 
 
function action2() {alert('Button')} 
 

 
function eventFunc(selector, event, ...callback) { 
 
    document.querySelector(selector).addEventListener(event, function(e) { 
 
    e.preventDefault(); 
 
    callback.forEach(c => c()) 
 
    }) 
 
} 
 

 
eventFunc('form', 'submit', action1, another) 
 
eventFunc('button', 'click', action2)

<form action=""><input type="submit" value="Submit"></form> 
 
<button>click</button>

來源

2017-04-16 07:54:11

因此，通過使用多個回調，'myFn.eventActionTrigger'可以重構爲僅包含泛型代碼，而'seeMore''部分可以變成另一個回調？這可以工作，取決於函數中的內容。在OP顯示該功能之前，不能調低或不降低。 – Terminus

@Terminus在這種情況下，他可以做這樣的事情https://jsfiddle.net/Lg0wyt9u/1799/ –

這樣的事情？

function addEventListener(selector, listenerType) { 

    document.querySelector(selector).addEventListener(listenerType, function(event){ 
    event.preventDefault(); 

    if (selector.charAt(0) === '.') 
     myFn.eventActionTrigger(selector); 
    else 
     myFn.eventActionTrigger(); 

    myFn.spinner("on"); 
    }); 
}

那麼您需要更新您的代碼，以這樣的：

addEventListener("form", "submit"); 
addEventListener("button", "click"); 
addEventListener(".seeMore", "click");

來源

2017-04-16 07:54:03

你可以創建一個更高階的函數makeListener，捕獲參數（像傳遞給myFn.eventActionTrigger方法），使用閉合並返回一個定製事件偵聽器：

function makeListener(arg) { 
 
    return function (event) { 
 
    event.preventDefault() 
 
    myFn.eventActionTrigger(arg) 
 
    myFn.spinner('on') 
 
    } 
 
} 
 

 
document.querySelector('form').addEventListener('submit', makeListener()) 
 
document.querySelector('button').addEventListener('click', makeListener()) 
 
document.querySelector('.seeMore').addEventListener('click', makeListener('seeMore')) 
 

 

 
// Boilerplate: 
 
var myFn = { 
 
    eventActionTrigger: console.log.bind(console, 'eventActionTrigger:'), 
 
    spinner: console.log.bind(console, 'spinner:') 
 
}

<form>Form 
 
    <input type="submit"> 
 
</form> 
 
<button>Button</button> 
 
<div class="seeMore">See More</div>

來源

2017-04-16 07:54:53 gyre

重構，以減少在幾個事件偵聽器重複

回答

相關問題