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

Verwenden Sie dann die folgende Methode, um requirejs auf der Seite zu verwenden:

30991f28d634f8ab6d341d370759b12d2cacc6d41bbb37262a98f745aa00fbf0

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

data-main hat auch eine wichtige Funktion. Wenn das Skript-Tag das data-main-Attribut angibt, verwendet require standardmäßig das von data-main angegebene js als Stammpfad. Nachdem wir beispielsweise data-main="js/main" oben festgelegt haben und wir require(['jquery']) verwenden (ohne den Jquery-Pfad zu konfigurieren), lädt require automatisch die Datei js/jquery.js anstelle von jquery. js, entspricht der Standardkonfiguration:

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

Module von Drittanbietern

Module, die über geladen werden, müssen im Allgemeinen den AMD-Spezifikationen entsprechen, d. h. zum Deklarieren des Moduls müssen manchmal Nicht-AMD-Standard-JS geladen werden Shim ist auch schwer zu erklären, Shim wird direkt mit „Pad“ übersetzt, was tatsächlich diese Bedeutung hat. Derzeit verwende ich es hauptsächlich an zwei Stellen 1. Nicht-AMD-Modulausgabe, nicht standardmäßige AMD-Module in verfügbare Module „auffüllen“. Beispiel: In der alten Version von jquery wird die AMD-Spezifikation nicht geerbt, sodass Sie [„jquery“] nicht direkt anfordern können Dieses Mal ist ein Shim erforderlich. Wenn ich beispielsweise die Underscore-Klassenbibliothek verwende, diese jedoch nicht die AMD-Spezifikation implementiert, können wir sie wie folgt konfigurieren

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

Nachdem wir diese Konfiguration vorgenommen haben, können wir in anderen Modulen auf das Unterstrichmodul verweisen:

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

Für Nicht-AMD-Module in Form von Plug-Ins verwenden wir häufig JQuery-Plug-Ins, und diese Plug-Ins entsprechen grundsätzlich nicht den AMD-Spezifikationen, wie zum Beispiel das JQuery.form-Plug-In , müssen Sie das Formular-Plug-in in jquery „auffüllen“:

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

kann auch abgekürzt werden als:

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

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

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