Scripts/WME JavaScript development: Difference between revisions View history

m (→‎Best practices: Removed Javascript Toolbox link as the domain is invalid.)
 
(12 intermediate revisions by 4 users not shown)
Line 1: Line 1:
==Best practices for development of JavaScript extensions for the Waze Map Editor==
==Best practices==


All of the normal best practice guidelines apply; some references are:
All normal best practice guidelines apply; some references are:
* [http://www.javascripttoolbox.com/bestpractices/ JavaScript Toolbox]
 
* [http://sarfraznawaz.wordpress.com/2012/02/19/842/ Sarfraz Ahmed's Blog]
*[http://sarfraznawaz.wordpress.com/2012/02/19/842/ Sarfraz Ahmed's Blog]


Run your code through some useful analyzers to head off potential problems, like:
Run your code through some useful analyzers to head off potential problems, like:
* [http://www.jshint.com JSHint]
 
* [http://www.jslint.com JSLint]
*[http://www.jshint.com JSHint]
* [https://developers.google.com/closure/ JavaScript Closure Tools]
*[http://www.jslint.com JSLint]
*[http://developers.google.com/closure/ JavaScript Closure Tools]


==jQuery==
==jQuery==
WME is built on jQuery. This makes it easy to manipulate, access properties, and directly reference the built-in Waze objects underlying WME. Using jQuery enables tighter integration into WME, reduces code, and builds on what is already there. As of now, WME is running jQuery 1.7 vanilla, which does not include any optional modules like jQuery UI.
WME (''Waze Map Editor'') is built on jQuery. This makes it easy to access and manipulate properties and directly reference the built-in Waze objects underlying WME. Using jQuery enables tighter integration into WME, reduces code, and builds on what is already there. WME runs jQuery 1.7 vanilla (which does not include any optional modules like jQuery UI).


==Prefix for variables and functions==
==Prefix for variables and functions==
To ensure that your code is safe from collision with other scripts and extensions, please prefix all variables and functions with a prefix of your choosing (this includes local variables and global variables, since your entire script is made public when it is loaded in WME). An example would be instead of naming a variable "version", name it "coolscript_version" instead, if your script is named "Cool Script".
To ensure that your code is safe from collision with other scripts and extensions, please prefix all variables and functions with a prefix of your choosing (this includes local variables and global variables, since your entire script is made public when it is loaded in WME). An example would be instead of naming a variable "version", name it "coolscript_version" instead, if your script is named "Cool Script".


==Code Encapsulation==
==Code encapsulation==
While not technically code encapsulation in the object oriented sense, please encapsulate all code with a function, except requisite bootstrap code and initializer calls.
While not technically code encapsulation in the object oriented sense, please encapsulate all code in a function, except requisite bootstrap code and initializer calls.


==UserScript Bootstraping==
==UserScript Bootstraping==
When creating user scripts for Greasemonkey, Chrome, or TamperMonkey, use the following bootstrap at the start of your script. timbones did extensive research on this to make sure it is completely cross-browser compatible. Not only will it work in GreaseMonkey, Chrome, and TamperMonkey, but can also be dropped into a Safari Extension without any recoding.
When creating user scripts for Greasemonkey, Chrome, or TamperMonkey, use the following bootstrap at the start of your script. [[User:timbones|timbones]] did extensive research on this to make sure it is completely cross-browser compatible. Not only does it work in GreaseMonkey, Chrome, and TamperMonkey, but can also be dropped into a Safari Extension without any recoding.
----
 
<pre>
<pre style="width:54em;margin-left:-1em;">
function coolscript_bootstrap()
function coolscript_bootstrap()
{
{
Line 29: Line 30:
try
try
{
{
if (typeof Components.interfaces.gmIGreasemonkeyService === "object")
if ("object" === typeof Components.interfaces.gmIGreasemonkeyService)
{
{
bGreasemonkeyServiceDefined = true;
bGreasemonkeyServiceDefined = true;
Line 38: Line 39:
//Ignore.
//Ignore.
}
}
if ( typeof unsafeWindow === "undefined" ||  ! bGreasemonkeyServiceDefined)
if ( "undefined" === typeof unsafeWindow ||  ! bGreasemonkeyServiceDefined)
{
{
unsafeWindow    = ( function ()
unsafeWindow    = ( function ()
Line 60: Line 61:
coolscript_bootstrap();
coolscript_bootstrap();
</pre>
</pre>
[[Category:Waze Map Editor]]

Latest revision as of 19:29, 19 July 2020

Best practices

All normal best practice guidelines apply; some references are:

Run your code through some useful analyzers to head off potential problems, like:

jQuery

WME (Waze Map Editor) is built on jQuery. This makes it easy to access and manipulate properties and directly reference the built-in Waze objects underlying WME. Using jQuery enables tighter integration into WME, reduces code, and builds on what is already there. WME runs jQuery 1.7 vanilla (which does not include any optional modules like jQuery UI).

Prefix for variables and functions

To ensure that your code is safe from collision with other scripts and extensions, please prefix all variables and functions with a prefix of your choosing (this includes local variables and global variables, since your entire script is made public when it is loaded in WME). An example would be instead of naming a variable "version", name it "coolscript_version" instead, if your script is named "Cool Script".

Code encapsulation

While not technically code encapsulation in the object oriented sense, please encapsulate all code in a function, except requisite bootstrap code and initializer calls.

UserScript Bootstraping

When creating user scripts for Greasemonkey, Chrome, or TamperMonkey, use the following bootstrap at the start of your script. timbones did extensive research on this to make sure it is completely cross-browser compatible. Not only does it work in GreaseMonkey, Chrome, and TamperMonkey, but can also be dropped into a Safari Extension without any recoding.

function coolscript_bootstrap()
{
	var bGreasemonkeyServiceDefined     = false;

	try
	{
		if ("object" === typeof Components.interfaces.gmIGreasemonkeyService)
		{
			bGreasemonkeyServiceDefined = true;
		}
	}
	catch (err)
	{
		//Ignore.
	}
	if ( "undefined" === typeof unsafeWindow  ||  ! bGreasemonkeyServiceDefined)
	{
		unsafeWindow    = ( function ()
		{
			var dummyElem   = document.createElement('p');
			dummyElem.setAttribute ('onclick', 'return window;');
			return dummyElem.onclick ();
		} ) ();
	}
	/* begin running the code! */
	coolscript_init();
}

function coolscript_init()
{
	//run your code here
}

// [...]
// then at the end of your script, call the bootstrap to get things started
coolscript_bootstrap();