Lassen Sie uns zum zweiten Mal über die Grundkenntnisse der modularen Tool_Javascript-Fähigkeiten von JS sprechen

Vorheriger Artikel: Modulares JS-Tool Wir haben Requirejs auf sehr einfache Weise eingeführt: http://www.jb51.net/article/82527.htm, in diesem Artikel geht es um Requirejs Einige Grundkenntnisse, einschließlich der Verwendung der API usw.

Basis-API

require definiert drei Variablen: define, require, requirejs, wobei require === requirejs, im Allgemeinen ist die Verwendung von require kürzer

define Wie Sie am Namen erkennen können, wird diese API zum Definieren eines Moduls
verwendet erfordern Abhängige Module laden und nach dem Laden die Rückruffunktion ausführen
a.js im vorherigen Artikel:

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

Definieren Sie ein Modul über die Definitionsfunktion und verwenden Sie es dann auf der Seite:

require(["js/a"]);
Um das Modul zu laden (beachten Sie, dass die Abhängigkeit in require ein Array ist. Auch wenn nur eine Abhängigkeit vorhanden ist, müssen Sie ein Array verwenden, um sie zu definieren. Der zweite Parameter der require-API ist Callback, eine Funktion, die zur Verarbeitung verwendet wird.) die Logik nach dem Laden, wie zum Beispiel:

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

Datei laden

In den vorherigen Beispielen waren die geladenen Module alle lokale JS, aber in den meisten Fällen kann das JS, das von der Webseite geladen werden muss, vom lokalen Server, anderen Websites oder dem CDN stammen, sodass es hier nicht geladen werden kann Wir können als Beispiel eine JQuery-Bibliothek laden:

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

Hierzu wird require.config verwendet, um den Speicherort des Moduls zu konfigurieren. Vereinfacht ausgedrückt dient es dazu, dem Modul einen kürzeren und leichter zu merkenden Namen zu geben. Markieren Sie beispielsweise die Jquery-Bibliotheksadresse von Baidu , also Bei Bedarf müssen Sie nur ["jquery"] schreiben, um die js zu laden. Wir können lokale js auch wie folgt konfigurieren:

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

Durch das Konfigurieren von Pfaden werden unsere Modulnamen verfeinert. Pfade haben auch eine wichtige Funktion: Wenn die Remote-CDN-Bibliothek nicht erfolgreich geladen wird, können Sie die lokale Bibliothek laden, z. B.:

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

Wenn nach dieser Konfiguration die JQuery von Baidu nicht erfolgreich geladen werden konnte, wird die JQuery im lokalen JS-Verzeichnis geladen

Wenn Sie requirejs verwenden, müssen Sie beim Laden des Moduls nicht das Suffix .js schreiben, und natürlich können Sie das Suffix
nicht schreiben Der $-Parameter befindet sich in der Callback-Funktion im obigen Beispiel. Dies ist die Ausgabevariable des abhängigen JQuery-Moduls. Wenn Sie von mehreren Modulen abhängig sind, können Sie mehrere Parameter nacheinander schreiben, um sie zu verwenden:

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

Wenn ein Modul keine Variablenwerte ausgibt, dann gibt es auch keine. Versuchen Sie daher, das Ausgabemodul voranzustellen, um Missverständnisse durch falsche Positionen zu vermeiden

Globale Konfiguration

Die require.config-Konfiguration erscheint im obigen Beispiel wiederholt. Wenn die Konfiguration zu jeder Seite hinzugefügt wird, sieht sie definitiv sehr unelegant aus. requirejs stellt zunächst eine main.js bereit 🎜>

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

Zur Erläuterung: Das Skript-Tag, das das Skript „requirejs“ lädt, fügt das durch dieses Attribut angegebene js hinzu, nachdem reuqire.js geladen wurde. Nachdem wir die Konfiguration „require.config“ zu „data-main“ hinzugefügt haben, können wir Folgendes vornehmen: Jede Seite verwendet diese Konfiguration und kann dann direkt auf der Seite verwendet werden, um alle kurzen Modulnamen zu laden

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

Module von Drittanbietern

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

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

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

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