Grundlegende JavaScript-Codierungsmuster

1. Variablendefinition
//Allgemeine Schreibmethode
var a = 0;
var b = 1;
var c = 'xxx';

// Empfohlen Schreibmethode
var a = 0,
b = 1,
c = 'xxx';

2. Versuchen Sie, Literale zu verwenden

//Allgemeines Schreiben
var obj = new Object();
                obj.a = 'aa'; 
        obj.b = 'bb'; Array();

// Empfohlene Schreibweise
var obj = {
a: 'aa',
b: 'bb'
};

var arr = [];

function getXX(index){
return ['aa', 'bb', 'xx', 55, 'xxb'](index);
}

function getMessage(code){
return {
404 : 'xxx',
500: 'xxx'
}[code];
}

3. Reguläres Literal

var regex = new RegExp('someting' );

// Verwenden Sie den Konstruktor nur, wenn sich der reguläre Ausdruck ändern kann

var cls = 'someclass' ,
regex = new RegExp(cls + '\s*', 'ig') ; // nur für dynamische Regexs

// In anderen Fällen verwenden Sie Literale
var regex = /someting /ig;
　
4.

// Standardwerte
var arg = arg || 'default'; // fallback

document.getElementById('test').onclick = function(event){
var event = event ||. window.event;
};

function getX(a){
return a+1 || ;BR>function getY(b){
Return typeof b !== "undefiniert" ? b : 'default';< BR>
5 // Bedingungen
answer = obj && obj.xx && obj.xx.xxx;

// Kontinuierliche Beurteilung
if(obj && obj.xx && obj.xx.xxx){
// etwas tun

}

if(obj.xx){
// etwas tun
}

if(!obj){
// etwas tun
}

// Kongruenzurteil verwenden
if(a === b){
// etwas tun
}

// Versuchen Sie es nicht Um den Browser zu erkennen, erkennen Sie nur, ob die zu verwendende Funktion
if(document.getElementById){
// Fähigkeitserkennung
}
　
Ternärer Operator
// Ternär
check ? value1 : value2;

// Ternärer Operator ist prägnanter
var foo = (condition) ? value1 : value2;

function xx() {

if(condition){

return value1;
}else{
return value2;
}
}

function xx(){
return (Bedingung) ? value1 : value2;
🎜>// Formatierender ternärer Operator
foo = Prädikat ? „eins“ :
Prädikat ? „zwei“ :
„Standard“ // Format
　
7. Iterationswert einfügen

// Iteration einfügen
var name = value[i];
i++;

// Einfügen des Iterationswert direkt in
var name = value[i++];
　
8. DOM-Operation

// DOM-Operation

el.style.display = 'none'; offline
// Operation
el.style.display = 'block';

/ / Dokumentfragmentierung verwenden, um besser zu funktionieren www.2cto.com
var fragment = document.createDocumentFragment() ; // besser

el.innerHTML = ''; // schnell alle untergeordneten Elemente entfernen, aber es kann zu Speicherlecks kommen

el.innerHTML = 'xxx'; // ok, benutze es!

// Behandeln Sie NodeList mit Vorsicht
var images = document.getElementsByTagName('img'); // Seien Sie vorsichtig!
　
9. Ereignis-Proxy

//Verwenden Sie das Ereignis Proxy zum Abhören von Ereignissen auf äußeren Elementen
document.getElementById('list').onclick = function(evt ){
var evt = evt ||.
target = evt.target || evt.srcElement;

if(target.id === 'btn1'){
             // etwas tun
  }
}

　

10. Namespace

// Ein Objekt als Namespace
var MYAPP = {};
MYAPP.dom.get = function(id){};
MYAPP.style.css = function(el, style) {};

MYAPP.namespace('event');
　
11. Verkettungsvorgang

// Verkettungsvorgang: Rückgabe dieser
Funktion setValue(el, value ){
el.value = value;
return this;
}

var obj = new MYAPP.dom.Element('span');
obj.setText( ' hallo')
.setStyle('color', 'red')
.setStyle('font', 'Verdana');
　
12. Privater Bereich

// Function
(function(){
var _private = 'cant see me';

})();

(function($){
$ (' #xxb').click(function(){ });
})(jQuery);
　
13. Objekt konfigurieren

// Objekt konfigurieren
function foo (id , conf, null , null){
// etwas tun
}

foo('bar', {
key1 : 1,
key2 : 2
}) ;
　
14. Typkonvertierung

// Typkonvertierung
+'010' === 10;
Number('010') === 10;
parseInt('010', 10) === 10;
10 + '' === '10';

+new Date() // timestamp
+new Date; >　
15. Erweiterter Prototyp

// Nur verwenden, wenn Vorwärtskompatibilität erforderlich ist.

Array.prototype.forEach = function(){
// nur für Vorwärtskompatibilität
};
　
16. Schleifenoptimierung

// Cache

for(var i=0, j = document.getElementsByTagName(' a' ).length; i0; i--){
// vielleicht schneller
}

// Es soll das schnellste sein
while(i--){
// vielleicht am schnellsten
}
　
17. Versuchen Sie, new special new

Array.forEach();

getElementsByClassName();
querySlectorAll();

// Prüfen Sie zunächst, ob die neue Funktion unterstützt wird, verwenden Sie
if(document.getElementsByClassName){
// use
}else{
/. / Ihre Implementierungen
}

18. Lazy Loading

// Nur einmal beurteilen, keine Notwendigkeit, beim erneuten Aufrufen der Funktion zu beurteilen

function lazyDef(){
if (condition1){
lazyDef = function( ){ };
}else if(condition2){
      lazyDef = function(){ };
  }
    return lazyDef(); Funktionen und öffentliche Methoden

var MYAPP = {};

MYAPP.dom = (function(){

var _setStyle = function(el, prop, value){

console ) . log('setStyle');
};

return {
setStyle: _setStyle
};
})();

// When MYAPP When .dom.setStyle wurde versehentlich überschrieben, _setStyle ist intern immer noch verfügbar
　
20. Debuggen

// Versuchen Sie, es so oft wie möglich zu verwenden, Sie können mehrere Parameter übergeben und schließlich ausgeben gespleißte Zeichenfolge
console.log('xx','xx','...');
console.dir(someObj);

console.dirxml(someDom);

console .time('timer ');
console.warn('xxx');

// Durch die Kapselung kann sichergestellt werden, dass eine versehentliche Freigabe keine Probleme verursacht. Bei der Berichterstattung kann es jedoch zu Problemen mit der Zeilennummer kommen Fehler
function msg( msg){
if(console && console.log){
console.log(msg); // falsche Zeilennummer
}