|
|
(9 intermediate revisions by one other user not shown) |
Line 1: |
Line 1: |
| {{Work in progress}} | | {{obsolete}} |
| {{Infobox Project
| |
| |name = Javascript usage guide
| |
| |state = Work in progress
| |
| |tracker = MDL-21240
| |
| |discussion = n/a, developer chat only
| |
| |assignee = [[User:Petr Škoda (škoďák)|Petr Škoda (škoďák)]] + feedback and ideas from Sam and Dongsheng, based on previous work of Nicolas and Tim
| |
| }}
| |
| {{Moodle 2.0}}
| |
|
| |
|
| | | The text for this page has been deleted because it was out of date and no longer relevant. See [[Javascript_Modules]] for information on Javascript coding guidelines in Moodle. To view the previous text for this page check the history. |
| =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=
| |
| | |
| Since Moodle 2.0 all JavaScript code, configuration data and runtime data are available through the global M object. All plugins register themselves in the M namespace, this namespace may be divided into three parts:
| |
| # basic structures and utility methods, string support, etc. - '''M.util.*''', '''M.cfg''', '''M.yui.*''' (defined inline or in lib/javascript-static.js)
| |
| # core subsystems such as groups, roles, blocks - '''M.core_group.*''', '''M.core_role.*''' (defined in various JS files or module.js in each core subsystem)
| |
| # plugin modules such as forum, spamcleaner report, etc. '''M.mod_forum.*''', '''M.report_spamcleaner'''
| |
| | |
| The recommended strategy is to define one or more ''init'' functions in the plugin namespace such as '''M.mod_forum.init_view_page()''' and use it as the interaction point between PHP and JS code. The init function is called via: <code php>$PAGE->requires->js_init_call('M.mod_forum.init_view_page', $options);</code> This function makes sure the appropriate JavaScript files are loaded and the init method is executed from page footer after full initialisation of YUI library.
| |
| | |
| =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
| |
| | |
| =Links=
| |
| * [[Create_YUI3_Module_For_Moodle]]
| |