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

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

  • functions.js
  • loaded.js

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

functions.js

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

読み込むタイミング

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

<!doctype html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="js/functions.js"><!--ココ-->
</head>
<body>
</body>
</html>

こんな感じです。

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

 

決まり

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

例えば以下の例です。

var loading_bar = document.getElementById('loading_bar')

loading_set=(parcent)=>{
    loading_bar.style.width = parcent + '%'
}

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

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

loaded.js

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

読み込むタイミング

</body>の直前です。

<!doctype html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="js/functions.js">
</head>
<body>
    <h1>Top</h1>
    <div id="content">
        <p>...</p>
    </div>

        <script src="js/loaded.js"><!--ココ-->
</body>
</html>

こんな感じです。

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

まとめ

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

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