Question

所以我使用下面给出的两种不同的编码样式编写了相同的功能：

HTML

<div id="menu">
    <button data-action="save">Save</button>
    <button data-action="search">Search</button>
</div>

技术1 JS：

;(function(window, document, undefined) {

    'use strict';

    var menu = document.getElementById('menu');

    var actions = {
        save: function() {
            alert("save");
        },
        search: function() {
            alert("search");
        }
    }

    menu.addEventListener('click', function(event) {
        var action = event.target.dataset.action;
        if(action) {
            actions[action]();
        }
    })

})(window, document);

技术2 JS：

;(function(window, document, undefined) {

    'use strict';

    function Menu(elem) {
        this._elem = elem;
        elem.onclick = this.onClick.bind(this);
    }

    Menu.prototype = {
        onClick: function(event) {
            var action = event.target.dataset.action;
            if (action) {
                this[action]();
            }
        },
        save: function() {
            alert('save');
        },
        search: function(){
            alert('search');
        }  
    };

    new Menu(menu); //How is menu directly accessible without actually getting it by Id from the template?

})(window, document);

我在这里有两个问题：

使用技术2 比技术1 有什么好处？

PS：我知道所有关于原型继承以及它是如何有用的，其中同一类的100个不同实例使用仅被分配一次内存的函数（假设函数在构造函数的原型中）。我只是想知道在这种情况下它是如何重复使用的？
在技术2 中，如何使用ID＆＃34; 菜单＆＃34;通过在调用构造函数时编写Id名称直接访问？我没有使用getElementById的事件吗？

修改

（this回答解释了我提出的第二个问题）

Javascript DOM事件冒泡和编码技术

0 个答案: