この記事は、JavaScriptでのOOPと簡単なJSコンポーネントの 作成方法に関するチュートリアルの最初の部分です 。
オブジェクトとJavaScriptについて
オブジェクトを物の集まりと考えてください。 たとえば、自転車があるとします。 この自転車はオブジェクトであり、オブジェクトのプロパティと呼ばれるサイン/パーツ/などの組み合わせを持っています 。 このようなプロパティの例は、自転車のモデル、その製造年、およびその詳細です。 パーツは、独自のプロパティセットを持つこともできます。
JavaScriptは
JavaScriptは、単純なオブジェクト指向の パラダイムに基づいています。 オブジェクトはプロパティのコレクションであり、プロパティは名前と値の間の関連付けです。 プロパティの値は関数である場合があり、その場合、関数はメソッドと呼ばれます。 ブラウザで既に定義されている標準オブジェクトに加えて、独自のオブジェクトを作成できます。
独自のオブジェクトを作成することは非常に便利な機能です。 JavaScriptでは、 ドット表記を使用してオブジェクトのプロパティにアクセスできます。 しかし、プロパティへのアクセスを扱う前に、オブジェクトを作成および初期化する方法を理解しましょう。
オブジェクト作成
JavaScriptのすべてがオブジェクトであるため、オブジェクトを知らずに作成または使用したことは確かです。 MDNの短いメモ：
null
およびundefined
を除くすべてのプリミティブ型undefined
、オブジェクトとして扱われます。 これらにはいくつかの プロパティを割り当てることができ、オブジェクトのすべての特性を備えています。
JavaScriptには膨大な数の標準オブジェクトがありますが、この記事ではそれらについては説明しません。 これからおよび記事全体を通して、「SimpleAlert」と呼ばれる非常に単純な
var simpleAlert = new Object(); // : , . var simpleAlert = {};
以上です！ シンプルでしょ？ ただし、オブジェクトに
// var simpleAlert = new Object(); // simpleAlert.sa_default = "Hello World!"; simpleAlert.sa_error = "Error..."; simpleAlert.sa_success = "Success!"; // console.log(simpleAlert);
コンソールには、オブジェクトに3つのプロパティがあることが示されます。 上記のプロパティを設定したので、スクリプトのどこからでもアクセスできます。 たとえば、ユーザーのコンソールにエラー通知を送信する場合、次のことができます。
// alert(simpleAlert.sa_error);
これは、オブジェクトを作成してそのプロパティにアクセスするための1つの方法にすぎません。
初期化子を使用してオブジェクトを作成する
オブジェクトを作成する別の方法は、いわゆるオブジェクト初期化子 、 オブジェクト初期化子の助けを借りることです。 MDNの定義：
...オブジェクト初期化子を使用してオブジェクトを作成できます。 初期化子の使用は、 リテラル表記を使用したオブジェクトの作成と呼ばれることもあります。 名前オブジェクト初期化子も、C ++で 使用される用語に従います 。
この方法で「SimpleAlert」を作成するのは非常に簡単です。
// var simpleAlert = { sa_default : "Hello World!", sa_error : "Error...", sa_success : "Success!" } // console.log(simpleAlert);
オブジェクトのプロパティは関数にすることもできます。 例：
// var simpleAlert = { sa_default : "Hello World!", sa_error : "Error...", sa_success : "Success!", sa_fallback : function(){ console.log("Fallback"); } } // fallback'a simpleAlert.sa_fallback();
上記のコードは、文字列「Fallback」をコンソールに出力します。 前述のように、オブジェクトのプロパティが関数の場合、それはmethodとも呼ばれます。
コンストラクターを使用する
JavaScriptでオブジェクトを作成する別の方法は、
コンストラクターを記述してオブジェクトを定義します。 関数を大文字にすることは良い習慣と見なされます。 `new`キーワードを使用してオブジェクトのインスタンスを作成します。
この方法の詳細については、 こちらをご覧ください 。 コンストラクターを使用してオブジェクトを作成します。
// function SimpleAlert( sa_default, sa_error, sa_success ) { this.sa_default = sa_default; this.sa_error = sa_error; this.sa_success = sa_success; } // var my_alert = new SimpleAlert( "Hello World!", "Error...", "Success!" );
コンソールにオブジェクトを表示すると、前の場合と同じ結果が得られます。
console.log(my_alert); // console.log(my_alert.sa_error); // "Error..."
このメソッドの優れた点は、異なるプロパティセットを持つオブジェクトの複数のインスタンスを作成するために使用できることです。 プロパティは、オブジェクトおよび関数にすることもできます。
オブジェクトに関する詳細
実際、オブジェクトについては、上記で述べたよりも多くのことが言えます。 ただし、私が述べた方法は非常に有用であり、将来的にはそれらを使用してコンポーネントを作成します。 オブジェクトを完全に理解するために、MDNで資料を読むことを強くお勧めします。 また、オブジェクトのドキュメントを参照して、 オブジェクトと連携するメソッドとプロパティが存在するかどうかを把握することも重要です。
コンポーネントの一部を作成する
「SimpleAlert」というコンポーネントを作成します。このコンポーネントは、ユーザーがボタンをクリックすると、ユーザーの画面にメッセージを表示します。 表示されるボタンは、押されたボタンによって異なります。 ボタンのレイアウト：
<div id="component"> <button id="default">Show Default Message</button> <button id="success">Show Success Message</button> <button id="error">Show Error Message</button> </div>
コンポーネント自体については、コードを匿名関数でラップし、グローバルスコープで使用できるようにします。 開始するには、次のようになります。
;(function( window ) { 'use strict'; })( window );
コードに関するいくつかの注意：
-
strict mode
を使用していstrict mode
。 あなたはここでそれについて読むことができます 。 - 匿名関数に
window
を渡すので、後でSimpleAlertをグローバルスコープに追加できます。
コンポーネントのコードを書きましょう。 まず、
SimpleAlert
関数を作成する必要があります。 グローバルな範囲でも必要です。
;(function( window ) { 'use strict'; /** * SimpleAlert function */ function SimpleAlert( message ) { this.message = message; } // ... /** * SimpleAlert */ window.SimpleAlert = SimpleAlert; })( window );
SimpleAlertオブジェクトのインスタンスを作成する場合、これまでのところ何も起こりません。
(function() { /** * */ var default_btn = document.getElementById( "default" ); default_btn.addEventListener( "click", function() { var default_alert = new SimpleAlert("Hello World!"); } ); })();
続行する前に、
Object.prototype
慣れる必要が
Object.prototype
ます。 MDN：
JavaScriptのすべてのオブジェクトはObject
子孫です。 すべてのオブジェクトはObject.prototype
からプロパティとメソッドを継承しますが、それらはオーバーライドできます。 例外は、Object.create(null)
など、null
プロトタイプを持つオブジェクトです）。
詳細 このアプローチを使用して、コンポーネントを作成します。
init
関数を追加して、オブジェクトが作成された直後に呼び出してみましょう。 この関数は、コンソールにメッセージを送信します。
;(function( window ) { 'use strict'; /** * SimpleAlert function */ function SimpleAlert( message ) { this.message = message; this._init(); } /** * Initialise the message */ SimpleAlert.prototype._init = function() { console.log(this.message); } /** * Add SimpleAlert to global namespace */ window.SimpleAlert = SimpleAlert; })( window );
これで、インスタンス化されたオブジェクトは「Hello、world！」というメッセージをコンソールに表示します。 これは進歩です！ 次に、メッセージをコンソールではなくユーザーの画面に表示させましょう。
;(function( window ) { 'use strict'; /** * SimpleAlert function */ function SimpleAlert( message ) { this.message = message; this._init(); } /** * Initialise the message */ SimpleAlert.prototype._init = function() { this.component = document.getElementById("component"); this.box = document.createElement("div"); this.box.className = "simple-alert"; this.box.innerHTML = this.message; this.component.appendChild( this.box ); } /** * Add SimpleAlert to global namespace */ window.SimpleAlert = SimpleAlert; })( window );
コードのポイントを見てみましょう。
- コンストラクター内で
message
変数を作成し、this.message = message
を使用して匿名関数内で使用可能にしthis.message = message
。 - 次に、
this._init()
介して_init
関数を呼び出します。 オブジェクトの新しいインスタンスを作成するたびに、これらの2つの手順は自動的に実行されます。 -
_init()
内で、this
を使用して必要な変数を宣言します。 次に、#component
要素にアクセスし、その中にメッセージを含むdiv
を配置します。
とてもきれいですよね？
全コード
以下は、見た目を良くするためのCSSを含む、記述されたすべてのコードです。 マークアップを開始するには：
<div id="component"> <button id="default">Show Default Message</button> <button id="success">Show Success Message</button> <button id="error">Show Error Message</button> </div>
上記と同じ。 今、いくつかのCSS ：
.simple-alert { padding: 20px; border: solid 1px #ebebeb; }
好きなように編集してください！ そして最後に、
// COMPONENT // // The building blocks for our SimpleAlert component. //////////////////////////////////////////////////////////// ;(function( window ) { 'use strict'; /** * SimpleAlert function */ function SimpleAlert( message ) { this.message = message; this._init(); } /** * */ SimpleAlert.prototype._init = function() { this.component = document.getElementById("component"); this.box = document.createElement("div"); this.box.className = "simple-alert"; this.box.innerHTML = this.message; this.component.appendChild( this.box ); this._initUIActions; } SimpleAlert.prototype._initUIActions = function() { } /** * SimpleAlert */ window.SimpleAlert = SimpleAlert; })( window ); // EVENTS // // // . //////////////////////////////////////////////////////////// ;(function() { /** * Show default */ var default_btn = document.getElementById( "default" ); default_btn.addEventListener( "click", function() { var default_alert = new SimpleAlert("Hello World!"); } ); /** * Show success */ var default_btn = document.getElementById( "success" ); default_btn.addEventListener( "click", function() { var default_alert = new SimpleAlert("Success!!"); } ); /** * Show error */ var default_btn = document.getElementById( "error" ); default_btn.addEventListener( "click", function() { var default_alert = new SimpleAlert("Error..."); } ); })();
まとめると
この記事では、オブジェクトを使用して単純な
hide()
メソッドが起動します）。
次のパートでは、SimpleAlertを少し改善し、デフォルトパラメータの設定方法とカスタムパラメータセットの受け渡し方法についても学習します。 それは、プログラミングのすべての美しさが実際に目に見えるときです！
この記事をお楽しみください。 2番目の部分を待ちます。 読んでくれてありがとう！