Cara Mengintegrasikan Plugin JQuery ke dalam aplikasi Ember

mata utama

Mengintegrasikan pemalam jQuery ke dalam aplikasi Ember dapat meningkatkan fungsi dan pengalaman penggunanya dengan menggabungkan kesederhanaan dan fleksibiliti pemalam jQuery dengan keteguhan dan skalabilitas Ember.
Untuk mengintegrasikan plug-in jQuery ke dalam aplikasi Ember, pasang pertama jQuery menggunakan Pengurus Pakej NPM, dan kemudian mengimport plug-in ke dalam komponen Ember yang berkaitan.
inisialisasi pemalam jQuery dalam komponen Ember harus dilakukan dalam fungsi khas bernama
• , menggunakan didInsertElement bukan this.$ untuk memastikan bahawa pemalam hanya dimulakan untuk komponen ini dan tidak mengganggu komponen lain. $
Untuk mengelakkan pengendali acara yang berlebihan, sebarang peristiwa yang ditetapkan menggunakan plugin hendaklah dikeluarkan apabila komponen akan dikeluarkan dari DOM, menggunakan cangkuk Ember yang lain bernama
• . willDestroyElement

Artikel ini dikaji semula oleh Craig Bilner. Terima kasih kepada semua pengulas rakan sebaya untuk mendapatkan kandungan SitePoint dengan sebaik -baiknya!

Memandangkan populariti jQuery, ia masih memainkan peranan penting dalam bidang pembangunan web, terutamanya apabila menggunakan rangka kerja seperti Ember, tidak menghairankan bahawa ia sering digunakan. Komponen rangka kerja ini adalah serupa dengan plugin jQuery, kerana semuanya direka untuk mengambil tanggungjawab tunggal dalam projek. Dalam artikel ini, kami akan membangunkan komponen Ember yang mudah. Tutorial ini menunjukkan cara mengintegrasikan pemalam jQuery ke dalam aplikasi Ember anda. Komponen ini bertindak sebagai pembalut untuk plugin, memaparkan senarai gambar kecil imej. Setiap kali kita mengklik pada lakaran kecil, versi yang lebih besar akan dipaparkan dalam Pratonton Imej. Ini dilakukan dengan mengekstrak atribut

dari gambar kecil yang diklik. Kami kemudian menetapkan harta Previewer src ke harta kecil src. Kod lengkap untuk artikel ini boleh didapati di GitHub. Dengan ini, mari kita mulakan projek ini. src

Tetapan Projek

Pertama, mari buat projek Ember baru. Pertama, laksanakan perintah berikut pada CLI:

npm install -g ember-cli

Selepas selesai, anda boleh membuat projek dengan menjalankan arahan berikut:

ember new emberjquery

Ini akan membuat projek baru dalam folder yang dipanggil

dan memasang kebergantungan yang diperlukan. Sekarang, pergi ke direktori dengan menulis emberjquery. Projek ini mengandungi fail yang berbeza yang akan kami edit dalam tutorial ini. Fail pertama yang perlu anda edit ialah fail cd emberjquery. Buka dan tukar versi Ember semasa ke 2.1.0. Plugin jQuery yang saya buat untuk projek ini boleh didapati sebagai pakej Bower. Anda boleh memasukkan baris ini dalam projek anda dengan menambahkannya ke fail bower.json anda: bower.json

"jquerypic": "https://github.com/LaminSanneh/sitepoint-jquerypic.git#faulty"

Sekarang, untuk memasang pemalam dan versi baru Ember, jalankan arahan berikut:

npm install -g ember-cli

Oleh kerana plugin ini bukan komponen Ember, kita perlu memasukkan fail yang diperlukan secara manual. Dalam fail ember-cli-build.js, tambahkan dua baris berikut sebelum pernyataan return:

ember new emberjquery

garis -garis ini mengimport dua fail dan masukkannya dalam binaan. Satu adalah fail plugin itu sendiri, dan yang lain adalah fail CSS plugin. Lembaran gaya adalah pilihan, dan anda boleh mengecualikannya jika anda bercadang untuk gaya plugin sendiri.

Buat komponen plug-in baru

Setelah memasukkan plugin dalam aplikasi, mari kita mulakan membuat komponen baru dengan melaksanakan perintah berikut:

"jquerypic": "https://github.com/LaminSanneh/sitepoint-jquerypic.git#faulty"

Perintah ini mencipta fail kelas dan fail templat. Dalam fail templat, tampal kandungan dari fail bower_components/jquerypic/index.html. Letakkan kandungan dalam tag , tidak termasuk skrip. Pada masa ini, fail templat sepatutnya kelihatan seperti ini:

bower install

Dalam fail kelas, tambahkan fungsi bernama didInsertElement:

// 要添加的行
app.import("bower_components/jquerypic/js/jquerypic.js");
app.import("bower_components/jquerypic/styles/app.css");

return app.toTree();
};

kita berada di titik kritikal sekarang. Dengan jQuery, permulaan plugin biasanya berlaku dalam fungsi document.ready, seperti yang ditunjukkan di bawah:

Walau bagaimanapun, untuk komponen Ember, inisialisasi ini berlaku dalam fungsi khas bernama

ember generate component jquery-pic

. Fungsi ini dipanggil apabila komponen sudah siap dan telah berjaya dimasukkan ke dalam DOM. Dengan membungkus kod kami dalam fungsi ini, kami dapat menjamin dua perkara:

didInsertElement

plugin hanya dimulakan untuk komponen ini

• plugin tidak akan mengganggu komponen lain
Sebelum memulakan plugin, mari kita gunakan komponen dalam keadaan semasa. Untuk melakukan ini, buat templat indeks menggunakan arahan berikut:

kemudian tambahkan kod berikut ke templat untuk menggunakan komponen:

{{yield}}
<div class="jquerypic">
  <div class="fullversion-container">
    <img class="full-version lazy"  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  alt="">
  </div>
  <div class="thumbnails">
    <img class="thumbnail lazy"  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  alt="">
    <img class="thumbnail lazy"  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  alt="">
    <img class="thumbnail lazy"  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  alt="">
    <img class="thumbnail lazy"  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  alt="">
    <img class="thumbnail lazy"  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  alt="">
  </div>
</div>

Selepas selesai, muatkan pelayan Ember dengan arahan berikut:

import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement: function () {

  }
});

Gunakan arahan ini untuk memulakan pelayan. Buka penyemak imbas pilihan anda dan akses URL yang ditentukan dalam antara muka baris arahan. Anda harus melihat senarai imej kecil di bawah pratonton imej. Perhatikan bahawa apabila anda mengklik pada lakaran kecil, tiada apa yang berlaku. Ini kerana kami belum mempunyai pengendali acara plugin. Mari Lakukan! Tetapi sebelum menerangkan bagaimana untuk melakukan inisialisasi yang betul, saya akan menunjukkan kesilapan yang akan dibuat oleh banyak pemaju. Penyelesaian ini seolah -olah berfungsi pada pandangan pertama, tetapi saya akan membuktikan bahawa ia bukan penyelesaian terbaik dengan menunjukkan ralat yang diperkenalkan.

$(document).ready(function(){
  // 在这里初始化插件
});

(kandungan berikut adalah serupa dengan teks asal, tetapi ayat -ayat telah diselaraskan dan digilap dan mengekalkan makna asal)

Inisialisasi Komponen Ember

Untuk menunjukkan masalah, mari kita tambahkan kod berikut ke fungsi

:

npm install -g ember-cli

tanpa menggunakan Ember, ini adalah bagaimana anda biasanya memulakan plugin. Sekarang, periksa tetingkap penyemak imbas anda dan klik pada gambar kecil. Anda harus melihat mereka memuatkan ke dalam pratonton imej yang besar seperti yang diharapkan. Semuanya nampaknya berfungsi dengan baik, bukan? Ok, lihat apa yang berlaku apabila kami menambah contoh komponen kedua. Lakukan ini dengan menambahkan satu lagi kod kod yang mengandungi kod yang sama yang saya tunjukkan sebelum ini ke dalam templat indeks. Oleh itu, templat anda kini kelihatan seperti ini:

ember new emberjquery

Jika anda beralih ke tetingkap penyemak imbas, anda harus melihat dua contoh komponen muncul. Apabila anda mengklik pada lakaran kecil salah satu contoh, anda dapat melihat ralat. Pratonton untuk kedua -dua keadaan akan berubah, bukan hanya contoh yang mengklik. Untuk menyelesaikan masalah ini, kita perlu menukar inisialisasi sedikit. Pernyataan yang betul untuk digunakan adalah seperti berikut:

"jquerypic": "https://github.com/LaminSanneh/sitepoint-jquerypic.git#faulty"

