Escolhendo um Asynch-Loader JavaScript [fechado]

9

Eu estive analisando vários carregadores de recursos assíncronos e não tenho certeza de qual usar ainda. Onde trabalho, temos esforços de grupo díspares cujos módulos de classe podem usar versões diferentes do jQuery (etc). Como tal, as dependências aninhadas também podem ser diferentes. Não tenho controle sobre isso, portanto, isso significa que preciso carregar dinamicamente recursos que podem usar versões alternativas da mesma biblioteca.

Como tal, aqui estão os meus requisitos:

  1. Carregue arquivos de recursos JavaScript e CSS de forma assíncrona.
  2. Gerenciar ordem de dependência e dependências aninhadas nas versões.
  3. Detecte se um recurso já está carregado.
  4. Deve permitir o carregamento entre domínios (CDNs)
  5. (opcional) Permite descarregar um recurso.

Eu estive olhando para:

Talvez eu consiga simular esses requisitos carregando versões em variáveis ​​com espaçamento adequado de nomes e usando uma matriz para rastrear o que já está carregado ... mas (espero) alguém já tenha inventado isso.

Então, minhas perguntas são:

  • Quais você usa? E porque?
  • Existem outros que satisfazem totalmente meus requisitos?
  • Com quais você acha mais eloquente e mais fácil trabalhar? E porque?

ATUALIZAÇÃO:
Para os interessados, tentei todas as bibliotecas da AMD acima (e mais). No final, fui com o RequireJS . É apenas mais limpo e fácil no geral ... e estou feliz por usá-lo.

Prisioneiro ZERO
fonte
Para JavaScript, não acho que o número 5 seja possível. Pode ser teoricamente possível para CSS, mas não tenho certeza se algum navegador suporta isso.
Mike Baranczak
@ Mike Obrigado por comentar! Se o carregador assíncrono rastreou e povoou recursos usando variáveis ​​de objeto ... é completamente possível.
Prisioneiro ZERO
Certo, mas o construtor NEW duplicará o objeto; portanto, se você criar um novo de algo chamado, ele ainda existirá lá. Por que você descarregaria mesmo assim?
Incógnito 17/05
Obrigado por comentar! Descarregar recursos economiza na memória. Editarei minha pergunta acima com algumas reflexões sobre seu comentário (em alguns minutos). Obrigado novamente!
Prisioneiro ZERO
O jQuery já possui uma getScriptfunção para injeção de scripts.
ZzzzBov 23/09/11

Respostas:

7

Eu usei o RequireJS em projetos sérios e adoro isso, mas não é realmente um carregador assíncrono. Realmente é para ser um sistema de módulos. O carregamento assíncrono é fornecido em serviço para esse objetivo. Ele pode ser pressionado para atender a qualquer um de seus requisitos, mas seus serviços de carregamento são projetados para carregar módulos, não arquivos arbitrários.

Carregar arquivos de recursos JavaScript e CSS de forma assíncrona : Requirejs carrega todos os módulos necessários usando a injeção de tag de script, de forma assíncrona.

Gerenciar ordem de dependência e dependências aninhadas nas versões : É aqui que o RequireJS Shines. Os módulos podem declarar dependências em outros módulos e a ordem de carregamento será extrapolada dessa declaração de dependência. Há também um plug-in de pedido, que pode forçar o pedido de dependências.

Detectar se um recurso já está carregado : o Requirejs carregará um módulo apenas uma vez.

Deve permitir o carregamento entre domínios (CDNs) : isso é possível, mas requer alguma configuração; Você pode definir um URL específico para qualquer módulo, que substituirá o local padrão, para que possa ser definido como uma CDN.

O RequireJS servirá melhor se você escrever módulos usando seu formato e será menos eficaz se você estiver usando-o para carregar javascript bruto.

Ele também fornece um processo de compilação que mesclará seus módulos em um único arquivo para produção.

Sean McMillan
fonte
3

Em teoria, você poderia apenas manter uma lista de scripts já carregados e criar uma função que carrega scripts que ainda não foram carregados.

http://jsfiddle.net/BDG/Dhdu7/2/

Incógnito
fonte
2
Ou use Curl / RequireJS, eles têm esse e mais recursos. E você não tem que mantê-lo você mesmo;)
Raynos
Você esqueceu de mencionar uma estrutura clara e inclusões não relativas.
Incógnito 17/05
2

Se você estiver olhando para o RequireJS e quiser depender de arquivos CSS, pode fazer o checkout do plugin CSSP RequireJS :

CSS com preenchimento. Este projeto implementa um plug-in para o projeto RequireJS que permite que os módulos listem arquivos CSS como dependências. Isso permite que o RequireJS aguarde até que regras específicas de estilo entrem em vigor antes de liberar o módulo JavaScript a ser avaliado. Isso seria útil se, por exemplo, se seu módulo JavaScript exigisse que certas regras CSS, definidas em um arquivo separado, fossem aplicadas ao DOM antes de poder ser inicializado.

Pete O
fonte