Carregue dinamicamente as funções JS
De um modo geral, quando precisamos carregar um arquivo JS, usaremos tags de script para implementá -lo, semelhante ao seguinte código:
A cópia do código é a seguinte:
<script type = "text/javascript" src = "exemplo.js"> </script>
No entanto, o uso de tags de script para carregar arquivos JS diretamente tem as seguintes desvantagens:
1. Ordem de leitura estrita. Como o navegador lê arquivos JavaScript na ordem em que <Script> aparece na página da web e os executa imediatamente, quando vários arquivos dependem um do outro, o arquivo com a menor dependência deve ser colocado na frente e o arquivo com a maior dependência deve ser colocado no final, caso contrário, o código relatará um erro.
2. Questões de desempenho. O navegador usa o "modo síncrono" para carregar a tag <Script>, ou seja, a página será "bloqueando", aguardando o carregamento do arquivo JavaScript e executará o código HTML subsequente. Quando existem várias tags <Script>, o navegador não pode ler ao mesmo tempo. Um deve ser lido antes de ler o outro, resultando em uma grande extensão do tempo de leitura e a resposta da página é lenta.
Neste momento, pensaremos em carregar dinamicamente JS. O método de implementação de carregar dinamicamente Js é semelhante ao seguinte código
A cópia do código é a seguinte:
/*
*@DEC: Adicione dinamicamente o script
*@param src: o endereço do arquivo JS carregado
*@param de retorno de chamada: a função de retorno de chamada que precisa ser chamada depois que o arquivo JS for carregado
*@demonstração:
adddynamicstyle ('http://webresource.c-ctrip.com/code/cquery/labjs/lab.js', function () {
Alert ('Lab.js no carregamento do servidor CTRIP está completo')
});
*/
função adddynamicjs (src, retorno de chamada) {
var script = document.createElement ("script");
script.setAttribute ("type", "text/javascript");
script.src = src [i];
script.charset = 'gb2312';
document.body.appendChild (script);
if (retorno de chamada! = indefinido) {
script.onload = function () {
ligar de volta();
}
}
}
Isso não causará bloqueio de página, mas causará outro problema: o arquivo JavaScript carregado dessa maneira não está na estrutura DOM original; portanto, a função de retorno de chamada especificada no evento Dom-Pro-Pro (DomContentLoaded) e o evento Window.onload é inválido para ele.
No momento, pensaremos em usar algumas bibliotecas de funções externas para gerenciar efetivamente os problemas de carregamento de JS.
Vamos ao tópico principal e falar sobre lab.js
Lab.js
Se usarmos métodos tradicionais para carregar JS, o código que escrevemos geralmente terá o estilo mostrado no código a seguir.
A cópia do código é a seguinte:
<script src = "aaa.js"> </script>
<script src = "bbb-a.js"> </script>
<script src = "bbb-b.js"> </script>
<script type = "text/javascript">
initAaa ();
initbbbb ();
</script>
<script src = "ccc.js"> </script>
<script type = "text/javascript">
initcccc ();
</script>
Se usarmos o lab.js, para implementar a função de código acima, usamos o seguinte método
A cópia do código é a seguinte:
<!-Carregue a biblioteca Lab.js primeiro->
<script src = "http://webresource.c-ctrip.com/code/cquery/labjs/lab.js"> </script>
<script type = "text/javascript">
$ Lab
.script ("aaa.js"). wait () // o método .wait () sem parâmetros significa executar o arquivo javascript que acabou de carregar imediatamente
.script ("bbb-a.js")
.script ("bbb-b.js") // carrega aaa.js bbb-a.js bbb-b.js e depois execute initAaa initbbb
.wait (function () {// O método .wait () com parâmetros também executa imediatamente o arquivo JavaScript carregado agora, mas também executa a função especificada nos parâmetros.
initAaa ();
initbbbb ();
})
.script ("ccc.js") // carrega ccc.js e execute o método initccc após carregar o ccc.js
.wait (function () {
initcccc ();
});
</script>
Várias cadeias de laboratório de $ podem ser executadas ao mesmo tempo, mas são completamente independentes e não há relacionamento de pedidos. Se você deseja garantir que um arquivo JavaScript seja executado após outro arquivo, você pode escrevê -los apenas na mesma operação da cadeia. Somente quando certos scripts não estão completamente relacionados, considere dividi -los em diferentes cadeias de laboratório $, indicando que não há correlação entre eles.
Exemplos de uso geral
A cópia do código é a seguinte:
$ Lab
.script ("script1.js") // script1, script2 e script3 não dependem um do outro e podem ser executados em qualquer ordem
.script ("script2.js")
.script ("script3.js")
.wait (function () {
alerta ("Os scripts 1-3 estão carregados!");
})
.script ("script4.js") // você deve esperar pelo script1.js, script2.js, script3.js a serem executados antes da execução
.wait (function () {script4func ();});
A cópia do código é a seguinte:
$ Lab
.script ("script.js")
.script ({src: "script1.js", tipo: "text/javascript"})
.script (["script1.js", "script2.js", "script3.js"]))
.Script (function () {
// assumindo `_is_ie` definido pela página do host como verdadeiro no IE e false em outros navegadores
if (_is_ie) {
retornar "ie.js"; // Somente se no IE, este script será carregado
}
outro {
retornar nulo; // Se não estiver no IE, esta chamada de script será efetivamente ignorada
}
})
View Lab.js carregando informações no console
Se você deseja depurar ou visualizar cada informação de carregamento do JS no console, pode usar o método $ lab.setglobaldefaults. Para detalhes, consulte o exemplo do código.
A cópia do código é a seguinte:
<!-Carregue o laboratório de laboratório da CTRIP primeiro e baixe online->
<script type = "text/javascript" src = "http://webresource.c-ctrip.com/code/cquery/labjs/lab.js" charset = "gb2312"> </sCript>
<script type = "text/javascript">
$ Lab.setglobaldefaults ({Debug: true}) // Abra a depuração
$ Lab
// a primeira cadeia de execução
.script ('http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js')
.script ('http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js')
// a segunda cadeia de execução
.wait (function () {
//console.log(window.$)
//console.log(window._)
})
// a terceira cadeia de execução
.script ('http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js')
.script ('http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js')
// a quarta cadeia de execução
.wait (function () {
// console.log (plugin1function)
// console.log (plugin2function)
})
// a quinta cadeia de execução
.Script ('js/aaa.js')
.Script ('js/bbb.js')
// a sexta cadeia de execução
.wait (function () {
// console.log (module1Function)
// console.log (module2function)
})
</script>
Neste momento, abra o console e observe as informações, conforme mostrado na figura a seguir:
Eu acredito que você ficará surpreso com a função de depuração do lab.js quando vir isso. De fato, o lab.js é realmente bastante poderoso, e eu apenas entendo alguns de seus recursos simples. Anote primeiro e compartilhe com ele. É também para a conveniência de si mesmo no futuro.