Development:JavaScript usage guide: Difference between revisions
From MoodleDocs
No edit summary |
|||
Line 16: | Line 16: | ||
=API overview= | =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 direct loading of YUI2 libraries, need to do Y.use('yui2-dom') before accessing old YAHOO global object. | |||
=Examples= | =Examples= |
Revision as of 19:56, 19 January 2010
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 direct loading of YUI2 libraries, need to do Y.use('yui2-dom') before accessing old YAHOO global object.