The YUILoader Utility is designed, of course, to help you put YUI components on the page. But your applications will frequently consist of a YUI-component foundation with your own application logic built on top. In other words, when you're loading YUI components you'll often want to load your own components as well.
This example shows you how to create a custom (non-YUI) module and load it via YUILoader. Click the "Load JSON" button below to load Douglas Crockford's JSON utility from JSON.org via YUILoader. Keep an eye on the Logger Control console at right to follow the logic as it executes after you click the button.
addModuleto Add Custom Modules via YUILoader
The purpose of this example is to illustrate one mechanism for adding custom (non-YUI) content to the page using the YUILoader Utility. For full documentation on this feature of the YUILoader, please refer to the "Using
addModule" section of the YUILoader Utility User's Guide.
Douglas Crockford, the inventor of JSON, has written a JSON Utility that helps you verify that information you've brought into the page as JSON is indeed limited to constructs that fit the JSON specification; this utility helps prevent some forms of malicious attacks embedded in JSON data from being successful in damaging you application or compromising its security.
In this example, we'll use YUILoader's
addModule function to load the JSON Utility from
First, we need to come up with a strategy for identifying when the external content is loaded. In the case of scripts that you write for use with YUI, we recommend you use the
YAHOO.register method to register your component with the
YAHOO global object once it's loaded (this is the mechanism that native YUI modules use). If you do that, YUILoader will be notified automatically when your custom module is loaded.
In this case, we are loading an external module that we don't control, so we need to write a
verifier function that will determine for us when the JSON Utility has successfully loaded. That
verifier method is passed a callback function for us to fire when it has successfully verified that the load is complete. Here's our
verifier method for the JSON Utility, predicated on the fact that this utility makes a modification to the Object prototype — when that modification is there, we know the script has been loaded and processed. The
verifier runs on a timer; it checks every 50ms until it verifies the load state of the JSON Utility:
addModuleto Make YUILoader Aware of the JSON Utility
Now that we have a
verifier function, we're ready to tell YUILoader about the JSON Utility. This is a simple step in which we invoke
addModule and pass in relevant metadata about our new module:
Note that in this case we're not setting up a dependency relationship between the JSON Utility and any other YUI components. However, in the commented-out last line above, we could use the
requires member of the configuration object to make the JSON Utility depend on other YUI components or other custom components that we've defined.
verifier steps are the most important elements of this example with respect to adding non-YUI content to the page via YUILoader. The full source of the example, including the use of the YUI Button Control to actuate the loading of the JSON Utility, follows here.