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);
});

通常应该优先于为每个项目创建一个新的回调函数对象。

此外，如果所有可点击元素都共享一个公共父对象，则可以通过event delegation在其上注册事件处理程序，而无需分别注册每个按钮。

Answer 5

我的主张（es6）-“从头开始的代码”：

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

如何简化具有不同ID的多个功能

5 个答案: