title: How to organize front end JavaScript code in ASP.NET MVC project?
body: <p>I have a ASP.NET MVC project which adopts lots of JavaScript (jQuery and d3). I am new to web development, so I want to ask for some help on how to organize front end script code.</p>
  
  <p>My current way is, each folder under 'Views', has only one corresponding .js file (which means all partial views (.cshtml) under that folder, share that .js file), and I explicitly initialize all .js files of my project in $(document).ready() of _Layout.cshtml. </p>
  
  <p>This introduces 2 issues:</p>
  
  <ol>
  <li>Because all partial views puts there codes in one .js file, so it makes each .js file huge and complex.</li>
  <li>Because I hardcoded initialize all .js files when _Layout.cshtml is loaded, so even when one view is not loaded, its behind .js is executed, sounds not flexible. </li>
  </ol>
  
  <p>So here are my questions:</p>
  
  <ol>
  <li>How to make each partial view has its own .js file (split current .js into small pieces).</li>
  <li>How can I load and run a partial view's .js file only when that partial view is loaded.</li>
  <li>If I use TypeScript and KnockoutJS, do they provide any benefits on organizing front end script code?</li>
  </ol>
  
  <p>Thanks in advance.</p>