1. Die fließende Flüssigkeit der Grenzfläche
Eine gute Schnittstelle ist reibungslos und leicht zu verstehen und spiegelt hauptsächlich die folgenden Aspekte wider:
1. Einfach
Um das CSS -Attribut eines bestimmten Elements zu betreiben, ist Folgendes die native Methode:
document.querySelectorAll ('#id'). style.color = 'red';Nach der Verpackung
Funktion A (Selektor, Farbe) {document.querySelectorAll (Selector) []. style.color = color} a ('#a', 'rot');Von einer langen Linie mit Dutzenden von Buchstaben bis zu einem einfachen Funktionsaufruf ist die API einfach und einfach zu bedienen
2. Lesbarkeit
a ('#a', 'rot') ist eine gute Funktion, die uns hilft, ein Element einfach und praktisch zu ändern, aber das Problem ist, dass es verwirrter ist, wenn Sie die Funktionsänderung zum ersten Mal verwenden. Niemand wird ihm sagen, welche Funktion a ist. Es ist notwendig, eines über die Entwicklung der Schnittstelle zu wissen: Menschen sind faul. Aus Sicht der Farbzuweisungsfunktion, obwohl weniger Code geschrieben wird, erhöht er die Speicherkosten. Jedes Mal, wenn Sie dies tun, müssen Sie eine Kartierungsbeziehung haben. A ----> Farbe. Wenn es ein paar einfache sind, spielt es keine Rolle, aber normalerweise hat eine Reihe von Frameworks Dutzende oder sogar Hunderte von APIs, und die Zunahme der Zuordnungskosten führt dazu, dass der Programmierer zusammenbricht. Was wir brauchen, ist, die Schnittstelle sinnvoll zu machen. Schreiben wir die A -Funktion neu:
Funktion letSomeElementCHangeColor (Selector, Farbe) {document.querySelectorAll (Selector, Farbe);}LetSomeElementChoneColor erhält eine sprachliche Bedeutung im Vergleich zu A, und jeder wird seine Bedeutung kennen.
3.. Reduzieren Sie die Speicherkosten
Die Funktion, die wir gerade jetzt sind. Es ist zu lang. Obwohl LetSomeElementChoneColor die Zuordnungskosten verringert, erhöht es die Speicherkosten. Sie sollten wissen, dass niemand, einschließlich akademischer Meister, mündlich sein mag. Die APIs, die DOM nativ erhalten, haben auch dieses Problemdokument. document.getElementsByName; document.querySelectorAll; Diese APIs geben den Menschen das Gefühl, dass die Worte zu lang sind. Obwohl die Bedeutung, die sie geben, sehr klar ist, basiert dieser Ansatz auf der Opfer der Einfachheit. Also schreiben wir diese vorherige Funktion erneut um
FunktionsetColor (Selector, Farbe) {xxxxxxxxxxxxxx}Reduzieren Sie den Funktionsnamen ohne signifikante Änderungen. Machen Sie es einfach zu lesen, zu erinnern und zu verwenden.
4. erweitert
Die sogenannte Erweiterung bedeutet, dass die Verwendung von Funktionen in der Reihenfolge des Schreibens wie fließendes Wasser ausgeführt wird, um eine Ausführungskette zu bilden:
document.getElementById ('id'). style.color = 'rot'; document.getElementById ('id').Die vorherige Methode, die wir verwendeten, bestand darin, die beiden Funktionen setfontsize, SetbackgroundColor, zu verkapulieren. und dann sie setColor ('id', 'rot') ausführen; setfontsiez ('id', '12px'); SetBackgroundColor ('id', 'pink'); Offensichtlich ist dieser Ansatz nicht faul, über das Reich hinauszugehen. Das ID-Element muss jedes Mal wieder eingehen, was die Leistung beeinflusst und fehlschlägt. Jedes Mal, wenn es neue Methoden hinzufügen muss, scheitern, werden diese Methoden jedes Mal aufgerufen oder fehlschlägen. Im Folgenden haben wir es in eine erweiterte Funktion umgeschrieben. Verpfändet die ID -Methode zuerst in ein Objekt und gib dieses Objekt dann in jeder Methode des Objekts zurück:
Funktion getElement (selektor) {this.style = document.querySelecotrall (Selector) .Style;} getElement.Prototype.Color = Funktion (Farbe) {this.style.color = color; return this;} GetElement.Prototyp.Background (bg) {this.style.style.style.style.style.backgroundgroundgross. this;} getElement.prototype.fontSize = function (size) {this.style.fontSize = size; return this;} // rufen Sie var el = new getElement ('#id') el.color ('rot'). Hintergrund ('pink'). fontsize ('px');Einfach, reibungslos und einfach zu lesen, werden wir darüber sprechen, wie wir in den Parametern weiter optimieren können. Daher verwendet jeder lieber die JQuery -API. Obwohl ein $ -Symbol keine praktische Bedeutung darstellt, ist ein einfaches Symbol für unsere Verwendung von Vorteil. Es verkörpert die oben genannten Prinzipien: einfach, leicht zu lesen, leicht zu erinnern, Kettenschreiben und Multi-Parameter-Verarbeitung.
Nachtware:
document.getElementById ('id'). style.color = 'rot'; document.getElementById ('id').Traum:
$ ('id').2. Konsistenz
1. Konsistenz der Schnittstelle
Die relevanten Schnittstellen behalten einen konsistenten Stil bei. Eine vollständige Reihe von APIs reduziert die Anpassungsfähigkeit des Entwicklers an neue Tools erheblich, wenn sie ein Gefühl der Vertrautheit und des Komforts vermittelt. Benennung dieses Ding: sowohl kurz als auch selbstverschreibe und vor allem die Konsistenz aufrechterhalten. "Es gibt nur zwei Kopfschmerzen in der Informatik -Community: Cache -Misserfolg und Namensprobleme" - Phil Karlton wählen ein Wort, das Ihnen gefällt, und verwenden Sie es kontinuierlich. Wählen Sie einen Stil und behalten Sie ihn dann.
Nachtware:
setColor,
Letackground
ChangeFontsize
Makedisplay
Traum:
setColor;
Rückschlag;
setfontsize
Satz.........
Versuchen Sie, den Code -Stil und den Namensstil beizubehalten, damit die Leute Ihren Code lesen können, als ob sie Artikel lesen, die von derselben Person geschrieben wurden.
3.. Parameterverarbeitung
1. Art des Parameters
Bestimmen Sie die Art der Parameter, um stabile Garantien für Ihr Programm zu gewährleisten
// Wir sehen, dass die Farbe die FUNKTION SETCOLOR (Farbe) {if (typeof color! == 'string') return; dosomething}2. Verwenden Sie JSON, um Parameter zu übergeben
Es gibt viele Vorteile von Passingwerten in JSON. Es kann Parameter benennen, den spezifischen Speicherort der Parameter ignorieren, Standardwerte usw. geben usw. beispielsweise die folgenden schlechten Situationen:
Funktion Fn (Param1, Param2 ............ Paramn)
Sie müssen jeden Parameter entsprechend übergeben, andernfalls wird Ihre Methode auf andere Weise ausgeführt als erwartet. Die richtige Methode ist die folgende.
Funktion fn (json) {// Setzen Sie den Standardwert für die erforderlichen Parameter var default = extend ({param: 'Standard', Param: 'Standard' ......}, JSON)}Es wird erwartet, dass dieser Funktionscode ausgeführt wird, auch wenn Sie keine Parameter darin übergeben. Denn bei der Erklärung entscheiden Sie den Standardwert der Parameter basierend auf dem spezifischen Unternehmen.
4. Skalierbarkeit
Eines der wichtigsten Prinzipien des Softwaredesigns: Ändern Sie niemals die Schnittstelle, es bedeutet, sie zu erweitern! Die Skalierbarkeit erfordert auch eine einzige Verantwortung für die Schnittstelle, und mehrere Schnittstellen mehrerer Verantwortung sind schwer zu erweitern. Nehmen Sie eine Kastanie:
// Die Schriftart und der Hintergrund eines Elements müssen gleichzeitig geändert werden. Wenn Sie die Schriftgröße erneut ändern müssen, können Sie diese Funktion nur ändern und den Code ausfüllen, um die Schriftgröße nach der Funktion // DreamFunction -Set (Selektor, Farbe) {var el = document.querySelectroall (Selektor); El.Style.Color = Farbe; Farbe, px) {var el = set (selector, color) el.style.fontsize = px; return el;}Das obige ist nur eine einfache Ergänzung von Farben. Das Geschäft ist komplex und der Code ist nicht, wenn Sie es schreiben. Sie müssen den vorherigen Code lesen und ihn ändern. Offensichtlich entspricht es nicht dem offenen Prinzip. Die geänderte Funktion gibt das Elementobjekt zurück, sodass Sie beim nächsten Ändern den Rückgabewert erneut zur Verarbeitung erhalten.
2. Die Verwendung davon
Die Skalierbarkeit beinhaltet auch die flexible Verwendung von Methoden, Anruf- und Anwenden:
Funktion Saybonjour () {alert (this.a)} obj.a =; obj.say = saybonjour; obj.say (); /// orsaybonjour.call || anwenden (obj); //5. Handhabungsfehler
1. Vorhersehefehler
Sie können Typen verwenden oder versuchen ... fangen, um zu erkennen. Typof erzwingt das Erkennungsobjekt, keine Fehler zu werfen, und ist besonders für undefinierte Variablen nützlich.
2. Werfen Sie einen Fehler
Die meisten Entwickler möchten keine Fehler machen und müssen den entsprechenden Code selbst finden. Der beste Weg besteht darin, es direkt in der Konsole auszugeben, um dem Benutzer zu sagen, was passiert ist. Wir können die Ausgabes -API des Browsers verwenden: console.log/warn/fehler. Sie können auch einen Ausweg für Ihr Programm hinterlassen: Versuchen Sie ... Fang.
Funktionsfehler (a) {if (typeof a!6. Voraussicht
Die vorhersehbare Geruchsprogrammschnittstelle bietet Robustheit und um eine reibungslose Ausführung Ihres Codes zu gewährleisten, muss sie abnormale Erwartungen berücksichtigen. Schauen wir uns den Unterschied zwischen unvorhergesehenem Code und vorhersehbaren Code mit dem vorherigen SETColor an
// NighwareFunction set (Selektor, Farbe) {document.getElementById (Selector) .style.color = color;} // Dreamzepto.init = Funktion (Seltector, Context) {var dom // Wenn nichts gegeben, geben Sie eine leere Zepto -Sammlung zurück (! selector.trim () // Wenn es sich um ein HTML -Fragment handelt, erstellen Sie Knoten daraus // Hinweis: Sowohl in Chrom als auch in Firefox wird der DOM -Fehler // geworfen, wenn das Fragment nicht mit <if (selector [] == '<' && fragmentre.test (selektor) dom = zepto.fragment (selektor, seltector, retexp. In diesem Zusammenhang zuerst und aus SELECT // Knoten von toelse if (Kontext! $(document).ready(selector)// If a Zepto collection is given, just return itelse if (zepto.isZ(selector)) return selectorelse {// normalize array if an array of nodes is given (isArray(selector)) dom = compact(selector)// Wrap DOM nodes.else if (isObject(selector))dom = [selector], selector = null// If it's a HTML -Fragment, erstellen Sie Knoten aus iTelse if (Fragmentre.test (selector)) dom = zepto.fragment (selector.trim (), regexp. $, Kontext), selector = null // Wenn es einen Kontext gibt, erstellen Sie zuerst eine Sammlung in diesem Kontext und selekte // nodes und seltexte. Wenn es sich um einen CSS -Selektor handelt, wählen Sie sie mit dem Auswählen von Knoten.else Dom = Zepto.qsa (Dokument, Selektor)} // Erstellen Sie eine neue Zepto -Sammlung aus den Knoten FoundReturn Zepto.z (DOM, Selektor)}}Das obige ist der Quellcode von Zepto. Sie können sehen, dass der Autor beim Vorhersagen der eingehenden Parameter viel verarbeitet hat. Tatsächlich liefert die Vorhersagbarkeit mehrere Eingänge für das Programm, nichts anderes als einige logische Urteile. Zepto verwendet hier viele richtige und falsche Urteile, was auch zur Länge des Codes führt und nicht zum Lesen geeignet ist. Kurz gesagt, Vorhersehbarkeit erfordert wirklich, dass Sie mehr Parameter für die physischen Objekte am Ort schreiben. Ändern Sie die externe Erkennung in die interne Erkennung. Ja, Leute, die es benutzen, sind bequem und glücklich, es zu benutzen. Jetzt! Das Wichtigste im Leben ist Heisen.
7. Kommentare und Dokumente Lesbarkeit
Die beste Schnittstelle ist, dass wir es ohne Dokumentation verwenden, aber wenn die Anzahl der Schnittstellen mehr ist und das Geschäft zunimmt, wird es etwas schwierig zu verwenden. Daher müssen Schnittstellendokumente und Kommentare sorgfältig geschrieben werden. Die Kommentare folgen dem Prinzip der einfachen und zuversichtlichen und zuversicht und sind für diejenigen, die Jahre später kommen, um ihnen zu zeigen:
// Annotationsschnittstelle, um PPT zu demonstrieren, verwenden Sie die Funktion commentary () {// Wenn Sie eine Variable ohne wörtliche Bedeutung definieren, schreiben Sie am besten einen Kommentar dafür: A: Nutzlose Variable können Sie var a; // Kommentare in Schlüssel und Unklarheit schreiben, genau wie die letzten Berührung alle Daten, nachdem Sie das Hash -Interface auf die Hase -Interface -Routing -Datei beenden. Return go.navigate ('Hash', function () {data.clear ();});}endlich
Es wird empfohlen, API -Dokumente für Grammatik -Schreiben von Grammatik und GitHub Royal Dokument zu schreiben, die Syntax schreiben. Einfach und schnell, der Code wird hervorgehoben, und Sie sagen nicht viel.
Das obige ist die vollständige Beschreibung der vom Herausgeber vorgelegten JavaScript -API -Designprinzipien. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!