Perbezaannya ialah kita menggunakan this.$ bukannya $ sekarang. Kedua -dua contoh komponen kini harus berfungsi dengan baik. Mengklik pada lakaran kecil untuk satu contoh tidak boleh menjejaskan komponen lain. Apabila kita menggunakan this.$ dalam komponen, kita merujuk kepada pengendali jQuery yang hanya untuk komponen itu. Oleh itu, mana -mana operasi DOM yang kami lakukan di atasnya hanya akan menjejaskan contoh komponen. Di samping itu, mana -mana pengendali acara akan ditetapkan hanya pada komponen ini. Apabila kita menggunakan harta jQuery global $, kita merujuk kepada keseluruhan dokumen. Inilah sebabnya inisialisasi kami mempengaruhi komponen lain. Saya perlu mengubahsuai plugin saya untuk menunjukkan kesilapan ini, yang mungkin menjadi topik artikel masa depan. Walau bagaimanapun, amalan terbaik untuk DOM komponen operasi adalah menggunakan this.$.

Hancurkan plugin

OK, setakat ini kami telah belajar bagaimana untuk menubuhkan pengendali acara. Kini sudah tiba masanya untuk menunjukkan cara menghapuskan sebarang peristiwa yang kami sediakan dengan plugin. Kita harus melakukan ini apabila komponen kita hendak dikeluarkan dari DOM. Kita harus melakukan ini kerana kita tidak mahu mana -mana pengendali acara berlebihan untuk digantung di sana. Nasib baik, komponen Ember menyediakan satu lagi cangkuk yang dipanggil willDestroyElement. Cangkuk ini dipanggil setiap kali Ember akan dimusnahkan dan contoh komponen dikeluarkan dari DOM. Plugin saya mempunyai kaedah stopEvents yang boleh dipanggil pada contoh plugin. Kaedah ini harus dipanggil dalam cangkuk khas yang disediakan oleh Ember. Jadi tambahkan fungsi berikut ke komponen:

bower install

Ubah suai fungsi didInsertElement untuk kelihatan seperti ini:

npm install -g ember-cli

Dalam fungsi didInsertElement, kami hanya menyimpan contoh plugin dalam harta komponen. Kami melakukan ini supaya kami dapat mengaksesnya dalam fungsi lain. Dalam fungsi willDestroyElement, kami memanggil kaedah stopEvents pada contoh plugin. Walaupun ini adalah amalan terbaik, aplikasi kami tidak dapat mencetuskan cangkuk ini. Oleh itu, kami akan menyediakan pengendali klik demo. Dalam pengendali ini, kami akan memanggil kaedah stopEvents pada contoh plugin. Ini membolehkan saya menunjukkan bahawa semua pengendali acara telah dikeluarkan seperti yang diharapkan. Sekarang, mari tambahkan pengendali fungsi klik ke komponen:

ember new emberjquery

kemudian tambahkan tag <code><p></p> ke templat komponen, seperti yang ditunjukkan di bawah:

"jquerypic": "https://github.com/LaminSanneh/sitepoint-jquerypic.git#faulty"

Apabila mengklik pada tab ini, ia memanggil operasi stopEvents memusnahkan plugin. Selepas mengklik pada perenggan, plugin tidak lagi akan bertindak balas terhadap acara klik. Untuk membolehkan acara sekali lagi, anda mesti memulakan plugin seperti yang kami lakukan di cangkuk didInsert. Melalui bahagian terakhir, kami melengkapkan komponen Ember yang mudah. Tahniah!

(Kesimpulan dan bahagian FAQ sama dengan teks asal, kecuali bahawa ayat -ayat diselaraskan dan digilap dan mengekalkan makna asal)

Kesimpulan

Dalam tutorial ini, anda telah melihat bahawa plugin jQuery masih memainkan peranan penting dalam kerjaya kami. Dengan API yang kuat dan rangka kerja JavaScript yang ada, sangat berguna untuk memahami cara menggabungkan kedua -dua dunia ini dan menjadikan mereka bekerja dengan harmoni. Dalam contoh kami, komponen bertindak sebagai pembalut untuk plugin, memaparkan senarai gambar kecil imej. Setiap kali kita mengklik pada lakaran kecil, versi yang lebih besar akan dipaparkan dalam Pratonton Imej. Ini hanya satu contoh, tetapi anda boleh mengintegrasikan mana -mana plugin jQuery yang diperlukan. Sekali lagi, kod tersebut boleh didapati di GitHub. Adakah anda menggunakan plugin jQuery dalam aplikasi Ember anda? Jika anda ingin membincangkannya, sila komen di bahagian di bawah.

Soalan Lazim Mengenai Mengintegrasikan JQuery Plug-in Ke Aplikasi Ember

Apakah tujuan mengintegrasikan pemalam jQuery ke dalam aplikasi Ember?

