複数の要素に何らかの機能をもたせるjQueryプラグインに似たクラスを javascript だけで作ろうと考えています。(用途はウェブページ用で ES5 を想定しています。)
一般的な jQuery プラグインは $(".className").pluginName()
とすることで、セレクタで指定されたすべての要素が1つ1つ独立して機能するようになります。
具体的にはカルーセル系のプラグインであれば「次へ」のボタンを押せばそのカルーセルには次のスライドが表示されますが、独立しているので他のカルーセルには影響がありません。
また、$(".className").eq(0).pluginName("plugInMethod", "args")
とすることで特定の要素に対しプラグインのメソッドを実行できるような形を取ることが多いと思います。
そのような機能をもつクラスを jQuery を使わずに純粋な Javascript で作りたいのですが、オープンソースとして他の人にも使って貰う予定なのであまり他の人のものと違う構造にしてしまうのは避けたいと考えています。
こういった要素ごとに機能をもたせるタイプのクラスを設計する時、定石となる作り方やメソッド名、ボイラープレート、参考にすべき(あるいは強い影響力を持つ)オープンソースソフトウェアなどはあるのでしょうか?
参考までに簡単な例を提示します。これはクリックするとボタンの数字が増えるカウンターです。とくに何かを参考にしているわけではないため通常使わないようなメソッド名や手法があるかと思います。そういった部分を無くすのが目的です。
カウンターが作りたいわけではなく、jQuery プラグインの作り方がある程度統一されており、ドキュメントを読まなくても使い方が推測できるように、jQuery を使わないスクリプトにもそういったお決まりの設計ルールや常識があるのならそれを知りたいと思っています。
よろしくお願いいたします。
html
1 <div><button class="counter"></button></div> 2 <div><button class="counter"></button></div> 3 <div><button class="counter"></button></div> 4 5 <script src="counter.js"></script> 6 <script> 7 var counter = new Counter('.counter'); 8 var counter2 = counter.getCounter(1); 9 var counter3 = counter.getCounter(2); 10 counter2.step = 10; 11 counter3.setCount(100); 12 </script>
javascript
1var Counter = function(selector){ 2 this.elements = document.querySelectorAll(selector); 3 this.counters = []; 4 5 for(var i = 0; i < this.elements.length; i++) { 6 this.counters.push(new CounterChild(this.elements[i])); 7 } 8}; 9 10Counter.prototype.getCounter = function(index){ 11 return this.counters[index]; 12}; 13 14var CounterChild = function(element){ 15 var self = this; 16 this.element = element; 17 this.count = 0; 18 this.step = 1; 19 20 this.setCount(0); 21 22 element.addEventListener('click', function(event){ 23 event.preventDefault(); 24 self.countUp(); 25 }); 26}; 27 28CounterChild.prototype.countUp = function(){ 29 this.setCount(this.count += this.step); 30}; 31 32CounterChild.prototype.setCount = function(count) { 33 this.count = count; 34 this.element.innerHTML = this.count; 35}
あなたの回答
tips
プレビュー