Databases
StackOverflow2013
Postsdbo
POunobtrusive Javascript, should I use it? what is the best way to manage and organize events? how do I prevent inefficiencies?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POunobtrusive Javascript, should I use it? what is the best way to manage and organize events? how do I prevent inefficiencies?
    primarykey
    data
    text
    <p>I have been struggling with choosing unobtrusive javascript over defining it within the html syntax. I want to convince my self to go the unobtrusive route, but I am having trouble getting past the issues listed below. Can you please help convince me :)</p> <p>1) When you bind events unobtrusively, there is extra overhead on the client's machine to find that html element, where as when you do stuff, you don't have to iterate the DOM.</p> <p>2) There is a lag between when events are bound using document.ready() (jquery) and when the page loads. This is more apparent on very large sites.</p> <p>3) If you bind events (onclick etc) unobtrusively, there is no way of looking at the html code and knowing that there is an event bound to a particular class or id. This can become problematic when updating the markup and not realizing that you may be effecting javascript code. Is there a naming convention when defining css elements which are used to bind javascript events (i have seen ppl use js_className)</p> <p>4) For a site, there are different pieces of javascript for different pages. For example Header.html contains a nav which triggers javascript events on all pages, where as homepage.html and searchPage.html contains elements that trigger javascript on their respective pages </p> <p>sudo code example:</p> <p>header.html</p> <pre><code>&lt;script src="../myJS.js"&gt;&lt;/script&gt; &lt;div&gt;Header&lt;/div&gt; &lt;ul&gt; &lt;li&gt;nav1&lt;/li&gt;&lt;li&gt;nav2&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>homepage.html</p> <pre><code>&lt;@include header.html&gt; &lt;div class="homepageDiv"&gt;some stuff&lt;/div&gt; </code></pre> <p>searchpage.html</p> <pre><code>&lt;@include header.html&gt; &lt;div class="searchpageDiv"&gt;some other stuff&lt;/div&gt; </code></pre> <p>myJS.js</p> <pre><code>$(document).ready(function(){ $("ul.li").bind("click",doSomething()); $(".homePageDiv").bind("click",doSomethingElse()); $(".searchPageDiv").bind("click",doSomethingSearchy()); }); </code></pre> <p>In this case when you are on the searchPage it will still try to look for the "homepageDiv" which does not exist and fail. This will not effect the functionality but thats an additional unnecessary traversal. I could break this up into seperate javascript files, but then the browser has to download multiple files, and I can't just serve one file and have it cached for all pages. </p> <p>What is the best way to use unobtrusive javascript so that I could easily maintain a ( pretty script heavy) website, so another developer is aware of scripts being bound to html elements when they are modifying my code. And serve the code so that the client's browser is not looking for elements which do not exist on a particular page (but may exist on others).</p> <p>Thanks!</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USCodeMonkeyB
    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. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POunobtrusive Javascript, should I use it? what is the best way to manage and organize events? how do I prevent inefficiencies?
      1. USjfriend00
      1. VTFavorite
    2. VO
      singulars
      1. POunobtrusive Javascript, should I use it? what is the best way to manage and organize events? how do I prevent inefficiencies?
      1. This table or related slice is empty.
      1. VTDownMod
    3. VO
      singulars
      1. POunobtrusive Javascript, should I use it? what is the best way to manage and organize events? how do I prevent inefficiencies?
      1. This table or related slice is empty.
      1. VTDownMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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