Modulare JavaScript-Programmierung (Anmerkungen)_Javascript-Kenntnisse

Ich hatte in letzter Zeit immer nur geringe Kenntnisse über JS, daher habe ich es immer noch nicht vollständig verstanden, daher werde ich zuerst meine Notizen veröffentlichen

Kapitel 1 Modulare JavaScript-Programmierung

(1): So schreiben Sie Module

1 Originalschrift
// Ein Modul ist eine Reihe von Methoden zur Implementierung einer bestimmten Funktion; solange verschiedene Funktionen (und Variablen, die den Status aufzeichnen) einfach zusammengestellt werden, handelt es sich um ein Modul Funktion m1(){                // ...
}
Funktion m2(){
               // ...
}
// Die oben genannten Funktionen m1() und m2() bilden ein Modul; rufen Sie es einfach direkt auf, wenn Sie es verwenden // Nachteile: „Verschmutzte“ globale Variablen; es gibt keine Garantie, dass Variablennamen nicht mit anderen Modulen in Konflikt geraten, und es besteht keine direkte Beziehung zwischen Modulmitgliedern;

2-Objekt-Schreibmethode

3 So schreiben Sie eine Funktion zur sofortigen Ausführung

// 把模块写成一个对象,所有的模块成员都放到这个对象里面;
  var module = new Object({
    _count:0,
    m1:function(){
      // ...
    },
    m2:function(){
      // ...
    }
  });
// 上面的函数m1()和m2(),都封装在module对象里;使用时直接调用这个对象的属性;
  module.m1();
// 但是,这样的写法会暴露所有模块成员,内部状态可以被外部改写;
  module._count = 4;

Vier Zoommodi

  var module = (function(){
    var _count = 0;
    var m1 = function(){
      // ...
    };
    var m2 = function(){

    };
    return {
      m1:m1,
      m2:m2
    };
  })();
// 使用上面的写法,外部代码无法读取内部的_count变量;
  console.info(module._count); // undefined;
// 上面的写法就是JavaScript模块的基本写法;

5 Wide-Zoom-Modus

// 如果模块很大,必须分成几个部分,或者一个模块需要继承另一个模块,这时就有必要采用"放大模式";
  var module = (function(mod){
    mod.m3 = function(){
      // ...
    };
    return mod;
  })(module);
// 上面的代码为module模块添加了一个新方法m3(),然后返回新的module模块;

6 Geben Sie globale Variablen ein

// 在浏览器环境中,模块的各个部分通常都是从网上获取的,有时无法知道哪个部分会先加载;
// 如果采用上一节的写法,第一个执行的部分有可能加载一个不存在的空对象,这时就要采用"宽放大模式";
  var module = (function(mod){
    // ...
    return mod;
  })(window.module || {});
// 与"放大模式"相比,"宽放大模式"就是"立即执行函数"的参数可以是空对象;

Kapitel 2 Modulare JavaScript-Programmierung (2): AMD-Spezifikation

1 Modulspezifikationen
// Derzeit gibt es zwei beliebte JavaScript-Modulspezifikationen: CommonJS und AMD;

2 CommonJS

// node.js verwendet die JavaScript-Sprache für die serverseitige Programmierung, was die offizielle Geburtsstunde der „modularen JavaScript-Programmierung“ markiert // Das Modulsystem von node.js wird unter Bezugnahme auf die CommonJS-Spezifikation implementiert; In CommonJS gibt es eine globale Methode require() zum Laden von Modulen; var math = require('math'); var math = require('math'); // Modul laden;
Math.add(2,3); // Modulmethode aufrufen =>5;

3 Browserumgebung
// Der Code im vorherigen Abschnitt wird große Probleme haben, wenn er im Browser ausgeführt wird;
var math = require('math');

Math.add(2,3);

// Problem: Sie müssen warten, bis math.js in require('math') geladen ist, bevor math.add(2,3);
// Daher können Browsermodule kein „synchrones Laden“ verwenden, sondern nur „asynchrones Laden“;==>AMD;

Vier AMD
AMD (Asynchronous Module Definition) asynchrone Moduldefinition;
// Asynchrones Laden von Modulen verwenden. Das Laden des Moduls hat keinen Einfluss auf die Ausführung nachfolgender Anweisungen. Alle Anweisungen, die von diesem Modul abhängen, werden in einer Rückruffunktion definiert // Diese Rückruffunktion wird erst ausgeführt, wenn der Ladevorgang abgeschlossen ist // AMD verwendet auch die require()-Anweisung zum Laden von Modulen, erfordert jedoch zwei Parameter:

​ require([module],callback);

// Modul: ist ein Array, die darin enthaltenen Mitglieder sind die zu ladenden Module; // Rückruf: ist die Rückruffunktion nach erfolgreichem Laden; ​ require(['math'],function(math){
Math.add(2,3);
});
// math.add() und das Laden des Mathematikmoduls werden nicht synchronisiert und der Browser friert nicht ein. Daher ist AMD besser für die Browserumgebung geeignet
Kapitel 3 Modulare JavaScript-Programmierung (3): Verwendung von require.js
1. Warum require.js verwenden?
// Mehrere js-Dateien müssen nacheinander geladen werden;
// Nachteile:
// 1. Beim Laden stoppt der Browser das Rendern der Webseite. Je mehr Dateien geladen werden, desto länger verliert die Webseite // 2. Aufgrund der Abhängigkeiten zwischen js-Dateien muss die Ladereihenfolge strikt gewährleistet sein. Wenn die Abhängigkeiten komplex sind, wird das Schreiben und Warten von Code schwierig // Require.js löst also diese beiden Probleme:
// 1. Implementieren Sie das asynchrone Laden von JS-Dateien, um zu vermeiden, dass Webseiten ihre Antwort verlieren // 2. Abhängigkeiten zwischen Modulen verwalten, um das Schreiben und Warten von Code zu erleichtern;

2 Laden von require.js

1. Laden Sie require.js

// Das Async-Attribut gibt an, dass diese Datei asynchron geladen werden muss, um zu verhindern, dass die Webseite die Antwort verliert. IE unterstützt dieses Attribut nicht, sondern nur „Defer“, also schreiben Sie auch „Defer“. 2. Laden Sie main.js

// Die Funktion des data-main-Attributs besteht darin, das Hauptmodul des Webprogramms anzugeben => main.js Diese Datei wird als erstes von require.js geladen // Da das Standarddateisuffix von require.js js ist, kann main.js als main;
abgekürzt werden

3 So schreiben Sie das Hauptmodul main.js

1. Wenn main.js nicht von anderen Modulen abhängt, kann JavaScript-Code direkt geschrieben werden; // main.js

warning('Laden erfolgreich!'); 2. Wenn main.js vom Modul abhängt, müssen Sie die in der AMD-Spezifikation definierte Funktion require() verwenden // main.js
​ require(['moduleA','moduleB','moduleC'],function(moduleA,moduleB,moduleC){                // ...
})
// Funktion require() empfängt zwei Parameter:
// Parameter 1: Array, das die Module angibt, von denen es abhängt, d. h. die drei Module, von denen das Hauptmodul abhängt; //Parameter zwei: Callback-Funktion, die aufgerufen wird, nachdem alle zuvor angegebenen Module erfolgreich geladen wurden; die geladenen Module werden als Parameter an die Funktion übergeben, sodass diese Module innerhalb der Callback-Funktion verwendet werden können; // require() lädt Module asynchron, und die von ihm angegebene Rückruffunktion wird erst ausgeführt, nachdem die vorherigen Module erfolgreich geladen wurden, wodurch das Abhängigkeitsproblem gelöst wird Beispiel:
​ require(['jquery','underscore','backbone'],function($,_,Backbone){
               // ...
});

Laden von vier Modulen
//Verwenden Sie die Methode require.config(), um das Ladeverhalten des Moduls anzupassen // require.config() wird am Kopf des Hauptmoduls (main.js) geschrieben;
// Der Parameter ist ein Objekt und das paths-Attribut dieses Objekts gibt den Ladepfad jedes Moduls an // Stellen Sie die Dateien der folgenden drei Module so ein, dass sie standardmäßig dasselbe Verzeichnis wie main.js verwenden ​ require.config({
        Pfade:{
„jquery“: „jquery.min“,
„underscore“: „underscore.min“,
„backbone“: „backbone.min“
}
});

