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

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

WBOY

Lepaskan： 2016-05-16 15:05:12

asal

1423 orang telah melayarinya

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();
})

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

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

Salin selepas log masuk

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

Salin selepas log masuk

juga boleh disingkatkan sebagai:

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

Salin selepas log masuk

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

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

Salin selepas log masuk

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

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

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