Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der modularen JavaScript-Programmierung

Detaillierte Erläuterung der modularen JavaScript-Programmierung

高洛峰
高洛峰Original
2017-03-12 13:21:271452Durchsuche

In diesem Artikel wird die modulare JavaScript-Programmierung ausführlich erläutert

Kapitel 1 Modulare JavaScript-Programmierung

(1): Modulschreibmethode

Ursprüngliche Schreibmethode
/ / A Modul ist eine Reihe von Methoden zur Implementierung einer bestimmten Funktion; solange verschiedene Funktionen (und Variablen , die den Status aufzeichnen) einfach zusammengestellt werden, wird es als Modul betrachtet; function m1(){
}
}
function m2(){
}
// Die oben genannten Funktionen m1() und m2( ), rufen Sie es einfach direkt auf, wenn using;
// Nachteile: „Verschmutzung“ globaler Variablen; es gibt keine Garantie dafür, dass Variablennamen nicht mit anderen Modulen in Konflikt geraten, und es besteht keine direkte Beziehung zwischen Modulmitgliedern;

Zwei

Objekt

Schreibmethode


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


Drei Funktionen zum sofortigen Ausführen Schreibmethode


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

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


Vier Zoommodi


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


Fünf breite Zoommodi


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


Sechs globale Eingabevariablen


// 独立性是模块的重要特点,模块内部最好不与程序的其他部分直接交互;
// 为了在模块内部调用全局变量,必须显式地将其他变量输入模块;
  var module = (function($,YAHOO){
    // ...
  })(jQuery,YAHOO);
// 上面的module模块需要使用jQuery库和YUI库,就把这两个库(其实是两个模块)当作参数输入module;
// 这样做除了保证模块的独立性,还使得模块之间的依赖关系变得明显;


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

Eine Modulspezifikation

// Derzeit gibt es insgesamt zwei gängige JavaScript-Modulspezifikationen: CommonJS und AMD ;


Zwei CommonJS

//

node.js
verwendet die JavaScript-Sprache für die serverseitige Programmierung, was die offizielle Geburtsstunde der „modularen JavaScript-Programmierung“ markiert; // Die Das Modulsystem von node.js wird unter Bezugnahme auf die CommonJS-Spezifikation implementiert. In CommonJS gibt es eine globale Methode
require
(), die zum Laden von Modulen var math = require verwendet wird ('math'); // Modul laden; math.add(2,3); 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: Muss warten, bis math.js in require('math') geladen ist, bevor math.add(2,3) ausgeführt wird

// Daher kann das Browsermodul kein „synchrones Laden“ verwenden und kann nur „asynchrones Laden“ verwenden 🎜>onous Module Definition) asynchrone Moduldefinition;
// Asynchrones Lademodul verwenden, Modulladen Es hat keinen Einfluss auf die Ausführung nachfolgender Anweisungen. Alle Anweisungen, die auf diesem Modul basieren, werden in einer
Rückruffunktion.
// Diese Rückruffunktion wird erst ausgeführt, wenn der Ladevorgang abgeschlossen ist
/ / AMD verwendet auch die require()-Anweisung, um Module zu laden, erfordert jedoch zwei Parameter:
require([module] , Rückruf);

// Modul: ist ein

Array
, die Mitglieder darin sind das zu ladende Modul // Rückruf: ist die Rückruffunktion nach erfolgreichem Laden; require(['math'], function(math){ math.add(2,3);
});// math.add() und das Laden des Mathematikmoduls sind nicht synchronisiert, und der Browser friert nicht ein; daher ist AMD besser für die Browserumgebung geeignet;
Kapitel 3 JavaScript-Modulprogrammierung (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 Antwort; // 2. Da es Abhängigkeiten zwischen js-Dateien gibt, muss die Ladereihenfolge strikt gewährleistet sein. Wenn die Abhängigkeiten sehr groß sind, wird es schwierig, den Code zu schreiben und zu warten // Require.js löst also diese beiden Probleme:
// 1. Implementieren Sie das asynchrone Laden von JS-Dateien, um Antwortverluste auf der Webseite zu vermeiden. // 2. Verwalten Sie Abhängigkeiten zwischen Modulen, um das Schreiben von Code zu erleichtern und Wartung;

Laden von require.js
1. Laden von require.js
50e99628e926b60c4ad285f45e721de919518f4fb36fd69c8569a95178c4c7de3fa3f474cbb4b6d948eebecb1be5dde4
// Die Rolle des Daten-Main Das Attribut dient zur Angabe des Hauptmoduls des Webseitenprogramms =>main.js. Diese Datei wird als erstes von require.js geladen , daher kann main.js als main;
abgekürzt werden

So schreiben Sie die drei Hauptmodule main.js
1. Wenn main.js nicht von anderen Modulen abhängt, kann JavaScript-Code direkt geschrieben werden
// main.js
Warnung; '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){
                                                                                                                    Eins: Array, das die abhängigen Module angibt, d. h. die drei Module, von denen das Hauptmodul abhängt
// Parameter zwei: Rückruffunktion, wird aufgerufen, wenn alle zuvor angegebenen Module erfolgreich geladen wurden. Übergeben Sie die Funktion als Parameter, sodass diese Module innerhalb der Rückruffunktion verwendet werden können // require() lädt das Modul asynchron und der Browser verliert keine Antwort; für die von ihm angegebene Rückruffunktion werden nur die vorherigen Module erfolgreich geladen. Es wird erst danach ausgeführt, wodurch das Abhängigkeitsproblem gelöst wird:
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 an der Spitze des Hauptmoduls (main.js) geschrieben // Der Parameter ist ein Objekt und das Pfadattribut dieses Objekts gibt den Ladepfad jedes Moduls an.
// Legen Sie die folgenden drei Module fest. Die Datei befindet sich standardmäßig im selben Verzeichnis wie main.js 🎜> „backbone“: „backbone.min“

}

});

