1. ¿Cómo determina js que un objeto está vacío?
Una forma sencilla de saber si un objeto es nulo es comprobar todas las propiedades enumerables del objeto. Si un objeto no tiene propiedades enumerables, podemos considerarlo vacío. Puede usar Object.keys() una función para obtener todas las propiedades enumerables de un objeto y luego verificar la longitud de la matriz resultante. Si la longitud es 0, entonces el objeto está vacío.
function isEmpty(obj) {
return Object.keys(obj).length === 0 && obj.constructor === Object;
}
var myObj = {};
if (isEmpty(myObj)) {
console.log("对象是空的");
} else {
console.log("对象不是空的");
}2. API para obtener los últimos parámetros de URL
Para las API que obtienen parámetros de URL, puede utilizar la interfaz URLSearchParams de JavaScript.
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');3. Después del lanzamiento de la nueva versión, ¿cómo utilizar medios técnicos para notificar a los usuarios que actualicen la página?
Después del lanzamiento de una nueva versión, puede utilizar Web Push para notificar a los usuarios que actualicen la página.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(() => console.log('Service Worker Registered'))
.catch(err => console.log('Service Worker Registration Failed: ', err));
}4. ¿Cómo mejora el proyecto Vue el rendimiento del proyecto?
- Carga diferida: utilice los componentes asincrónicos de Vue y la función de división de código de Webpack para dividir archivos dependientes grandes en partes pequeñas y cargarlos dinámicamente según sea necesario.
- División de código: divida los componentes grandes de Vue en varios componentes pequeños para reducir el tiempo de renderizado y el uso de memoria.
- Optimice imágenes: utilice herramientas de compresión y optimización como TinyPNG e ImageOptimizer para reducir el tamaño de la imagen y el tiempo de carga.
5. caché
5.1 Almacenamiento en caché fuerte
Obligue al navegador a leer datos directamente desde el caché local dentro de un cierto período de tiempo sin enviar una solicitud al servidor. Se puede lograr un almacenamiento en caché sólido configurando la información del encabezado de respuesta. Los encabezados de respuesta comunes incluyen Expires y Cache-Control.
5.2 Negociar caché
Cuando falla el caché seguro, el navegador enviará una solicitud al servidor para preguntarle si el recurso se ha modificado desde el último acceso. Si no hay ninguna modificación, el servidor devolverá un código de estado 304, indicando al navegador que puede continuar usando el caché local; de lo contrario, devolverá contenido de recursos nuevo. El almacenamiento en caché de negociaciones se puede lograr configurando la información del encabezado de respuesta. Los encabezados de respuesta comunes incluyen Última modificación y ETag.
5.3 El proceso principal de almacenamiento en caché del navegador se puede resumir en los siguientes pasos:
5.3.1 Cuando el navegador recibe una solicitud HTTP, determinará si el recurso se ha almacenado en caché en función de la URL. Si se ha almacenado en caché, el recurso se lee directamente desde la caché local.
5.3.2 Si no está almacenado en caché o el caché ha caducado, el navegador enviará una solicitud al servidor y traerá cierta información en la solicitud, como la hora del último acceso, Etag, etc.
Una vez que el servidor recibe la solicitud, determina si el recurso se ha actualizado en función de la información de la solicitud. Si el recurso no se ha actualizado, se devuelve un código de respuesta 304, que le indica al navegador que puede continuar usando el caché local; si el recurso se ha actualizado, se devuelve el nuevo contenido del recurso y cierta información del encabezado relacionada con el caché.
5.3.3 Después de que el navegador reciba la respuesta, actualizará el caché local según la información del encabezado de respuesta y mostrará el nuevo contenido del recurso al usuario.
6. El proceso de nuevo constructor.
- Crea un objeto vacío.
- Apunte el prototipo de este nuevo objeto a la propiedad prototipo del constructor.
- Ejecute el constructor y apúntelo al objeto recién creado.
- Si el constructor no devuelve ningún valor o devuelve un valor que no es un objeto, se devuelve el objeto recién creado. Si el constructor devuelve un objeto, se devuelve este objeto.
function myNew(ctor, ...args) {
// 创建一个新对象，并将该对象的原型指向构造函数的原型对象
const obj = Object.create(ctor.prototype);
// 调用构造函数，并将新对象作为 this 参数传递进去
const result = ctor.apply(obj, args);
// 如果构造函数返回了一个非空对象，则返回该对象；否则，返回创建的新对象
if (typeof result === 'object' && result !== null) {
return result;
}
return obj;
}
// 测试：
function Person(name, age) {
this.name = name;
this.age = age;
}
const person = myNew(Person, '张三', 18);
console.log(person.name); // 输出：张三
console.log(person.age); // 输出：187 、 bucle de eventos
- El código comienza a ejecutarse, crea una pila de llamadas global y el script se ejecuta como una tarea macro.
- El proceso de ejecución se ejecuta inmediatamente a través de tareas sincrónicas y las tareas asincrónicas se registran en la cola de microtareas y la cola de macrotareas de acuerdo con el tipo de tarea asincrónica.
- Después de ejecutar la tarea de sincronización, verifique la cola de microtareas
- Si hay microtareas, ejecute todas las microtareas en la cola (incluidas las nuevas microtareas generadas durante la ejecución de microtareas)
- Si no hay microtareas, verifique la cola de macrotareas y ejecute la primera macrotarea. Después de ejecutar la macrotarea, verifique la cola de microtask y repita las operaciones anteriores hasta que la cola de macrotask esté vacía.
- Tareas macro (script, temporizador, ajax, E/S); microtareas (promise.then, async await, MutationObserve para monitorear los cambios DOM)
8. ¿Qué es la cadena de prototipos js?
Cada objeto en JavaScript tiene un prototipo, que es el objeto del que heredan propiedades y métodos. Y este prototipo puede tener su propio prototipo, formando la llamada "cadena de prototipos".
Cuando accedemos a una propiedad o método de un objeto JavaScript, primero buscamos la existencia de la propiedad o método en el objeto mismo. Si no existe, busca en la cadena de prototipos del objeto hasta llegar a Object.prototype. Si no se ha encontrado, se devuelve indefinido.
Por tanto, a través de la cadena de prototipos, podemos lograr la herencia y la reutilización del código. Por ejemplo, podemos crear un objeto base y usarlo como prototipo para otros objetos para que puedan compartir las propiedades y métodos del objeto base.
9. Antivibración y estrangulamiento
// 防抖-多次点击，只执行一次
function debounces(fn, time) {
let timer
return function() {
if(timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
fn.apply(this, arguments);
}, time)
}
}
// 节流-一定时间内，只执行一次
function throttle(fn, time) {
let timer
return function() {
if (timer) {
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null
}, time)
}
}
}Detengámonos aquí hoy y sigamos actualizando...