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.

Pemasangan memerlukanJS

bower install requirejs --save

Tentukan modul AMD

yang akan menjadikannya modul AMD. define()

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

    return 'mylib';
});

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']

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

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.

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.

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