與jQuery的DOM元素的構造函數

是否有可能創建一個使用jquery的構造函數的DOM元素？與jQuery的DOM元素的構造函數

我試圖在所謂的h5p逆向工程插件，如果你向下滾動到「JavaScript的」部分中，您將看到以下步驟：

命名空間爲對象的聲明（我認爲，以不污染全局命名空間
創建實際的DOM元素打造的DOM元素
次要的輔助功能的consrtuctor功能

我知道這個特定的代碼是依賴於一個框架，但它有可能被複制到一個單獨的js文件中嗎？

var H5P = H5P || {}; 

H5P.GreetingCard = (function ($) { 
    /** 
    * Constructor function. 
    */ 
    function C(options, id) { 
    // Extend defaults with provided options 
    this.options = $.extend(true, {}, { 
     greeting: 'Hello world!', 
     image: null 
    }, options); 
    // Keep provided id. 
    this.id = id; 
    }; 

    /** 
    * Attach function called by H5P framework to insert H5P content into 
    * page 
    * 
    * @param {jQuery} $container 
    */ 
    C.prototype.attach = function ($container) { 
    // Set class on container to identify it as a greeting card 
    // container. Allows for styling later. 
    $container.addClass("h5p-greetingcard"); 
    // Add image if provided. 
    if (this.options.image && this.options.image.path) { 
     $container.append('<img class="greeting-image" src="' + H5P.getPath(this.options.image.path, this.id) + '">'); 
    } 
    // Add greeting text. 
    $container.append('<div class="greeting-text">' + this.options.greeting + '</div>'); 
    }; 

    return C; 
})(H5P.jQuery);

這是我想象（警告：粗糙的僞領先）：

// quick and dirty h5p prototyping 
<!DOCTYPE html> 
<html> 
<head> 
    <script>import jquery here<script> 
    $(document).ready(function(){ 

    // constructor for dom element 

    // secondary helpers for dom element 

    // initialize the element and append it to dom 


    }); 
    </script> 

</head> 
<body> 
    <h2> h5p prototyping</h2> 
</body>

來源

2016-06-10 timothyylim

如果我理解正確的話比你可以用這種方式使用jQuery創建DOM元素：

$(document).ready(function() { 
 
    var newDOM = $('<div/>', { 
 
    class: 'new-dom', 
 
    html: $('<span/>', { 
 
     text: 'NEW DOM!!' 
 
    }), 
 
    onClick: 'alert("Works EVEN JS");' 
 
    }); 
 

 
    $('body').append(newDOM); 
 
});

.new-dom { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

只需將DOM元素的必需屬性添加到構造函數對象$('<nodeName/>', {settingsObject})的第二個參數即可。

來源

2016-06-10 09:23:48 Justinas

與jQuery的DOM元素的構造函數

回答

相關問題