Pemahaman mendalam tentang pustaka kelas ciri require.js require.js introduction_javascript

Kini, Require.js ialah cara kegemaran saya untuk memprogramkan Javascript. Ia memecahkan kod kepada kepingan yang lebih kecil dan menjadikannya lebih mudah untuk diurus. Pengoptimum Require.js boleh membantu kami menyebarkan aplikasi yang lebih besar kepada berbilang aplikasi yang lebih kecil, menyambungkannya melalui kebergantungan dan akhirnya menggabungkannya semasa penyusunan dan pembungkusan. Sebab-sebab ini membawa kami untuk menggunakan require.js.

Jadi, mari kita lihat ciri hebat require.js!

Serasi dengan CommonJS

AMD (Spesifikasi Definisi Modul Asynchronous) muncul daripada kumpulan kerja CommonJS. CommonJS bertujuan untuk mencipta ekosistem Javascript. Bahagian penting CommonJS ialah transport/c, pendahulu AMD, dan require.js ialah pelaksanaan spesifikasi ini.

Perbezaan sintaks antara modul CommonJS dan modul AMD terutamanya disebabkan oleh fakta bahawa AMD perlu menyokong ciri tak segerak penyemak imbas. Modul CommonJS perlu dilaksanakan secara serentak, contohnya:

Salin kod Kod adalah seperti berikut:

var someModule = memerlukan( "someModule" );
var anotherModule = memerlukan( "Modul lain" );
exports.asplode = function() {
SomeModule.doTehAwesome();
AnotherModule.doMoarAwesome();
};

Modul AMD memuatkan modul secara tidak segerak, jadi definisi modul memerlukan tatasusunan sebagai parameter pertama, dan fungsi panggil balik selepas modul dimuatkan dihantar sebagai parameter kedua.

Salin kod Kod adalah seperti berikut:

define( [ "someModule"], function( someModule ) {
Kembali {
asplode: function() {
                                   someModule.doTehAwesome();

                                                        // Ini akan dilaksanakan secara tidak segerak
              memerlukan( [ "Modul lain" ], fungsi(Modul lain ) {
                 anotherModule.doMoarAwesome();
            });
}
};
});

Walau bagaimanapun, AMD juga serasi dengan sintaks CommonJS dalam require.js. Dengan membungkus modul CommonJS dengan fungsi define AMD, anda juga boleh mempunyai modul CommonJS dalam AMD, contohnya:

Salin kod Kod adalah seperti berikut:

define(fungsi(memerlukan, eksport, modul)
var someModule = memerlukan( "someModule" );
var anotherModule = memerlukan( "Modul lain" );
SomeModule.doTehAwesome();
AnotherModule.doMoarAwesome();

exports.asplode = function() {
          someModule.doTehAwesome();
         anotherModule.doMoarAwesome();
};
});

Malah, require.js mentafsir kandungan modul fungsi panggil balik melalui fungsi .toString, mencari kebergantungan yang betul dan mengubahnya menjadi modul AMD biasa. Perlu diingatkan bahawa jika anda menulis modul dengan cara ini, ia mungkin tidak serasi dengan pemuat AMD yang lain, kerana ia melanggar spesifikasi AMD, tetapi ia boleh memahami penulisan format ini dengan baik.

Apa yang berlaku di sini ialah require.js sebenarnya melakukan fungsi panggil balik function.toString untuk menghuraikan kandungan modul dan mencari kebergantungan yang betul, sama seperti jika ia adalah modul AMD biasa. Adalah penting untuk ambil perhatian bahawa jika anda memilih untuk menulis modul dengan cara ini, ia berkemungkinan besar tidak serasi dengan pemuat modul AMD yang lain, kerana ini bertentangan dengan spesifikasi AMD, tetapi adalah baik untuk mengetahui bahawa format ini wujud!

CDN sandaran

Satu lagi permata tersembunyi require.js ialah ia menyokong kembali memuatkan perpustakaan tempatan yang sepadan apabila CDN tidak dimuatkan dengan betul. Kita boleh mencapai ini melalui require.config:

Salin kod Kod adalah seperti berikut:

