À quoi sert «définir» dans JavaScript (mis à part l'évidence)?

161

J'ai cherché de la documentation à ce sujet, mais je ne trouve rien nulle part.

J'utilise Aloha et je souhaite utiliser leur prototype de barre latérale pour créer une nouvelle barre latérale associée à d'autres fonctionnalités du plugin.

Leur sidebar.js commence par ceci, mais je ne peux pas pour la vie de moi trouver de documentation qui explique ce que cela signifie.

define( [
    'aloha/core',
    'aloha/jquery',
    'aloha/selection'
], function (Aloha, jQuery, Selection, Plugin) {

Il continue ensuite dans ce wrapper pour définir un tas de fonctions, untel varset certaines proptotypes- que je peux à peu près comprendre ...

Qu'est-ce que cela dit ou où puis-je trouver une explication?

David O'Sullivan
la source

Réponses:

173

Je ne peux pas dire avec certitude sans voir le script entier, mais c'est probablement la definefonction de RequireJS , en particulier la forme " définir avec les dépendances " de cette fonction. Il permet de définir un "module":

Un module est différent d'un fichier de script traditionnel en ce qu'il définit un objet bien défini qui évite de polluer l'espace de noms global. Il peut explicitement lister ses dépendances et obtenir un handle sur ces dépendances sans avoir besoin de faire référence à des objets globaux, mais à la place recevoir les dépendances en tant qu'arguments de la fonction qui définit le module.

Et la forme "définir avec dépendances" de defineest décrite comme suit:

Si le module a des dépendances, le premier argument doit être un tableau de noms de dépendances et le second argument doit être une fonction de définition. La fonction sera appelée pour définir le module une fois toutes les dépendances chargées. La fonction doit retourner un objet qui définit le module.

James Allardice
la source
1
oui c'est définitivement - donc cela fait partie de require.js et pour utiliser ce balisage dont vous avez besoin requirejs.org
David O'Sullivan
4
et quelles versions d'IE ne prennent pas en charge cela ... ;-)
Simon_Weaver
1
@Simon_Weaver - Je ne sais pas ce que vous voulez dire ... RequireJS est pris en charge par IE6 + .
James Allardice
c'est bon à savoir :) J'étais un peu facétieux, mais je pensais aussi que c'était une construction plus récente que IE6
Simon_Weaver
1
@Simon_Weaver Ce n'est pas une construction de langage Javascript, c'est une fonction Javascript ordinaire. Les crochets créent un tableau. Ou est-ce le concept auquel vous faisiez référence?
Robin Green
3

Il s'agit d'un modèle AMD pour l'écriture de modules pour lequel AMD signifie Asynchronous Module Definition lorsque vous devez importer des modules de manière asynchrone plutôt que quelque chose comme commonJS.

define(['module1', 'module2'], function(module1, module2) {
  console.log(module1.sayHi());
});

Define prend un tableau de dépendances et une fois que toutes celles-ci sont chargées en arrière-plan (async) de manière non bloquante, define appelle le callback qui à son tour accepte les arguments (dans ce cas les dépendances).

Une autre chose à noter est que chacun de ces modules doit également être défini en utilisant le mot-clé "define". Ainsi, par exemple, module1 serait défini comme ci-dessous:

define([], function() {

  return {
    sayHi: function() {
      console.log('Hi Hi');
    },
  };
});

Cette façon d'écrire des modules (AMD) vous permet d'écrire en tenant compte de la compatibilité du navigateur (pas de require () comme dans nodeJS) et vous pouvez également définir de nombreux formats, y compris des objets, JSON, etc. alors que par exemple commonJS a besoin que les modules soient des objets.

Gardez à l'esprit qu'AMD a ses propres inconvénients. J'espère que cela aide quelqu'un.

TheeBen
la source