Question

我目前正在开发一个javascript插件，可以接管一个html文档加载屏幕。该插件目前非常基础，但很快就会添加更多功能。

虽然存在问题，但我无法对该元素进行判断并将其放在body文档的html中。

我已经没有选择了，在我继续设计插件之前，我真的需要我的插件来构建并将自己置于正文中。

这是我的javascript代码：

(function() {

    // Define the loading constructor
    this.loader = function() {

        // Create global element references
        this.loader = null;
        this.overlaycolor = null;

        // Define option defaults
        var defaults = {
            loaderclassName: 'loader',
            textclassName: 'loadertext',
            Content: "WE'RE LOADING SOME STUFF",
            overlayColor: '#ffffff',
            Width: 100,
            Height: 100,
            Text: True
        };

        // Create options by extending defaults with the passed in arugments
        if (arguments[0] && typeof arguments[0] === "object") {
            this.options = extendDefaults(defaults, arguments[0]);
        }

        var myLoader = new loader();

        myLoader.prototype.open();
    };

    // Public Methods
    loader.prototype.open = function() {
        // Build out our loader
        buildOut.call(this);
    };

    // Private Methods

    function buildOut() {

        var content, contentHolder, docFrag;

        /*
         * If content is an HTML string, append the HTML string.
         * If content is a domNode, append its content.
         */

        if (typeof this.options.content === "string") {
            content = this.options.content;
        } else {
            content = this.options.content.innerHTML;
        }

        // Create a DocumentFragment to build with
        docFrag = document.createDocumentFragment();

        // Create loading element
        this.loader = document.createElement("div");
        this.loader.className = "exentory-loader" + this.options.loaderclassName;
        this.loader.style.Width = this.options.Width + "%";
        this.loader.style.Height = this.options.Height + "%";
        this.loader.css("background-color", this.options.overlayColor);

        // If closeButton option is true, add a close button
        /*if (this.options.closeButton === true) {
              this.closeButton = document.createElement("button");
              this.closeButton.className = "scotch-close close-button";
              this.closeButton.innerHTML = "×";
              this.loader.appendChild(this.closeButton);
            }*/

        // If text is true, add textbox with content
        if (this.options.Text === true) {
            this.textbox = document.createElement("p");
            this.textbox.className = "exentory-text " + this.options.textclassName;
            this.textbox.append(this.options.Content);
            docFrag.appendChild(this.loader);
        }

        // Append loader to DocumentFragment
        docFrag.appendChild(this.loader);

        // Append DocumentFragment to body
        document.body.appendChild(docFrag);

    }

    // Utility method to extend defaults with user options
    function extendDefaults(source, properties) {
        var property;
        for (property in properties) {
            if (properties.hasOwnProperty(property)) {
                source[property] = properties[property];
            }
        }
        return source;
    }
}());

我不知道这里出了什么问题。我已经尝试将myLoader.prototype.open()代码放在文件中的所有位置，但它没有构建。

我希望有人能够帮助我。

提前致谢。

Answer 1

试试这个：

this.loader = function() {

}
loader.prototype.open = function() {
    alert("open")
}

当你构建它时：

var myLoader = new loader();
myLoader.open();

Working demo

Javascript加载插件没有构建和添加

1 个答案: