前回JavaScriptのprototypeを使ってオブジェクト指向のプログラムを組む方法についてご紹介しましたが、
今回は、実際にprototypeを使ってオブジェクトを作ってみました。
↓作ってみたもの
作ってみたものの概要
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | //コンストラクトを定義 setBgImage = function (selector) { this.element = document.querySelector(selector); this.selector = selector; this.init(); //デフォルトで実行する関数の指定 }; //メソッドを定義 setBgImage.prototype = { getSrc: function() { return this.element.getAttribute('data-bgimg'); }, init: function() { //デフォルトで実行する関数の定義 this.element.style.backgroundImage = "url(" + this.getSrc() + ")"; } }; //インスタンスの作成 var setBgImage1 = new setBgImage(".imageArea.first"); var setBgImage2 = new setBgImage(".imageArea.second"); var setBgImage3 = new setBgImage(".imageArea.last"); //各インスタンスでのメソッドの利用 setBgImage1.element.innerHTML = setBgImage1.getSrc(); setBgImage2.element.innerHTML = setBgImage2.selector; |
今回作ってみたものは、CSSのセレクターの形式で指定された要素で、
data-bgimgで指定された画像をスタイルの背景画像に適用するというものです。
無条件でインスタンス作成時に実行する関数はコンストラクタ内にinit()として実行しており、
その中で、スタイルを設定しています。
必要に応じてgetSrc()などを実行できるようにしています。
