JavaScript usage guide - Revision history

Fpataleta: 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..."

2017-06-20T02:22:45Z

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..."

← Older revision		Revision as of 02:22, 20 June 2017
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]]

Skodak: /* Links */

2010-01-27T15:55:21Z

Links

← Older revision		Revision as of 15:55, 27 January 2010
Line 66:		Line 66:

	=Links=		=Links=
	* [[~~Create_YUI3_Module_For_Moodle~~]]		* [[JavaScript FAQ]]
			* [[Create YUI3 Module For Moodle]]

Skodak: /* Migration and code upgrade steps */

2010-01-27T15:54:26Z

Migration and code upgrade steps

← Older revision		Revision as of 15:54, 27 January 2010
Line 51:		Line 51:
	# study how to use YUI3		# 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		# 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, ~~luckily~~ YUI2 ~~may be used easily~~ from YUI3 ~~code.~~		# 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		# use $PAGE->requires->js_init_call() to integrate JS with your html markup generated from PHP

Skodak: /* Migration and code upgrade steps */

2010-01-27T15:53:31Z

Migration and code upgrade steps

← Older revision		Revision as of 15:53, 27 January 2010
Line 51:		Line 51:
	# study how to use YUI3		# 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		# 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, luckily YUI2 may be used easily from YUI3 code.
	# use $PAGE->requires->js_init_call() to integrate JS with your html markup generated from PHP		# use $PAGE->requires->js_init_call() to integrate JS with your html markup generated from PHP

			==Migration to YUI3==


	==Deprecated coding style==		==Deprecated coding style==

Skodak: /* Performance improvements */

2010-01-27T15:51:04Z

Performance improvements

← Older revision		Revision as of 15:51, 27 January 2010
Line 46:		Line 46:
	=Performance improvements=		=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=		=Migration and code upgrade steps=

Skodak: /* Migration and code upgrade steps */

2010-01-27T15:48:15Z

Migration and code upgrade steps

← Older revision		Revision as of 15:48, 27 January 2010
Line 48:		Line 48:

	=Migration and code upgrade steps=		=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
			# use $PAGE->requires->js_init_call() to integrate JS with your html markup generated from PHP

	==Deprecated coding style==		==Deprecated coding style==

Skodak: /* Description of M namespace */

2010-01-27T11:30:49Z

Description of M namespace

← Older revision		Revision as of 11:30, 27 January 2010
Line 40:		Line 40:
	# basic structures and utility methods, string support, etc. - '''M.util.''', '''M.cfg''', '''M.yui.''' (defined inline or in /lib/javascript-static.js)		# 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)		# 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)		# 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.		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.

Skodak: /* Description of M namespace */

2010-01-27T11:30:28Z

Description of M namespace

← Older revision		Revision as of 11:30, 27 January 2010
Line 40:		Line 40:
	# basic structures and utility methods, string support, etc. - '''M.util.''', '''M.cfg''', '''M.yui.''' (defined inline or in /lib/javascript-static.js)		# 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)		# 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)		# 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.		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.

Skodak: /* Description of M namespace */

2010-01-27T11:29:38Z

Description of M namespace

← Older revision		Revision as of 11:29, 27 January 2010
Line 42:		Line 42:
	# 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)		# 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 page footer after full initialisation of YUI library.		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=		=Performance improvements=

Skodak: /* Description of M namespace */

2010-01-27T11:28:59Z

Description of M namespace

← Older revision		Revision as of 11:28, 27 January 2010
Line 38:		Line 38:

	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:		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)		# 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)		# 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'''		# 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 page footer after full initialisation of YUI library.		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.