Eine Anleitung zum Upgrade auf Polymer 1.0

Kernpunkte

• Polymer 1.0 ist ein gründliches Refactoring früherer Versionen mit effizienterer Leistung, geringerer Größe, besserer Unterstützung für benutzerdefinierte Elemente und ein verbessertes Datenbindungssystem, um die Verwendung zu erleichtern und intuitiver.
• Upgrade von Polymer 0,5 auf Polymer 1.0 erfordert mehrere Schritte, einschließlich Aktualisierung von Bower -Abhängigkeiten, Aktualisierung von HTML -Importen, Optimierelementdefinitionen und Datenbindungen, um eine neue Syntax anzupassen, und gründliche Tests, um sicherzustellen, dass alles wie erwartet funktioniert.
• Polymer 1.0 führt Shadow DOM ein, ein wichtiger Bestandteil des Webkomponentenstandards, die die Implementierungsdetails von benutzerdefinierten Elementen zusammenfasst und ihre internen Strukturen und Stiften außerhalb des Restes der Seite verbergen. Sie können CSS -benutzerdefinierte Eigenschaften und ::shadow und /deep/ Selektoren verwenden, um Elemente in Shadow Dom zu stylen.

Auf der kürzlich abgeschlossenen Google I/O 2015-Konferenz veröffentlichte Google die lang erwartete Version von Polymer 1.0 und kündigte an, dass es bereit ist, in die Produktion zu gehen. Für diejenigen, die die Polymerbibliothek verwenden, während sie sich noch in der Entwicklervorschau -Phase befindet, dient dieser Artikel als Leitfaden für die Migration vorhandener Anwendungen auf die neueste Version von Polymer.

Einige wichtige Hinweise zu Version 1.0:

1. ist es mit der vorherigen Version 0.5 (die bisher am längsten gelebte Version) unvereinbar.
2. Die neue Version konzentriert sich auf Leistung und Effizienz und verringert die Gesamtgröße der Bibliothek erheblich.
3. Es wurde vollständig von Grund auf neu umgebaut, sodass Entwickler benutzerdefinierte Elemente entwerfen können, die eher Standard -DOM -Elementen einfacher und schneller ähneln.
4. interne Benchmarks zeigen, dass die Version 1.0 im Vergleich zu früheren Versionen auf Chrom etwa dreimal schneller und bei Safari etwa 4 -mal schneller ist.

Die Schritte zur Installation der neuesten Version von Polymer sind genau die gleichen wie in diesem Artikel beschrieben. Um eine vorhandene Polymerinstallation zu aktualisieren, navigieren Sie zum Anwendungsverzeichnis und führen Sie den folgenden Befehl im Terminal aus:

$ bower update

Es ist wichtig zu beachten, dass dies sicherlich Ihre vorhandene Anwendung brechen wird, wie bereits erwähnt, sind die beiden Versionen inkompatibel. Daher wird empfohlen, stattdessen eine neue Kopie in einem separaten Ordner zu installieren. Um die Änderungen seit Version 0.5 zu veranschaulichen, werden wir das benutzerdefinierte Kreditkartenelement aus einem vorherigen Beitrag auf SitePoint als Verweis verwenden, um die Unterschiede zwischen den beiden Versionen zu vergleichen.

Polyfill für nicht unterstützte Browser

bereitstellen

Neue Polymerversionen benötigen nicht mehr die in der webcomponents.js -Bibliothek enthaltene Schatten -Dom -Polyfill. Verwenden Sie stattdessen eine kleinere webcomponents-lite.js Bibliothek, um Polyfüllungen für ältere Browser bereitzustellen.

Version 0.5:

<🎜>

Version 1.0:

<🎜>

Die "Lite -Version" ist etwa 80 KB weniger als ihr Vorgänger, was sehr wichtig sein kann, wenn die Leistung ein Schlüsselfaktor ist.

Definieren Sie benutzerdefinierte Elemente

<polymer-element> Tags wurden durch <dom-module> -Tags ersetzt, die benutzerdefinierte Elementdefinitionen enthalten. Das benutzerdefinierte Element wird nun durch das <dom-module> -Merkmal des id -Tags identifiziert. Die Namensregeln für benutzerdefinierte Elemente sind immer noch gleich.

Version 0.5:

$ bower update

Version 1.0:

<🎜>

Registrieren Sie benutzerdefinierte Elemente

Zuvor konnten wir benutzerdefinierte Elemente registrieren, indem wir einfach den Konstruktor Polymer() aufrufen. Wenn sich das Tag im Tag <polymer-element> befindet, ist die Angabe eines benutzerdefinierten Elementnamens optional. In dieser Version werden benutzerdefinierte Elemente jetzt mithilfe des is -attributs im Prototyp registriert.

Version 0.5:

<🎜>

Version 1.0:

<polymer-element name="credit-card"></polymer-element>
  ...

Der Wert des Attributs

is muss mit dem <dom-module> -Merkmal des id -Tages des benutzerdefinierten Elements übereinstimmen und unterscheidet sich von der vorherigen Version, die nicht optional ist.

Das

-Tag kann innerhalb oder außerhalb des <dom-module> -Elements sein, aber die Vorlage des Elements muss analysiert werden, bevor der Konstruktor Polymer aufgerufen wird.

Benutzerdefinierte Elementattribute

Alle im

<polymer-element> enthaltenen Attribute sollten nun zusammen mit dem Datentyp auf dem properties -Objekt deklariert werden.

Version 0.5:

<dom-module id="credit-card"></dom-module>
  ...

Version 1.0:

Polymer('credit-card', {});

benutzerdefiniertes Elementstil

Der

Elementstil ist jetzt außerhalb des <template> -Tags definiert.

Version 0.5:

Polymer({
  is: 'credit-card'
});

Version 1.0:

<polymer-element name='credit-card' attributes='amount'></polymer-element>

Verwenden Sie den HTML -Import, um externe Stilblätter zu unterstützen.

Datenbindung

Polymer 1.0 liefert zwei Arten von Datenbindung:

• Quadratklammern [[ ]] Erstellen Sie eine Einwegbindung. Die Datenflüsse sind von oben nach unten, von Host bis zu untergeordneten Elementen, und die Bindung ändern niemals die Hosteigenschaften.
• Brapper {{ }} Erstellen Sie eine automatische Bindung. Der Datenfluss ist einseitig oder bidirektional, abhängig davon, ob das Zielattribut als bidirektionale Bindung konfiguriert ist.

In dieser Version muss die Bindung den gesamten Textinhalt des Knotens oder den gesamten Wert des Attributs ersetzen. Daher wird die String -Verkettung nicht unterstützt. Für Eigenschaftswerte wird empfohlen, berechnete Bindung anstelle einer String -Verkettung zu verwenden.

Version 0.5:

Polymer({
  is: 'credit-card',
  properties: {
    amount: {
      type: Number
    }
  }
});

Version 1.0:

<polymer-element name="credit-card" attributes="amount"></polymer-element>
  <template>
    ...
  </template>

<dom-module id="credit-card">
  <style>
    ...
  </style>
  <template>
    ...
  </template>
</dom-module>

Beachten Sie, dass dies bedeutet, dass der Knoten keine Räume um den gebundenen Kommentar enthalten kann.

Neues schattiges Dom

Polymer 0.5 Verwenden Sie Shadow DOM, um Entwicklern einfachere Element -Schnittstellen zu ermöglichen und die gesamte Komplexität abzuwarten, indem sie Subträume hinter Schattenwurzeln verstecken. Dies bildet die Grundlage der Kapselung und funktioniert gut in Browsern, die Shadow Dom unterstützen.

Für Browser, die Shadow DOM noch nicht unterstützen, ist es sehr schwierig, genau dieselbe Polyfill wie native Shadow DOM zu implementieren, normalerweise langsamer als native Implementierungen, und benötigt viel Code. Aus diesen Gründen hat das Polymer -Team beschlossen, das Shadow Dom Polyfill abzusagen, und erstellte stattdessen eine leichtere Version des nativen DOM, die eine ähnliche Verpackung wie Shadow DOM bietet.