// Wenn sich das geladene Modul und das Hauptmodul nicht im selben Verzeichnis befinden, müssen Sie die Pfade einzeln angeben; ​ require.config({
        Pfade:{

„jquery“: „lib/jquery.min“,

„underscore“: „lib/underscore.min“,
„backbone“: „lib/backbone.min“
}
});
// Oder ändern Sie direkt das Basisverzeichnis (baseUrl)
​ require.config({
        baseUrl:"js/lib",
        Pfade:{
„jquery“: „jquery.min“,
„underscore“: „underscore.min“,
„backbone“: „backbone.min“
}
});

// Wenn sich das Modul auf einem anderen Host befindet, können Sie dessen URL auch direkt angeben
​ require.config({
        Pfade:{

„jquery“: „https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min“

}
});
// require.js erfordert, dass jedes Modul eine separate js-Datei ist. Wenn mehrere Module geladen werden, werden mehrere HTTP-Anforderungen ausgegeben, was sich auf die Ladegeschwindigkeit der Webseite auswirkt // Daher bietet require.js ein Optimierungstool, mit dem Sie mehrere Module in einer Datei zusammenführen können, um die Anzahl der HTTP-Anfragen zu reduzieren

So schreiben Sie fünf AMD-Module


// Die von require.js geladenen Module übernehmen AMD-Spezifikationen, das heißt, die Module müssen gemäß den AMD-Vorschriften geschrieben werden; // Insbesondere muss das Modul mit einer bestimmten Funktion define() definiert werden; wenn ein Modul nicht von anderen Modulen abhängt, kann es direkt in der Funktion define() definiert werden; // Mathematikmodul in math.js definieren

// math.js

define(function(){         var add = function(x,y){                return x y;

        };

         return {
              add:add
        };
});
//Laden Sie das Mathematikmodul in main.js
​ require(['math'],function(math){
alarm(math.add(1,1));
});
// Wenn dieses Modul auch von anderen Modulen abhängt, muss der erste Parameter der Funktion define() ein Array sein, um die Abhängigkeiten des Moduls anzugeben // math.js
define(['myLib'],function(myLib){
         Funktion foo(){
myLib.doSomething();
}
         return {
foo:foo
        };
});
// Wenn die Funktion require() das obige Modul lädt, wird zuerst die Datei myLib.js geladen

6 Nicht standardmäßige Module laden

// Um ​​nicht standardmäßige Module zu laden, müssen Sie vor dem Laden mit require() zunächst die Methode require.config() verwenden, um einige ihrer Eigenschaften zu definieren ​ require.config({
Unterlegscheibe:{
             'Unterstrich':{
                   exports:'_'
            },
            'Rückgrat':{
               deps:['underscore','jquery'],
exporte:'Backbone'
            }
}
});
// require.config() empfängt ein Konfigurationsobjekt. Zusätzlich zum zuvor erwähnten Pfadattribut verfügt dieses Objekt auch über ein Shim-Attribut, das speziell zum Konfigurieren inkompatibler Module verwendet wird // (1). Definieren Sie das Deps-Array, um die Abhängigkeiten des Moduls anzuzeigen // (2). Definieren Sie den Exportwert (Name der Ausgabevariable) und geben Sie den Namen dieses Moduls an, wenn es extern aufgerufen wird Zum Beispiel: jQuery-Plug-in
Unterlegscheibe:{
          'jquery.scroll':{
           deps:['jquery'],
Exporte:'jQuery.fn.scroll'
}
};

Sieben require.js-Plug-ins

1.domready: Die Rückruffunktion kann ausgeführt werden, nachdem die Seiten-DOM-Struktur geladen wurde; ​ require(['domready!'],function(doc){

               // aufgerufen, sobald das DOM bereit ist;

})  

2.Text und Bild: Erlauben Sie require.js, Text- und Bilddateien zu laden Define(['text!review.txt','image!cat.jpg'],function(review,cat){

console.log(rezension);
           document.body.appendChild(cat);
});