RequireJS - Panduan Cepat

RequireJS adalah pustaka JavaScript dan pemuat file yang mengelola ketergantungan antara file JavaScript dan dalam pemrograman modular. Ini juga membantu meningkatkan kecepatan dan kualitas kode.

RequireJS dikembangkan oleh David Mark dan versi awalnya v1.0.0 dirilis pada tahun 2009. Ini adalah open source dan versi 2.3.3 adalah rilis stabil terbaru.

Mengapa menggunakan RequireJS?

  • Ini adalah pustaka JavaScript open source di bawah lisensi MIT.

  • Ini menyediakan pemuatan modul asynchronous.

  • Ia memiliki kemampuan untuk memuat dependensi bersarang.

  • Jika Anda memiliki banyak file kecil, maka tidak perlu khawatir tentang melacak urutan dependensi.

  • Ini memberikan dukungan untuk plugin dan memuat lebih dari satu file JavaScript.

Fitur RequireJS

  • Ia mengatur ketergantungan antara file JavaScript dan meningkatkan kecepatan dan kualitas kode.

  • Ini menggabungkan dan mengecilkan modul menjadi satu skrip untuk pengalaman yang dioptimalkan.

  • Ini mengurangi kompleksitas kode dalam aplikasi besar.

  • Ini mengumpulkan file JavaScript yang berbeda dari modul yang berbeda pada saat kompilasi.

  • Ini memungkinkan untuk memudahkan debugging karena memuat file dari tag skrip biasa.

Dalam bab ini, kita akan memahami cara mengatur lingkungan untuk RequireJS. Untuk ini, Anda perlu mengunduh versi terbaru pustaka RequireJS. Anda dapat mengunduh versi minified atau versi detail .

Setelah mengunduh, kami perlu menyertakan file require.js file di folder libs Anda dan struktur proyek Anda harus seperti yang ditunjukkan di bawah ini -

projectname/
|--index.html
|--libs/
   |---main.js
   |---require.js
   |---helper/
      |----util.js

Kita perlu mendefinisikan file html sebagai index.html dimana RequireJS dimuat seperti yang ditunjukkan di bawah ini.

<html>
   <head>
      <script data-main = "libs/main" src = "libs/require.js"></script>
   </head>
   
   <body>
      <h1> RequireJS Sample Page </h1>
   </body>
</html>

Perhatikan itu saja require.js dengan panggilan RequireJS disertakan dalam tag skrip untuk memuat skrip.

RequireJS di Node

Ada dua cara untuk mendapatkan adaptor Node.

  • npm - Anda dapat menginstal rilis terbaru requirejs dari command prompt seperti yang ditunjukkan di bawah ini.

npm install requirejs

  • Unduh r.js - Anda dapat mengunduh file r.jsfile dari halaman unduhan dan sumber darir.js halaman repositori .

RequireJS dapat diinisialisasi dengan meneruskan konfigurasi utama dalam template HTML melalui atribut data-main . Ini digunakan oleh RequireJS untuk mengetahui modul mana yang akan dimuat dalam aplikasi Anda.

Misalnya -

<script data-main = "scripts/main" src = "scripts/require.js"></script>

Untuk menyertakan file Require.js, Anda perlu menambahkan tag script di file html. Di dalam tag skrip, tambahkandata-mainatribut untuk memuat modul. Ini dapat dianggap sebagai titik masuk utama ke aplikasi Anda. The script / utama adalah file JavaScript utama sebuah aplikasi yang berisi konfigurasi RequireJS.

Opsi Konfigurasi

