User:Glodenox/Scripts/WME JavaScript development View history

No edit summary
No edit summary
Line 30: Line 30:
<pre style="margin-left:-1em;">
<pre style="margin-left:-1em;">
function awaitLogin(e) {
function awaitLogin(e) {
    if (e && e.user == null) {
  if (e && e.user == null) {
        return;
    return;
    }
  }
    if (typeof Waze === 'undefined' || typeof Waze.loginManager === 'undefined') {
  if (typeof Waze === 'undefined' ||
        setTimeout(awaitLogin, 100);
      typeof Waze.loginManager === 'undefined') {
        return;
    setTimeout(awaitLogin, 100);
    }
    return;
    if (!Waze.loginManager.hasUser()) {
  }
        Waze.loginManager.events.register("login", null, awaitLogin);
  if (!Waze.loginManager.hasUser()) {
        Waze.loginManager.events.register("loginStatus", null, awaitLogin);
    Waze.loginManager.events.register("login", null, awaitLogin);
        return;
    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) {
  // TODO: check whether it is actually useful to add additional checks here
        setTimeout(awaitLogin, 100);
  if (typeof document.getElementById('WazeMap') === undefined) {
        return;
    setTimeout(awaitLogin, 100);
    }
    return;
    init();
  }
  init();
}
}


function init() {
function init() {
    // User has logged in  
  // User has logged in  
}
}
awaitLogin();
awaitLogin();

Revision as of 00:34, 7 January 2016

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