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" 
  }
})

Kemudian gunakan kaedah berikut untuk menggunakan requirejs pada halaman:

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

data-main juga mempunyai fungsi penting Apabila teg skrip menentukan atribut data-main, require akan lalai kepada js yang ditentukan oleh data-main sebagai laluan akar. Sebagai contoh, selepas data-main="js/main" ditetapkan di atas, selepas kami menggunakan require(['jquery']) (tanpa mengkonfigurasi laluan jquery), require akan memuatkan fail js/jquery.js secara automatik dan bukannya jquery. js, bersamaan dengan konfigurasi lalai:

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

Modul Pihak Ketiga

Modul yang dimuatkan secara amnya perlu mematuhi spesifikasi AMD, iaitu, gunakan define untuk mengisytiharkan modul Walau bagaimanapun, kadangkala js bukan AMD perlu dimuatkan pada masa ini, fungsi lain diperlukan: shim, dan shim juga sukar untuk difahami, shim diterjemahkan secara langsung sebagai "pad", yang sebenarnya mempunyai makna ini pada masa ini saya menggunakannya di dua tempat

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 : "_";
    }
  }
})

Selepas mengkonfigurasi cara ini, kami boleh merujuk modul garis bawah dalam modul lain:

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

Untuk modul bukan AMD dalam bentuk pemalam, kami sering menggunakan pemalam jquery, dan pemalam ini pada asasnya tidak mematuhi spesifikasi AMD, seperti pemalam jquery.form Pada masa ini , anda perlu "pad" pemalam borang ke dalam jquery:

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

juga boleh disingkatkan sebagai:

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

这样配置之后我们就可以使用加载插件后的jquery了

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

好了，requirejs的基本配置大致就是这么多，还有一些扩展的功能会在之后的篇幅中提到，大家不要错过呀！