Question

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

而不是显示我的代码，因为它非常大，我希望看到的是一个插件的示例代码，可以创建一个弹出式div当鼠标悬停在对象上时 AND 它以这样的方式制作，以便它可以在页面上多次使用（因此它不使用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);

实现：*必须在可以拥有childNodes的元素上使用，例如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");

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

2 个答案: