Revision as of 11:02, 27 January 2010

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:

JS scripts linked from page head
JS linked and executed from page head
inline Javascript
global JS variables

Overview of JavaScript usage in 2.0

all JS stored in one global M namespace
majority of JS logic moved into page footer
loading of javascript modules handled by YUI3 loader
all plugins support module.js files
most JS is initialised through $PAGE->requires->js_init_call()
full migration to YUI3, YUI2 modules are loaded on demand only

Sample usage of JavaScript in module

Description of M namespace

Performance improvements

Migration and code upgrade steps

Deprecated coding style

Examples

Code migration

Performance

Links

Create_YUI3_Module_For_Moodle

@@ Line 18: / Line 18: @@
 Types of JS code in 1.9:
-# JS scripts linked from page head - current javascript-static
+* JS scripts linked from page head
-# JS linked and executed from page HEAD
+* JS linked and executed from page head
-# inline Javascript
+* inline Javascript
-# global JS variables
+* global JS variables
-Proposed JS usage in 2.0
+Overview of JavaScript usage in 2.0
-* majority of JS logic is moved into page footer
+* all JS stored in one global M namespace
-* use YUI3 features and coding style as much as possible
+* majority of JS logic moved into page footer
-* 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')
+* loading of javascript modules handled by YUI3 loader
-* 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()
+* all plugins support module.js files
-* new global M instance, all JS modules functions are accessed through this global object
+* most JS is initialised through $PAGE->requires->js_init_call()
-* new global Y instance, initialised in page footer, can not be used in included scripts in top scope
+* full migration to YUI3, YUI2 modules are loaded on demand only
-* 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:
+=Sample usage of JavaScript in module=
-* 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.
+=Description of M namespace=
+=Performance improvements=
+=Migration and code upgrade steps=
+==Deprecated coding style==
 =Examples=

Documentation

JavaScript usage guide: Difference between revisions