Aprendizaje del código fuente de Vue | 4 habilidades prácticas de Javascript

[Este es el noveno día de mi participación en el Gengwen Challenge , consulte los detalles del evento: Gengwen Challenge ”]

Una forma muy efectiva de aprender un idioma es leer el código fuente de excelentes proyectos de código abierto desarrollados para ese lenguaje de programación. Vuejses uno de los mejores proyectos de código abierto de Javascript.

1. Convertir variable a cadena

vue/src/shared/util.js
复制代码

Convertir un valor en una cadena es una necesidad muy común, en Javascript hay dos funciones para convertir un valor en una cadena:

• String()
• JSON.stringify()

Estas dos funciones tienen mecanismos diferentes, consulte el siguiente código:

console.log(String(null)); // null
console.log(JSON.stringify(null)); // null

console.log(String(undefined)); // undefined 这里是字符串
console.log(JSON.stringify(undefined)); // undefined 这里是变量

console.log(String("abc")); // abc
console.log(JSON.stringify("abc")); // "abc"

console.log(String({ key: "value" })); // [object Object]
console.log(JSON.stringify({ key: "value" })); // {"key":"value"}

console.log(String([1, 2, 3])); // 1,2,3
console.log(JSON.stringify([1, 2, 3])); // [1,2,3]

const obj = {
    title: "devpoint",
    toString() {
        return "obj";
    },
};
console.log(String(obj)); // obj
console.log(JSON.stringify(obj)); // {"title":"devpoint"}
复制代码

A partir de los resultados de salida anteriores, existen diferencias en el mecanismo de conversión de objetos en cadenas entre los dos métodos.¿Cómo elegir?

• En el desarrollo real, cuando necesitamos convertir nullsuma undefineden cadena, a menudo queremos que devuelva una cadena vacía.

• A menudo se usa cuando necesita convertir una matriz y un objeto simple en una cadena JSON.stringify.

• Si se anula un método que requiere un objeto toString, se debe usar String().

• En otros casos, use String()convertir la variable en una cadena.

Para cumplir con las condiciones anteriores, el código fuente de Vue se implementa de la siguiente manera:

function isPlainObject(obj) {
    return Object.prototype.toString.call(obj) === "[object Object]";
}
function toString(val) {
    if (val === null || val === undefined) return "";
    if (Array.isArray(val)) return JSON.stringify(val);
    if (isPlainObject(val) && val.toString === Object.prototype.toString)
        return JSON.stringify(val);
    return String(val);
}

const obj = {
    title: "devpoint",
    toString() {
        return "obj";
    },
};
console.log(toString(obj)); // obj
console.log(toString([1, 2, 3])); // [1, 2, 3]
console.log(toString(undefined)); // ""
console.log(toString(null)); // ""
复制代码

2. Objetos ordinarios

vue/src/shared/util.js
复制代码

Object.prototype.toStringPermite convertir objetos en cadenas. Para objetos ordinarios, cuando se llama a este método, siempre devuelve [object object].

const runToString = (obj) => Object.prototype.toString.call(obj);
console.log(runToString({})); // [object Object]
console.log(runToString({ title: "devpoint" })); // [object Object]
console.log(runToString({ title: "devpoint", author: { name: "devpoint" } })); // [object Object]
复制代码

Los objetos como los anteriores se llaman objetos ordinarios.

También hay algunos objetos especiales en Javascript, como Array, Stringy RegExp, que tienen un diseño especial en el motor de Javascript. Cuando llaman a los Object.prototype.toStringmétodos, devuelven resultados diferentes.

const runToString = (obj) => Object.prototype.toString.call(obj);
console.log(runToString(["devpoint", 2021])); // [object Array]
console.log(runToString(new String("devpoint"))); // [object String]
console.log(runToString(/devpoint/)); // [object RegExp]
复制代码

Para distinguir entre objetos de diseño especiales y objetos ordinarios, se pueden utilizar las siguientes funciones.

function isPlainObject(obj) {
    return Object.prototype.toString.call(obj) === "[object Object]";
}
复制代码

Muchas veces queremos que una función se ejecute una sola vez. Si la función se llama varias veces, solo se ejecutará la primera vez.

3.una vez

vue/src/shared/util.js
复制代码

Muchas veces queremos que una función se ejecute una sola vez. Si la función se llama varias veces, solo se ejecutará la primera vez.

function once(fn) {
    let called = false;
    return function () {
        if (!called) {
            called = true;
            fn.apply(this, arguments);
        }
    };
}

function launchRocket() {
    console.log("我已经执行了");
}
const launchRocketOnce = once(launchRocket);
launchRocketOnce();
launchRocketOnce();
launchRocketOnce();
复制代码

4. Exploración del navegador

vue/src/core/util/env.js
复制代码

Sabemos que Javascript puede ejecutarse en navegadores, nodejs, etc., entonces, ¿cómo verificar si el código Javascript actual se ejecuta en el entorno del navegador?

Si Javascript se ejecuta en un entorno de navegador, hay un objeto global: window. Por lo tanto, el medio ambiente puede ser juzgado por:

const inBrowser = typeof window !== "undefined";
复制代码

Ejecutar en Chrome

Ejecutar en Nodo

Si el script se ejecuta en un entorno de navegador, podemos obtener el agente de usuario del navegador de la siguiente manera :

const UA = inBrowser && window.navigator.userAgent.toLowerCase();
复制代码

Ejecutar en Chrome

Los diferentes navegadores tienen diferentes userAgent. En Internet Explorer userAgent, siempre se incluyen la palabra MSIEy la Trident. En el navegador Chrome, userAgentsiempre se incluye la palabra Chrome.

Asimismo, en los navegadores con sistema operativo userAgentAndroid siempre se incluye la palabra Android. En iOS, siempre existe la palabra iPhone, iPad, iPod, iOS.

Por lo tanto, userAgentel proveedor actual del navegador y el sistema operativo se pueden determinar comprobando.

export const UA = inBrowser && window.navigator.userAgent.toLowerCase();
export const isIE = UA && /msie|trident/.test(UA);
export const isIE9 = UA && UA.indexOf("msie 9.0") > 0;
export const isEdge = UA && UA.indexOf("edge/") > 0;
export const isAndroid =  (UA && UA.indexOf("android") > 0) || weexPlatform === "android";
export const isIOS =  (UA && /iphone|ipad|ipod|ios/.test(UA)) || weexPlatform === "ios";
export const isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge;
export const isPhantomJS = UA && /phantomjs/.test(UA);
export const isFF = UA && UA.match(/firefox\/(\d+)/);
复制代码

Como nota al margen, tanto Edge como Chrome se basan en Chromium, por lo que ambos navegadores userAgenttienen la palabra Chrome en ellos. Es decir, cuando un navegador tiene la userAgentpalabra Chrome, ese navegador no es necesariamente Chrome.const isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge

Terminar