Membina perpustakaan dengan keperluan

mata utama

memerlukanJS adalah loader modul AMD untuk penyemak imbas yang secara asynchronously memuat skrip dan fail CSS, menguruskan dependensi dan membina struktur kod. Ia juga termasuk alat pengoptimuman untuk persekitaran pengeluaran.
Apabila menggunakan keperluan, kod perlu dibungkus dalam definisi modul. Modul boleh dirujuk dalam modul lain, dan semua kebergantungan akan dimuatkan sebelum modul itu dimuatkan.
memerlukan pengoptimum R.JS boleh dikonfigurasikan untuk membina semua modul ke dalam satu fail. Konfigurasi ini juga boleh menjadikan modul sebagai perpustakaan global yang bebas, kedua -duanya sebagai modul AMD dan sebagai eksport global dalam penyemak imbas.
memerlukanJS boleh digunakan untuk membina perpustakaan dan aplikasi yang menggunakannya. Proses ini melibatkan penentuan dan menggunakan modul AMD, mengkonfigurasi pengoptimal R.JS, dan mengkonfigurasi keperluan dalam penyemak imbas untuk menjana kod berstruktur dan teratur.

memerlukanJS adalah loader modul AMD untuk penyemak imbas yang boleh memuat skrip dan fail CSS secara asynchronously. Anda tidak lagi perlu memproses susunan fail skrip dalam satu fail (seperti index.html). Sebaliknya, anda hanya membungkus kod anda dalam definisi modul, memerlukanJS akan bertanggungjawab untuk pengurusan ketergantungan, menjadikan struktur kod anda lebih jelas dan lebih teratur. Ia juga mempunyai alat pengoptimuman yang memampatkan dan menghubungkan fail untuk persekitaran pengeluaran.

Laman web rasmi menyediakan dokumentasi terperinci mengenai APInya dan terdapat banyak pangkalan kod sampel untuk membantu anda. Walau bagaimanapun, ia mempunyai banyak konfigurasi, dan menggunakan keperluan yang diperlukan akan menjadi rumit pada mulanya.

Dalam artikel ini, kita akan belajar cara menggunakan memerlukan Gueson dengan membina perpustakaan dengan modul AMD, mengoptimumkannya, dan mengeksportnya sebagai modul mandiri menggunakan pengoptimuman yang memerlukan. Kemudian, kami akan membina permohonan menggunakan keperluan dan menggunakan perpustakaan kami.

Tutorial ini mengandaikan bahawa anda mempunyai pemahaman tertentu mengenai keperluan. Jika anda mencari panduan permulaan, lihat: Memahami keperluan untuk pemuatan modul JavaScript yang cekap.

Pemasangan memerlukanJS

memerlukanJS boleh dipasang melalui Bower:

bower install requirejs --save

atau anda boleh mendapatkan fail dari GitHub.

Terdapat juga penjana yeoman berasaskan grunt untuk projek-projek yang memerlukan.

Tentukan modul AMD

Kami membungkus kod dalam

yang akan menjadikannya modul AMD. define()

fail: mylib.js

define(['jquery'], function($) {
    // $现在是jquery。

    return 'mylib';
});

itu sahaja. Ambil perhatian bahawa

menerima parameter pertama pilihan, pelbagai pergantungan, dalam kes ini define(). Ia adalah senarai ketergantungan untuk modul ini. Semua modul dalam array akan dimuatkan sebelum modul ini. Apabila melaksanakan modul ini, parameter adalah modul yang sepadan dalam pelbagai ketergantungan. ['jquery']

Jadi dalam kes ini, jQuery akan dimuatkan terlebih dahulu, kemudian lulus ke dalam fungsi sebagai parameter $, dan kemudian kita boleh menggunakannya dengan selamat dalam modul. Akhirnya, modul kami mengembalikan rentetan. Nilai pulangan adalah apa yang diserahkan kepada parameter fungsi apabila modul ini diperlukan.

Cite modul lain

mari kita lihat bagaimana ia berfungsi dengan menentukan modul kedua dan merujuk kepada modul pertama kami MyLib.js.

