Wie macht man javascript module richtig?

Javascript ist heute die meistens benutzte Programmiersprache des Welt. Er hat lange Weg von kleine und verachten Sprache zu dem größte und alle-benutzen Sprache gekommen. Heute kann man nicht ohne diese Sprache funktioniere. Es gibt viele Tutorials und große Menge von Javascript Bibliothek aber nicht viele geht um Sache wie man gute Code geschrieben sollte.

Ich habe lange Zeit versuchten gute Tutorial finden, wie soll man Javascript-Module schreiben. Es dauert mich Lange Zeit und ich muss wirklich viele „nicht-so-gut“ Muster sehen zu die Beste finden. So jetzt ich möchte mit ihr mein Entdeckung teilen.

Javascript ist immer jung und es gibt keine „universale“ Standarte für Javascript-Coding-Style. Es gibt viele verschiedene Möglichkeiten, wie gute Code schreiben aber ich will hier zeigen, welche ich dachte, die beste ist.

  1. Alles ist über Scope

Wenn man Javascript-Code schreiben möchte, muss man verstehen, was Scope ist. Im kurz – Scope ist kleine namespace für jede Funktion. Für dise Grund wir sind erlauben im jede Funktion verschiedene variablen mit gleiche Name ohne Kollision zu machen. Es hat Vorteile und auch Nachteile – ich versuche das einfach durch Beispiele erklären.

Local scope & Global scope

var x = 5; // global scope – immer verfügbar

var fn = function(){

var y = 9, x = 15; console.log(x, y); // 15, 9 }

console.log(x); // 5 console.log(y); // error – nur local scope

Hier, im diese einfache Funktion Deklaration, haben wir zwei Variablen mit Name `x`. Jede Variable ist aber in andere Scope. Das ist wichtig. Ohne das kann wir leicht überschreiben Variable `x` im Global Scope aus Funktion oder umgekehrt. Auch, wenn wir wollen `x` irgendwo benutzen, sollen wir wissen, welchem `x` wir wollen und mit welcher `x` wir arbeiten.

Eine Speziale Variable verbinden mit Scope heißt `this`. Im jede Scope ist auch wichtig zu verstehen, was this bedeutet, deshalb this bezieht im welche scope wir sind! Wir kann this übersetzen wie „da“ oder „diese“ (Funktion).

var fn = function(){

var x = 5; var self = this; // wir speichern scope im Variable

console.log(x); // 5 – local scope fn()

var fn2 = function(){

var x = 9; // local scope fn2() var y = this.x + self.x; // wir nehmen fn x und fn2 x zusammen console.log(y); // 14 } }

  1. Modules

Modules im Javascript sind einbisschen gleich wie Klassen. Modul soll ein kleine selbständige Teile sein, welcher wir kann benutzen ohne zu andere Teile versehren. Jede Modul soll privat und public Methode und Variable haben und deshalb wir brauchen zu jeder Module selbst Scope hat. Es ist nicht einfach diese Struktur verstehen, wenn jemand nicht gut Javascript kennst.

Unsere module ist speicher im Variable „Additions“. Diese Modul ist mit Closure gebaut. Closure ist anonymous Funktion welcher wird gleich ausführen sein.

Hier ist Beispiele:

/** Das ist Closure **/ function(){ // local scope }(); /** Closure mit züruck geben Object **/ var Additions = (function(){ return {}; }());

Jetzt wir haben Grundlage für unsere Modul. Wir haben Module-Scope und wir kann züruck
geben Object. So jetzt wir machen Variable und Funktion im unsere Module.

/** Module mit private Variablen und Funktion ** var Additions = (function(){ var a = 1; var b = 2; var c = null; var fn = function(){ } return {}; }()) console.log(Additions.a) // errpr

So jetzt brauchen wir aber auch public Methode und Variable. Wie macht das? Ziemlich einfach, wir müssen nur referenz dürch unsere Object züruckgeben.

/** Module mit public Variablen **/ var Additions = (function(){ var a = 1; var b = 2; var c = null; var fn = function(){ } return { a: a, b: b, c: c, fn: fn }; }()) console.log(Additions.a); // 1

Und alles zusammen:

var Additions = (function($){

var self = {}; // einfach Object für public Eingang

self.a = null; // public verfügbar Variable self.b = null; // public verfügbar Variable

var c = null; // private Variable

/** * Init Methode * @param options {} **/ self.init = function(options){

// Im diese init Funktion sollte des Variablen Initialisier // und auch verbinden Methode zu DOM-Objekte

$(„.counter-up“).click(self.increaseCounter).trigger(„click“);

};

self.increaseCounter = function(){

return true; };

var privateMethod = function(){ return true; }

// geben unsere public Object züruck return self;

})(jQuery); Additions.init(); // Jetzt wir Initialize unsere Modul

Javascript Modules sind nicht perfekt. Es gibt viele unterschiede Möglichkeit, wie kann man ihn schreiben und alle Möglichkeiten haben Vortaile und Nachteile. Mit diese Grosse von Javascript Bibliothen und Ökosystem brauchen wir mehr Abstraction und deshalb jede Module sollte selbst Scope benutzen. Es ist ohne Zweifel.

Wenn man Lust hat, mehr über Scope und Modules hier finden kann: