Panduan untuk Menaiktaraf ke Polimer 1.0

mata teras

Polimer 1.0 adalah refactoring menyeluruh versi terdahulu, dengan prestasi yang lebih cekap, saiz yang lebih kecil, sokongan yang lebih baik untuk elemen tersuai, dan sistem pengikatan data yang lebih baik untuk memudahkan digunakan dan lebih intuitif.
Peningkatan dari polimer 0.5 hingga polimer 1.0 memerlukan beberapa langkah, termasuk mengemas kini kebergantungan bower, mengemas kini import HTML, definisi elemen tweaking dan pengikatan data untuk menyesuaikan sintaks baru, dan ujian menyeluruh untuk memastikan semuanya berfungsi seperti yang diharapkan.
Polymer 1.0 memperkenalkan Shadow Dom, bahagian utama standard Komponen Web, merangkumi butiran pelaksanaan unsur -unsur tersuai, menyembunyikan struktur dalaman dan stylings mereka di luar halaman lain. Anda boleh menggunakan sifat tersuai CSS dan
• dan ::shadow pemilih untuk elemen gaya dalam shadow dom. /deep/

Pada persidangan Google I/O 2015 yang baru disimpulkan, Google mengeluarkan versi Polymer 1.0 yang lama ditunggu-tunggu dan mengumumkan ia bersedia untuk dihasilkan. Bagi mereka yang telah menggunakan perpustakaan polimer semasa ia masih dalam peringkat pratonton pemaju, artikel ini akan menjadi panduan untuk memindahkan aplikasi sedia ada ke versi terkini polimer.

Beberapa nota penting mengenai versi 1.0:

Ia tidak serasi dengan versi sebelumnya 0.5 (versi terpanjang setakat ini).
Versi baru memberi tumpuan kepada prestasi dan kecekapan sementara mengurangkan saiz keseluruhan perpustakaan.
Ia telah dibina sepenuhnya dari awal, membolehkan pemaju merancang unsur -unsur tersuai yang lebih seperti elemen DOM standard lebih mudah dan lebih cepat.
Penanda aras dalaman menunjukkan bahawa berbanding dengan versi terdahulu, versi 1.0 adalah kira -kira 3 kali lebih cepat pada Chrome dan kira -kira 4 kali lebih cepat pada Safari.

Langkah -langkah untuk memasang versi terkini polimer adalah sama seperti yang diterangkan dalam artikel ini. Untuk mengemas kini pemasangan polimer yang sedia ada, navigasi ke direktori aplikasi dan jalankan arahan berikut di terminal:

$ bower update

Adalah penting untuk diperhatikan bahawa ini pasti akan memecahkan permohonan anda yang sedia ada, seperti yang dinyatakan sebelum ini, kedua -dua versi ini tidak serasi. Oleh itu, adalah disyorkan untuk memasang salinan baru dalam folder berasingan. Untuk menggambarkan perubahan sejak versi 0.5, kami akan menggunakan elemen tersuai kad kredit dari jawatan sebelumnya di SitePoint sebagai rujukan untuk membandingkan perbezaan antara kedua -dua versi.

menyediakan polyfill untuk penyemak imbas yang tidak disokong

Versi baru polimer tidak lagi memerlukan Shadow Dom Polyfill yang termasuk dalam perpustakaan

. Sebaliknya, gunakan perpustakaan yang lebih kecil untuk menyediakan polyfills untuk pelayar yang lebih tua. webcomponents.js webcomponents-lite.js versi 0.5:

versi 1.0:

<🎜>

"Versi Lite" adalah kira -kira 80kb kurang daripada pendahulunya, yang boleh menjadi sangat penting apabila prestasi adalah faktor utama.

<🎜>

Tentukan elemen tersuai

Tag

<polymer-element> telah digantikan dengan tag <dom-module> yang mengandungi definisi elemen tersuai. Elemen tersuai kini dikenalpasti oleh atribut <dom-module> tag id. Peraturan penamaan untuk elemen tersuai masih sama.

versi 0.5:

$ bower update

versi 1.0:

<🎜>

Daftar elemen tersuai

Sebelum ini, kita boleh mendaftarkan elemen tersuai dengan hanya memanggil pembina Polymer(). Jika tag berada dalam tag <polymer-element>, menyatakan nama elemen tersuai adalah pilihan. Dalam versi ini, elemen tersuai kini didaftarkan dengan menggunakan atribut is pada prototaip.

versi 0.5:

<🎜>

versi 1.0:

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

Nilai atribut

is mesti sepadan dengan atribut <dom-module> atribut id tag elemen tersuai dan berbeza dari versi terdahulu, yang bukan pilihan.

Tag

boleh berada di dalam atau di luar elemen <dom-module>, tetapi templat elemen mesti dihuraikan sebelum pembina Polymer dipanggil.

atribut elemen tersuai

Sebarang atribut yang terkandung dalam tag

<polymer-element> kini harus diisytiharkan pada objek properties bersama -sama dengan jenis data.

versi 0.5:

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

versi 1.0:

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

gaya elemen adat

Gaya elemen

kini ditakrifkan di luar tag <template>.

versi 0.5:

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

versi 1.0:

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

Gunakan import HTML untuk menyokong helaian gaya luaran.

mengikat data

Polimer 1.0 menyediakan dua jenis data yang mengikat:

• kurungan persegi [[ ]] Buat satu arah mengikat. Aliran data adalah top-down, dari tuan rumah kepada elemen kanak-kanak, mengikat tidak pernah mengubah suai sifat tuan rumah.
• Brappers {{ }} Buat mengikat automatik. Aliran data adalah satu arah atau bidirectional, bergantung kepada sama ada atribut sasaran dikonfigurasikan sebagai pengikatan dua arah.

Dalam versi ini, pengikatan mesti menggantikan keseluruhan kandungan teks nod atau keseluruhan nilai atribut. Oleh itu, penyambungan rentetan tidak disokong. Untuk nilai harta, disarankan untuk menggunakan pengikatan yang dikira dan bukannya penyambungan rentetan.

versi 0.5:

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

versi 1.0:

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

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

Perhatikan bahawa ini bermakna bahawa nod tidak boleh mengandungi sebarang ruang di sekitar komen terikat.

New Shady Dom

Polimer 0.5 Gunakan Shadow Dom untuk menyediakan pemaju dengan antara muka elemen yang lebih mudah dan abstrak semua kerumitan dengan menyembunyikan subtrees di belakang akar bayang -bayang. Ini membentuk asas enkapsulasi dan berfungsi dengan baik dalam pelayar yang menyokong Shadow Dom.

Untuk penyemak imbas yang belum menyokong Shadow Dom, sangat sukar untuk melaksanakan polyfill yang sama seperti bayangan asli, biasanya lebih perlahan daripada pelaksanaan asli, dan memerlukan banyak kod. Atas sebab -sebab ini, pasukan polimer memutuskan untuk membatalkan Shadow Dom Polyfill dan sebaliknya membina versi yang lebih ringan dari DOM asli yang menyediakan pembungkusan yang serupa dengan Shadow Dom.

Harus diingat bahawa Shady Dom dan Shadow Dom bersesuaian antara satu sama lain, yang bermaksud bahawa Dom API Shady menggunakan Dom Shadow Native apabila penyemak imbas tersedia dan jatuh kembali ke Dom Shady dalam pelayar yang tidak disokong.

Kesimpulan

Di bawah kerumitan permohonan anda, menaik taraf permohonan anda ke Polimer 1.0 boleh menjadi proses yang sangat perlahan, tetapi ia mempunyai kelebihan yang besar dalam mempercepatkan masa beban dan mengurangkan muatan dengan ketara. Panduan Migrasi Rasmi yang terdapat di laman web Projek Polimer memberikan pandangan yang lebih mendalam pada beberapa perubahan lain ke API dalaman, jadi pastikan untuk menyemaknya.

Di samping itu, Chuck Horton mencipta repositori GitHub yang dipanggil Road to Polymer 1.0, yang menyediakan alat penukaran kod yang boleh mengemas kini kod anda dari versi 0.5 hingga versi 1.0. Ini boleh menjadi titik permulaan untuk penghijrahan jika anda tidak mahu membuat perubahan penampilan secara manual.

Soalan Lazim Mengenai Peningkatan ke Polimer 1.0 Apakah perbezaan utama antara polimer 0.5 dan polimer 1.0?

Polimer 1.0 adalah penulisan lengkap versi sebelumnya polimer 0.5. Versi baru lebih cekap, mengambil sedikit ruang dan prestasi yang lebih cepat. Ia juga memperkenalkan sintaks yang baru dan mudah yang lebih mudah difahami dan digunakan. Sistem pengikat data telah diperbaiki untuk meningkatkan prestasi dan menjadikan kelakuannya lebih intuitif. Di samping itu, Polymer 1.0 menyokong sokongan yang lebih baik untuk mewujudkan elemen tersuai, yang merupakan bahagian utama standard Komponen Web.

Bagaimana untuk menaik taraf projek saya dari polimer 0.5 hingga polimer 1.0?

Menaik taraf dari polimer 0.5 hingga polimer 1.0 termasuk beberapa langkah. Pertama, anda perlu mengemas kini kebergantungan bower untuk menunjuk kepada elemen polimer baru 1.0. Anda kemudian perlu mengemas kini import HTML untuk memuatkan elemen baru. Anda juga perlu mengemas kini definisi elemen dan mengikat data untuk menggunakan sintaks Polimer 1.0 baru. Akhirnya, anda perlu menguji projek anda dengan teliti untuk memastikan semuanya berfungsi seperti yang diharapkan.

Apa itu Shadow Dom? Bagaimana ia berfungsi dalam Polimer 1.0?

Shadow Dom adalah bahagian utama standard komponen web. Ia menyediakan cara untuk merangkum butiran pelaksanaan elemen tersuai, menyembunyikan struktur dalaman dan gaya di luar halaman lain. Dalam Polimer 1.0, anda boleh menggunakan Shadow Dom untuk membuat elemen tersuai yang terkandung dan boleh diguna semula sepenuhnya.

Bagaimana gaya elemen dalam Shadow Dom?

Elemen gaya dalam Shadow Dom boleh menjadi agak rumit kerana ia dikemas dan diasingkan dari seluruh halaman. Walau bagaimanapun, Polymer 1.0 menyediakan beberapa cara untuk gaya dom bayangan gaya. Anda boleh menggunakan sifat tersuai CSS untuk menentukan gaya yang boleh digunakan di dalam Shadow Dom. Anda juga boleh menggunakan pemilih

dan

untuk menembusi bayangan dom dan gaya elemen dalamannya. ::shadow

... (Selebihnya jawapan FAQ boleh ditulis semula dengan cara yang sama untuk memastikan kandungannya konsisten, tetapi kata -kata dan ayat berubah)

Atas ialah kandungan terperinci Panduan untuk Menaiktaraf ke Polimer 1.0. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!