JavaScript：外部ファイルの記述と重複しないファイル基礎構造

こんにちは、タクゾウです。
普段仕事で使用するJSファイルの基礎構造を紹介したいと思います。

基礎的なJavaScriptファイル構造
コード説明
実際に関数のサンプルを記述した例
まとめ

基礎的なJavaScriptファイル構造

基礎的な構造はこちらになります。
使用する時は、機能ごとの関数をそれぞれのタイミングで呼び出す形になります。

JavaScript

/*
* オブジェクトごとで関数・パラメーターを管理
*/
var eventParam = !!eventParam ? eventParam : {};
var eventFunc = !!eventFunc ? eventFunc : {};

/*
 * 即時で実行するjs
 */
(function() {
  // 即時で実行する関数
  eventFunc.sample01(argument);
})();

/*
* DOMがロードされて操作・解析が可能になったタイミング
*/
(function($) {
  $(function() {
    // DOMがロードされて操作・解析が可能になったタイミングで実行する関数
  });
}(jQuery));

(function($) {
  $(window).on('load', onReady);
  $(window).resize(onResize);
  $(window).scroll(onScroll);
}(jQuery));

/*
* 画像などすべての要素が読み込まれたタイミング
*/
function onReady() {
  // 画像などすべての要素が読み込まれたタイミングで実行する関数
}

/*
* リサイズしたタイミング
*/
function onResize() {
  // リサイズしたタイミングで実行する関数
};

/*
* スクロールしたタイミング
*/
function onScroll() {
  // スクロールしたタイミングで実行する関数
};

コード説明

オブジェクトで関数を管理

関数は外部ファイルの記述と被らないように、オブジェクトのメソッドとして実行するようにしましょう。
オブジェクトを定義する場合は別で使われていないか確認しましょう。

JavaScript

var eventParam = !!eventParam ? eventParam : {};
var eventFunc = !!eventFunc ? eventFunc : {};

即時で実行する処理

即時で実装する、webfont・ローディング処理・UA判定などの処理は、このタイミングで実装してください。

JavaScript

/*
 * 即時で実行するjs
 */
(function() {
  // 即時で実行する関数
  eventFunc.sample01(argument);
})();

DOMがロードされたタイミングの処理

画像などを読み込まずに実装できる関数はこのタイミングで実装してください。

JavaScript

/*
* DOMがロードされて操作・解析が可能になったタイミング
*/
(function($) {
  $(function() {
    // DOMがロードされて操作・解析が可能になったタイミングで実行する関数
  });
}(jQuery));

画像などすべての要素が読み込まれたタイミングの実装

画像の有無で要素が変わる恐れがある関数はこちらに入れましょう。

JavaScript

/*
* 画像などすべての要素が読み込まれたタイミング
*/
function onReady() {
  // 画像などすべての要素が読み込まれたタイミングで実行する関数
}

リサイズしたタイミングで行う処理

ウィンドウをリサイズしたタイミングで実装する処理を書いてください。

JavaScript

/*
* リサイズしたタイミング
*/
function onResize() {
  // リサイズしたタイミングで実行する関数
};

スクロールしたタイミングの処理

スクロールしたタイミングで実装する関数を記述してください。

JavaScript

/*
* スクロールしたタイミング
*/
function onScroll() {
  // スクロールしたタイミングで実行する関数
};

実際に関数のサンプルを記述した例

JavaScript

/*
* オブジェクトごとで関数・パラメーターを管理
*/
var eventParam = !!eventParam ? eventParam : {};
var eventFunc = !!eventFunc ? eventFunc : {};

/*
* sample01(即実行) //関数名 実行タイミング
* @param {number} //第一引数の詳細記述
* @return none //returnの有無
*/
eventFunc.sample01 = function(argument){
  // 関数内の処理記述
}

/*
* sample02(DOM実行) //関数名 実行タイミング
* @param {number} //第一引数の詳細記述
* @return none //returnの有無
*/
eventFunc.sample02 = function(argument){
  // 関数内の処理記述
}

/*
* sample03(load実行) //関数名 実行タイミング
* @param {number} //第一引数の詳細記述
* @return none //returnの有無
*/
eventFunc.sample03 = function(argument){
  // 関数内の処理記述
}

/*
* sample04(resize実行) //関数名 実行タイミング
* @param {number} //第一引数の詳細記述
* @return none //returnの有無
*/
eventFunc.sample04 = function(argument){
  // 関数内の処理記述
}

/*
* sample05(scroll実行) //関数名 実行タイミング
* @param {number} //第一引数の詳細記述
* @return none //returnの有無
*/
eventFunc.sample05 = function(argument){
  // 関数内の処理記述
}

/*
 * 即時で実行するjs
 */
(function() {
  // 即時で実行する関数
  eventFunc.sample01(argument);
})();

/*
* DOMがロードされて操作・解析が可能になったタイミング
*/
(function($) {
  $(function() {
    // DOMがロードされて操作・解析が可能になったタイミングで実行する関数
    eventFunc.sample02(argument);
  });
}(jQuery));

(function($) {
  $(window).on('load', onReady);
  $(window).resize(onResize);
  $(window).scroll(onScroll);
}(jQuery));
/*
* 画像などすべての要素が読み込まれたタイミング
*/
function onReady() {
  // 画像などすべての要素が読み込まれたタイミングで実行する関数
  eventFunc.sample03(argument);
}

/*
* リサイズしたタイミング
*/
function onResize() {
  // リサイズしたタイミングで実行する関数
  eventFunc.sample04(argument);
};

/*
* スクロールしたタイミング
*/
function onScroll() {
  // スクロールしたタイミングで実行する関数
  eventFunc.sample05(argument);
};