requirejs.config({
Laluan: {
jquery: [
               '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js',
             'lib/jquery'
]
}
});

Tiada tanggungan? Objek literal? tiada masalah!

Apabila anda menulis modul tanpa sebarang kebergantungan dan hanya mengembalikan objek yang mengandungi beberapa fungsi berfungsi, maka kita boleh menggunakan sintaks mudah:

Salin kod Kod adalah seperti berikut:

tentukan({
forceChoke: function() {

},
forceLighting: function() {

},
forceRun: function() {

}  
});

Sangat mudah dan berguna jika modul itu hanya koleksi fungsi, atau hanya pakej data.

Kebergantungan pekeliling

Dalam sesetengah kes, kita mungkin memerlukan modul modulA dan fungsi dalam modulA perlu bergantung pada beberapa aplikasi. Ini adalah pergantungan bulat.

Salin kod Kod adalah seperti berikut:

// js/app/moduleA.js
define([ "require", "app/app"],
fungsi(memerlukan, aplikasi) {
         kembali {
foo: function(tajuk) {
              var app = require( "app/app" );
                   kembalikan app.something();
            }
}
}
);

Dapatkan alamat modul

Jika anda perlu mendapatkan alamat modul, anda boleh melakukannya...

Salin kod Kod adalah seperti berikut:

var path = require.toUrl("./style.css");

BaseUrl

Biasanya, semasa menjalankan ujian unit, kod sumber anda mungkin diletakkan dalam folder yang serupa dengan src, dan pada masa yang sama, ujian anda mungkin diletakkan dalam folder yang serupa dengan ujian. Ini boleh menjadi sukar untuk mendapatkan konfigurasi ujian yang betul.

Sebagai contoh, kami mempunyai fail index.html dalam folder ujian dan perlu memuatkan ujian/spec/*.js secara setempat. Dan dengan andaian, semua kod sumber adalah dalam src/js/*.js, dan terdapat main.js dalam folder itu.

Dalam index.html, jangan tetapkan data-utama semasa memuatkan require.js.

Salin kod Kod adalah seperti berikut:

memerlukan( [ "../src/js/main.js" ], fungsi() {
​ require.config({
baseUrl: "../src/js/"
});

memerlukan ([
"./spec/test.spec.js",
"./spec/moar.spec.js"
], fungsi() {
                // mulakan rangka kerja ujian anda
});
});

Sie finden main.js geladen. Da data-main jedoch nicht festgelegt ist, müssen wir eine baseUrl angeben. Bei Verwendung von data-main wird baseUrl automatisch entsprechend der Datei festgelegt, auf die es festgelegt ist.

Hier können Sie sehen, wie main.js geladen wird. Da jedoch keine Daten im Hauptskript-Tag geladen werden, müssen Sie eine Basis angeben. Wenn die Daten hauptsächlich für baseURL bestimmt sind, werden sie aus dem Speicherort in der Hauptdatei abgeleitet. Durch die Anpassung von baseUrl können wir Testcode und Anwendungscode problemlos getrennt speichern.

JSONP

Wir können mit dem JSONP-Terminal wie folgt umgehen:

Code kopieren Der Code lautet wie folgt:

require( [
„http://someapi.com/foo?callback=define“
], Funktion (Daten) {
console.log(data);
});

Verwenden Sie für Nicht-AMD-Bibliotheken Shim, um zu lösen

Aufgrund vieler Anfragen müssen wir Nicht-AMD-Bibliotheken verwenden. Beispielsweise sind Backbone und Underscore nicht an die AMD-Spezifikationen angepasst. Und jQuery definiert sich eigentlich nur als globale Variable mit dem Namen jQuery, es hat also nichts mit jQuery zu tun.

Glücklicherweise können wir dieses Problem mit der Shim-Konfiguration lösen.

Code kopieren Der Code lautet wie folgt:

require.config({
Pfade: {
„backbone“: „Anbieter/Backbone“,
„underscore“: „vendor/underscore“
},
Unterlegscheibe: {
„Rückgrat“: {
deps: [ "underscore" ],
Exporte: „Backbone“
},
„Unterstrich“: {
Exporte: „_“
}
}
});