// Wenn sich das geladene Modul und das Hauptmodul nicht im selben Verzeichnis befinden, müssen Sie den Pfad eins angeben um eins;
require.config({
paths:{
"jquery": "lib/jquery.min",
"underscore": "lib/underscore.min",
"backbone" ;
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({
paths:{
"jquery ":" https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
          }
     });
// require.js Anforderung, jedes Modul ist Eine separate js-Datei. Wenn mehrere Module geladen werden, werden mehrere HTTP-Anfragen ausgegeben, was sich auf die Ladegeschwindigkeit der Webseite auswirkt.
// Daher stellt require.js ein Optimierungstool bereit Modul bereitgestellt wird, können Sie dieses Tool verwenden, um mehrere Module in einer Datei zusammenzuführen, um die Anzahl der HTTP-Anfragen zu reduzieren;

So schreiben Sie fünf AMD-Module

// Von require.js geladene Module übernehmen AMD-Spezifikationen, das heißt, Module müssen gemäß den AMD-Vorschriften geschrieben werden
// Insbesondere müssen Module mit einer bestimmten define()-Funktion definiert werden; Ein Modul ist nicht von anderen Modulen abhängig, es kann direkt in der Funktion define() definiert werden;
// Definieren Sie das Mathematikmodul in math.js
// math.js
define(function() {
var add = function(x,y){
return x+y;
};
return {
};
});
// Laden Sie die Mathe-Modul in main.js
require(['math'],function(math){
Alert(math.add(1,1));
});
// Wenn dies Modul hängt auch von anderen Modulen ab, dann muss der erste Parameter der Funktion define() ein Array sein, um die Abhängigkeiten des Moduls anzugeben
// math.js
define(['myLib '],function( myLib){
function foo(){
myLib.doSomething();
}
return {
foo:foo
} ;
}) ;
/ / Wenn die Funktion require() das obige Modul lädt, wird zuerst die Datei myLib.js geladen;

Sechs nicht standardmäßige Module laden

// Nicht standardmäßige Module laden Vor dem Laden von Modulen Bei require() müssen Sie zunächst die Methode require.config() verwenden, um einige ihrer Eigenschaften zu definieren. 🎜                                                                                                          . Exporte:'Backbone'

}
});
// require.config( ) empfängt zusätzlich zum zuvor erwähnten Pfadattribut auch ein Shim-Attribut, das speziell zum Konfigurieren inkompatibler Module verwendet wird.
// Definieren Sie das Deps-Array, um die Abhängigkeit anzuzeigen das Modul;
// (2) Definieren Sie den Exportwert (Name der Ausgabevariable), um den Namen dieses Moduls anzugeben, wenn es extern aufgerufen wird;
Zum Beispiel: jQuery-Plugin
shim:{
'jquery.scroll':{
deps:['jquery'],
exports:'jQuery.fn.scroll'
}
};

Sieben require.js Plug-Ins

1.domready: ermöglicht die Ausführung der Callback-Funktion, nachdem die Seiten-DOM-Struktur geladen wurde;
require(['domready!'], function(doc){
// aufgerufen sobald das DOM fertig ist;
})
2.text und Bild: Erlaube require.js, Text- und Bilddateien zu laden;
define(['text! review.txt','image!cat. jpg'],function(review,cat){
console.log(review);

document

.body.appendChild(cat);

});

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der modularen JavaScript-Programmierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn