script実行制御

この記事の目次

ページごとに制御する

とあるjsをindex.htmlには適用したいけど、それ以外のhtmlでは読み込ませたくないと言った場合です。

<body data-page="index">

//コンテンツ

</body>

任意のdata属性を追加してあげます。

(function() {

  // ページ名を取得
  const pageName = document.body.dataset.page;
  console.log(pageName);

})();

return文は関数の中にないとエラーが出るので、ここでは即時関数で記述部分を囲ってその中に書きます

※即時関数はスコープの汚染も防げるので処理ごとに関数で囲むといいと思います

data属性値を取得してみるとこんな具合でコンソールでdata属性値が確認できます

(function() {
  
  // ページ名を取得
  const pageName = document.body.dataset.page;
  if (pageName != "index") return;
  console.log("return");

})();

これでdata-page属性値がindex以外だとreturnされ、console.log("return");は実行されません

起点となるElementで制御する

<p class="js-hoge-flash01">発火点01</p>
(function() {

  const hogeFlash01 = document.querySelector(".js-hoge-flash01");
  if(!hogeFlash01) return;
  console.log("hoge Flashed01");

})();

先ほどと同じように記述します

コンソールも実行されてます

1つのスクリプトに書く場合

JS分割してexportしてたら単純にそれぞれのファイル内の条件分岐でreturnさせれば終わりですが、script.jsに全ての処理を書いているという場合ではそれ以降の処理が止まってしまいます

<!-- index.htmlでは使わない -->
<!-- <p class="js-hoge-flash01">発火点01</p> -->

<p class="js-hoge-flash01">発火点02</p>
(function() {
  const hogeFlash01 = document.querySelector(".js-hoge-flash01");
  if(!hogeFlash01) return;
  console.log("hoge Flashed01");
  
  const hogeFlash02 = document.querySelector(".js-hoge-flash02");
  if(!hogeFlash02) return;
  console.log("hoge Flashed 02");
})();

例えばhogeFlash01をindex.htmlでは使わないけど他のhtmlで使用する場合にこのような記述を行うと
if(!hogeFlash01) return;の時点で処理が止まるため、console.log("hoge Flashed 02");が実行されなくなってしまいます

(function() {
  const hogeFlash01 = document.querySelector(".js-hoge-flash01");
  if(!hogeFlash01) return;
  console.log("hoge Flashed01");
})();
  
(function() {
  const hogeFlash02 = document.querySelector(".js-hoge-flash02");
  if(!hogeFlash02) return;
  console.log("hoge Flashed 02");
})();

その場合は処理ごとに関数で囲ってあげれば、関数毎に処理がされるようになります

この記事が気に入ったら
フォローしてね!

シェアしてね!!
  • URLをコピーしました!

著者

Webコーダー。
ドライブとコーヒーとガジェットが好き。
「Code Widgit」は「Code With it」と「gadget」を合わせた造語。

この記事の目次
閉じる