JavaScript usage guide

Note: This page is a work-in-progress. Feedback and suggested improvements are welcome. Please join the discussion on moodle.org or use the page comments.

Javascript usage guide
Project state	Work in progress
Tracker issue	MDL-21240
Discussion	n/a, developer chat only
Assignee	Petr Škoda (škoďák) + feedback and ideas from Sam and Dongsheng, based on previous work of Nicolas and Tim

Moodle 2.0

Goals

• standardised usage of Javascript code in Moodle
• improved performance
• improve and simplify JS related APIs

API overview

Types of JS code in 1.9:

1. JS scripts linked from page head - current javascript-static
2. JS linked and executed from page HEAD
3. inline Javascript
4. global JS variables

Proposed JS usage in 2.0

• majority of JS logic is moved into page footer
• use YUI3 features and coding style as much as possible
• load all large chunks of JS code as YUI3 modules on the fly - by default stored in mod/mymod/module.js, registered via $PAGE->requires->js_module('mymod'), used by Y.use('mod_mymod')
• include short JS init code in page footer - the JS code itself should be stored as string and accessed via plugin renderer, $PAGE->requires->js_init_code()
• new global M instance, all JS modules functions are accessed through this global object
• new global Y instance, initialised in page footer, can not be used in included scripts in top scope
• JS scripts included from page head can not use YUI2/3 at load because YUI loader is not initialised yet
• YUI2 is not loaded by default, loading is done via YUI3 only

Deprecated usage:

• no inline javascript (->now()) support in $PAGE->requires, instead events are registered via special function, other DOM manipulations are done in JS init code or through function calls in footer
• no YUI2 libraries loaded by default, need to do Y.use('yui2-dom') before accessing old YAHOO global object.

Links

• Create_YUI3_Module_For_Moodle