JavaScript オブジェクト志向

イベントハンドラとhtmlの分離


<body onload="init()">

<a id="evt_id" onclick="alert()">
button
</a>

↓以下のように純粋なjavascriptとhtmlに分離できる


****.js

function $(e){
	return document.getElementById(e);
}

function Effect(){
	$('evt_id').onclick = AlertShow();
}
function AlertShow(){
	console.log("Alert!");
}


function Init(){
	console.log("Hello, World!");
}

window.onload = Init();


****.html

<script type="text/javascript" src="****.js" ></script>
<a id="evt_id">
button
</a>

さらに改良


var btn = document.getElementById('btn');
var body = document.getElementsByTagName('body')[0];
if(document.addEventListener){
  b.addEventListener('click', action, false);
  body.addEventListener('load', init, false);
}
function init(e){
}
function action(e){
  var src;
  e = e || window.event;
  src = e.target || e.srcElement;
  src.innerHTML = 'clicked!';

}

動的に外部JavaScriptを呼び出す

DOMを操作してスマートに記述する

関数化して使い回すことができる


function callJS(url){
  var e = document.createElement('script');
  e.setAttribute("src", url);
  document.getElementsByTagName("body").item(0).appendChild(e);
}

オブジェクト指向

DOM操作は負荷が高く時間がかかるので、コンストラクタ時点で宣言し、キャッシュを取得する。

DOM操作のイベント発火条件もこの時点で宣言しておく。

prototypeにメソッドを追加する。


//コンストラクタ
function Obj(name, id, age){
  this.name = name;
  this.id = id;
  this.age = 20;
  this.ele = document.getElementById(this.id);
}
//プロトタイプ
Obj.prototype = {
  toString : function(){
    this.ele.innerHTML = this.name + 'の年齢は' + this.age;
  },
  greed : function(){
    this.ele.innerHTML = 'こんにちは！' + this.name + 'です';
  }
}

function init(){
  var obj1 = new Obj('reimu', 'player1', 15);
  var obj2 = new Obj('marisa', 'player2', 16);
  obj1.toString();
  obj2.toString();
}
window.onload = function(){
  init();
};

即時関数

関数を定義したすぐに関数を実行する。



(function(name, age){
  console.log(name + ' is ' + age + ' years old.');
})('john', 22);

クロージャ

関数内で関数を定義し、自身が定義された環境（静的スコープ）において解決する。

以下の例では状態を保持する関数を持たせて、呼び出すたびに変更を加えている。



function counter(){
  var i = 0;
  return function (){
    i++;
    console.log(i);
  }
}
var f = counter();
f();// 2
f();// 3
f();// 4