Berikut adalah opsi konfigurasi yang dapat diatur saat memuat modul aplikasi pertama -

  • baseUrl- Ini adalah jalur rute untuk semua modul yang dimuat melalui RequireJS. BaseUrl ditandai dengan string yang diawali dengan "slash (/)", berisi protokol dan diakhiri dengan ekstensi ".js". Jika tidak ada baseUrl yang ditentukan, maka RequireJS menggunakan jalur atribut utama data sebagai baseUrl.

  • paths- Ini menentukan pemetaan jalur untuk modul yang relatif terhadap baseUrl. Secara otomatis menambahkan ekstensi .js ke jalur saat memetakan nama modul.

  • shim - Ini menyediakan penggunaan pustaka non AMD dengan RequireJS dengan mengkonfigurasi dependensinya dan mengekspor nilai globalnya.

  • map - Untuk modul yang diberikan, aplikasi menggunakan modul yang sama dari versi yang berbeda untuk tujuan yang berbeda dengan membagikan id mereka untuk menggunakan kode yang sama untuk kondisi yang berbeda.

  • config- Ini menyediakan konfigurasi ke modul dengan menggunakan opsi config dan ini dapat dilakukan dengan menggunakan "modul" ketergantungan khusus dan memanggilnyamodule.config() fungsi.

  • urlArgs- Argumen string kueri digunakan untuk mengambil semua sumber daya yang dimuat dengan menggunakan RequireJS. Ini digunakan untuk perusakan cache ketika ada konfigurasi browser atau server yang tidak tepat.

  • waitSeconds- Ini menentukan jumlah detik untuk menunggu sebelum muntah saat memuat skrip. Standarnya adalah "7" detik dan "0" menonaktifkan batas waktu.

  • packages - Ini menyediakan paket CommonJS untuk mengkonfigurasi modul pemuatan.

  • context - Ini memberikan nama untuk pemuatan konteks yang memungkinkan pemuatan modul yang berbeda di halaman.

  • deps - Ini adalah larik dependensi yang diperlukan saat Require ditetapkan sebagai objek config sebelum memuat RequireJS.

  • callback - Ini menjalankan fungsi setelah memuat dependensi dan diperlukan ketika Require ditetapkan sebagai objek config sebelum memuat RequireJS.

  • xhtml - Digunakan untuk membuat elemen skrip dengan menggunakan document.createElementNS()metode saat opsi ini disetel ke true .

  • scriptType- Ini mendefinisikan nilai untuk atribut jenis skrip yang digunakan dalam dokumen. Jenis default adalah "teks / javascript".

  • skipDataMain- Ini melewatkan pemindaian atribut utama data saat memuat modul, jika opsi ini disetel ke true .

Modul di RequireJS adalah objek bercakupan dan tidak tersedia di namespace global. Karenanya, namespace global tidak akan tercemar. Sintaks RequireJS memungkinkan untuk memuat modul lebih cepat tanpa khawatir harus melacak urutan dependensi. Anda dapat memuat beberapa versi dari modul yang sama di halaman yang sama.

Mendefinisikan Modul

Modul didefinisikan menggunakan define()fungsi; fungsi yang sama juga digunakan untuk memuat modul.

Pasangan Nama / Nilai Sederhana

Jika modul hanyalah kumpulan pasangan nama dan nilai, Anda dapat menggunakan sintaks berikut -

define({
   state: "karnataka",
   city: "bangalore"
});

Mendefinisikan Fungsi

Modul juga dapat menggunakan fungsi untuk kerangka kerja, tanpa ketergantungan. Ini dapat dilakukan dengan menggunakan sintaks berikut -

define(function () {
   
   //Do setup work here
   return {
      state: "karnataka",
      city: "bangalore"
   }
});

Mendefinisikan Fungsi dengan Dependensi

Jika modul memiliki dependensi, penempatan argumen pertama (larik nama dependensi), argumen kedua (fungsi penentu), dan objek kembalian yang mendefinisikan modul ditampilkan dalam sintaks berikut -

define(["./mnc", "./startup"], 
   function(mnc, startup) {
        
      return {
         state: "karnataka",
         city: "bangalore",
      
         addCompany: function() {
            mnc.decrement(this);
            startup.add(this);
         }
      
      }
   }
);

Mendefinisikan Modul sebagai Fungsi

Modul tidak wajib mengembalikan objek saja, nilai valid apa pun dari suatu fungsi juga dapat dikembalikan. Sintaks berikut digunakan untuk mendefinisikan modul sebagai fungsi -

