1. Espacio de nombres :
El espacio de nombres en JS se expande utilizando las propiedades del objeto. Por ejemplo, un usuario define un objeto A, con atributos B y atributos C debajo del objeto A, y los atributos B y los atributos C son objetos. Por lo tanto, a = {b: {}, c: {}}, entonces el usuario puede definir el mismo método y atributo en el objeto B y el objeto C. Por lo tanto, B y C pertenecen a diferentes espacios de nombres. Cuando llamamos a los métodos en los objetos B y C, podemos llamarlos a través de Ablike () y acike (). Por supuesto, A es una propiedad en el objeto de la ventana.
Pero hay una situación, por ejemplo: la página Boke.js presenta jQuery.js y Prototype.js (agregarán $ atributos al objeto de la ventana) y se produce un conflicto.
Por lo tanto, hay nofonflict () en jQuery.js para manejar los conflictos. Proceso de ejecución: la página primero presenta un prototipo. En este momento, el prototipo ocupará el atributo $ de la ventana. Luego, cuando se presenta jQuery, jQuery almacenará el atributo $ de la ventana anterior en _ $, y luego usará el atributo $ por sí solo. En este momento, puede llamar al método jQuery a través de $. Cuando no necesita usar jQuery pero desea usar prototipo, puede llamar a $ .noconflict (), y luego $ se restaurará a un objeto prototipo. En este momento, puede usar el método prototipo a través de $.
La copia del código es la siguiente:
var _ $ = Window. $, _jquery = window.jquery;
noconflict: function (profundo) {
ventana. $ = _ $;
if (profundo) window.jquery = _jquery;
regresar jQuery; // Valor de retorno, puede asignar valor a otros nombres de variables, como Chaojidan, para que pueda llamar a los métodos en jQuery a través de Chaojidan.
}
2. Extensión del objeto :
Si el objeto de espacio de nombres tiene, necesitamos extender la función. Por ejemplo: necesito copiar todas las propiedades y métodos del objeto A en el objeto B. No tengo que escribir el código uno por uno en objetos B.
La copia del código es la siguiente:
Function Mix (Target, Source) {
var args = [] .slice.call (argumentos), i = 1,
ISCover = typeof args [args.length-1] == "boolean"? args.pop (): verdadero; // No escrito, el valor predeterminado es verdadero, el valor predeterminado se anula.
if (args.length == 1) {
Target =! this.nwindow? este:{};
// Si solo hay un parámetro de objeto, extienda este objeto. Por ejemplo: llamo a Mix (b) en el contexto del objeto A, entonces esto es A en este momento, por lo que las propiedades y métodos de B se agregarán al objeto A. Sin embargo, si se llama a la mezcla (b) en la ventana, las propiedades y los métodos en el objeto B se agregarán a un objeto vacío y devolverán este objeto vacío para evitar que las propiedades y métodos de sobreescritura del mismo nombre en el objeto de la ventana. (Solo los objetos de la ventana tienen propiedades de la ventana)
i = 0;
}
while ((fuente = args [i ++])) {
para (clave en la fuente) {
if (isCover ||! (clave en el objetivo)) // Si sobrescribe, asigne directamente el valor. Si no se sobrescribe, primero determine si la clave existe en el objeto objetivo. Si existe, no se asignará ningún valor.
{
objetivo [clave] = fuente [clave];
}
}
}
objetivo de retorno;
}
Los entrevistadores de grandes empresas les gusta consultar las matrices. Puedes verlo. Cada elemento en la matriz puede ser un objeto, e incluso si el objeto A y el objeto B tienen las mismas propiedades y métodos, no son iguales. Las cadenas y números, como 123 y "123", se pueden encontrar de manera completa buscando en línea.
3.arrayización :
Hay muchos objetos de matriz de clases en el navegador, argumentos, documentos.forms, document.links, form.elements, document.getElementsBytagName, infantilios, etc. (htmlCollection, nodelist).
También hay un objeto personalizado con un estilo de escritura especial.
La copia del código es la siguiente:
var arraylike = {
0: "A",
1: "B",
Longitud: 2
}
Este objeto está escrito como el objeto jQuery.
Necesitamos convertir el objeto de matriz de clase mencionado anteriormente en un objeto de matriz.
[] .Slice.Call El método se puede resolver. Sin embargo, la HTMLCollection y Nodelist en la versión anterior de IE no son subclases de objeto, y el método [] .slice.call no se puede usar.
Por lo tanto, podemos anular un método de corte.
La copia del código es la siguiente:
A.slice = window.dispatchEvent? función (nodos, inicio, final) {return [] .slice.call (nodos, inicio, final); }
// Si la ventana tiene la propiedad DispatchEvent, prueba que admite el método y la detección de habilidades [] .slice.call.
: function (nodos, inicio, final) {
var ret = [], n = nodo.length;
if (end == Undefined || typeOf end === "número" && isfinite (end)) {// && La prioridad es mayor que ||, por lo que el final no está escrito, o el final es un número finito e ingrese
inicio = parseint (inicio, 10) || 0; // Si el inicio no existe o no es un número, entonces el valor se asigna a 0.
End = End == Undefined? n: parseint (final, 10); // Si el final no existe, el valor es n.
if (inicio <0) inicio + = n;
if (end <0) end + = n;
if (end> n) end = n;
para (var i = start; i <end; i ++) {
ret [i-start] = nodos [i]; // Versión baja, es decir, utiliza el formulario de asignación de matriz
}
}
regreso de regreso;
}
4. Tipo de juicio :
Hay cinco tipos de datos simples de JS: nulo, indefinido, booleano, número, cadena.
También hay tipos de datos complejos: objeto, función, regexp, fecha, objetos personalizados, como: persona, etc.
TypeOf generalmente se usa para juzgar booleano, número, cadena, instancia de instancia generalmente se usa para juzgar los tipos de objetos. Pero todos tienen defectos. Por ejemplo: la instancia de matriz en el FireMe no es una instancia de matriz en la ventana principal, llamando a instancia de devolver falso. (Esta pregunta se hizo durante el reclutamiento del campus 360). typyOf New Boolean (True) // "Object", envuelva el objeto. Boolean, Number y String son tres tipos de objetos de empaque, que se discuten en la programación de programas avanzados JS.
Muchas personas usan documentos de typeOf. Todo para determinar si es, es decir. De hecho, esto es muy peligroso. Debido a que Google y Firefox también les gusta esta propiedad, esta situación ocurre en Google Chrome: TypeOf Document.all // Undefined Sin embargo, documento.all // htmlallCollection, usando typeOf para determinar que está indefinido, pero este valor de la propiedad se puede leer.
Pero ahora puede usar el método Object.Prototype.ToString.Call para determinar el tipo. Este método puede emitir directamente [[clase]] dentro del objeto. Sin embargo, los objetos de la ventana IE8 y debajo no pueden usar este método. Puede usar Window == Document // True Document == Window // False IE6,7,8.
Nodetype (1: Elemento 2: Atributo 3: Texto de texto 9: Documento)
Métodos para juzgar tipos en jQuery:
La copia del código es la siguiente:
class2Type = {}
jQuery.each ("Número booleano de cadena de cadena de matriz de matriz regexp objeto" .split (""), function (i, name) {
class2Type ["[Object" + Name + "]"] = name.tOlowerCase ();
// class2Type = {"[Object Boolean]": Boolean, "[Número de objeto]": número, "[String de objeto]": String, "[Función de objeto]": function, "[Array de objeto]": Array ......}
});
jQuery.type = function (obj) {// Si obj es nulo, indefinido, etc., la cadena "nula", "indefinida". Si no, llame al método de tostración, juzgue si se puede llamar, y si es posible, devuelva el objeto (ventana, DOM y otros objetos ActiveXObject en la versión inferior de IE)
regresar obj == nulo? String (obj): class2Type [toString.call (obj)] || "objeto";
}
5.domready
Al operar el nodo DOM por JS, la página debe construir el árbol DOM. Por lo tanto, el método de ventana. Sin embargo, el método de Onload no se ejecutará después de que se carguen todos los recursos. Para que la página responda a las operaciones del usuario más rápido, solo necesitamos usar operaciones JS después de construir el árbol DOM. En lugar de esperar a que se carguen todos los recursos (imagen, flash).
Por lo tanto, se produce el evento DomContentLOaded, que se activa después de construir el árbol DOM. Sin embargo, la versión anterior de IE no lo admite, por lo que hay un truco.
La copia del código es la siguiente:
if (document.readyState === "Complete") {// En caso de que el archivo JS se cargue solo después de cargar el documento DOM. En este momento, el método FN (el método que desea ejecutar) se ejecuta a través de este juicio. Porque después de cargar el documento, el valor de document.readyState está completo
setTimeOut (fn); // Ejecutar asíncronamente, deje que el código detrás de él se ejecute primero. Este es el uso en jQuery, no necesitas entenderlo.
}
else if (document.addeventListener) {// admite el evento DomContentLoaded
document.AdDeventListener ("DomContentLoaded", fn, falso); // burbujas
Window.AdDeventListener ("Load", fn, falso); // En caso de que el archivo JS se cargue después de construir el árbol DOM. Esta vez, el evento DomContentLoaded no se activará (el disparador se ha completado), solo activará el evento de carga
}
demás{
document.attachevent ("onreadyStateChange", function () {// Para la seguridad de Iframes en IE, la ejecución de Onload tendrá prioridad y, a veces, no.
if (document.readyState === "Complete") {
fn ();
}
});
window.attachevent ("onload", fn); // Siempre desempeñará un papel en caso de que no se recuperen otros eventos de escucha, por lo que al menos el método FN puede ser activado por el evento Onload.
var top = false; // Ver si está en el iframe
Prueba {// Window.FrameElement es el objeto iframe o marco que contiene esta página. Si no, es nulo.
top = window.frameElement == null && document.documentelement;
} catch (e) {}
if (top && top.doscroll) {// Si no hay iframe, y es es decir
(función doscrollcheck () {
intentar{
top.doscroll ("izquierda"); // en IE, si el árbol DOM está construido, puede llamar al método de Doscroll de HTML
} catch (e) {
return setTimeout (Doscrollcheck, 50); // Si aún no se ha construido, continúa escuchando
}
fn ();
})
}
}
El método FN debe contener la eliminación de todos los eventos de enlace.
Por supuesto, es decir, también puede usar script diferir hack. El principio es: el script especificado por Difer se ejecutará solo después de que se construya el árbol DOM. Sin embargo, esto requiere agregar archivos JS adicionales y rara vez se usa en bibliotecas separadas.
Principio de uso: Agregar etiquetas de script al documento y use script.src = "xxx.js" para escuchar el evento OnreadyStateChange de script. Cuando este.readyState == "Complete", se ejecuta el método FN.
En otras palabras, solo después de que se construya el DOM se ejecutará xxx.js, y este.
Las anteriores son las notas de lectura para el primer capítulo del diseño del marco JavaScript. El contenido es relativamente simple, lo que hace que sea más fácil para todos comprender mejor el contenido básico de este capítulo.