javascript - 如何为注入 div 的 javascript 编写插件（如弹出菜单）

Question

我制作了一个建议框，我想对其进行推断并将其转换为可重用的代码（插件），这样我就可以在页面和任何地方多次使用它。问题是，我不知道如何去做。

我不想显示我的代码，因为它很大，我想看到的是一个插件的示例代码，当鼠标悬停在对象上时，它可以在对象上创建一个弹出 div 并且它是以这种方式制作的这样它就可以在一个页面上多次使用（所以它不使用 id）。

我将非常感谢这一点，因为它会启发我如何开始将我的代码变成可重用的插件。

Answer 1

这是一种可以帮助您入门的可能性：

(function(w, d) {
    function createPopup(el, options) {
        // Create popup from DOM elements, a string, or read from a template
        var popup = d.createElement('div');
        popup.className = options.className;
        popup.innerText = 'Foobar!';
        // Possibly insert popup into DOM, depending on how you've implemented it
        el.parentNode.insertAfter(popup, el);
    }

    var defaultOptions = {
        className: 'popup'
    };

    var MyPlugin = function(el, options) {
        this.element = el;
        this.options = options || defaultOptions;
        this.popup = createPopup(el, this.options);

        var self = this;

        // Ignoring IE for now
        el.addEventListener('click', function() {
            self.popup.style.display = 'block';
            // Possibly want to set position of popup, depending on how you've implemented it
        });

        self.popup.addEventListener('mouseout', function() {
            self.popup.style.display = 'none';
        });
    };

    MyPlugin.prototype = {
        // Other methods you want an instance of MyPlugin to have, for example:
        setText: function(text) {
            this.popup.innerText = text;
        }
    };

    // Static methods
    MyPlugin.setDefaults = function(options) {
        defaultOptions = options;
    };

    w.MyPlugin = MyPlugin;
})(window, document);

用法：

<script>
var popup1 = new window.MyPlugin(document.getElementById('#foo'));
var popup2 = new window.MyPlugin(document.getElementById('#bar'));
popup2.setText = "I'm another popup!";

MyPlugin.setDefaults({
    className: 'foobar'
});
</script>

Answer 2

我采用了 Roryf 的代码并解决了一些错误。（@Roryf 如果您的代码在您开始时运行良好，那么我一定做错了什么：S）

我更改了一些代码，以便它对我有用。非常感谢 Roryf 写得很好的回答。我希望这对其他像我一样寻找起点的人有所帮助。

我放了一个小提琴，所以不需要在你的电脑上复制和粘贴。

http://jsfiddle.net/crislivinitup/rdqcf/1/

(function(w, d) {
function createPopup(el, options) {
    // Create popup from DOM elements, a string, or read from a template
    var popup = d.createElement('div');

    //*** I haven't been able to get className to work, so I commented it out
    // popup.className = options.className;

    //***popup.innerText = 'Foobar!';
    popup.insertAdjacentHTML("afterBegin",'Foobar!');
    // Possibly insert popup into DOM, depending on how you've implemented it
    //***el.parentNode.insertAfter(popup, el);
    el.appendChild(popup);

    //**** added to hide div by default
    popup.style.display = 'none';

    //*** added to connect this.popup (from MyPlugin function) to the reference of the created div
    return popup;
}

var defaultOptions = {
    //*** I haven't got className to work, so I just took out the related functions
    className: 'popup'
};

var MyPlugin = function(el, options) {
    this.element = el;
    this.options = options || defaultOptions;
    this.popup = createPopup(el, this.options);

    var self = this;



    // Ignoring IE for now
    el.addEventListener('mouseover', function() {
        //alert("clicked");
        self.popup.style.display = 'block';
        // Possibly want to set position of popup, depending on how you've implemented it
    });

    el.addEventListener('mouseout', function() {
        self.popup.style.display = 'none';
    });


};

MyPlugin.prototype = {
    // Other methods you want an instance of MyPlugin to have, for example:
    setText: function(text) {

        //***I didn't get the innerText to work, so I changed it with synonymous code
        //***this.popup.innerText = text;
        this.popup.insertAdjacentHTML("beforeEnd",text);
    }
};

// Static methods
MyPlugin.setDefaults = function(options) {
    defaultOptions = options;
};

w.MyPlugin = MyPlugin;
})(window, document);    

实现：*必须在可以有childrenNode的元素上使用，例如div

var popup1 = new window.MyPlugin(document.getElementById("foo"));
var popup2 = new window.MyPlugin(document.getElementById("bar"));
popup1.setText("I'm another popup!");
popup1.setText("keep going");