define(["./mnc", "./startup"],
   function(mnc, startup) {
       
      return function(title) {
         return title ? (window.title = title) :
         startup.storeName + ' ' + mnc.name;
      }
      
   }
);

Mendefinisikan Modul dengan Nama

Dalam beberapa kasus, Anda mungkin harus memasukkan nama untuk modul sebagai argumen pertama define(). Ini dapat dilakukan dengan menggunakan sintaks berikut -

define("js2/title",
   ["js1/mnc", "js1/startup"],
   
   function(mnc, startup) {
      //Define js2/title object in here.
   }
   
);

Pemuatan Modul

Fungsi define () dapat digunakan untuk memuat modul (modul dapat berupa objek, fungsi, kelas, atau kode yang dijalankan setelah memuat modul). Anda dapat memuat versi berbeda dari modul yang sama di halaman yang sama. Versi yang berbeda dapat dianalisis dalam urutan yang sama, meskipun versi dimuat dalam urutan yang berbeda.

Sintaksis

define(['module1', 'module2'], function (module1, module2) {
   //define the module value by returning a value
   return function () {};
});

Anda dapat memberikan daftar nama modul saat Anda menentukan modul dan RequireJS dapat digunakan untuk mengambil modul ini sebelum menjalankan modul. Modul ini dapat dilewatkan sebagai parameter daridefinition function.

Contoh

Contoh berikut menunjukkan penggunaan fungsi define () saat memuat modul. Buat file html dengan nama index.html dan tempatkan kode berikut di dalamnya -

<!DOCTYPE html>
<html>
   <head>
      <title>Define() Function</title>
      <script data-main = "main" src = "require.js"></script>
   </head>
   
   <body>
      <h2>RequireJS Define() Function Example</h2>
   </body>
</html>

Membuat jsfile dengan nama main.js dan tambahkan kode berikut di dalamnya -

define(function (require) {
   var myteam = require("./team");
   var mylogger = require("./player");
   alert("Player Name : " + myteam.player);
   mylogger.myfunc();
});

Sekarang, buat dua lagi jsfile dengan nama team.js dan player.js dan tempatkan kode berikut masing-masing -

team.js

define({
   player: "Sachin Tendulkar",
   team : "India"
});

player.js

define(function (require) {
   var myteam = require("./team");

   return {
      myfunc: function () {
         document.write("Name: " + myteam.player + ", Country: " + myteam.team);
      }
   };
});

Keluaran

Buka file HTML di browser; Anda akan menerima output seperti pada tangkapan layar berikut -

Klik pada tombol "OK", Anda akan mendapatkan keluaran lain dari modul -

Pada bab ini, kita akan membahas pengoptimalan di RequireJS. Pengoptimal di RequireJS memiliki karakteristik berikut -

  • Menggabungkan file skrip bersama dengan bantuan UglifyJS untuk penggunaan default atau Closure Compiler untuk penggunaan Java

  • Menggabungkan file CSS menjadi satu.

Pengoptimal adalah komponen dari r.jsadaptor untuk Node dan Nashorn . Ini dikembangkan untuk menjadi bagian dari proses membangun dan bukan untuk proses pengembangan.

Contoh

Setelah mengunduh r.js di folder proyek Anda, struktur folder akan terlihat seperti di bawah ini -

projectfolder/
   |-->index.html
   |-->CSS/
      |--->main.css
      |--->other.css
   |-->libs
      |--->require.js
      |--->main.js
         |--->dependent1.js
         |--->dependent2.js
         |--->dependent3.js

File HTML Anda akan terlihat seperti di bawah ini -

<html>
   <head>
      <script data-main = "libs/main" src = "libs/require.js"></script>
   </head>
   
   <body>
      <h1> RequireJS Sample Page </h1>
   </body>
</html>

File main.js Anda akan terlihat seperti di bawah ini -

require(["dependent1", "dependent2", "dependent3"], function (dependent1, dependent2, 
   dependent3) {
});

File main.css Anda akan terlihat seperti di bawah ini -

@import url("other.css");

