Get best of the week

5 interessante JavaScript-Funde im Vue-Quellcode

Das Lesen des Quellcodes bekannter Frameworks kann einem Programmierer helfen, seine beruflichen Fähigkeiten zu verbessern. Der Autor des Artikels, dessen Übersetzung wir heute veröffentlichen, hat kürzlich den Code vue2.x analysiert. Er fand in diesem Code einige interessante JavaScript-Ideen, die er mit allen teilen wollte.



1. Bestimmen des genauen Typs eines Objekts


Wie wir alle wissen, in JavaScript gibt es sechs primitive Datentypen ( Boolean, Number, String, Null, Undefined, Symbol) und einen Objekttyp - Object. Wissen Sie, wie Sie zwischen Typen unterschiedlicher Objektwerte unterscheiden können? Ein Objekt kann ein Array oder eine Funktion sein, es kann eine Sammlung von Werten Mapoder etwas anderes sein. Was muss getan werden, um den genauen Objekttyp herauszufinden?

Bevor wir nach einer Antwort auf diese Frage suchen, sollten wir uns den Unterschied zwischen Object.prototype.toString.call(arg)und überlegen String(arg).

Die Verwendung dieser Ausdrücke zielt darauf ab, den an sie übergebenen Parameter in eine Zeichenfolge umzuwandeln. Aber sie arbeiten anders.

Bei einem Aufruf versucht das String(arg)System, arg.toString()oder anzurufen arg.valueOf(). Als Ergebnis, wenn im argoder im PrototypargDiese Methoden werden überschrieben, aufgerufen Object.prototype.toString.call(arg)und String(arg)führen zu unterschiedlichen Ergebnissen.

Betrachten Sie ein Beispiel.

const _toString = Object.prototype.toString
var obj = {}
obj.toString()  // [object Object]
_toString.call(obj) // [object Object]

Wir werden diesen Code in der Browser Developer Tool Console ausführen.


In diesem Fall ruft obj.toString()und Object.prototype.toString.call(obj)führt zu den gleichen Ergebnissen.

Hier ist ein weiteres Beispiel.

const _toString = Object.prototype.toString
var obj = {}
obj.toString = () => '111'
obj.toString()  // 111
_toString.call(obj) // [object Object]
/hello/.toString() // /hello/
_toString.call(/hello/) // [object RegExp]

Lassen Sie uns den Code in der Konsole ausführen.


Wenn Sie nun die Methode des Objekts aufrufen .toString()und das Konstrukt verwenden Object.prototype.toString.call(obj), erhalten Sie unterschiedliche Ergebnisse.

Hier sind die Regeln, die das Verhalten einer Methode im ECMAScript-Standard beschreiben Object.prototype.toString().


Beschreibung der Object.prototype.toString () -Methode im ECMAScript-Standard Aus

der Dokumentation geht hervor, dass beim AufrufObject.prototype.toString()verschiedener Objekte unterschiedliche Ergebnisse zurückgegeben werden.

Entdecken Sie diese Idee in der Konsole.


Darüber hinaus wird der zurückgegebene Wert Object.prototype.toString()immer im folgenden Format dargestellt:

‘[object ’ + ‘tag’ +‘] ’

Wenn wir nur einen Teil aus dieser Konstruktion extrahieren müssen tag, können wir zu diesem Teil gelangen, indem wir unnötige Zeichen am Anfang und Ende der Zeile mit einem regulären Ausdruck oder einer regulären Methode entfernen String.prototype.slice().

function toRawType (value) {
    const _toString = Object.prototype.toString
    return _toString.call(value).slice(8, -1)
}
toRawType(null) // "Null"
toRawType(/sdfsd/) //"RegExp"

Erkunden Sie diese Funktion in der Konsole.


Wie Sie sehen können, können Sie mit der obigen Funktion den genauen Typ einer Objektvariablen ermitteln.

→ Hier im Vue-Repository finden Sie den Code für eine ähnliche Funktion.

2. Zwischenspeichern der Ergebnisse der Funktion


Angenommen, es gibt eine ähnliche Funktion wie die folgende, die langwierige Berechnungen durchführt:

function computed(str) {    
    console.log('2000s have passed')
    return 'a result'
}

Durch das Erstellen einer solchen Funktion beabsichtigen wir, die zurückgegebenen Ergebnisse zwischenzuspeichern. Wenn diese Funktion das nächste Mal aufgerufen wird und dieselben Parameter wie zuvor übergeben werden, wird der "schwere" Funktionscode nicht ausgeführt. Stattdessen wird das zwischengespeicherte Ergebnis ohne zusätzliche Zeit zurückgegeben. Wie kann man das machen?