Es ist zu beachten, dass Shady DOM und Shadow DOM miteinander kompatibel sind, was bedeutet, dass die schattige DOM -API native Shadow DOM verwendet, wenn der Browser verfügbar ist und in nicht unterstützten Browsern auf schattige DOM zurückreicht.

Schlussfolgerung

Unter der Komplexität Ihrer Anwendung kann die Aktualisierung Ihrer Anwendung auf Polymer 1.0 ein sehr langsamer Prozess sein, hat jedoch enorme Vorteile bei der Beschleunigung der Lastzeiten und der erheblichen Verringerung der Nutzlasten. Der offizielle Migrationsleitfaden, der auf der Website von Polymer Project verfügbar ist, bietet einen detaillierteren Blick auf einige andere Änderungen an der internen API.

Zusätzlich hat Chuck Horton ein Github -Repository namens Road to Polymer 1.0 erstellt, das ein Code -Conversion -Tool bietet, mit dem Ihren Code von Version 0.5 bis Version 1.0 aktualisiert werden kann. Dies kann ein Ausgangspunkt für die Migration sein, wenn Sie einige Aussehen nicht manuell ändern möchten.

FAQs über das Upgrade auf Polymer 1.0

Was sind die Hauptunterschiede zwischen Polymer 0,5 und Polymer 1.0?

Polymer 1.0 ist eine vollständige Umschrift früherer Versionen von Polymer 0,5. Die neue Version ist effizienter, nimmt weniger Platz und schnellere Leistung ein. Es wird auch eine neue, vereinfachte Syntax eingeführt, die einfacher zu verstehen und zu verwenden ist. Das Datenbindungssystem wurde verbessert, um die Leistung zu verbessern und sein Verhalten intuitiver zu gestalten. Darüber hinaus unterstützt Polymer 1.0 eine bessere Unterstützung für das Erstellen von benutzerdefinierten Elementen, die ein wesentlicher Bestandteil des Webkomponentenstandards sind.

Wie aktualisiere ich mein Projekt von Polymer 0,5 auf Polymer 1.0?

Upgrade von Polymer 0,5 auf Polymer 1.0 enthält mehrere Schritte. Zunächst müssen Sie die Bower -Abhängigkeiten aktualisieren, um auf das neue Polymer 1.0 -Element zu verweisen. Sie müssen dann den HTML -Import aktualisieren, um das neue Element zu laden. Sie müssen auch die Elementdefinition und die Datenbindung aktualisieren, um die neue Polymer 1.0 -Syntax zu verwenden. Schließlich müssen Sie Ihr Projekt gründlich testen, um sicherzustellen, dass alles wie erwartet funktioniert.

Was ist Shadow Dom? Wie funktioniert es in Polymer 1.0?

Shadow DOM ist ein wichtiger Teil des Webkomponentenstandards. Es bietet eine Möglichkeit, die Details der Implementierungen für benutzerdefinierte Elemente zu verkapulieren und seine interne Struktur und Stile außerhalb des Restes der Seite zu verbergen. In Polymer 1.0 können Sie Shadow DOM verwenden, um vollständig eingekapselte und wiederverwendbare benutzerdefinierte Elemente zu erstellen.

Wie kann man Elemente in Shadow Dom stylen?

Styling -Elemente in Shadow DOM können etwas schwierig sein, da sie aus dem Rest der Seite eingekapselt und isoliert werden. Polymer 1.0 bietet jedoch verschiedene Möglichkeiten, Schattendomelemente zu stylen. Sie können CSS -benutzerdefinierte Eigenschaften verwenden, um Stile zu definieren, die in Shadow DOM angewendet werden können. Sie können auch die Selektoren ::shadow und /deep/ verwenden, um Schatten DOM einzudringen und seine internen Elemente zu stylen.

... (Die restlichen Antworten der FAQ können auf die gleiche Weise umgeschrieben werden, um den Inhalt konsistent zu halten, aber die Wörter und Sätze ändern sich)

Das obige ist der detaillierte Inhalt vonEine Anleitung zum Upgrade auf Polymer 1.0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!