再利用可能なJavaScript Pluginコードをクラスに適用するのは簡単ですか？

Question

JavaScriptを使用して、プロジェクトで何度も使用できる再利用可能なコンポーネントを作成するにはどうすればいいのだろうかと思っていました。たとえば、1つのHTMLページで複数回使用できるウィジェットを作成する場合は、何をすべきか？以下は同じことを行う例です。ここで

Answer 1

は私がやったことです：

HTML：ここ

<div id="ele1" class="myclass"> 
</div> 

、私は私のカスタムプラグインを作成するために、すべての要件を追加したい、HTMLコンテナ要素をとっています。

JS：

(function() { 
    var ww = function(el) { // core constructor 
    // ensure to use the `new` operator 
    if (!(this instanceof ww)) 
     return new ww(el); 
    // store an argument for this example 
    this.el = el; 
    }; 

    // create `fn` alias to `prototype` property 
    ww.fn = ww.prototype = { 
    init: function() {} 
    }; 

    // expose the library 
    window.ww = ww; 
})(); 

コード上の特定の要素に FN という名前のプロトタイプを作成して割り当てるには必要とされています。同様に、今は、上記の例で ww.fn を使用してその要素の任意の方法を割り当てることができ

document.addEventListener('DOMContentLoaded', function() { 
    for(var i=0; i<document.getElementsByClassName("weather").length; i++){ 
    ww(document.getElementsByClassName("weather")[i]).WeatherWidget(); 
    } 
}, false); 

：

そしてMyClassの以下のような特定のクラスのためのプラグインを呼び出すために、すべての要素を反復しますこれ：ここ

ww.fn.MyWidget = function() { 
    var me = this.el; 
    return new ww.fn.widgetConstruct(me); 
}; 

、widgetConstruct（）は、成分のすべてのビジネスロジックを含む方法であります。あなたは完全な例を見てみたい

ww.fn.widgetConstruct = function(me){ 

    function initialize(){ 
     .... 
     The component logic will go here 
     .... 
    } 
    initialize(); 
} 

私はこれがためにplnkr Demoある天気ウィジェット

Answer 2

近代的な方法はReact.js、角度やVue.js.のようなフレームワークを使用することです

React.jsはこれを正確に行うために作られています。