Sie können beispielsweise eine Wrapper-Funktion für eine Zielfunktion schreiben. Eine solche Funktion kann benannt werden cached. Diese Funktion akzeptiert als Argument die Zielfunktion und gibt eine neue Funktion zurück, die mit Caching-Funktionen ausgestattet ist. In der Funktion können cachedSie die Ergebnisse früherer Aufrufe der Zielfunktion mithilfe der Entität Objectoder zwischenspeichern Map. Hier ist der Code für diese Funktion:

function cached(fn){
  //     ,      
  const cache = Object.create(null);

  //      
  return function cachedFn (str) {

    //       -   
    if ( !cache[str] ) {
        let result = fn(str);

        //      
        cache[str] = result;
    }

    return cache[str]
  }
}

Hier ist ein Beispiel für die Verwendung der obigen Funktion.


→  Hier ist der Code für eine ähnliche Funktion, der in der Vue-Codebasis verfügbar ist.

3. Konvertieren Sie eine Zeichenfolge der Form hello-world in eine Zeichenfolge der Form helloWorld


Wenn mehrere Programmierer an einem Projekt zusammenarbeiten, ist es sehr wichtig, dass sie sich um den einheitlichen Stil des Codes kümmern. Jemand kann beispielsweise einige zusammengesetzte Bezeichner in einem Format helloWorldund jemand in einem Format aufzeichnen hello-world. Um Ordnung in diesen Bereich zu bringen, können Sie eine Funktion erstellen, die Ansichtslinien hello-worldin Ansichtslinien konvertiert helloWorld.

const camelizeRE = /-(\w)/g
const camelize = cached((str) => {
  return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')
})
camelize('hello-world')
// "helloWorld"

→ Dies ist die Stelle des Vue-Codes, von der dieses Beispiel stammt.

4. Bestimmen, in welcher Umgebung der JavaScript-Code ausgeführt wird


Angesichts der rasanten Entwicklung von Browsern kann JavaScript-Code heutzutage in verschiedenen Umgebungen ausgeführt werden. Um Projekte besser an unterschiedliche Umgebungen anpassen zu können, müssen Sie bestimmen können, wo die Programme ausgeführt werden:

const inBrowser = typeof window !== 'undefined'
const inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform
const weexPlatform = inWeex && WXEnvironment.platform.toLowerCase()
const UA = inBrowser && window.navigator.userAgent.toLowerCase()
const isIE = UA && /msie|trident/.test(UA)
const isIE9 = UA && UA.indexOf('msie 9.0') > 0
const isEdge = UA && UA.indexOf('edge/') > 0
const isAndroid = (UA && UA.indexOf('android') > 0) || (weexPlatform === 'android')
const isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || (weexPlatform === 'ios')
const isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge
const isPhantomJS = UA && /phantomjs/.test(UA)
const isFF = UA && UA.match(/firefox\/(\d+)/)

→ Hier habe ich diesen Code gefunden.

5. Unterscheidung zwischen integrierten und benutzerdefinierten Funktionen


Es ist bekannt, dass JavaScript zwei Arten von Funktionen hat. Der erste Typ ist eingebaut oder, wie sie auch genannt werden, "native" Funktionen. Solche Funktionen werden von der Umgebung bereitgestellt, in der der Code ausgeführt wird. Der zweite Typ sind die sogenannten "Benutzerfunktionen", dh diejenigen, die Programmierer selbst schreiben. Sie können zwischen diesen Funktionen unterscheiden, indem Sie berücksichtigen, dass bei der Konvertierung in Zeichenfolgen verschiedene Ergebnisse zurückgegeben werden.

Array.isArray.toString() // "function isArray() { [native code] }"
function fn(){} 
fn.toString() // "function fn(){}"

Wir werden mit diesem Code in der Konsole experimentieren.


Die toString()native Funktionsmethode gibt immer eine Konstruktion der folgenden Form zurück:

function fnName() { [native code] }

Wenn Sie dies wissen, können Sie eine Funktion schreiben, mit der Sie zwischen nativen und benutzerdefinierten Funktionen unterscheiden können:

function isNative (Ctor){
  return typeof Ctor === 'function' && /native code/.test(Ctor.toString())
}

→  Dies ist die Stelle in der Vue-Codebasis, an der es eine solche Funktion gibt.

Haben Sie es geschafft, etwas Interessantes zu finden, indem Sie den Code in den Repositories berühmter JavaScript-Projekte untersucht haben?

More articles:


All Articles