For meltmedia Marketing Sites
/js
jsGlobal
in themeName.json
from site root{ "name" : "themeName", "jsGlobal" : [ "js/prototype.js", "js/jquery-1.5.1.min.js", "js/jquery.noconflict.js", "js/jquery-ui-1.8.12.custom.min.js" ] }
There may be other code that needs to be executed on every page but this should be for files whose logical group is "site-wide" rather than belonging to a plugin.
/js
jsGlobal
in componentName.json
from site root{ "componentId" : "componentName", "jsGlobal" : [ "js/jakebox.js", "js/jqModal.js" ] }
This code should be more likely to be associated with multiple plugins. Some code can straddle the line between these two. Make the best decision possible based on the use of the script on the current site.
/lib/components/componentName/js
js
in componentName.json
from component root{ "componentId" : "componentName", "jsGlobal" : [ "js/jakebox.js", "js/jqModal.js" ], "js" : ["js/mediaCenterComponent.js"] }
Rule to be safe: If you are writing code for a plugin, put it here
Note: you will still need to include any libraries/plugins before you use them elsewhere
<script>
tags in your <body>
<body> <script type="text/javascript"> /* Any code in here will block page rendering until it's done */ </script> </body>
This is easy to do with our component system since everything has a body.html but please refrain
global namespace
with variables
var x = 0, y = 10; function doSomething(x) { } function doSomethingElse(y) { }
object literal
var siteName = { config: { x: 0, y: 10 }, doSomething: function(x) {}, doSomethingElse: function(y) {} }; // Later... siteName.anotherFunction = function() {};
self executing anonymous function
(function() { var imLocal = true, meToo = 'wooHoo'; function doSomething() {} function anotherFunc() {} })();
window
to your SEAF(function(window, $) { /* Using local window like a boss Speeds up lookups Better gzip and minification */ })(window, jQuery);
variables
not warvar
keyword (if you don't, it's global!)var
to declare multiple variables/* Bad */ var count = 0; var length = 10; var words = 'Words words words'; /* Good */ var count = 0, length = 10, words = 'Words words words';
if ($('#header').is(':visible')) { $('#header').hide(); } else { $('#header').show(); } // Instead... var $header = $('#header'); if ($header.is(':visible')) { $header.hide(); } else { $header.show(); }
window.onload
vs $(document).ready()
window.onload
will not run until all resources have been loaded (including images)$(document).ready()
will run once the DOM
is ready (much sooner)window.onload = function() { /* I'm going to wait for everything on the page */ }; $(document).ready(function() { /* I will run once the DOM is ready to be worked with */ });
/* Bad, bad, bad Nothing will happen without JavaScript! */ <!-- HTML --> <a href="#" onclick="openSafetyInformation();">Safety</a> /* JS */ function openSafetyInformation() { $('#safety-info').show(); return false; }
/* Good */ <!-- HTML --> <a href="safety.html" id="safety-btn">Safety</a> /* JS overrides normal link behavior */ $('#safety-btn').click(function() { $('#safety').load('safety.html', function() { $(this).show(); }); });
*Note: Obviously some things can't be done without JavaScript but a fallback should be in place whenever possible
/* You know how to do this correctly */ var emailForm = $('<form/>') .attr('action', '/search') .css({'padding':'10px','background':'#000'}); var toLabel = $('<label/>') .text('To') .css({'border':'1px solid #000'}) .appendTo(emailForm); emailForm.appendTo('#emailArea');
Write all your css classes, use JavaScript to toggle them
/* This is valid but frowned upon */ if (testCondition) runThisCode() /* How about this instead? */ if (testCondition) { runThisCode(); }
jQuery = $;
jQuery
helps us out$('div.myClass'); // All divs with a class of 'myClass' $('div:animated'); // All divs that are being animated $('input[name*="man"]'); /* All inputs with a name attribute that contains 'man' */ $('p:hidden'); // All paragraphs that are hidden $('td:eq(2)'); // The third td
jQuery
jQuery
methods since most of them return themselves/* Example Time */ $('#header') // Find element with id of 'header' .slideDown(400) // Animate it sliding down over 400ms .css('background','red') // Change background to red .addClass('active') // Add class active .wrap('<div/>'); // Wrap it in a div /* Could also be all on one line */
$.ajax()
Cross-browser, simple, powerful// GET (shortcut method) all the raw data from test.html $.get('test.html', function(data) { // This will fire once the call is finished console.log(data); }); // Grab all data from a form, POST to test.php $.post("test.php", $('#formId').serialize() );