Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <blockquote> <p>It is best to keep separate files or include all files in one file Javascript?</p> </blockquote> <p>To avoid multiple server requests, it is better to group all your JavaScript files into only one. Also, you can use <a href="http://bundlejs.com/" rel="noreferrer">bundlejs</a> too (it is on beta and it is free by now).</p> <p>If you're using C#.Net + ASP.Net, you can <a href="http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification" rel="noreferrer">bundle your files</a> — it is a very good way to compress your scripts.</p> <blockquote> <p>how can I avoid conflicts between different scripts?</p> </blockquote> <p>You can use <a href="http://requirejs.org/" rel="noreferrer">RequireJS</a>; different names it is a good idea too; and every time that a plug-in/script ends, use <code>;</code> to determine its end.</p> <h2>Performatic consideration</h2> <p>To maintain the productivity of your scripts, you should <em><a href="http://jscompress.com/" rel="noreferrer">minify</a></em> them.</p> <h2>Solution for a single page application</h2> <p>After you have <em>minified</em> your scripts, then group them all — regardless if they are plugins or your own code — into a single file and call it in your application.</p> <h2>Solution for a multiple page application</h2> <p>In this case, you should call just the necessary JavaScript for each page. <strong>How can you do this?</strong></p> <p>After you minified all of your scripts, then separate them in <em>categories</em>. Take a look to get the idea:</p> <p><code>/assets/js/core.js</code> — here you put <em>your</em> JavaScript code that is necessary to all of your pages. It is your core; your kernel;</p> <p><code>/assets/js/plugins.js</code> — here you put all the plugins that runs with all of your pages (i.e. jquery, backbone, knockout, and so on.);</p> <p><code>/assets/js/home/bootstrap.js</code> — <strong>here is the magic:</strong> in this file you have to fill with the code that your home will call;</p> <p><code>/assets/js/contact/bootstrap.js</code> — the same as before: this file you should to place with the code that your contact page will call.</p> <p><strong>HINT:</strong> <em>core.js</em> and <em>plugins.js</em> can occupy the same file when you deploy your application. To better comprehension and developing, it is good to maintain them into separated files.</p> <h2>Third party plugins</h2> <p>To give you an idea, the file of your plugins should be like this:</p> <pre><code>/* PlaceHolder plugin | http://www.placeholderjs.com/ | by @phowner */ ; $(function(){ /* the placeholder's plugin goes here. */ }); /* Masked Inputs plugin | http://www.maskedjs.com/ | by @maskedowner */ ; $(function(){ /* the masked input's plugin goes here. */ }); /* Mousewheel plugin | http://www.mousewheeljs.com/ | by @mousewheelowner */ ; $(function(){ /* the mousewheel's plugin goes here. */ }); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload