User:Glodenox/Scripts/WME JavaScript development

Best practices for development of JavaScript extensions

All normal best practice guidelines apply; some references are:

• JavaScript Toolbox
• Sarfraz Ahmed's Blog

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

• JSHint
• JSLint
• JavaScript Closure Tools

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