.app {
   background: transparent url(../../img/app.png);
}

Pengaturan Dasar Pengoptimal

Anda dapat menggunakan argumen baris perintah atau properti pembuatan profil untuk menyetel proyek, keduanya dapat dipertukarkan satu sama lain.

Berikut ini adalah sintaks untuk baris perintah -

node r.js -o baseUrl = . paths.jquery = content/path/jquery 
   name = main out = main-built.js

Berikut ini adalah sintaks untuk membangun profil -

({
   baseUrl: ".",
  
   paths: {
      jquery: "content/path/jquery"
   },
   
   name: "main",
   out: "main-built.js"
})

Setelah ini, Anda dapat meneruskan nama profil build ke pengoptimal di baris perintah, seperti yang ditunjukkan di bawah ini -

node r.js -o build.js

Ada beberapa kekurangan pada sintaks argumen baris perintah. Penggunaan gabungan argumen baris perintah atau properti pembuatan profil dapat mengatasi kekurangan ini.

Mengoptimalkan File JS Tunggal

Untuk mengoptimalkan satu file JS, Anda perlu membuat file JS yang berisi konten dari semua dependensinya. File Anda akan terlihat seperti yang diberikan di bawah ini -

({
   baseUrl: "js/shop",
   paths: {
      "jquery": "jquery",
      "backbone": "backbone",
      "underscore": "underscore"
   },
   
   shim: {
      "backbone": {
         "department": ["underscore", "jquery"],
         "dependent": "Backbone"  
      },
      
      "underscore": {
         exports: "_" 
      }
   },
   
   name: "../main",
   out: "../built/js/main.js"
})

Sekarang, Anda dapat membuat file main.js yang memiliki semua dependensi untuk aplikasi. File ini digunakan dalam file HTML untuk memuat semua file JS dengan satu permintaan. Perhatikan, bahwa file yang dibuat tidak boleh ada di direktori kode sumber; file harus dalam salinan proyek.

Penggunaan Sumber CDN

Pengoptimal tidak memuat skrip menggunakan sumber daya jaringan / CDN (Jaringan Pengiriman Konten). Jika, skrip perlu dimuat menggunakan CDN, maka Anda perlu memetakan file ini ke nama modul dan mendownload file ke jalur file lokal Anda. Anda dapat menggunakan kata khusus "kosong" dalam konfigurasi jalur profil build seperti yang ditunjukkan dalam sintaks berikut -

({
   baseUrl: "js",
   name: "mainCDN",
   out: "js/mainCDN-built.js",
   
   paths: {
      jquery: "empty:"
   }
   
})

File utama akan terlihat seperti di bawah ini -

requirejs.config({
   paths: {
      'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min'
   }
});

require(['jquery'], function ($) {
});

Mengoptimalkan File CSS Tunggal

File CSS dioptimalkan menggunakan parameter berikut langsung di baris perintah seperti yang ditunjukkan di bawah ini -

node ../../r.js -o cssIn = main.css out = main-built.css

File CSS juga dapat dioptimalkan dalam file build menggunakan properti yang sama seperti yang ditunjukkan di bawah ini -

...
cssIn:"main.css",
out:"main-built.css"
...

Kedua metode di atas diperbolehkan dan akan membuat file bernama projectfolder / css / mainbuild.css . File ini akan memiliki konten main.css, jalur url () disesuaikan dengan benar, dan komentar dihapus.

Mengoptimalkan Seluruh Proyek

Pengoptimal menggunakan profil build untuk mengoptimalkan semua css dan jsfile. Pada contoh berikut, file build.js dibuat.

({
   baseUrl: "js/shop",
   appDir: '.',
   paths: {
      "jquery": "jquery",
      "backbone": "backbone",
      "underscore": "underscore"
   },
   
   shim: {
      "backbone": {
         "deps": ["underscore", "jquery"],
         "exports": "Backbone"  
      },
      
      "underscore": {
         exports: "_" 
      }
   },
   
   optimizeCss: "standard.keepLines",
   modules: [
      {
         name: "app"
      }
   ],
   
   dir: "../built"
})

