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.
Template:Infobox Project
Template:Moodle 2.0
Goals
- standardise usage of Javascript code in Moodle
- improve 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
- do not add JavaScript code directly to the markup - instead create init function that adds all necessary event handlers and DOM modifications
- do not use general JS files - instead use new YUI3 modules stored in module.js files
- do not create global variables to pass data from PHP to JS code - instead use parameters of init functions
- do not add extra script links from PHP - instead use YUI3 loading of modules from JS code
- do not use YUI2 modules if equivalent YUI3 modules already exit
- instead of direct DOM modifications use YUI3 methods
