如何简化具有不同ID的多个函数

Question

我想简化以下代码：

var filesystem = new fp.FloorplanFilesystem(myFloorplan, fp.FILESYSTEM_UI_STATE);
        document.getElementById("newFloorplan").addEventListener("click", function (event) {
            filesystem.newFloorplan();
            event.preventDefault();
        });
        document.getElementById("showOpenWindow").addEventListener("click", function (event) {
            filesystem.showOpenWindow();
            event.preventDefault();
        });
        document.getElementById("saveFloorplan").addEventListener("click", function (event) {
            filesystem.saveFloorplan();
            event.preventDefault();
        });
        document.getElementById("saveFloorplanAs").addEventListener("click", function (event) {
            filesystem.saveFloorplanAs();
            event.preventDefault();
        });
        document.getElementById("showRemoveWindow").addEventListener("click", function (event) {
            filesystem.showRemoveWindow();
            event.preventDefault();
        });

它开始占用大量空间，看起来很乱。

Answer 1

只需使用ID和函数名称的动态值调用包装函数：

var filesystem = new fp.FloorplanFilesystem(myFloorplan, fp.FILESYSTEM_UI_STATE);

function bindEvent(id, callbackFunction) {
    document.getElementById(id).addEventListener('click', function (event)) {
        event.preventDefault();

        filesystem[callbackFunction]();
    }
}

bindEvent('newFloorplan', 'newFloorplan');
bindEvent('showOpenWindow', 'showOpenWindow');
...

Answer 2

您可以使用括号表示法通过包含字符串的变量来访问对象的属性。

 var filesystem = new fp.FloorplanFilesystem(myFloorplan, fp.FILESYSTEM_UI_STATE); ["newFloorplan", "showOpenWindow", "saveFloorplan", "saveFloorplanAs", "showRemoveWindow"].forEach(function(id){ var el = document.getElementById(id); el.addEventListener('click', function(event){ filesystem[id](); event.preventDefault(); }); }); 

Answer 3

const filesystem = new fp.FloorplanFilesystem (myFloorplan, fp.FILESYSTEM_UI_STATE)

const ids = ['newFloorplan', 'showOpenWindow', 'saveFloorplan', 'saveFloorplanAs', 'showRemoveWindow']
const handler = id => event => (filesystem [id] (), event.preventDefault ())

ids.forEach (id => document.getElementById (id).addEventListener ('click', handler (id)))

Answer 4

由于您的元素使用您要调用的函数的名称作为其ID，因此您可以在事件处理程序中提取它：

var filesystem = new fp.FloorplanFilesystem(myFloorplan, fp.FILESYSTEM_UI_STATE);

function fs_handler(event) {
    filesystem[event.target.id]();
    event.preventDefault();
}

["newFloorplan", "showOpenWindow", "saveFloorplan", "saveFloorplanAs", "showRemoveWindow"].forEach(function(id) {
    document.getElementById(id).addEventHandler('click', fs_handler);
});

这通常比为每个项目创建新的回调函数对象更受欢迎。

此外，如果可点击元素都共享一个共同的父元素，您只需通过事件委派就可以注册事件处理程序，从而无需单独注册每个按钮。

Answer 5

我的命题（es6） - “头部代码”：

[
  "newFloorplan", 
  "showOpenWindow", 
  "saveFloorplan", 
  "saveFloorplanAs", 
  "showRemoveWindow",
].map(id=>document.getElementById(id).addEventListener('click', event=>{
  filesystem[id](); 
  event.preventDefault()
}));