Best practices for development of JavaScript extensions
All normal best practice guidelines apply; some references are:
Run your code through some useful analyzers to head off potential problems, like:
GreasyFork applies these analyzers when you enable the syntax marking in the source editing page.
jQuery and OpenLayers
WME (Waze Map Editor) uses jQuery and OpenLayers. jQuery makes it easy to access and manipulate properties and solves several problems in a uniform cross-browser way. WME currently runs jQuery 2.1.4 (this does not include any optional modules like jQuery UI).
OpenLayers is a library that can be used to show geographical data. Waze uses this library to display the world map. Waze uses version 2.14 of OpenLayers.
Code encapsulation
Userscripts are executed within a separated environment. As such, the functions defined within the userscript are hidden from the original page and other scripts (unless exposed via the window object). As such, it is not necessary to encapsulate your script or prefix your variables and functions to prevent collisions. Encapsulating your code doesn't do any harm though and could simply be done by putting all functions and
(function() {
// all function and variable declarations go in here
})();
UserScript Bootstrapping
TODO: explanation
function awaitLogin(e) {
if (e && e.user == null) {
return;
}
if (typeof Waze === 'undefined' ||
typeof Waze.loginManager === 'undefined') {
setTimeout(awaitLogin, 100);
return;
}
if (!Waze.loginManager.hasUser()) {
Waze.loginManager.events.register("login", null, awaitLogin);
Waze.loginManager.events.register("loginStatus", null, awaitLogin);
return;
}
// TODO: check whether it is actually useful to add additional checks here
if (typeof document.getElementById('WazeMap') === undefined) {
setTimeout(awaitLogin, 100);
return;
}
init();
}
function init() {
// User has logged in
}
awaitLogin();
TODO: add information about using the GM_* functions and the impact in GreaseMonkey + the several additional topics described in the forum