File build.js menginstruksikan RequireJS untuk menyalin semua folder aplikasi (parameter appDir) ke folder keluaran yang dibuat (parameter dir) dan menerapkan semua pengoptimalan ke file yang terletak di folder keluaran. Jalankan perintah berikut untuk membuat profil di folder aplikasi -

node r.js -o build.js

RequireJS menggunakan jQuery sebagai dependensi lain dan mendaftar sebagai modul jquery dalam huruf kecil dan secara default, juga mendaftarkan dirinya sendiri dengan menggunakan fungsi global $ dan jQuery saat menggunakan AMD / RequireJS.

Memuat jQuery

require(['jquery'], function($) {
   //code here
}

Anda dapat memuat banyak pustaka dan kustom bersama dengan jQuery seperti yang ditunjukkan di bawah ini -

require(['custom_library_path','jquery'], function(load_library,$) {
   //related code of $ and load_library
});

Tabel berikut menunjukkan penggunaan jQuery dengan RequireJS untuk menentukan dependensinya.

Sr.No. Jenis & Deskripsi
1 Menggunakan Shim Config

jQuery menggunakan konfigurasi shim untuk menentukan dependensi untuk plugin jQuery.
2 Memuat jQuery dari CDN

jQuery menggunakan CDN untuk menentukan dependensi untuk plugin jQuery.

Adaptor Node dapat digunakan bersama dengan implementasi Require dan jalur pencarian Node. Jika tidak ada konfigurasi modul yang digunakan oleh RequireJS, Anda dapat menggunakan modul berbasis Node yang sudah ada tanpa mengubahnya. Anda dapat menginstal paket node di direktori node_modules proyek dengan menggunakan perintah npm.

Node akan memuat modul hanya dari disk lokal dan opsi konfigurasi seperti peta, paket, jalur, dll. Akan diterapkan hanya jika modul dimuat oleh RequireJS.

Menginstal Node

Anda dapat menginstal adaptor Node dengan menggunakan perintah berikut yang akan menginstal file rilis terbaru -

npm install requirejs

Anda dapat menginstal Node dengan cara berikut juga -

  • Anda dapat mengunduh r.js dari tautan ini dan menyimpannya di folder proyek Anda.

  • Mendapatkan sumber dari r.js repositori atau menginstal melalui dist.js simpul .

Penggunaan Node

Untuk menggunakan node, Anda harus memiliki require ('requirejs') dan memindahkan fungsi yang diperlukan dalam konfigurasi ke file main.js tingkat atas.

Misalnya -

var requirejs = require('requirejs');

requirejs.config({
   //load the mode modules to top level JS file 
   //by passing the top level main.js require function to requirejs
   nodeRequire: require
});

requirejs(['name1', 'name2'],
   function (name1, name2) {
      //by using requirejs config, name1 and name2 are loaded
      //node's require loads the module, if they did not find these
   }
);

Membangun modul node dengan AMD atau RequireJS

Anda dapat membuat modul kode berfungsi dengan RequireJS dan Node, tanpa memerlukan pengguna pustaka, lalu menggunakan paket amdefine untuk menyelesaikan pekerjaan ini.

Misalnya -

if (typeof define !== 'function') {
   var define = require('amdefine')(module);
}

define(function(require) {
   var myval = require('dependency');

   //The returned value from the function can be used 
   //as module which is visible to Node.
   return function () {};
});

Pengoptimal sebagai Modul Node

Modul node menggunakan pengoptimal RequireJS sebagai metode pengoptimalan dengan menggunakan panggilan fungsi alih-alih menggunakan alat baris perintah.

Misalnya -

var requirejs = require('requirejs');

var config = {
   baseUrl: '../directory/scripts',
   name: 'main',
   out: '../build/main-built.js'
};

requirejs.optimize(config, function (buildResponse) {

   //The text output of the modules specify by using buildResponse 
   //and loads the built file for the contents
   //get the optimized file contents by using config.out 
   var contents = fs.readFileSync(config.out, 'utf8');
}, function(err) {
   //code for optimization err callback
});

Dojo adalah toolkit JavaScript yang didasarkan pada arsitektur modul AMD yang menyediakan modul tambahan untuk menambahkan fungsionalitas ekstra ke aplikasi web dan juga menghemat waktu dan skala dalam proses pengembangan aplikasi web.

Contoh

Contoh berikut menunjukkan penggunaan Dojo bersama dengan RequireJS. Buat file html dengan nama index.html dan tempatkan kode berikut di dalamnya -

<!DOCTYPE html>
<html>
   <head>
      <title>RequireJS Dojo</title>
      <script data-main="app" src="lib/require.js"></script>
   </head>
   
   <body>
      <h2>RequireJS  Dojo</h2>
      <p>
         Hello... ...
      </p>
   </body>
</html>

Membuat jsfile dengan nama app.js dan tambahkan kode berikut di dalamnya -

require ({
   //You can configure loading modules from the lib directory
   baseUrl: 'lib',
   
   paths: {
      //mapping of package
      dojo: 'http://sfoster.dojotoolkit.org/dojobox/1.7-branch/dojo'
   }
   
}, [
      //modules which we are using here
      'dojo/dom'
   ], function(dom) { 
   
      //using the 'byId' method from dom module
      var mydojo = dom.byId('dojo_val')
      mydojo.innerHTML = "The text is displaying via dojo/dom";   
   }
);

Keluaran

Buka file HTML di browser; Anda akan menerima output berikut -

Format modul ditentukan oleh CommonJS. Ini didefinisikan tanpa memberikan opsi yang sama dari browser ke lingkungan JavaScript lainnya. Oleh karena itu, spesifikasi CommonJS merekomendasikan format Transport dan kebutuhan asynchronous . Anda dapat dengan mudah mengonversi format modul CommonJS tradisional untuk bekerja dengan RequireJS. Namun, semua modul tidak akan dikonversi ke format baru. Beberapa pengecualian tercantum di bawah -

  • Modul dengan kode bersyarat untuk melakukan panggilan wajib.
  • Modul dengan dependensi melingkar.

Konversi Manual

Modul CommonJS dapat diubah secara manual ke format RequireJS dengan menggunakan sintaks berikut -

define(function(require, exports, module) {
   //place CommonJS module content here
});

Alat Konversi

Modul CommonJS dapat dikonversi ke format RequireJS dengan menggunakan alat konverter proyek r.js , yang dibangun dalam file r.js. Anda harus menentukan jalur file yang akan dikonversi dan folder keluaran seperti yang ditunjukkan di bawah ini -

node r.js -convert path/to/commonjs/modules/ path/to/output

Mengatur Nilai Ekspor

Beberapa sistem di CommonJS, memungkinkan pengaturan nilai yang diekspor dengan menetapkan nilai yang diekspor sebagai module.exports Tapi RequireJS, mendukung cara yang lebih mudah untuk mengembalikan nilai dari fungsi yang diteruskan untuk ditentukan. Keuntungannya adalah Anda tidak memerlukan argumen ekspor dan fungsi modul, jadi Anda dapat membiarkannya keluar dari definisi modul seperti yang ditunjukkan di bawah ini -

define(function (require) {
   var name = require('name');

   //Define the module as exporting a function
   return function () {
      name.doSomething();
   };
});

Sintaks Alternatif

Cara alternatif untuk menentukan dependensi adalah melalui argumen array dependensi define () . Namun, urutan nama dalam array dependensi harus sesuai dengan urutan argumen yang diteruskan ke fungsi definisi define () seperti yang ditunjukkan di bawah ini -

define(['name'], function (name) {
   
   return function () {
      name.doSomething();
   };
});

Memuat Modul dari Paket CommonJS

Untuk mengetahui tentang lokasi dan atribut paket modul dimuat dalam paket CommonJS menggunakan RequireJS dengan menyiapkan konfigurasi RequireJS.

Alat Pengoptimalan

Alat pengoptimalan hadir di RequireJS yang dapat menggabungkan definisi modul bersama-sama menjadi bundel yang dioptimalkan untuk pengiriman browser. Ini beroperasi sebagai alat baris perintah sehingga Anda dapat menggunakannya sebagai bagian dari penerapan kode.

RequireJS berisi sekumpulan kecil plugin yang memungkinkan memuat berbagai jenis sumber daya sebagai dependensi. Berikut adalah daftar plugin yang tersedia di RequireJS -

  • text
  • domReady
  • i18n
  • Pemuatan CSS

teks

The teks plug-in yang digunakan untuk sumber daya memuat teks berdasarkan asynchronous yang terutama digunakan untuk memasukkan konten HTML dalam file JavaScript. Itu bisa dimuat saat Anda menggunakan teks! awalan di panggilan modul apa pun yang memerlukan atau ditentukan dan teruskan ekstensi file ke plugin. Bandingkan dengan pemuatan modul normal, plugin teks memuat modul menggunakan XHR dan tidak akan menambahkan kode ke header sebagaiscript menandai.

Sumber daya file teks dapat dimasukkan sebagai ketergantungan dalam kode sebagai -

require(["mymodule", "text!mymodule.html", "text!mymodule.css"],
   
   function(mymodule, html, css) {
      //the html and css variables will be the text
      //of the mymodule.html file and mymodule.css files respectively
   }
);

domReady

RequireJS dapat digunakan untuk memuat skrip sebelum DOM siap dan pengembang dapat berinteraksi dengan DOM, hanya ketika skrip dimuat sepenuhnya. Terkadang skrip dapat dimuat sebelum DOM siap. Jadi, untuk mengatasi masalah ini, RequireJS menyediakan pendekatan modern yang disebut peristiwa DOMContentLoaded yang memanggil fungsi domReady setelah DOM siap.

require(['domReady'], function(domReady) {
   
   domReady(function() {
      //the domReady function is called when DOM is ready 
      //which is safe to manipulate DOM nodes in this function
   });
});

i18n

Ini dapat digunakan dengan beberapa lokal yang menyediakan i18ndukungan bundel yang akan dimuat secara otomatis ketika modul atau ketergantungan menetapkan "i18n!" awalan. Untuk memanfaatkan ini, unduh dan letakkan di direktori yang sama tempat file JavaScript utama Anda berada. Tempatkan plugin ini di direktori bernama "nls" untuk mencari file pelokalan Anda.

Misalnya, asumsikan bahwa kita memiliki satu file js bernama country.js dengan konten berikut dan letakkan di direktori sebagai mydirectory / nls / country.js -

define({
   
   "root": {
      "india": "india",
      "australia": "australia",
      "england": "england"
   }
});

Anda dapat menambahkan terjemahan tertentu ke file dengan menggunakan fr-fr locale dan kode di atas akan berubah sebagai -

define({
   
   "root": {
      "title": "title",
      "header": "header",
      "description": "description"
   },
   
   "es-es": true
});

Selanjutnya, tentukan file di mydirectory / nls / es-es / country.js dengan konten berikut -

define({
   
   "root": {
      "title": "título",
      "header": "cabecera",
      "description": "descripción"
   },
   
   "es-es": true
});

Anda dapat mengatur lokal dengan meneruskannya ke plugin dengan bantuan konfigurasi modul di file main.js seperti yang ditunjukkan di bawah ini -

requirejs.config({
   
   config: {
      //set the config for the i18n plugin
      
      i18n: {
         locale: 'es-es'
      }
      
   }
});

Pemuatan CSS menggunakan RequireJS

Anda dapat menggunakan beberapa plugin untuk memuat file CSS hanya dengan menambahkan ke link header untuk memuat file CSS.

CSS dapat dimuat dengan menggunakan fungsi Anda sendiri seperti yang ditunjukkan di bawah ini -

function myCss(url) {
   var mylink = document.createElement("mylink");
   mylink.type = "text/css";
   mylink.rel = "stylesheet";
   mylink.href = url;
   document.getElementsByTagName("head")[0].appendChild(mylink);
}
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved