PricingLoginStart free
jQuery Academy · Pelajaran

jQuery dalam Persekitaran Modul

Pelajari cara mengimport dan menggunakan jQuery dalam persekitaran Modul ES atau CommonJS, sambil memastikan pengurusan kebergantungan yang betul dalam aplikasi modular.

Pelajaran 2 daripada 311 langkah

jQuery dalam Persekitaran Modul ialah pelajaran jQuery Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 3. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran jQuery Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus jQuery Academy merangkumi sejumlah 3 pelajaran.

Pengenalan kepada Modul JS

Selamat datang! Dalam pembangunan JavaScript moden, modul penting untuk menyusun kod. Modul membantu memastikan kod anda kemas dan mengelakkan konflik.

Sebelum modul diperkenalkan, semua skrip berkongsi skop global, lalu menyebabkan masalah "pertembungan pemboleh ubah". Modul menyelesaikan masalah ini dengan memberikan setiap fail skop peribadinya sendiri.

CommonJS: Cara require()

CommonJS ialah sistem modul yang digunakan terutamanya dalam persekitaran Node.js. Sistem ini mentakrifkan cara modul diimport dan dieksport menggunakan require() dan module.exports.

Apabila bekerja dengan kod bahagian hadapan, modul CommonJS biasanya dihimpunkan menggunakan alatan seperti Webpack atau Browserify supaya serasi dengan pelayar.

Mengimport jQuery dalam CommonJS

Untuk menggunakan jQuery dalam modul CommonJS, biasanya anda memasangnya melalui npm, kemudian menggunakan fungsi require() untuk membawanya ke dalam fail anda.

  • Pasang: npm install jquery
  • Import: const $ = require('jquery');

Ini menetapkan objek jQuery kepada pemboleh ubah $ yang bersifat setempat dalam modul anda.

Contoh jQuery CommonJS

Beginilah cara anda mungkin menggunakan jQuery dalam modul CommonJS. Ingat, kod ini biasanya diproses oleh penghimpun sebelum dijalankan dalam pelayar.

Cuba jalankannya untuk melihat output!

const $ = require('jquery');

$(document).ready(function() {
  $('body').append('<p>Hello from CommonJS jQuery!</p>');
  console.log('CommonJS script executed!');
});

Modul ES: Cara import/export

Modul ES (Modul ECMAScript) ialah sistem modul rasmi dan piawai untuk JavaScript. Modul ini menggunakan kata kunci import dan export.

  • Asli: Disokong secara langsung oleh pelayar moden dan Node.js.
  • Statik: Import diselesaikan sebelum pelaksanaan kod.

Sistem ini menyediakan cara yang lebih kemas dan cekap untuk mengurus kebergantungan.

Mengimport jQuery dalam Modul ES

Menggunakan jQuery dalam Modul ES adalah mudah. Anda akan menggunakan pernyataan import.

  • Pasang: npm install jquery
  • Import: import $ from 'jquery';

Untuk ini berfungsi, pakej jQuery perlu mendedahkan dirinya sebagai Modul ES, seperti yang dilakukan oleh versi moden, atau penghimpun mengendalikan penukarannya.

Contoh jQuery Modul ES

Contoh ini menunjukkan cara mengimport dan menggunakan jQuery dalam Modul ES. Perhatikan sintaks import.

Jalankan kod ini untuk melihat hasilnya!

import $ from 'jquery';

$(document).ready(() => {
  $('body').append('<p>Hello from ES Modules jQuery!</p>');
  console.log('ES Module script executed!');
});

Skop Global berbanding Skop Modul

Apabila anda mengimport jQuery ke dalam modul (sama ada CommonJS atau Modul ES), pemboleh ubah $ dan jQuery biasanya terhad kepada skop setempat modul tersebut.

  • Ini menghalang jQuery daripada mencemarkan objek global window.
  • Ini mengelakkan konflik dengan pustaka lain yang mungkin turut menggunakan $.
  • Kod anda menjadi lebih mudah dijangka dan terasing.

Penghimpun: Penghubung Modul

Walaupun pelayar moden menyokong Modul ES, penghimpun seperti Webpack, Rollup atau Parcel memainkan peranan penting apabila mengintegrasikan jQuery:

  • Penyelesaian: Alat ini mencari dan menyertakan semua kebergantungan modul anda.
  • Penukaran: Menukar CommonJS atau JS lama kepada Modul ES, atau sebaliknya.
  • Pengoptimuman: Mengecilkan, menyingkirkan kod yang tidak digunakan dan menggabungkan fail untuk prestasi yang lebih baik.

Alat ini memastikan persediaan modul yang kompleks berfungsi dengan lancar dalam pelayar.

Semakan Import Modul

Anda telah mempelajari cara mengimport jQuery dalam persekitaran CommonJS dan Modul ES. Mari uji pemahaman anda!

Jawab dalam pelajaran interaktif

Imbas Kembali: jQuery dalam Modul

Syabas! Anda telah mempelajari cara mengintegrasikan jQuery ke dalam persekitaran modul JavaScript moden.

  • CommonJS: Menggunakan require(), lazimnya dalam Node.js dan aplikasi pelayar yang dihimpunkan.
  • Modul ES: Menggunakan import, piawai asli untuk JS moden.
  • Faedah: Modul menghalang pencemaran skop global, memperkemas penyusunan kod dan menjadikan kebergantungan lebih jelas.
  • Penghimpun: Alat seperti Webpack penting untuk menyelesaikan dan mengoptimumkan aplikasi jQuery berasaskan modul.

Memahami konsep ini penting untuk membina projek bahagian hadapan dengan jQuery yang boleh diskalakan dan mudah diselenggara.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
22
Pelajaran
48
Mula belajar secara percumaLihat kursus penuh

Soalan Lazim

Adakah pelajaran “jQuery dalam Persekitaran Modul” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran jQuery Academy, termasuk “jQuery dalam Persekitaran Modul”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus jQuery Academy merangkumi sejumlah 3 pelajaran.

Apakah yang akan saya pelajari dalam “jQuery dalam Persekitaran Modul”?

Pelajari cara mengimport dan menggunakan jQuery dalam persekitaran Modul ES atau CommonJS, sambil memastikan pengurusan kebergantungan yang betul dalam aplikasi modular. Anda berlatih jQuery Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan jQuery Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran jQuery Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 3.

Berapa lamakah pelajaran “jQuery dalam Persekitaran Modul” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran jQuery Academy ini?

Ya. Setiap pelajaran jQuery Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. Keserasian dengan Sintaks ES6+
  2. jQuery dalam Persekitaran Modul
  3. Menghubungkan jQuery dengan Rangka Kerja Moden
← Kembali ke jQuery Academy