僕がweb設計をする時のファイル構成について紹介します。

僕が普段用意するJavaScriptファイルは以下のとおりです。

  • functions.js
  • loaded.js

これらのファイルの説明をしていきます。

functions.js

関数やクラス、オブジェクトを定義・宣言するファイルです。

読み込むタイミング

読み込むタイミングは他のJavaScriptライブラリを読み込んだ後になります。

こんな感じです。

理由は、jqueryを使った関数を定義する際にこのようにjqueryを先にロードしておかないとエラーになるからです。

 

決まり

なおこのfunctions.jsには「HTML上のDOMオブジェクトをグローバル変数に格納してはいけない(関数内は例外)」という決まりがあります。

例えば以下の例です。

問題は1行目にあります。

functions.js<head>タグ内でロードするため<body>タグの要素を取得しようとするとエラーになります。

loaded.js

利用する全てのHTMLがロードされた後に実行するファイルです。

読み込むタイミング

</body>の直前です。

こんな感じです。

こうすればHTMLの要素を問題なく取得できるためです。

まとめ

僕はこの方法でwebサイトを作っています。

あくまで最善の手ではありませんが参考程度にしていただければ。