Difference between revisions of "User:Glodenox/Scripts/WME JavaScript development"

From Wazeopedia
(Created page with "==Best practices for development of JavaScript extensions== All normal best practice guidelines apply; some references are: * [http://www.javascripttoolbox.com/bestpractices/...")
 
Line 19: Line 19:
 
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  
 
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  
  
<pre style="width:54em;margin-left:-1em;">
+
<pre style="margin-left:-1em;">
 
(function() {
 
(function() {
 
   // all function and variable declarations go in here
 
   // all function and variable declarations go in here
Line 28: Line 28:
 
TODO: explanation
 
TODO: explanation
  
<pre style="width:54em;margin-left:-1em;">
+
<pre style="margin-left:-1em;">
 
function awaitLogin(e) {
 
function awaitLogin(e) {
 
     if (e && e.user == null) {
 
     if (e && e.user == null) {

Revision as of 00:32, 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