Development:JavaScript usage guide
From MoodleDocs
Note: This article is a work in progress. Please use the page comments or an appropriate moodle.org forum for any recommendations/suggestions for improvement.
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:
- JS scripts linked from page head - current javascript-static
- JS linked and executed from page HEAD
- inline Javascript
- 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.