質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

180閲覧

複数の要素に対して使うプラグイン風のクラスの設計

workr

総合スコア158

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/03/19 09:56

複数の要素に何らかの機能をもたせる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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

defghi1977

2018/03/19 11:34

jQueryのクローンを作りたいということでしょうか?
workr

2018/03/20 00:57

セレクタで指定した各要素がそれぞれのプロパティやメソッドを持っているように見せる正しい実装方法が知りたいと思っています。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問