Javascript加载插件未构造和添加

Javascript加载插件未构造和添加,javascript,jquery,html,Javascript,Jquery,Html,我目前正在开发一个javascript插件,它将能够接管html文档加载屏幕。该插件目前非常基本,但更多功能将很快添加 但是有一个问题,我无法继续构造元素并将其放置在html文档的body中 我已经没有选择了,我真的需要我的插件来构建和放置在身体中,然后我才能继续设计插件的样式 以下是我的javascript代码: (function() { // Define the loading constructor this.loader = function() {

我目前正在开发一个javascript插件,它将能够接管html文档加载屏幕。该插件目前非常基本,但更多功能将很快添加

但是有一个问题,我无法继续构造元素并将其放置在
html
文档的
body

我已经没有选择了,我真的需要我的插件来构建和放置在身体中,然后我才能继续设计插件的样式

以下是我的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()代码放在文件中的任意位置,但它没有构造

我希望有人能帮助我

提前感谢。

试试这个:

this.loader = function() {

}
loader.prototype.open = function() {
    alert("open")
}
当你建造它时:

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