Mengintegrasikan pemalam jQuery ke dalam aplikasi Ember dapat meningkatkan fungsi dan pengalaman pengguna aplikasi anda dengan ketara. Plugin JQuery menyediakan pelbagai ciri seperti animasi, pengesahan bentuk, dan unsur -unsur interaktif yang dapat diintegrasikan dengan mudah ke dalam aplikasi Ember. Integrasi ini membolehkan pemaju memanfaatkan kuasa jQuery dan Ember untuk menggabungkan kesederhanaan dan fleksibiliti pemalam jQuery dengan keteguhan dan skalabilitas Ember.

bagaimana memasang jQuery dalam aplikasi Ember saya?

Untuk memasang jQuery dalam aplikasi Ember, anda boleh menggunakan Pengurus Pakej NPM. Jalankan arahan npm install --save @ember/jquery di terminal anda. Ini menambah jQuery kepada kebergantungan projek dan menjadikannya boleh dilaksanakan dalam permohonan itu.

Bagaimana menggunakan plugin jQuery dalam aplikasi Ember saya?

Selepas anda memasang jQuery, anda boleh menggunakan plug-in jQuery dalam aplikasi Ember anda dengan mengimportnya ke dalam komponen Ember yang berkaitan. Anda kemudian boleh menggunakan fungsi plugin mengikut dokumentasi plugin. Ingatlah untuk memastikan plugin serasi dengan versi jQuery yang anda gunakan.

Adakah terdapat masalah keserasian antara jQuery dan Ember?

Sering kali, jQuery dan Ember berfungsi dengan baik bersama -sama. Walau bagaimanapun, bergantung kepada versi jQuery dan Ember yang anda gunakan, mungkin terdapat beberapa isu keserasian. Sentiasa periksa dokumentasi untuk jQuery dan Ember untuk keserasian.

Bolehkah saya menggunakan plugin jQuery di Ember tanpa memasang jQuery?

Tidak, anda tidak boleh menggunakan plugin jQuery di Ember tanpa memasang jQuery. Plugin JQuery dibina di atas perpustakaan JQuery dan memerlukannya untuk dijalankan. Oleh itu, anda mesti terlebih dahulu memasang jQuery sebelum anda boleh menggunakan mana -mana plugin jQuery.

Bagaimana untuk mengemas kini jQuery dalam aplikasi Ember saya?

Untuk mengemas kini jQuery dalam aplikasi Ember, anda boleh menggunakan Pengurus Pakej NPM. Jalankan arahan npm update @ember/jquery di terminal anda. Ini akan mengemas kini jQuery ke versi terkini.

Bolehkah saya menggunakan pelbagai plugin jQuery dalam aplikasi Ember saya?

Ya, anda boleh menggunakan pelbagai plugin jQuery dalam aplikasi Ember anda. Walau bagaimanapun, sedar bahawa menggunakan terlalu banyak plugin boleh menjejaskan prestasi aplikasi anda. Sentiasa menguji permohonan anda dengan teliti selepas menambah plugin baru untuk memastikan ia masih berfungsi seperti yang diharapkan.

Bagaimana menyelesaikan masalah pemalam jQuery dalam aplikasi Ember?

Jika anda menghadapi masalah plugin jQuery dalam aplikasi Ember anda, periksa dokumentasi plugin untuk sebarang isu yang diketahui atau tip penyelesaian masalah. Jika anda masih menghadapi masalah, cuba hubungi pemaju plugin atau komuniti Ember untuk mendapatkan bantuan.

Bolehkah saya menggunakan plugin jQuery dalam aplikasi Ember saya tanpa pengalaman pengaturcaraan?

Walaupun anda boleh menggunakan plugin jQuery dalam aplikasi Ember anda tanpa pengalaman pengaturcaraan, disarankan agar anda memahami asas -asas JavaScript dan Ember. Ini akan memudahkan anda memahami cara mengintegrasikan dan menggunakan plugin dengan cekap.

Adakah terdapat alternatif untuk menggunakan plugin jQuery dalam aplikasi Ember saya?

Ya, ada alternatif untuk menggunakan plugin jQuery dalam aplikasi Ember. Ember sendiri mempunyai ekosistem tambahan tambahan yang dapat memberikan ciri-ciri yang sama dengan plugin jQuery. Di samping itu, anda boleh menggunakan JavaScript asli atau perpustakaan JavaScript lain untuk mencapai hasil yang sama. Walau bagaimanapun, plugin jQuery biasanya menyediakan penyelesaian yang lebih mudah dan lebih mudah.

Atas ialah kandungan terperinci Cara Mengintegrasikan Plugin JQuery ke dalam aplikasi Ember. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!