Gama de uso:
Para projetos de gerenciamento de informações como OA, MIS, ERP, etc., o site não é considerado por enquanto.
Problemas encontrados:
Para concluir um projeto, muitas vezes você precisa fazer referência a muitos arquivos JS, como jQuery.js, easyui, etc. Também existem algumas colunas de arquivos JS que escrevi, então como esses arquivos podem ser carregados convenientemente? Se o arquivo mudar, como o cliente pode atualizar o cache a tempo? Seria ainda melhor se a eficiência da operação de pontos pudesse ser melhorada.
Alvo:
1. Ele pode facilmente fazer referência a arquivos JS.
2. Tente usar vários caches para evitar a leitura frequente de arquivos do servidor.
3. Se o arquivo JS for atualizado ou adicionado ou reduzido, o cliente precisará atualizar automaticamente e imediatamente.
4. Reutilização de arquivos JS.
Estrutura da página:
Geralmente, projetos como OA e MIS são implementados principalmente usando o FrameSet ou o iframe, o que traz os conceitos de página pai e página de filho. Podemos usar isso para fazer um barulho.
As páginas da Web podem ser divididas em três partes: Shell, página inicial, etiqueta, lista de dados, formulário (Adicionar, modificar). Como o método de carregar o JS aqui precisa usar a estrutura desta página, e é precisamente por esse motivo que o site não é suportado por enquanto.
Parece familiar ver esta foto. Sim, essa é a estrutura.
texto
Hoje em dia, quando se trata de aplicativos de versão da web, ele está cada vez mais dependendo de vários JS, como JQuery de terceiros, easyui, My97, etc., bem como vários JS escritos por mim. Cada vez mais funções a serem implementadas, mais e mais JS precisam ser usados e mais arquivos JS são modificados com frequência. Muitos problemas surgem, como escrever muitos <script src = ""> para cada página. Isso é muito problemático. Quantas páginas você precisa alterar para adicionar um novo arquivo JS? Como atualizar o arquivo JS imediatamente? Como tornar o cliente carregar JS mais rápido. Alguns arquivos JS também têm dependências. Como garantir a ordem de carregamento? Este artigo é sobre compartilhar minha solução.
Carga dinâmica
Obviamente, é problemático usar <cript> para carregar JS na página, então o que devo fazer? Depois de pensar nisso, ainda uso o carregamento dinâmico para resolvê -lo. Também pesquisei on -line e descobri que existem muitos métodos, incluindo aqueles escritos por eles e aqueles organizados em estruturas (como o Seejs). Às vezes, ainda sinto que sou mais hábil em fazer um, então pretendo escrever um sozinho.
Como carregar dinamicamente? Usando o método fornecido pelo jQuery? Tudo bem, mas a página deve se referir ao jQuery e ao JS que escrevi para carregar o arquivo JS. Em outras palavras, se você precisar escrever dois <Script> s em uma página, será problemático. Se você pode escrever um, não deve escrever dois. Embora seja apenas mais um, é realmente problemático ter mais um. Por isso, decidi esclarecer um pequeno método de carregamento dinâmico sozinho.
O que devo fazer se não puder escrever? Tia Baidu vem e ajuda. Depois de pesquisar todos os tipos de coisas, finalmente encontrei um método relativamente ideal, então vou usar isso.
A cópia do código é a seguinte:
/* As funções que implementam o carregamento dinâmico de JS vêm da Internet. Após um pouco de modificação, pode ser compatível com o IE10 */
var loadScript =
{
$$: function (id) {retornar document.getElementById (id); },
tag: function (element) {retorna document.getElementsByTagName (elemento); },
CE: function (elemento) {return document.createElement (element); },
JS: function (URL, retorno de chamada) {
var s = loadscript.ce ('script');
S.Type = "Texto/JavaScript";
s.src = url;
if (document.documentMode == 10 || document.documentMode == 9) {
s.onerror = s.onload = carregado;
} outro {
S.OnReadyStateChange = pronto;
s.onerror = s.onload = carregado;
}
loadScript.tag ('Head') [0] .AppendChild (S);
função pronta () {/*ie7.0/ie10.0*/
if (s.readyState == 'carregado' || s.readyState == 'complete') {
ligar de volta();
}
}
função carregada () {/*chrome/ie10.0*/
ligar de volta();
}
}
};
Ordem de carregamento
O novo código foi concluído. A seguir, é como carregar outros arquivos JS. Como existem muitos arquivos e certas dependências, pensarei sobre isso e farei um dicionário de arquivos JS e, em seguida, farei um pedido de carregamento e carregá -lo nesse pedido.
Para ser mais estável, decidi usar o método de carregar um por um, ou seja, carregar um JS e depois carregar outro JS. Isso garante dependências. É claro que a desvantagem é que a velocidade de carregamento será mais lenta. Geralmente, as páginas da web podem ser carregadas com vários arquivos JS, que serão mais rápidos.
Use cache
Geralmente, os navegadores terão um cache para vários recursos (como páginas da web, imagens, JS, CSS etc.), e não os baixam mais no servidor, se eles já os possuem. Parece bom, mas há dois problemas:
A. Como o navegador determina se o arquivo JS em cache é o mais recente?
B. O arquivo JS foi atualizado. Como forçar o navegador a atualizar?
Como o navegador juiz? Não sei muito sobre as etapas específicas, mas sei que há uma etapa para ir ao servidor para perguntar se o arquivo JS I é o mais recente e, em seguida, posso determinar se o cache local é o mais recente. Se for o mais recente, não vou incomodar. Caso contrário, vou baixar o mais recente. Ou seja, mesmo que o cliente já tenha um cache de arquivos JS, o navegador precisa confirmar se é o mais recente e ainda irá ao servidor para solicitar. Esta é uma luta. Obviamente, em geral, esse processo será muito rápido, mas às vezes esse processo será muito lento.
Portanto, é melhor tentar evitar o carregamento de JS. Portanto, a "reutilização de arquivos JS" é introduzida.
Atualize o arquivo JS
O arquivo JS foi atualizado, mas o navegador ainda está usando o arquivo JS anterior porque foi armazenado em cache e ele é teimoso de que o arquivo JS em cache é o mais recente. O que devo fazer?
A maneira mais fácil é carregar JS com um número de versão seguido por ele. Se houver uma atualização, o número da versão será +1. Por exemplo, xxx.js? V = 1. Depois que o arquivo JS é atualizado, é xxx.js? V = 2. Dessa forma, o JS será definitivamente atualizado.
Parece simples, mas como adicionar este número de versão? Como atualizar o próprio número da versão?
Reutilizar
Precisamos olhar para a figura acima primeiro, que é a estrutura da página, com uma página do shell (ou página inicial), que chamamos de página pai. Existem várias páginas carregadas por iframes e os adicionamos a subpáginas.
A abordagem geral é carregar jQuery.js na página pai e depois jQuery.js na página da criança. Obviamente, quando a subpagem está carregando o jQuery.js, ela é extraída diretamente do cache e geralmente não incomoda mais o servidor.
No entanto, como a página dos pais foi carregada, por que a página da criança precisa ser carregada novamente? Tudo bem carregá -lo diretamente na página pai? Eu procurei online e ninguém parecia fazer isso. Talvez eu seja muito alternativo, só quero implementar esse método. A vantagem é que todos os arquivos JS são carregados na página pai e a página infantil usa diretamente o JS carregado na página pai, para que a página infantil não precise mexer com os arquivos JS. Isso também pode ser mais eficiente. Afinal, mesmo se você usar o cache para carregar, precisará fazer um julgamento. Então, ao fazer uma ação de carregamento, ainda haverá uma pequena perda. Quanto mais arquivos JS, mais óbvio será.
Então, como implementá -lo parece simples de pensar sobre isso.
Use jQuery na página pai
Var aa = $ ('div'); // Encontre todos os divs na página dos pais
Isso é possível na subpagem?
Var bb = top. $ ('Div'); // O DIV pode ser encontrado, mas não é a Página Div da criança, mas a div na página pai.
O que está acontecendo? O motivo é o intervalo de pesquisa. JQuery tem três parâmetros. Geralmente usamos apenas o primeiro, e o último é ignorado. Então, qual é o segundo parâmetro? Esse é o intervalo de pesquisa. Onde o jQuery pesquisará quando não houver especificado? Pesquise na página que carrega o jQuery, em vez de pesquisar na página que chama $.
A solução também é muito simples, basta adicionar um parâmetro
Var bb = top. $ ('Div', documento); // Especifique o intervalo de pesquisa: documento da subpagem
Espere, isso parece muito irritante. Ao escrever um script, também devemos considerar se esse script é executado na página pai ou na página da criança?
OK, faça um pacote simples para evitar esse problema. Escreva uma função na subpagem
A cópia do código é a seguinte:
função $ (p1) {
Top de retorno. $ (P1, documento);
}
Ok, o trabalho é feito? Claro que não! Para prever o que acontece a seguir, ouça a próxima quebra.
PS: Visualização do próximo episódio. É o código de implementação específico e existem algumas idéias e idéias. Não sei se você tem mais alguma coisa para saber. Nesse caso, responda abaixo. Obrigado primeiro.