Untuk kali kedua, mari kita bercakap tentang pengetahuan asas JS require.js modular tool_javascript kemahiran

Artikel sebelumnya: Alat modular JS Kami memperkenalkan requirejs dengan cara yang sangat mudah: http://www.jb51.net/article/82527.htm, artikel ini akan membincangkan tentang requirejs Beberapa pengetahuan asas, termasuk cara menggunakan API, dsb.

API Asas

require akan mentakrifkan tiga pembolehubah: define, require, requirejs, where require === requirejs, secara amnya menggunakan require lebih pendek

takrifkan Seperti yang anda boleh lihat daripada namanya, API ini digunakan untuk mentakrifkan modul
memerlukan Muat modul bergantung dan laksanakan fungsi panggil balik selepas memuatkan
a.js dalam artikel sebelumnya:

define(function(){
  function fun1(){
   alert("it works");
  }
  fun1();
})

Tentukan modul melalui fungsi define, dan kemudian gunakannya dalam halaman:

memerlukan(["js/a"]);
Untuk memuatkan modul (perhatikan bahawa kebergantungan dalam memerlukan ialah tatasusunan, walaupun hanya terdapat satu kebergantungan, anda mesti menggunakan tatasusunan untuk mentakrifkannya Parameter kedua API memerlukan ialah panggil balik, fungsi yang digunakan untuk mengendalikannya). logik selepas memuatkan , seperti:

require(["js/a"],function(){
  alert("load finished");
})

Muat fail

Dalam contoh sebelumnya, modul yang dimuatkan adalah semua js tempatan, tetapi dalam kebanyakan kes, JS yang perlu dimuatkan oleh halaman web mungkin berasal dari pelayan tempatan, tapak web lain atau CDN, jadi ia tidak boleh dimuatkan dalam ini cara. Kami boleh memuatkan Perpustakaan jquery sebagai contoh:

require.config({
  paths : {
    "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"] 
  }
})
require(["jquery","js/a"],function($){
  $(function(){
    alert("load finished"); 
  })
})

Ini melibatkan require.config.required.config digunakan untuk mengkonfigurasi lokasi pemuatan modul Secara ringkasnya, ia adalah untuk memberikan nama modul yang lebih pendek dan lebih mudah untuk diingati, sebagai contoh, tandakan alamat perpustakaan jquery Baidu , jadi Apabila memerlukan, anda hanya perlu menulis ["jquery"] untuk memuatkan js Kami juga boleh mengkonfigurasi js tempatan seperti ini:

require.config({
  paths : {
    "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"],
    "a" : "js/a" 
  }
})
require(["jquery","a"],function($){
  $(function(){
    alert("load finished"); 
  })
})

Mengkonfigurasi laluan akan menjadikan nama modul kami lebih halus juga mempunyai fungsi penting, iaitu untuk mengkonfigurasi berbilang laluan Jika pustaka cdn jauh tidak berjaya dimuatkan, anda boleh memuatkan pustaka tempatan, seperti:

require.config({
  paths : {
    "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
    "a" : "js/a" 
  }
})
require(["jquery","a"],function($){
  $(function(){
    alert("load finished"); 
  })
})

Selepas konfigurasi ini, apabila jquery Baidu tidak berjaya dimuatkan, jquery dalam direktori js tempatan akan dimuatkan

Apabila menggunakan requirejs, anda tidak perlu menulis akhiran .js semasa memuatkan modul, dan sudah tentu anda tidak boleh menulis akhiran
Parameter $ ditemui dalam fungsi panggil balik dalam contoh di atas Ini adalah pembolehubah output modul jquery bergantung Jika anda bergantung pada berbilang modul, anda boleh menulis berbilang parameter dalam urutan untuk digunakan:

require(["jquery","underscore"],function($, _){
  $(function(){
    _.each([1,2,3],alert);
  })
})

Jika modul tidak mengeluarkan nilai pembolehubah, maka tidak ada, jadi cuba tulis modul output di hadapan untuk mengelakkan salah faham yang disebabkan oleh kedudukan yang salah

Konfigurasi global

Konfigurasi require.config muncul berulang kali dalam contoh di atas Jika konfigurasi ditambahkan pada setiap halaman, ia pasti akan kelihatan sangat tidak elegan menyediakan fungsi yang dipanggil "data induk". 🎜>

require.config({
  paths : {
    "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
    "a" : "js/a" 
  }
})

Untuk menerangkan, teg skrip yang memuatkan skrip requirejs menambah atribut data-utama setiap Semua halaman menggunakan konfigurasi ini, dan kemudian memerlukan boleh digunakan terus dalam halaman untuk memuatkan semua nama modul pendek

require.config({
  baseUrl : "js"
})

Modul Pihak Ketiga

1. Output modul bukan AMD, modul AMD bukan standard "pad" ke dalam modul yang tersedia Contohnya: dalam versi lama jquery, ia tidak mewarisi spesifikasi AMD, jadi anda tidak boleh secara langsung memerlukan ["jquery"]. kali ini, A shim diperlukan Contohnya, jika saya menggunakan perpustakaan kelas garis bawah, tetapi ia tidak melaksanakan spesifikasi AMD, maka kita boleh mengkonfigurasinya seperti ini

require.config({
  shim: {
    "underscore" : {
      exports : "_";
    }
  }
})

require(["underscore"], function(_){
  _.each([1,2,3], alert);
})

require.config({
  shim: {
    "underscore" : {
      exports : "_";
    },
    "jquery.form" : {
      deps : ["jquery"]
    }
  }
})

require.config({
  shim: {
    "underscore" : {
      exports : "_";
    },
    "jquery.form" : ["jquery"]
  }
})

require.config(["jquery", "jquery.form"], function($){
  $(function(){
    $("#form").ajaxSubmit({...});
  })
})