fail: main.js

bower install requirejs --save

Anda boleh merujuk kepada mana -mana bilangan kebergantungan dalam pelbagai ketergantungan, dan semua modul akan disediakan oleh parameter fungsi dalam urutan yang sama. Dalam modul kedua ini, kami merujuk modul jQuery dan MyLib dan hanya mengembalikan objek mendedahkan pembolehubah tertentu. Pengguna perpustakaan ini akan menggunakan objek ini sebagai perpustakaan anda.

Konfigurasi pengoptimuman yang diperlukan: r.js

Anda mungkin tertanya -tanya, bagaimanakah memerlukan yang memerlukan fail mana yang hendak dimuat dengan hanya melihat rentetan dalam pelbagai ketergantungan? Dalam contoh kami, kami menyediakan jQuery dan mylib sebagai rentetan, memerlukan tahu di mana modul -modul ini. Mylib sangat mudah, ia adalah mylib.js, tidak .Js.

di mana jQuery? Inilah yang memerlukan konfigurasi. Anda boleh menyediakan pelbagai konfigurasi melalui konfigurasi memerlukan. Terdapat dua cara untuk memberikan konfigurasi ini, kerana kami menggunakan pengoptimuman yang memerlukan dan saya akan menunjukkan kepada anda kaedah R.JS. R.JS adalah pengoptimuman yang memerlukan.

kami akan menyediakan R.JS dengan konfigurasi yang mengoptimumkan semua modul ke dalam satu fail. Konfigurasi yang kami sediakan akan membolehkan R.JS membina modul ke dalam perpustakaan global yang bebas, baik sebagai modul AMD dan sebagai eksport global dalam pelayar.

r.js boleh dijalankan melalui baris arahan atau sebagai modul nod. Terdapat juga tugas yang menggembirakan untuk menjalankan pengoptimuman grunt-requirejs.

dengan yang dikatakan, mari kita lihat bagaimana konfigurasi kami seperti:

Fail: Tools/Build.js

define(['jquery'], function($) {
    // $现在是jquery。

    return 'mylib';
});

Fail konfigurasi sebenarnya adalah teras memerlukan. Sebaik sahaja anda memahami bagaimana parameter ini berfungsi, anda boleh menggunakan keperluan seperti profesional.

Anda boleh melakukan tindakan yang berbeza dan menyesuaikan projek membina menggunakan fail konfigurasi. Untuk mengetahui lebih lanjut mengenai konfigurasi dan memerlukan, kami mengesyorkan agar anda merujuk kepada dokumentasi dan wiki. Terdapat juga fail konfigurasi sampel yang menunjukkan cara menggunakan sistem binaan, jadi pastikan untuk merujuknya juga.

Akhirnya, kita sebenarnya menjalankan pengoptimum. Seperti yang saya katakan sebelum ini, anda boleh menjalankannya melalui baris arahan atau melalui nod dan tugas mengerang. Lihat fail R.JS ReadMe untuk menjalankan pengoptimum dalam persekitaran yang berbeza.

define(['jquery', 'mylib'], function($, mylib) {
    // $照常是jquery
    // mylib是字符串`mylib`，因为这是第一个模块的返回值
    //

    return {
        version: '0.0.1, jQuery版本：' + $.fn.jquery,
        mylibString: mylib
    }
});

ini akan menjana fail binaan dalam dist/mylib.js

build.js

Seterusnya, mari kita lihat apa maksud parameter ini.

baseUrl - Laluan akar untuk semua modul untuk dicari.

jalur - peta jalur relatif kepada nama modul BaseUrl.

Dalam contoh kami, "mylib" peta ke "../Main", yang relatif kepada BaseUrl, jadi apabila kita merujuk "mylib", ia memuat fail "../lib/../mylib/Main. JS ". Perhatikan bahawa kami menambah BaseUrl, kemudian tetapan laluan, kemudian nama modul diikuti oleh akhiran .js. Di sana anda boleh menentukan bagaimana modul dipetakan ke fail seperti JQuery dan MyLib.

termasuk - modul yang ingin kami sertakan dalam proses pengoptimuman. Ketergantungan yang diperlukan untuk modul yang disertakan secara tersirat dimasukkan. Dalam contoh kami, modul utama bergantung kepada mylib dan jQuery, yang akan disertakan juga, jadi tidak perlu memasukkannya secara eksplisit. Kami juga termasuk Almond, yang akan disebutkan kemudian.

EXCLUDE - MODUL kita mahu mengecualikan dari proses pengoptimuman. Dalam kes kami, kami menolak jQuery. Pengguna yang membina perpustakaan akan menyediakan perpustakaan jQuery. Kita akan melihatnya kemudian.

keluar - nama fail output yang dioptimumkan.

Bungkus - Bungkus pakej binaan dalam teks permulaan dan akhir yang ditentukan oleh bungkus. Fail output yang dioptimumkan adalah seperti berikut: Bungkus. Modul Modul Wrapped.End yang terkandung di dalamnya. Wrap.Start dan Wrap.End adalah nama fail yang kandungannya terkandung dalam output.

Almond

Perpustakaan yang dibina tidak mengandungi fail memerlukan.js, tetapi menggunakan badam. Almond adalah pelaksanaan AMD AMD kecil yang akan menggantikan keperluan.js.

Pek perpustakaan kami

Dalam konfigurasi R.JS, kami membungkus perpustakaan kami menggunakan fail wrap.start dan wrap.end. Kami juga termasuk badam di perpustakaan, yang akan menjadikan perpustakaan kami bebas, jadi ia boleh digunakan melalui pembolehubah global pelayar atau sebagai modul AMD melalui keperluan.

fail: wrap.start

bower install requirejs --save

Modul yang kita sertakan utama, mylib dan badam terletak di tengah -tengah bungkus.start dan wrap.end.

Fail: wrap.end

define(['jquery'], function($) {
    // $现在是jquery。

    return 'mylib';
});

Jika pengguna menggunakan loader AMD, fail yang dibina akan meminta "jQuery" sebagai kebergantungan AMD. Jika pengguna hanya menggunakan pembolehubah global penyemak imbas, perpustakaan akan mendapat pembolehubah global $ dan menggunakannya untuk kebergantungan jQuery.

menggunakan perpustakaan dengan memerlukan

Perpustakaan kami selesai, sekarang mari kita gunakan dengan membina aplikasi yang memerlukan.

fail: app.js

define(['jquery', 'mylib'], function($, mylib) {
    // $照常是jquery
    // mylib是字符串`mylib`，因为这是第一个模块的返回值
    //

    return {
        version: '0.0.1, jQuery版本：' + $.fn.jquery,
        mylibString: mylib
    }
});

Tidak ada yang istimewa di sini, ia hanya modul lain yang merujuk JQuery dan Mylib. Apabila modul ditakrifkan dengan define, ia tidak dilaksanakan dengan serta -merta, iaitu fungsi panggilan baliknya (diluluskan selepas pelbagai kebergantungan) tidak dilaksanakan dengan segera. Ini bermakna aplikasi kami tidak akan dilancarkan hanya dengan menentukan modul ini. Sekarang mari kita lihat bagaimana untuk mengkonfigurasi keperluan dan sebenarnya melaksanakan modul ini, permohonan kami.

Konfigurasi memerlukan untuk penyemak imbas

Kami akan mengkonfigurasi memerlukan dalam fail dan melaksanakan modul aplikasi kami. Walau bagaimanapun, terdapat cara yang berbeza untuk melakukan ini.

fail: biasa.js

{
  "baseUrl": "../lib",
  "paths": {
    "mylib": "../main"
  },
  "include": ["../tools/almond", "main"],
  "exclude": ["jquery"],
  "out": "../dist/mylib.js",
  "wrap": {
    "startFile": "wrap.start",
    "endFile": "wrap.end"
  }
}

konfigurasi asas dan laluan adalah sama seperti sebelumnya. Nilai konfigurasi tambahan di sini ialah:

Shim: Konfigurasi kebergantungan dan eksport skrip tradisional "penyemak imbas global" yang tidak menggunakan define() untuk mengisytiharkan kebergantungan dan menetapkan nilai modul. Sebagai contoh, Backbone bukan modul AMD, tetapi ia adalah pemboleh ubah global penyemak imbas yang mengeksport tulang belakang ke ruang nama global yang kami tentukan dalam eksport. Dalam contoh kami, modul ini juga bergantung pada jQuery dan garis bawah, jadi kami menentukannya menggunakan DEPS. Skrip dalam array DEPS dimuatkan sebelum memuatkan tulang belakang, dan selepas memuatkan, nilai eksport akan digunakan sebagai nilai modul.

Sila ambil perhatian bahawa anda juga boleh menggunakan R.JS dalam projek aplikasi ini, yang memerlukan konfigurasi berasingan. Tetapi jangan keliru mengenainya. Saya tidak akan membuat butiran mengenai cara melakukannya, tetapi ini sama dengan apa yang kita lakukan dengan perpustakaan. Lihat konfigurasi membina sampel untuk maklumat lanjut.

Memerlukan dan menentukan

Kami akan memuatkan modul menggunakan memerlukan dan melaksanakannya dengan segera. Kadang -kadang menentukan dan memerlukan mungkin mengelirukan yang digunakan. Tentukan mentakrifkan modul, tetapi tidak melaksanakannya, memerlukan menentukan modul dan melaksanakannya - iaitu, ia memuat dan melaksanakan modul yang bergantung sebelum ia melaksanakannya sendiri. Biasanya, anda akan mempunyai keperluan sebagai modul kemasukan utama, yang bergantung kepada modul lain yang ditakrifkan melalui Define.

skrip memuatkan

Biasanya, anda akan memasukkan semua fail skrip di index.html. Sekarang bahawa kami menggunakan keperluan yang diperlukan, kami hanya perlu memasukkan memerlukan dan menentukan data kami, yang merupakan titik masuk untuk permohonan kami. Terdapat banyak cara untuk menetapkan pilihan konfigurasi atau melepaskan modul utama yang digunakan dalam index.html. Anda boleh mendapatkan lebih banyak maklumat di sini.

bower install requirejs --save

Kesimpulan

Dalam artikel ini, kami membina perpustakaan dan aplikasi yang menggunakan perpustakaan menggunakan memerlukan. Kami belajar bagaimana untuk mengkonfigurasi pengoptimum R.JS dan bagaimana untuk mengkonfigurasi memerlukan dalam penyemak imbas. Akhirnya, kami belajar bagaimana untuk menentukan dan menggunakan modul AMD menggunakan keperluan. Ini menjadikan kod kami berstruktur dan teratur.

Pada separuh pertama tutorial ini (pengoptimuman konfigurasi), saya menggunakan repositori contoh-libglobal ini, separuh kedua tidak rumit, jadi anda harus dapat melakukannya sendiri sekarang.

Laman web Rasmi Keperluan Rasmi adalah dokumentasi akhir, tetapi pastikan untuk menyemak repositori sampel pada GitHub dan projek sampel dalam repositori yang menunjukkan penggunaan aplikasi memerlukan.

FAQs (FAQs) mengenai perpustakaan bangunan dengan memerlukan

Apakah tujuan utama yang memerlukan dalam pembangunan JavaScript?

memerlukanJS adalah fail javascript dan loader modul. Ia dioptimumkan untuk penggunaan penyemak imbas, tetapi juga boleh digunakan dalam persekitaran JavaScript yang lain. Tujuan utama yang diperlukan adalah untuk menggalakkan penggunaan pengaturcaraan modular dalam JavaScript. Ia membantu pemaju menguruskan kebergantungan antara fail JavaScript dan memodulasi kod mereka. Ini membawa kepada organisasi kod yang lebih baik, mengekalkan, dan kebolehgunaan semula. Ia juga meningkatkan kelajuan dan kualiti kod.

Bagaimana memerlukan pengaturan fail JavaScript?

memerlukanJS menggunakan API Definisi Modul Asynchronous (AMD) untuk mengendalikan modul JavaScript. Modul -modul ini boleh dimuatkan secara asynchronously, bermakna mereka tidak menghalang skrip lain daripada berjalan apabila memuatkan. Apabila anda mentakrifkan modul menggunakan memerlukanJS, anda menentukan kebergantungannya. MemerlukanJS kemudian memastikan bahawa kebergantungan ini dimuatkan sebelum modul itu sendiri.

Bagaimana untuk menentukan modul menggunakan keperluan?

Untuk menentukan modul dalam keperluan, anda boleh menggunakan fungsi define(). Fungsi ini mengambil dua parameter: pelbagai pergantungan dan fungsi kilang. Ketergantungan adalah laluan ke fail yang modul bergantung. Fungsi kilang adalah di mana anda menulis kod modul. Fungsi ini dipanggil sekali semua kebergantungan dimuatkan.

Bagaimana menggunakan modul yang ditakrifkan dengan keperluan dalam kod anda?

Untuk menggunakan modul yang ditakrifkan dengan keperluan, anda boleh menggunakan fungsi require(). Fungsi ini menerima dua parameter: pelbagai pergantungan dan fungsi panggil balik. Ketergantungan adalah jalan ke modul yang anda mahu gunakan. Fungsi panggil balik adalah di mana anda menggunakan modul. Fungsi ini dipanggil sekali semua modul dimuatkan.

Bolehkah saya menggunakan keperluan dengan perpustakaan JavaScript lain seperti jQuery?

Ya, anda boleh menggunakan memerlukan gawang dengan perpustakaan JavaScript lain seperti jQuery. MemerlukanJS mempunyai ciri terbina dalam untuk memuat skrip bukan modular tradisional yang tidak menggunakan define() untuk mengisytiharkan kebergantungan dan menetapkan nilai modul, yang dipanggil "shim". Dengan Shim, anda boleh menentukan kebergantungan dan eksport untuk skrip yang tidak menggunakan define() untuk mengisytiharkan kebergantungan dan menetapkan nilai modul.

Bagaimana untuk mengoptimumkan kod saya dengan keperluan?

memerlukanJS datang dengan alat pengoptimuman yang dipanggil R.JS. Alat ini menggabungkan dan memampatkan fail JavaScript anda dan kebergantungan mereka ke dalam satu fail. Ini mengurangkan bilangan permintaan HTTP dan saiz fail, yang dapat meningkatkan masa pemuatan halaman web.

Apakah perbezaan antara menentukan () dan memerlukan () dalam keperluan?

Fungsi

define() digunakan untuk menentukan modul, manakala fungsi require() digunakan untuk memuatkan modul. Kedua -dua fungsi menerima pelbagai kebergantungan dan fungsi sebagai parameter. Walau bagaimanapun, fungsi yang diluluskan kepada define() digunakan untuk membuat nilai modul, manakala fungsi yang diluluskan kepada require() digunakan untuk menjalankan kod selepas modul dimuatkan.

Bolehkah saya menggunakan keperluan dalam node.js?

Ya, anda boleh menggunakan memerlukan GuesJs dalam Node.js. Walau bagaimanapun, Node.js mempunyai sistem modulnya sendiri, jadi anda mungkin tidak memerlukan memerlukan. Jika anda ingin menggunakan kod yang sama dalam kedua -dua penyemak imbas dan node.js anda, atau jika anda lebih suka AMD API, memerlukan anda pilihan yang baik.

Bagaimana menangani kesilapan dalam keperluan?

memerlukanJS menyediakan panggilan balik onError untuk mengendalikan kesilapan. Panggilan balik ini dipanggil apabila ralat berlaku semasa memuatkan modul. Anda boleh menggunakan panggilan balik ini untuk log atau pulih dari ralat.

Bolehkah saya memuatkan fail CSS menggunakan keperluan?

Ya, anda boleh menggunakan plugin yang memerlukan-CSS untuk memuatkan fail CSS menggunakan keperluan. Plugin ini membolehkan anda memuatkan dan menunggu fail CSS seperti yang anda lakukan dengan modul JavaScript.

Atas ialah kandungan terperinci Membina perpustakaan dengan keperluan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!