ウェブページの各Javascript機能は、別々の.jsファイルで定義されるはずですか？

-1

私は個人的なプロジェクトとしてウェブサイトを作成して、DOMとJavaScriptの周りに自分のやり方を学びます。数時間の煩わしさの後、私は、JavaScript関数（JS内のbtnEnter.addEventListenerシーケンス）を持つHTML（以下のHTMLの「Animated Landing Page」）の一部をコメントアウトすると、その関数（JSのtest.addEventListenerシーケンスのような）私の.jsファイルの中で動作しなくなりました。私は自分のjavascript関数をそれぞれの個別のファイルに分離するはずですか？現時点では、私はjQueryに移行する前にjavascriptの詳細を把握したいので、javascriptソリューションに固執したいと思います。私は以下の私のHTMLとJSを含めました：ウェブページの各Javascript機能は、別々の.jsファイルで定義されるはずですか？

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"/> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
<title>My Webpage</title> 
<!-- Add Javascript for enabled browsers --> 
<script>document.documentElement.className += " js";</script> 
<!-- Latest Bootstrap CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<!-- Bootstrap optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
<!-- Latest Bootstrap Javascript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
<!-- Personal stylesheet --> 
<link rel="stylesheet" type="text/css" href="MyStyle.css"> 
</head> 
<body> 

<!-- Animated landing page --> 
<div id="cover-image"> 
    <button id="entry-btn">Enter</button> 
</div> 

<!-- Main site --> 
<!-- Banner --> 
<h1 class="center-content" id="banner">Banner</h1> 

<!-- Navigation bar --> 
<nav class="nav-bar"> 
    <div class="container-fluid"> 
     <ul class="nav-list"> 
      <li class="divider-vertical"></li> 
      <li><a class="navbar-link" id="link1" href="#home">Home</a></li> 
      <li class="divider-vertical"></li> 
      <li><a class="navbar-link" id="link2" href="#page1">Page 1</a></li> 
      <li class="divider-vertical"></li> 
      <li><a class="navbar-link" id="link3" href="#page2">Page 2</a></li> 
      <li class="divider-vertical"></li> 
      <li><a class="navbar-link" id="link4" href="#page3">Page 3</a></li> 
      <li class="divider-vertical"></li> 
     </ul> 
    </div> 
</nav> 

<!-- Content --> 
<div id="home">HOME</div> 
<br/> 
<div id="page1">PAGE1</div> 
<br/> 
<div id="page2">PAGE2</div> 
<br/> 
<div id="page3">PAGE3</div> 

<!-- Personal JavaScript file --> 
<script src="MyScript.js"></script> 
</body> 
</html>

をJS

var btnEnter = document.getElementById("entry-btn"); 
var test = document.getElementById("link1"); 

btnEnter.addEventListener("click", coverFadeOut); 

test.addEventListener("click", testFunc); 

function coverFadeOut() { 
    var coverimg = document.getElementById("cover-image"); 
    coverimg.classList.toggle("fadeout"); 
    coverimg.addEventListener("transitionend", setTimeout(coverHide, 1000), false); 
} 

function coverHide() { 
    var coverimg = document.getElementById("cover-image"); 
    coverimg.classList.toggle("hide"); 
} 

function testFunc(){ 
    alert("Test"); 
}

を明確にするために、私はコメントしたときに私のtestFuncが動作しない理由を、私は聞いていますのよHTMLセクションの "Animated Landing Page"

出典

2017-03-31 UnseenSpecter

各機能は、独自のjavascriptファイルにある必要はありません。もちろん、コードが長くなったり長くなったりすると、論理的な断片に分割して、必要に応じて別々のファイルを作成することができます。しかし、あなたのコーディングがより高度になるにつれて、グローバル名前空間を汚染する議論が必要です。 – Snowmonkey

あなたはたぶんそれを間違ってコメントしましたが、あなたはそれをどのようにして表示しなければなりませんか？ – adeneo

いいえ、それぞれの関数*をそれ自身のファイルに入れる必要はありません。記述可能な問題を示すコードをお持ちの場合は、その問題を解決できる可能性があります。 – David

要素を選択するときは、何かを行う前に要素がundefinedでないことを確認する必要があります。 undefined（この場合はメソッドaddEventListener）のメソッドまたはプロパティにアクセスしようとすると、JavaScriptが壊れます。

var btnEnter = document.getElementById("entry-btn"); 
var test = document.getElementById("link1"); 

if (btnEnter) { 
    btnEnter.addEventListener("click", coverFadeOut); 
} 

if (test) { 
    test.addEventListener("click", testFunc); 
}

出典

2017-03-31 18:20:27 Brian

それはまさにそれでした。一見些細なことにもかかわらず、実際の答えを提供していただきありがとうございます。 – UnseenSpecter

Welcome to the Wonderful JavaScript of World！

あなたのブラウザでF12を押し、ブラウザのコンソールと開発者ツールを利用することをおすすめします。コード実行時に発生する例外が表示されます。あなたの場合、そのボタンをコメントアウトすると、ページのマークアップからentry-btnを削除すると、document.getElementById("entry-btn")がnullを返すので、イベントリスナーを追加するコードは失敗します。

var btnEnter = document.getElementById("entry-btn"); // Uh oh! This is gone! document.getElementById returns null. 
btnEnter.addEventListener("click", coverFadeOut); // btnEnter is null. I can't add a listener to it!

各機能を別々のファイルに追加する必要はありません。あなたは物事を試している間にデバッグしていることを確認するだけです。（ちなみに、関連するファイルや機能をグループ化する場合は、JavaScriptモジュールパターンやES2015モジュールをGoogleに任せて、関連するコードをまとめておくのが好ましい方法です）。

出典

2017-03-31 18:20:43 ajm

実際に質問に答えて、追加のヘルプを証明していただきありがとうございます！私は実際にこれを逃したとは信じられません。私はちょうどそれがその特定の機能を実行し、完全に壊すだけでなく、移動することに失敗すると思った。 – UnseenSpecter

短い答えはノー、それは別のファイルに各jsの機能を分離する必要はありませんが、大きなアプリケーションのためにそれは便利です、それはコードの再利用を好む、テストなど

これは幅広いトピックであるとに大きく依存しますチームコンベンション、ベストプラクティス、デザインパターン

たとえば、javascript関数はカプセル化と抽象化の概念としてsouchを使用する必要があります。すなわち、モジュールには変更の理由が1つあり、特定の責任を処理する必要があります。

この概念にしたがって、関数をモジュール（別名jsファイル）に分割することができます。たとえば、ナビゲーションに固有のすべての機能を扱うナビゲーションファイルや、機能の別の側面を抽象化する他のモジュールを持つことができます。

希望しました！

出典

2017-03-31 18:24:48

ウェブページの各Javascript機能は、別々の.jsファイルで定義されるはずですか？

答えて

関連する問題