JavaScript usage guide: Difference between revisions
From MoodleDocs
(→Goals) |
|||
| Line 45: | Line 45: | ||
==Deprecated coding style== | ==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 | |||
=Links= | =Links= | ||
* [[Create_YUI3_Module_For_Moodle]] | * [[Create_YUI3_Module_For_Moodle]] | ||
Revision as of 11:15, 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
- 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
