同じ外部jsファイルを複数ページで使用する

サイトの仕様上、同じjsファイル内に複数ページ分の処理を記述しないといけない場合があります。
そういった場合に、ページ毎で処理を分ける方法です。

サンプルコード

jQueryを使用した場合のサンプルです。

HTML(Aページ)

<div id="sample01"></div>

HTML(Bページ)

<div id="sample02"></div>

JavaScript

$(function() {
	// #sample01があるページのみ処理を実行
	if($('#sample01').length) {
		alert('#sample01');
	}

	// #sample02があるページのみ処理を実行
	if($('#sample02').length) {
		alert('#sample02');
	}
});

Aページでは#sample01、Bページでは#sample02とアラートが出ます。
外部jsファイルを複数ページで使用するのデモページ(Aページ)
外部jsファイルを複数ページで使用するのデモページ(Bページ)
　

jQueryを使用しない場合は以下のように記述します。

JavaScript

// #sample01があるページのみ処理を実行
if(document.getElementById('sample01') != null) {
	alert('#sample01');
}

// #sample02があるページのみ処理を実行
if(document.getElementById('sample02') != null) {
	alert('#sample02');
}

外部jsファイルを複数ページで使用するのデモページ2(Aページ)
外部jsファイルを複数ページで使用するのデモページ2(Bページ)