Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

JavaScript usage guide: Difference between revisions

From MoodleDocs
(Replaced content with "{{obsolete}} 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 gu...")
 
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.*''' (defined in /mod/forum/module.js, /admin/report/spamcleaner/module.js)
 
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 the page footer after full initialisation of YUI library.
 
=Performance improvements=
 
New script serving similar to themes framework significantly improves caching (elimination of a large number of HTTP requests) and enables compression. Developers will need to disable caching or manually purge server caches. (Note: this feature is not in CVS yet, but the API is finished.)
 
=Migration and code upgrade steps=
# study how to use YUI3
# go through old plugin code and migrate all inline JS code to new file module.js in your plugin directory
# convert YUI2 calls to YUI3 (some modules are not available in YUI3, fortunately YUI2 modules are usable from YUI3)
# use $PAGE->requires->js_init_call() to integrate JS with your html markup generated from PHP
 
==Migration to YUI3==
 
 
==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=
* [[JavaScript FAQ]]
* [[Create YUI3 Module For Moodle]]

Latest revision as of 02:22, 20 June 2017

Warning: This page is no longer in use. The information contained on the page should NOT be seen as relevant or reliable.


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.