1. Namespace :
O espaço para nome em JS é expandido usando as propriedades do objeto. Por exemplo, um usuário define um objeto A, com atributos B e C atributos sob o objeto A, e os atributos B e C são objetos. Portanto, a = {b: {}, c: {}}, então o usuário pode definir o mesmo método e atribuir no objeto B e no objeto C. Portanto, B e C pertencem a diferentes namespaces. Quando chamamos os métodos nos objetos B e C, podemos chamá -los através de Ablike () e ACLike (). Claro A é uma propriedade no objeto da janela.
Mas há uma situação, por exemplo: a página boke.js apresenta jQuery.js e prototype.js (eles adicionarão $ atributos ao objeto da janela) e ocorre um conflito.
Portanto, há noconflict () no jQuery.js para lidar com conflitos. Processo de execução: a página introduz o protótipo primeiro. Neste momento, o protótipo ocupará o atributo $ da janela. Então, quando o JQuery for introduzido, o JQuery armazenará o atributo $ da janela anterior em _ $ e, em seguida, usará o atributo $ por si só. Neste momento, você pode ligar para o método jQuery através de $. Quando você não precisa usar o jQuery, mas deseja usar o protótipo, você pode chamar $ .noconflict () e, em seguida, $ será restaurado para um objeto de protótipo. No momento, você pode usar o método de protótipo através de $.
A cópia do código é a seguinte:
var _ $ = janela. $, _jQuery = window.jQuery;
noconflict: function (profundidade) {
janela. $ = _ $;
if (profundidade) window.jQuery = _jQuery;
retornar jQuery; // Valor de retorno, você pode atribuir valor a outros nomes de variáveis, como o Chaojidan, para que você possa chamar métodos em jQuery através de Chaojidan.
}
2. Extensão do objeto :
Se o objeto de namespace possui, precisamos estender a função. Por exemplo: preciso copiar todas as propriedades e métodos do objeto A no objeto B. Não preciso escrever o código um por um em objetos B.
A cópia do código é a seguinte:
Função Mix (Target, Source) {
var args = [] .slice.call (argumentos), i = 1,
iscover = typeof args [args.length-1] == "boolean"? args.pop (): true; // Não está escrito, o padrão é verdadeiro, o padrão é substituído.
if (args.length == 1) {
Target =! This.Window? esse:{};
// Se houver apenas um parâmetro de objeto, estenda este objeto. Por exemplo: eu chamo Mix (b) no contexto do objeto A, então isso é A neste momento; portanto, as propriedades e os métodos de B serão adicionados ao objeto A. No entanto, se o mix (b) for chamado na janela, as propriedades e métodos no objeto B serão adicionados a um objeto vazio e retornará esse objeto vazio para impedir que as propriedades e métodos de superando o mesmo nome do mesmo nome do Janela no Janela. (Somente objetos de janela têm propriedades de janela)
i = 0;
}
while ((fonte = args [i ++])) {
para (chave na fonte) {
if (iScover ||! (Chave no Target)) // Se substituir, atribua diretamente o valor. Se não estiver substituindo, primeiro determine se a chave existe no objeto de destino. Se existir, nenhum valor será atribuído.
{
Target [key] = fonte [chave];
}
}
}
alvo de retorno;
}
Entrevistadores de grandes empresas gostam de verificar as matrizes. Você pode conferir. Cada item da matriz pode ser um objeto e, mesmo que o objeto A e o objeto B tenham as mesmas propriedades e métodos, eles não são iguais. Strings e números, como 123 e "123", podem ser encontrados de maneira completa pesquisando online.
3.Arrayização :
Existem muitos objetos de matriz de classe no navegador, argumentos, document.forms, document.links, form.lements, document.getElementsbytagname, ChildNodes, etc. (htmlcollection, nodelist).
Há também um objeto personalizado com um estilo de escrita especial
A cópia do código é a seguinte:
var Arraylike = {
0: "A",
1: "B",
Comprimento: 2
}
Este objeto é escrito como o objeto jQuery.
Precisamos converter o objeto de matriz de classe acima mencionado em um objeto de matriz.
[] .slice.call O método pode ser resolvido. No entanto, o HTMLCollection e o NodeList na versão antiga do IE não são subclasses do objeto, e o método [] .slice.call não pode ser usado.
Portanto, podemos substituir um método de fatia.
A cópia do código é a seguinte:
A.slice = window.dispatchEvent? function (nós, start, end) {return [] .slice.call (nós, start, end, end); }
// Se a janela tiver a propriedade DispatchEvent, ela prova que ele suporta o método e a detecção de habilidades do [] .slice.call.
: function (nós, start, fim) {
var ret = [], n = modes.length;
if (end == indefinido || typeof end === "número" && isfinite (end)) {// && prioridade é maior que ||, então o fim não é escrito ou o fim é um número finito e digite
start = parseint (start, 10) || 0; // Se o início não existir ou não for um número, o valor será atribuído a 0.
end = end == indefinido? n: parseint (final, 10); // Se o fim não existir, o valor é n.
if (iniciar <0) iniciar + = n;
if (end <0) end + = n;
if (end> n) end = n;
for (var i = start; i <end; i ++) {
ret [i-start] = nós [i]; // versão baixa ie usa o formulário de atribuição de matriz
}
}
retornar retorno;
}
4. Julgamento do tipo :
Existem cinco tipos de dados simples de JS: nulo, indefinido, booleano, número, string.
Também existem tipos de dados complexos: objeto, função, regexp, data, objetos personalizados, como: pessoa, etc.
O TypeOf é geralmente usado para julgar booleano, número, string, instanceof é geralmente usado para julgar os tipos de objetos. Mas todos eles têm falhas. Por exemplo: a instância da matriz no FireMe não é uma instância de matriz na janela dos pais, chamando a instância do retorno retornará falsa. (Esta pergunta foi feita durante o recrutamento de 360 campus). TIPO DE NOVO BOOLEAN (TRUE) // "Objeto", envolva o objeto. Booleano, número e string são três tipos de objetos de embalagem, discutidos na programação do programa JS Advanced.
Muitas pessoas usam o TypeOf Document.Todos para determinar se é IE. De fato, isso é muito perigoso. Como o Google e o Firefox também gostam desta propriedade, essa situação ocorre no Google Chrome: typeof document.all // indefinido, no entanto, document.all // htmlallcollection, usando o tipoof para determinar que é indefinido, mas esse valor de propriedade pode ser lido.
Mas agora você pode usar o método object.prototype.toString.Call para determinar o tipo. Este método pode gerar diretamente [[classe]] dentro do objeto. No entanto, o IE8 e os objetos de janela abaixo não podem usar esse método. Você pode usar janela == document // true document == janela // false ie6,7,8.
NodeType (1: Elemento 2: Atributo 3: Texto Texto 9: Documento)
Métodos para julgar tipos em jQuery:
A cópia do código é a seguinte:
Class2Type = {}
jQuery.each ("Número boolean String Função Array Data regexp Object" .split (""), função (i, nome) {
classe2Type ["[objeto" + nome + "]] = name.tolowercase ();
// class2type = {"[objeto booleano]": boolean, "[número do objeto]": número, "[objeto string]": string, "[função objeto]": function, "[objeto matriz]": matriz ......}
});
jQuery.Type = function (obj) {// se obj for nulo, indefinido, etc., a string "nula", "indefinida". Caso contrário, chame o método da tostragem, julgue se puder ser chamado e, se for possível, retorne o objeto (janela, DOM e outros objetos ActiveXObject na versão inferior do IE)
retornar obj == null? String (OBJ): Class2Type [ToString.Call (OBJ)] || "objeto";
}
5.domready
Ao operar o nó DOM por JS, a página deve construir a árvore Dom. Portanto, o método Window.onload geralmente é usado. No entanto, o método de Onload não será executado após a carga de todos os recursos. Para fazer com que a página responda às operações do usuário mais rapidamente, precisamos usar apenas as operações do JS após a construção da árvore DOM. Em vez de esperar que todos os recursos sejam carregados (imagem, flash).
Portanto, ocorre o evento DomContentLoaded, que é acionado após a construção da árvore DOM. No entanto, a versão antiga do IE não a suporta, então há um hack.
A cópia do código é a seguinte:
if (document.readyState === "complete") {// Caso o arquivo JS seja carregado somente após o carregamento do documento DOM. Neste momento, o método FN (o método que você deseja executar) é executado por esse julgamento. Porque depois que o documento é carregado, o valor do documento.ReadyState está completo
setTimeout (FN); // Execute assíncrono, deixe o código por trás dele ser executado primeiro. Este é o uso no jQuery, você não precisa entender.
}
caso contrário, if (document.addeventListener) {// suporta o evento DomContentLoaded
document.addeventListener ("domcontentloaded", fn, false); // bolhas
window.addeventListener ("Load", fn, false); // Caso o arquivo JS seja carregado após a construção da árvore DOM. Desta vez, o evento DomContentLoaded não será acionado (o gatilho foi concluído), ele acionará apenas o evento de carga
}
outro{
Document.attachevent ("ONRADESTATECHANGE", function () {// Para a segurança dos iframes no IE, a execução do Onload terá prioridade e, às vezes, não.
if (document.readyState === "complete") {
fn ();
}
});
Window.attachevent ("Onload", FN); // Sempre desempenhará um papel no caso de outros eventos de escuta não forem recuperados; portanto, pelo menos o método FN pode ser acionado pelo evento OnLoad.
var top = false; // veja se está no iframe
tente {// window.frameElement é o objeto iframe ou quadro que contém esta página. Caso contrário, é nulo.
top = window.frameElement == null && document.documentElement;
} catch (e) {}
if (top && top.doscroll) {// se não houver iframe, e é ie
(função DoscrollCheck () {
tentar{
top.Doscroll ("Esquerda"); // No IE, se a árvore Dom for construída, você pode chamar o método Doscroll de HTML
} catch (e) {
retornar setTimeout (DoscrollCheck, 50); // Se ainda não foi construído, continue ouvindo
}
fn ();
})
}
}
O método FN deve conter a remoção de todos os eventos de ligação.
Obviamente, o IE também pode usar o script adiar hack. O princípio é: o script especificado pelo adiamento será executado somente depois que a árvore Dom for construída. No entanto, isso requer a adição de arquivos JS adicionais e raramente é usado em bibliotecas separadas.
Princípio do uso: Adicione tags de script ao documento e use script.src = "xxx.js" para ouvir o evento OnreadyStateChange do script. Quando this.ReadyState == "Complete", o método FN é executado.
Em outras palavras, somente depois que o DOM for construído, xxx.js será executado, e este.
Os acima são as notas de leitura para o primeiro capítulo do JavaScript Framework Design. O conteúdo é relativamente simples, o que facilita para todos entender melhor o conteúdo básico deste capítulo.