Me han recopilado más preguntas en todo el camino, y también hay años anteriores. No se garantiza que las respuestas sean correctas. Si hay errores o mejores soluciones, corrijalos.
Adjunto el segundo artículo: Preguntas de la entrevista de prueba escrita de 2014 para BAT y las principales compañías de Internet-HTML, CSS
Las preguntas anteriores serán muy básicas y cuanto más vayas, más serás, más serás en profundidad.
Junior JavaScript:
1. ¿Qué tipo de lenguaje es JavaScript y cuáles son sus características?
No hay respuesta estándar.
2. ¿Cuáles son los tipos de datos de JavaScript?
Tipos de datos básicos: cadena, booleano, número, indefinido, nulo
Tipo de datos de referencia: objeto (matriz, fecha, regexp, función)
Entonces, la pregunta es, ¿cómo determinar si una variable es un tipo de datos de matriz?
• Método 1. Determine si tiene "propiedades de matriz", como el método SLICE (). Puede definir el método de corte para esta variable usted mismo, por lo que a veces falla
• Método 2. OBJ La instancia de la matriz es incorrecta en algunas versiones de IE
• Método 3. Existen vulnerabilidades en ambos métodos. El nuevo método Array.IsArray () se define en ECMA Script5 para garantizar su compatibilidad. El mejor método es el siguiente
if (typeof array.isArray === "Undefined") {array.isArray = function (arg) {return object.prototype.ToString.call (arg) === "[Array de objetos]"}; }3. En el cuadro de entrada de entrada con una ID conocida, espero obtener el valor de entrada de este cuadro de entrada. ¿Cómo hacerlo? (No hay marco de terceros)
La copia del código es la siguiente: document.getElementById ("ID"). Valor
4. ¿Cómo obtener todas las casillas de verificación en la página? (No hay marco de terceros)
var domlist = document.getElementsBytagName ('input') var checkBoxList = []; var len = domlist.length; // caché a la variable local mientras (len--) {// use while será más eficiente que para bucle if (domlist [len] .type == 'Checkbox') {checkboxList.push (Domlist [len]); }}5. Establezca el contenido HTML de un DIV con una ID conocida en XXXX, y el color de fuente está configurado en negro (sin marcos de terceros)
La copia del código es la siguiente:
var dom = document.getElementById ("id");
dom.innerhtml = "xxxx"
dom.style.color = "#000"
6. Cuando se hace clic en un nodo DOM, esperamos poder ejecutar una función. ¿Qué debemos hacer?
• Vinte los eventos directamente en el DOM: <div onClick = ”test ()”> </div>
• Enlace a través de OnClick en JS: xxx.OnClick = test
• Enlace por adición del evento: AddEventListener (xxx, 'Haga clic', prueba)
Entonces, la pregunta es, ¿cuáles son los modelos de transmisión de eventos de JavaScript?
• "Burbuja de eventos": los eventos comienzan a ser aceptados por los elementos más específicos y luego se extienden hacia arriba paso a paso
• "Captura de eventos": los eventos se reciben primero por el nodo menos específico, y luego hacia abajo paso a paso, hasta el más específico
• "DOM Event Flow": Tres etapas: captura de eventos, etapa objetivo, burbuja de eventos
7. ¿Qué son Ajax y Json, sus pros y contras?
AJAX es JavaScript y XML asíncrono para implementar la interacción de datos asíncronos en las páginas web.
ventaja:
• ¿Puede la página cargar contenido local sin sobrecargar todo el contenido, reduciendo la cantidad de transmisión de datos?
• Evite los usuarios constantemente refrescantes o saltar páginas para mejorar la experiencia del usuario
defecto:
• No es amigable con los motores de búsqueda (
• El costo de implementar las funciones delantera y posterior en AJAX es alto
• Puede causar un aumento en el número de solicitudes
• Restricciones de problemas de dominio cruzado
JSON es un formato de intercambio de datos ligero, un subconjunto de ECMA
Ventajas: Ligeros, fácil de leer y escribir por personas, fácil de analizar por máquinas (JavaScript), y admite tipos de datos compuestos (matrices, objetos, cadenas, números)
8. Vea cuál es la salida del siguiente código? Explica la razón.
La copia del código es la siguiente:
var a;
alerta (typeOf a); // indefinido
alerta (b); // Informar un error
Explicación: Undefined es un tipo de datos con solo un valor. Este valor está "indefinido". Cuando se declara una variable usando VAR pero su asignación no se inicializa, el valor de esta variable no está definido. Y B informará un error porque no se declara. Tenga en cuenta que las variables no declaradas son diferentes de las declaradas no asignadas.
9. Mire el siguiente código, ¿qué salidas? Explica la razón.
La copia del código es la siguiente:
var a = nulo;
alerta (typeOf a); //objeto
Explicación: NULL es un tipo de datos con solo un valor, y este valor es nulo. Indica que se dirige un puntero nulo, por lo que el uso de la detección de tipos de tipos devolverá "objeto".
10. Mire el siguiente código, ¿qué salidas? Explica la razón.
var indefinido; indefinido == nulo; // true1 == True; // true2 == True; // false0 == falso; // true0 == ''; // truenan == nan; // falso [] == falso; // true [] ==! []; // verdadero
• Undefinado es igual a NULL, pero no idéntico (===)
• Cuando uno es número y el otro es una cadena, intentará convertir la cadena en número
• Intente convertir booleano en número, 0 o 1
• Intente convertir el objeto a número o cadena, dependiendo del tipo de otra cantidad de comparación
• Por lo tanto, para el juicio de 0 y cadenas vacías, se recomienda usar "===". "===" determinará primero los tipos de valor en ambos lados, y será falso si los tipos no coinciden.
Entonces, la pregunta es, mire el siguiente código, qué salida es y ¿por qué es el tipo de FOO?
La copia del código es la siguiente:
var foo = "11"+2- "1";
console.log (foo);
console.log (typeof foo);
Después de la ejecución, el valor de FOO es 111 y el tipo de FOO es el número.
La copia del código es la siguiente:
var foo = "11" +2+ "1"; // experimenta la diferencia entre agregar una cadena '1' y restar una cadena '1'
console.log (foo);
console.log (typeof foo); Después de la ejecución, el valor de FOO es 1121 (aquí está el empalme de cadena), y el tipo de FOO es cadena.
11. Mire el código para dar la respuesta.
La copia del código es la siguiente:
var a = nuevo objeto ();
A.valor = 1;
b = a;
B. Valor = 2;
alerta (A.Value);
Respuesta: 2 (Examine los detalles del tipo de datos citado)
12. La matriz var stringArray = ["this", "is", "Baidu", "Campus"] es conocida y las salidas de alerta "Este es el campus de Baidu".
Respuesta: Alert (StringArray.Join (""))
Entonces, el problema es que se sabe que la cadena foo = "get-element-by-id", escriba una función para convertirla en notación de camello "getElementByid".
function combo (msg) {var arr = msg.split ("-"); var len = arr.length; // almacenar arr.length en una variable local puede mejorar la eficiencia del bucle for (var i = 1; i <len; i ++) {arr [i] = arr [i] .charat (0) .toupperCase ()+arr [i] .substr (1, arr [i] .length-1); } msg = arr.join (""); return msg;}(Investigue la API básica)
13.Var NumberArray = [3,6,2,4,1,5]; (Investigue la API básica)
1) Implemente el orden inverso de esta matriz y salida [5,1,4,2,6,3]
2) Implementar la disposición de orden descendente de la matriz y salida [6,5,4,3,2,1]
var numberArray = [3,6,2,4,1,5]; NumberArray.Reverse (); // 5,1,4,2,6,3NumberArray.sort (función (a, b) {// 6,5,4,3,2,1 return ba;})14. Fecha de salida de hoy, en forma de A yyyy-MM-DD. Por ejemplo, hoy es el 26 de septiembre de 2014, luego salida 2014-09-26
var d = new Date (); // Obtener el año, GetLyFulfyear () Devuelve un número de 4 dígitos var año = d.getflyar (); // Obtén el mes, el mes es bastante especial, 0 es enero y 11 es diciembre VAR mes = d.getMonth () + 1; // Conviértase en dos dígitos Mes = mes <10? '0' + mes: mes; // Obtener el día var day = d.getDate (); día = día <10? '0' + día: día; alerta (año + '-' + mes + '-' + día);
15. Reemplace {$ id} en la cadena "<tr> <td> {$ id} </td> <td> {$ name} </td> </tr>" con 10 y {$ name} con Tony (usando expresiones regulares)
Respuesta: "<tr> <td> {$ id} </td> <td> {$ id} _ {$ name} </td> </tr>". Reemplazar (/{/$ id}/g, '10'). Reemplazar (/{/$ name}/g, 'tony');
16. Para garantizar la seguridad de la salida de la página, a menudo necesitamos escapar de algunos caracteres especiales. Escriba una función escapehtml y escape <,>, & ","
función escapeHtml (str) {return str.replace (/[<<> "&]/g, function (match) {switch (match) {case" <": return" <"; case"> ": return"> "; case" & ": return" & "; case"/": return";}});};17.foo = foo || bar, ¿qué significa esta línea de código? ¿Por qué escribo de esta manera?
Respuesta: if (! Foo) foo = bar; // Si existe Foo, el valor permanece sin cambios, de lo contrario el valor de la barra se asigna a Foo.
Expresión de cortocircuito: como expresiones de operando de "&&" y "||" Los operadores, cuando se evalúan estas expresiones, el proceso de evaluación terminará siempre que el resultado final pueda determinarse como verdadero o falso. Esto se llama evaluación de cortocircuito.
18. Mirando el siguiente código, ¿qué se emitirá? (Mejora de la declaración variable)
La copia del código es la siguiente:
var foo = 1;
función(){
console.log (foo);
var foo = 2;
console.log (foo);
}
Respuesta: salida indefinida y 2. El código anterior es equivalente a:
var foo = 1; function () {var foo; console.log (foo); // indefinido foo = 2; console.log (foo); // 2; }Las declaraciones de funciones y las declaraciones variables se promueven implícitamente a la parte superior del alcance actual por el motor JavaScript, pero solo promover el nombre no promueve la parte de asignación.
19. Use JS para seleccionar aleatoriamente 10 números entre 10 y 100, guárdelos en una matriz y ordenelos.
var iarray = []; función getRandom (inicio, IEND) {var ichoice = isStart - Iend +1; return math.floor (math.random () * ichoice+isstart;} para (var i = 0; i <10; i ++) {iarray.push (getRandom (10,100));} iarray.sort ();20. Combine los dos números y elimine el segundo elemento.
La copia del código es la siguiente:
var array1 = ['a', 'b', 'c'];
var barra = ['d', 'e', 'f'];
var carray = array1.concat (barra);
Carray.splice (1,1);
21. Cómo agregar, eliminar, mover, copiar, crear y encontrar nodos (JS nativos, conceptos básicos reales, sin escritura detallada de cada paso)
1) Crear un nuevo nodo
creatocumentFragment () // crea un fragmento dom
createElement () // crear un elemento específico
createTeTextNode () // Crear un nodo de texto
2) Agregar, eliminar, reemplazar, insertar
appendChild () // agregar
removechild () // eliminar
reemplazar () // reemplazar
insertbefore () // insertar
3) Buscar
getElementsBytagName () // por nombre de la etiqueta
getElementsByName () // se pasa el valor de la propiedad de nombre del elemento
getElementById () // a través de ID de elemento, singularidad
22. Hay tal URL: http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e. Escriba un programa JS para extraer cada parámetro GET en la URL (el nombre del parámetro y el número de parámetros son inciertos), y devolverlo a una estructura JSON en forma de valor clave, como {A: '1', B: '2', C: '', D: 'XXX', E: Indefinado}.
Respuesta:
function serilyUrl (url) {var resultado = {}; url = url.split ("?") [1]; var map = url.split ("&"); for (var i = 0, len = map.length; i <len; i ++) {resultado [map [i] .split ("=") [0]] = map [i] .split ("=") [1]; } resultado de retorno;}23. ¿Cuál es la diferencia entre el constructor de expresión regular var reg = new Regexp ("xxx") y la expresión regular literal var reg = //? Buzón de expresión regular coincidente?
Respuesta: Cuando se usa el constructor REGEXP (), no solo necesita escapar de las citas (es decir, "medios"), sino que también debe duplicar la descarga de retroceso (es decir, // significa A /). Usar literales de expresión regulares es más eficiente.
Marabnización regular del correo electrónico:
La copia del código es la siguiente: var regmail = /^(bar-Za-z0-9_-font>)+@(ba-Za-Z0-9_-font>)+((.+A-ZA-Z0-9_-font> =2,3') =1,2})/;
24. Mire el siguiente código y proporcione el resultado de la salida.
La copia del código es la siguiente:
para (var i = 1; i <= 3; i ++) {
setTimeOut (function () {
console.log (i);
}, 0);
};
Respuesta: 4 4 4.
Causa: el procesador de eventos JavaScript no se ejecutará hasta que el hilo esté inactivo. Entonces, la pregunta es, ¿cómo hacer la salida del código anterior 1 2 3?
for (var i = 1; i <= 3; i ++) {setTimeout ((function (a) {// ejecutar instantáneamente la función console.log (a);}) (i), 0); }; 1 // Salida 2325. Escriba una función para borrar los espacios antes y después de la cadena. (Compatible con todos los navegadores)
Use la interfaz incorporada TRIM (), considerando la compatibilidad:
if (? }} // prueba la función var str = " /t /n prueba de prueba" .trim (); alerta (str == "cadena de prueba"); // Alertas "verdadero"
26. ¿Cuáles son los roles de Callee y la persona que llama en JavaScript?
Respuesta:
La persona que llama devuelve una referencia a la función que llama a la función actual;
Callee devuelve la función de función que se está ejecutando, es decir, el cuerpo del objeto de función especificado.
¿Entonces la pregunta es? Si un par de conejos dan a luz a un par de conejos cada mes; Un par de nuevos conejos darán a luz a los conejos del segundo mes; Suponiendo que cada par de conejos es una hembra y un hombre, ¿cuántos pares de conejos pueden reproducirse un par de conejos en el mes N? (Use Callee para completar)
VAR result = []; function fn (n) {// La secuencia típica de fibonacci if (n == 1) {return 1; } else if (n == 2) {return 1; } else {if (resultado [n]) {return resultado [n]; } else {//argumument.callee () significa fn () resultado [n] = arguments.callee (n-1)+arguments.callee (n-2); Resultado de retorno [n]; }}}JavaScript intermedio:
1. Implemente un clon de funciones que pueda copiar los 5 tipos de datos principales en JavaScript (incluido el número, cadena, objeto, matriz, booleano)
• Punto de búsqueda 1: ¿Está claro si la diferencia entre el tipo de datos básico y el tipo de datos de referencia se almacena en la memoria?
• Punto de búsqueda 2: ¿Sabe cómo determinar qué tipo de variable es?
• Punto de inspección 3: Diseño del algoritmo recursivo
// Método 1: objeto.prototype.clone = function () {var o = this.constructor === array? []: {}; para (var e en esto) {o [e] = typeof este [e] === "objeto"? esto [e] .clone (): este [e]; } return o;} // método 2:/** * clon un objeto * @param obj * @returns */function clone (obj) {var buf; if (obj instanciaf array) {buf = []; // crear una matriz vacía var i = obj.length; while (i--) {buf [i] = clone (obj [i]); } return buf; } else if (obj instanciaf objeto) {buf = {}; // Cree un objeto vacío para (var k en obj) {// Agregue un nuevo atributo a este objeto buf [k] = clone (obj [k]); } return buf; } else {// variables ordinarias asigna directamente el obj; }}2. ¿Cómo eliminar los elementos duplicados en una matriz?
var arr = [1,2,3,3,4,4,5,5,6,1,9,3,25,4]; function derepeat () {var newarr = []; var obj = {}; índice var = 0; var l = arr.length; for (var i = 0; i <l; i ++) {if (obj [arr [i]] == Undefined) {obj [arr [i]] = 1; newarr [index ++] = arr [i]; } else if (obj [arr [i]] == 1) Continuar; } return newarr; } var newarr2 = Derepeat (arr); alerta (newarr2); // Salida 1,2,3,4,5,6,9,253. Xiaoxian es un lindo cachorro (perro), y sus gritos son muy agradables. Cada vez que ve a su dueño, gritará (Yelp). De esta descripción, puede obtener los siguientes objetos:
function dog () {this.wow = function () {alert ('wow'); } this.yelp = function () {this.wow (); }}Al igual que Xiaoxian, Xiaomang resultó ser un lindo cachorro, pero de repente un día se volvió loco (Maddog), y cuando vio a alguien, gritaba (wow) y seguía llamando (grito) cada medio segundo. Utilice el código para implementarlo de acuerdo con la descripción. (Herencia, prototipo, setInterval)
Respuesta:
function maddog () {this.yelp = function () {var self = this; setInterval (function () {self.wow ();}, 500); }} Maddog.prototype = new dog (); // para testVar dog = new dog (); dog.yelp (); var maddog = new Maddog (); MadDog.yelp ();4. El siguiente UL, ¿cómo alertar su índice al hacer clic en cada columna? (cierre)
La copia del código es la siguiente:
<ul id = "test">
<li> Este es el primero </li>
<li> Este es el segundo </li>
<li> Este es el tercer elemento </li>
</ul>
Respuesta:
// Método 1: var lis = document.getElementById ('2223'). GetElementsBytagName ('li'); para (var i = 0; i <3; i ++) {lis [i] .index = i; lis [i] .Onclick = function () {alert (this.index); };} // Método 2: var lis = document.getElementById ('2223'). lis [i] .Onclick = (function (a) {return function () {alert (a);}}) (i);}5. Escriba una función JavaScript e ingrese un selector del tipo especificado (solo tres selectores CSS simples: ID, clase y nombre de etiqueta, y no se requieren selectores de combinación compatibles) para devolver los nodos DOM coincidentes, que deben considerar la compatibilidad y el rendimiento del navegador.
/*** @param selector {String} El selector CSS entrante. * @return {array}*/
Respuesta: (Demasiado largo, haga clic para abrir)
var Query = function (selector) {var reg = /^(#)?(/.)?(/w+)$/img; var rugesult = reg.exec (selector); resultado var = []; // Si es un selector de identificación if (REGRESULT [1]) {if (REGRESULT [3]) {if (typeOf Document.querySelector === "function") {result.push (document.Queryselector (REGRESULT [3])); } else {result.push (document.getElementById (Regredsult [3])); }}} // Si es un selector de clases más if (retressult [2]) {if (REGRESULT [3]) {if (typeOf document.getElementsByClassName === 'function') {var doms = document.getElementsByClassName (REGRESULT [3]); if (doms) {resultado = convertoarray (doms); }} // Si la función GetElementsByClassName no es compatible con else {var AlLDOMS = document.getElementsByTagName ("*"); for (var i = 0, len = alldoms.length; i <len; i ++) {if (alldoms [i] .classname.search (new Regexp (REGRESULT [2]))> -1) {result.push (AllDoms [i]); }}}}}} @ if (doms) {result = ConvertToArray (DOMS); }} Resultado de retorno; } función convertToArray (nodos) {var array = null; intente {array = array.prototype.slice.call (nodos, 0); // para navegadores no II} catch (ex) {array = new Array (); for (var i = 0, len = nodo.length; i <len; i ++) {array.push (nodos [i])}} return array; }6. Evalúe el siguiente código y dé sugerencias de mejora.
if (window.addeventListener) {var addListener = function (el, type, oyente, useCapture) {el.addeventListener (type, oyente, useCapture); };} else if (document.all) {addListener = function (el, type, oyente) {el.attachevent ("en"+type, function () {oyente.apply (el);}); }}evaluar:
• La función AddListener no debe declararse en las declaraciones IF y Else, debe declararse primero;
• No es necesario usar Window.AdDeventListener o documento. Todo para detectar el navegador, se debe usar la detección de capacidades;
• Dado que la eventación de sujeción tiene este problema de señalización en IE, debe manejarse al llamarlo
Las mejoras son las siguientes:
función addEvent (elem, type, handler) {if (elem.addeventListener) {elem.addeventListener (type, handler, falso); } else if (elem.attachevent) {elem ['temp' + type + handler] = handler; Elem [type + handler] = function () {elem ['temp' + type + handler] .Apply (elem); }; elem.attachevent ('on' + type, elem [type + handler]); } else {elem ['on' + type] = handler; }}7. Agregue un método al objeto de cadena, pase en un parámetro de tipo de cadena y luego devuelva el espacio de precios entre cada carácter de la cadena, por ejemplo:
addspace ("Hello World") // -> 'Helloworld D'
La copia del código es la siguiente:
String.prototype.spacify = function () {
devolver esto.split (''). Join ('');
};
Luego responda las preguntas anteriores, entonces la pregunta es
1) ¿Es seguro agregar métodos directamente al prototipo del objeto? Especialmente en objetos de objetos. (¿No puedo responder a esto? Espero decirte lo que sé).
2) ¿Cuál es la diferencia entre la declaración de función y la expresión de la función?
Respuesta: En JavaScript, cuando el analizador carga datos en el entorno de ejecución, no trata las declaraciones de funciones y las expresiones de funciones por igual. El analizador será el primero en leer las declaraciones de la función y las pondrá disponibles (accesibles) antes de ejecutar cualquier código. En cuanto a la expresión de la función, debe esperar hasta que el analizador se ejecute a la línea de código donde se encuentra antes de que se analice y ejecute. (Promoción de la declaración de función)
8. Defina un método de registro para que pueda proxy console.log métodos.
Un método factible:
La copia del código es la siguiente:
Función log (msg) {
console.log (msg);
}
Log ("¡Hola mundo!") // ¡Hola mundo!
¿Qué pasa si quieres pasar múltiples parámetros? Obviamente, el método anterior no puede cumplir con los requisitos, por lo que un método mejor es:
La copia del código es la siguiente:
función log () {
console.log.apply (consola, argumentos);
};
Entonces, la pregunta es, ¿cuáles son las similitudes y diferencias entre los métodos de aplicación y llamadas?
Respuesta:
Las dos funciones de aplicar y llamar son las mismas, es decir, llamar a un método de un objeto y reemplazar el objeto actual con otro objeto. Cambia el contexto del objeto de una función desde el contexto inicial al nuevo objeto especificado por ThisObj.
Pero hay una diferencia en los parámetros entre los dos. El significado del primer parámetro es el mismo, pero para el segundo parámetro: Aplicar se pasa en una matriz de parámetros, es decir, combinar múltiples parámetros en una matriz, y la llamada se pasa como un parámetro de la llamada (a partir del segundo parámetro). Por ejemplo, el método de redacción de aplicaciones correspondiente para FURC.Call (FUNC1, VAR1, VAR2, VAR3) es: FUNC.APPLY (FUNC1, [VAR1, VAR2, VAR3]).
9. ¿Qué es una pseudo-array en JavaScript? ¿Cómo convertir una pseudo-array en una matriz estándar?
Respuesta:
Pseudo-Array (matriz de clases): no puede llamar a los métodos de matriz directamente o esperar ningún comportamiento especial de los atributos de longitud, pero aún puede atravesarlos en métodos transversales de matriz real. Por lo general, los parámetros de argumento de la función también se denominan getElementsBytagName, document.childnodes, etc., y todos devuelven objetos nodelistas que pertenecen a pseudo-arrays. Las matrices se pueden convertir en objetos de matriz reales usando Array.prototype.slice.call (Fakearray).
Supongamos que seguimos la octava pregunta de la pregunta, necesitamos agregar un prefijo "(aplicación)" a cada método de registro, como '¡Hola mundo!' -> '(APP) ¡Hola mundo!'. El método es el siguiente:
function log () {var args = array.prototype.slice.call (argumentos); // Para usar el método de matriz Unshift, convierta el argumento en argumentos reales args.unshift ('(app)'); console.log.apply (consola, args); };10. Para comprender el contexto del alcance y esto, consulte el siguiente código:
var user = {Count: 1, getCount: function () {return this.count; }}; console.log (user.getCount ()); // ¿Qué? var func = user.getCount; console.log (func ()); // ¿qué?¿Cuáles son los resultados de dos consolas? ¿Por qué?
La respuesta es 1 y indefinida.
FUNC se ejecuta en el contexto de Winodw, por lo que no se puede acceder a la propiedad de conteo.
Entonces, la pregunta es cómo asegurarse de que UESR siempre pueda acceder al contexto de func, es decir, devolver 1 correctamente.
Respuesta: La forma correcta es usar function.prototype.bind. Compatible con el código completo de cada navegador es el siguiente:
Function.prototype.bind = function.prototype.bind || función (context) {var self = this; function de return () {return self.apply (context, argumentos); };} var func = user.getCount.bind (user); console.log (func ());11. ¿Cuál es la diferencia entre la ventana de JS nativa. ¿Cómo implementar el método listo de JQ usando JS nativo?
El método Window.Onload () debe esperar hasta que todos los elementos, incluida la imagen en la página, se carguen antes de la ejecución.
$ (documento) .Ready () se ejecuta después de dibujar la estructura DOM, y no hay necesidad de esperar hasta que se cargue.
/ * * Pase la función a whenready () * Cuando el documento se analiza y está listo para la operación, la función se llama como el método del documento */var whenready = (function () {// Esta función devuelve whenready () función var funcs = []; // Cuando el evento se obtiene, la función se ejecuta listos = false; // cuando el controlador de eventos se activa, conmutador a verdadero // cuando el documento está listo, el evento está listo, la función se ejecuta = false; // cuando el controlador de eventos se activa, conmutador a verdadero // cuando el documento está listo, el evento está listo. {if (Ready) return; Las funciones pueden hacer que se registren más funciones (var i = 0; i <funcs.length; i ++) {funcs [i] .call (documento); funcs = null; } // Registre el controlador para cualquier evento recibido si (document.addeventListener) {document.addeventListener ('domContentLoaded', Handler, falso); document.addeventListener ('ReadyStateChange', Handler, False); // ie9+ window.addeventListener ('load', manejador, falso); } else if (document.attachevent) {document.attachevent ('onreadyStateChange', Handler); window.attachevent ('onload', manejador); } // return whenready () función de retorno function whenready (fn) {if (listos) {fn.call (documento); } else {funcs.push (fn); }}}) ();Si el código anterior es muy difícil de entender, la siguiente versión simplificada:
Función Ready (fn) {if (document.adDeventListener) {// Browser estándar Document.AdDeventListener ('DomContentLoaded', function () {// Evento de inicio de sesión para evitar la activación repetida de document.removeEventListener ('DOMContentTentLoaded', Arguments.callee, falso); Fn (); // Execute Function}, FALSE); } else if (document.attachevent) {// ie document.attachevent ('onreadySadyStateChange', function () {if (document.readyState == 'completo') {document.detachevent ('onreadyStateStateChange', argons.callee); fn (); // función de función}); }};12. (Pregunta de diseño) ¿Quieres implementar un arrastre en un determinado nodo de la página? ¿Cómo hacerlo? (Use JS nativo)
Solo responde al concepto, aquí hay algunos puntos clave
1. Ate los eventos de mouseDown, mouseMove, ratón a nodos que necesitan ser arrastrados
2. Después de activarse el evento Mousedown, comience a arrastrar y arrastrar
3. Cuando MouseMove, debe obtener la posición de arrastre a través de Event.Clientx y Clienty, y actualizar la posición en tiempo real.
4. Cuando el mouseup, arrastre y termine
5. Presta atención a los límites del navegador
13.
función setcookie (nombre, valor, días) {// Agregar una variable de tiempo a Cookie var exp = new Date (); exp.setTime (exp.gettime () + días*24*60*60*1000); // Establezca el tiempo de vencimiento en días document.cookie = name + "=" + escape (valor) + "; expires =" + exp.togmtString (); } function getCookie (name) {var result = ""; var mycookie = ""+document.cookie+";"; var searchName = "+name+" = "; var startofcookie (name) {var result =" "; var mycookie =" "+document.cookie+"; "; var searchName ="+name+"="; var startofcookie = mycookie.IndexOf (SearchName); var endofcookie; if (satrtofcookie! = -1) {startofcookie += searchName.length; endofcookie = mycookie.indexof (";", startofcookie); resultado = (mycookie.substring (startofcookie, endofcookie)); } return resultado;} (function () {var otips = document.getElementById ('TIPS'); // Suponga que la identificación de las puntas es TIPS var Page = {check: function () {// verificar si las cookie de las puntas 'existe y permitir la visual if (tips == "Never_Show_Again") return false; Supongo que los elementos de nivel de fila}, init: function () {var _This = this;14. Diga ¿cuál es la función de las siguientes funciones? ¿Qué se debe llenar en el área en blanco?
// define (function (window) {function fn (str) {this.str = str;} fn.prototype.format = function () {var arg = ______; return this.str.replace (_____, function (a, b) {return arg [b] || ";});} window.fn;}) (ventana); // use (use (usa () fn ('<p> <a href = "{0}"> {1} </a> <span> {2} </span> </p>');Respuesta: El propósito de acceder a las funciones es usar la función de formato para reemplazar los parámetros de la función como {0} y devolver un resultado formateado:
El primer vacío es: argumentos
El segundo vacío es: // {(/d+)/}/igg
15. Use JavaScript orientado a objetos para presentarse. (No hay respuesta, por favor pruébalo tú mismo)
Respuesta: Objeto o JSON es una buena opción.
16. Explique el principio de implementar AJAX por JS nativo.
El nombre completo de Ajax es JavaScript asíncrono y XML. Entre ellos, asíncrono significa asincrónico, que es diferente del método de sincronización utilizado en el desarrollo web tradicional.
El principio de AJAX es simplemente usar el objeto xmlhttprequest para enviar solicitudes asíncronas al servidor, obtener datos del servidor y luego usar JavaScript para operar el DOM para actualizar la página.
XMLHTTPREQUEST es el mecanismo central de AJAX. Se introdujo por primera vez en IE5 y es una tecnología que admite solicitudes asincrónicas. En pocas palabras, JavaScript puede hacer solicitudes y procesar las respuestas al servidor sin bloquear al usuario. No lograr ningún efecto de actualización.
Las propiedades del objeto xmlhttprequest son:
• OnreadyStateChang El controlador de eventos para el evento activado por cada cambio de estado.
• ResponseText Devuelve el formulario de datos de datos del proceso del servidor.
• Responsexml Objeto de datos de documento compatible con DOM devuelto del proceso del servidor.
• Códigos numéricos de estado devueltos del servidor, como Common 404 (no encontrado) y 200 (listo)
• Información de cadena de texto de estado acompañada de código de estado
• Valor de estado del objeto ReadyState
• 0 (no inicializado) se ha establecido el objeto, pero no se ha inicializado (el método abierto no se ha llamado)
• 1 (inicialización) se ha establecido el objeto y el método de envío aún no se ha llamado
• 2 (datos de envío) se ha llamado al método de envío, pero se desconoce el estado actual y el encabezado HTTP
• 3 (transmisión de datos) Se han recibido algunos datos, porque los encabezados de respuesta y HTTP están incompletos, se producirá un error cuando se obtenga un Boldy y ResponseText.
• 4 (Completo) se reciben los datos y los datos de respuesta completos se pueden obtener a través de Responsexml y ResponsetExt.
La siguiente es una encapsulación simple de una función: (ligeramente larga, haga clic para abrir)
AJAX ({url: "./testxhr.aspx", // Tipo de dirección de solicitud: "Post", // Solicitar datos del método: {name: "super", edad: 20}, // solicitud de parámetro dataType: "json", éxito: function (respuesta, xml) {// código ejecutado después de la ubicación exitosa}, fallando (estado) function ajax (opciones) {opciones = opciones || {}; opciones.type = (options.type || "get"). toUpperCase (); options.datatype = options.datatype || "JSON"; var params = formatParams (options.data); // Crear - NoniE6 - Paso 1 if (window.xmlhttprequest) {var xhr = new xmlhttprequest (); } else {// ie6 y debajo de los navegadores var xhr = new ActiveXObject ('Microsoft.xmlhttp'); } // Recibir - Paso 3 xhr.onreadyStateChange = function () {if (xhr.readyState == 4) {var status = xhr.status; if (status> = 200 && status <300) {options.success && options.success (xhr.Responsetext, xhr.Responsexml); } else {options.fail && options.fail (status); }}} // Conectar y enviar - Paso 2 if (options.type == "get") {xhr.open ("get", options.url + "?" + Params, true); XHR.SEND (NULL); } else if (options.type == "post") {xhr.open ("post", options.url, true); // Establezca el tipo de contenido al enviar el formulario XHR.SetRequestHeader ("Content-type", "Application/X-WWW-Form-URLEncoded"); XHR.SEND (params); }} // Formato de parámetro FormatParams (data) {var arr = []; for (nombre var en datos) {arr.push (encodeReRiComponent (name) + "=" + codeDoRponent (data [name])); } arr.push (("v =" + math.random ()). reemplazar (".")); regresar arr.join ("&"); }El código anterior describe aproximadamente el proceso AJAX, y la explicación se ve en Google por usted mismo. La pregunta no está terminada. ¿Sabes qué son JSONP y PJAX?
Respuesta:
JSONP: (JSON con relleno) es un método de solicitud de dominio cruzado. El principio principal es aprovechar la función de que las etiquetas de script se pueden solicitar en todos los dominios. El atributo SRC envía la solicitud al servidor, el servidor devuelve el código JS, la página web acepta la respuesta y luego la ejecuta directamente. Este es el mismo que el principio de hacer referencia a archivos externos a través de etiquetas de script. JSONP consta de dos partes: función de devolución de llamada y datos. La función de devolución de llamada generalmente es controlada por la página web y se envía al lado del servidor como parámetros. El lado del servidor deletrea la función y los datos en una cadena y devuelve.
PJAX: PJAX es una nueva tecnología basada en Ajax+History.PushState. This technology can change the content of a page without refresh and can change the URL of the page. (Keypoint: It can implement back functions that cannot be achieved by ajax) pjax is an encapsulation of ajax+pushState, and supports local storage, animation and other functions. Currently, it supports various versions such as jquery, qwrap, kissy, etc.
觉得题目还ok的亲点个推荐哦，题量会不断增加。
你可能会感兴趣：BAT及各大互联网公司2014前端笔试面试题--Html,Css篇
暂且贴出我做出答案的部分。有时间把未做出答案也贴出来。针对文中各题，如有更好的解决方法或者错误之处，各位亲务必告知我，误人子弟实乃罪过。
原文：http://www.cnblogs.com/coco1s/p/4029708.html