« Modèle:Documentation/start box Voir l’historique

Template:Documentation
VisuelWikicode
m (Deeploz moved page WME JavaScript development to Community Plugins, Extensions and Tools/WME JavaScript development without leaving a redirect: cannot be a standalone page. attached to the main article about Forums.)
m (8 révisions importées)
 
Ligne 1 : Ligne 1 :
==Best practices for development of JavaScript extensions==
<!--
  Start of green doc box
--><div id="template-documentation" class="template-documentation iezoomfix" style="
    clear: both;
    margin: 1em 0px 0px;
    border: 1px solid rgb(170, 170, 170);
    background-color: rgb(236, 252, 244);
    padding: 1em;
"><!--
  Add the heading at the top of the doc box:
-->{{#ifeq: {{{heading|¬}}} | <!--Defined but empty-->
| <!--"heading=", do nothing-->
| <div style="padding-bottom: 3px; border-bottom: 1px solid #aaa; margin-bottom: 1ex;"><span style="{{#if: {{{heading-style|}}}
  | {{{heading-style|}}}
  | {{#ifeq: {{SUBJECTSPACE}} | {{ns:Template}}
    | font-weight: bold; font-size: 125%
    | font-size: 150%
    }}
  }}">{{#switch: {{{heading|¬}}}
  | ¬ = 
    <!--"heading" not defined in this or previous level-->
    {{#switch: {{SUBJECTSPACE}}
    | {{ns:Template}} = [[File:Template-info.png|50px|link=|alt=Documentation icon]] Template documentation
    | {{ns:Module}} = [[File:Template-info.png|50px|link=|alt=Documentation icon]] Module documentation
    | {{ns:File}} = Summary
    | #default = Documentation
    }}
  | #default =
    <!--"heading" has data or is empty but defined-->
    {{{heading|}}}
  }}</span>{{
  #if: {{{content|}}}
  |
  | <!--Add the [view][edit][history][purge] or [create] links-->
    <span class="mw-editsection plainlinks" id="doc_editlinks" style="float:right; font-size:100%;">{{
    #if: {{{doc exist|yes}}}
    | &#91;[[{{{docpage|{{FULLPAGENAME}}/doc}}}|view]]&#93; [[{{fullurl:{{{docpage|{{FULLPAGENAME}}/doc}}}|action=edit}} edit]] [[{{fullurl:{{{docpage|{{FULLPAGENAME}}/doc}}}|action=history}} history]] [{{purge|purge}}]
    | <!--/doc doesn't exist-->
      [[{{fullurl:{{{docpage|{{FULLPAGENAME}}/doc}}}| action=edit&preload={{
        #if: {{{preload|}}}
        | {{urlencode:{{{preload}}}}}
        | {{#ifeq: {{SUBJECTSPACE}} | {{ns:File}}
          | Template:Documentation/preload-filespace
          | Template:Documentation/preload
          }} }} }} create]][[Category:Missing Template Documentation]]
    }}</span>
  }}</div>
}}<noinclude><!-- close the div --></div>


All normal best practice guidelines apply; some references are:
<!-- Add categories and interwikis to the /doc subpage, not here! -->
* [http://www.javascripttoolbox.com/bestpractices/ JavaScript Toolbox]
</noinclude><noinclude>
* [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:
<!-- This category is only for the template itself
* [http://www.jshint.com JSHint]
    and should be moved to the doc subpage once added-->
* [http://www.jslint.com JSLint]
[[Category:Template:Documentation]]
* [http://developers.google.com/closure/ JavaScript Closure Tools]


==jQuery==
</noinclude><noinclude>{{documentation|content=
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).
This subtemplate of {{tl|documentation}} is used to start the documentation template box.
 
}}
==Prefix for variables and functions==
[[Category:Template:Documentation]]
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".
</noinclude>
 
==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. [[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 style="width:54em;margin-left:-1em;">
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();
</pre>

Dernière version du 9 mai 2016 à 21:30

Documentation icon Template documentation[view] [edit] [history] [purge]
Documentation icon Template documentation

This subtemplate of {{documentation}} is used to start the documentation template box.

The above documentation is transcluded from Modèle:Documentation/start box/doc.
Subpages of this template.
Récupérée de « https://www.waze.com/wiki/France/index.php?title=Modèle:Documentation/start_box&oldid=14042 »