CSS and JS resrouces
Sometimes you don't want to add css and js resources to the entire website because it is only needed on one page of the site.
For example, the accordion is often only used on the FAQ page, so why would you want the Accordion jQuery plugin's added to the whole site? This will decrease performance.
You can load resources on a Module, and register it at the bottom of the page so that it appears after the definition for jQuery. There is an article on how to do that by Registering Javascript at the bottom of the page.
Run js code
You may have some js code that you only want to run when a Module is present. There are multiple ways that we can do this:
One
Write your js code in the Module and make sure to inject it into the bottom of the page.
This encapsulates the Module and makes it really easy to read and understand.
I would use this method when you are just instantiating a plugin because it's simple. Id you have to write a bunch of code, maybe you want to look at another method below.
Two
Add a div onto the page and set the callback attribute
<div data-js-callback="initTabbedContent"></div> |
In your javascript file, you can search that this exists and then run some code if you find it
var called = false;var callback = $('div[data-js-callback]').attr('data-js-callback');if (typeof callback != 'undefined') { // type 1 of calling function that is setup on a module; if (callback == 'initTabbedContent') initTabbedContent();} |
Three
You can set up a function on the Module and then call it from the base-function.js file. This is helpful if you need to run the function on window resize - the definition for that is in base-functions.
// type 2 of calling function that is setup on a module;if (typeof callModuleFunction == 'function') { callModuleFunction();} |
Comments