Para que 'define' é usado no JavaScript (além do óbvio)?

161

Eu pesquisei alto e baixo para documentação sobre isso, mas simplesmente não consigo encontrar nada em qualquer lugar.

Estou usando o Aloha e quero usar o protótipo da barra lateral para criar uma nova barra lateral anexada a outras funcionalidades do plug-in.

O sidebar.js deles começa com isso, mas não consigo encontrar nenhuma documentação que explique o que isso significa.

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

Então, nesse invólucro, ele define várias funções, varsalgumas e algumas proptotypes- das quais eu posso entender ...

O que é esse ditado ou onde posso encontrar uma explicação?

David O'Sullivan
fonte

Respostas:

173

Não posso ter certeza sem ver o script inteiro, mas é provável que seja a definefunção do RequireJS , em particular o formulário " definir com dependências " dessa função. É usado para definir um "módulo":

Um módulo é diferente de um arquivo de script tradicional, pois define um objeto com escopo bem definido que evita poluir o espaço para nome global. Ele pode listar explicitamente suas dependências e lidar com essas dependências sem precisar se referir a objetos globais, mas, em vez disso, recebe as dependências como argumentos para a função que define o módulo.

E a forma "definir com dependências" defineé descrita da seguinte maneira:

Se o módulo tiver dependências, o primeiro argumento deve ser uma matriz de nomes de dependência e o segundo argumento deve ser uma função de definição. A função será chamada para definir o módulo assim que todas as dependências forem carregadas. A função deve retornar um objeto que define o módulo.

James Allardice
fonte
1
sim isso é definitivamente ele- pelo que a sua parte de require.js e usar essa marcação que você precisa requirejs.org
David O'Sullivan
4
e quais as versões do IE não suportam esta ... ;-)
Simon_Weaver
1
@ Simon_Weaver - Não sei o que você quer dizer ... O RequireJS é suportado pelo IE6 + .
James Allardice 23/05
Isso é bom saber :) eu estava sendo um tanto jocoso, mas eu também pensei que esta era uma construção mais recente do que IE6
Simon_Weaver
1
@Simon_Weaver Não é uma construção de linguagem Javascript, é uma função Javascript comum. Os colchetes criam uma matriz. Ou é esse o constructo a que você estava se referindo?
Robin Green
3

Esse é o padrão da AMD para escrever módulos, o qual AMD significa Asynchronous Module Definition para quando você precisar importar módulos assíncronos basicamente, em vez de algo como o commonJS.

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

Definir assume uma matriz de dependências e, uma vez que todas elas são carregadas em segundo plano (assíncronas) de maneira não-bloqueadora, defina chamadas de retorno de chamada que, por sua vez, aceitam argumentos (neste caso, as dependências).

Outro ponto a ser observado é que cada um desses módulos também precisa ser definido usando a palavra-chave "define". Assim, por exemplo, module1 seria definido como abaixo:

define([], function() {

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

Essa maneira de escrever módulos (AMD) permite que você escreva com a compatibilidade do navegador em mente (não é necessário () como no nodeJS) e também pode definir muitos formatos, incluindo objetos, JSON, etc., enquanto, por exemplo, o commonJS precisa que os módulos sejam objetos.

Lembre-se de que a AMD tem suas próprias quedas. Espero que isso ajude alguém.

TheeBen
fonte