JavaScript verstößt gegen alle Regeln

Angus Croll, ein Front-End-Ingenieur von Twitter, hielt auf der JSConf-Konferenz in Berlin eine Rede mit dem Titel „Break all the Rulez“. Wir sprechen hauptsächlich über einige Dinge, die wir normalerweise für falsch halten und nicht verwenden sollten, die aber tatsächlich nützlich sind. Die Vorlesungsunterlagen (Link), die Angus Croll, der Vater von JavaScript in den Vereinigten Staaten, für seine Rede verwendet hat, stimmten nach der Lektüre mit den meisten Ansichten überein (scheint es immer noch Probleme zu geben?).
Ich werde die wichtigsten Punkte im Folgenden ohne weitere Erklärung kurz übersetzen.

mit Anweisung
Warum nicht verwenden?
1. Unerwartete laufende Ergebnisse, globale Variablen können implizit erstellt werden
2. Die Auflösung des Abschlussbereichs verbraucht zu viel
Einige Leute sagen, dass der strikte Modus von ES5 die implizite Erstellung globaler Variablen (ohne var) verhindern kann, was das Problem von with verringern kann. Aber...
Der strikte Modus kann nicht mit verwendet werden.
Warum heißt das? Ist es nützlich?
1. Browser-Entwicklertools erstellen

//Chrome-Entwicklertools
IS._evaluateOn =
function(evalFunction, obj, expression) {
IS._ensureCommandLineAPIInstalled ( );
expression =
"with (window._inspectorCommandLineAPI) {
with (window) { " + expression + " } }";
return evalFunction.call(obj, expression);
}
2. Simulieren Sie den Bereich auf Blockebene

//Ja, es ist immer noch dieses alte Problem
var addHandlers = function(nodes) {
for (var i = 0; i < ; nodes.length; i++) {
nodes[i].onclick =
function(e) {alert(i);}
}
};

/ /You Sie können dieses Problem lösen, indem Sie eine Funktion außerhalb von
var addHandlers = function(nodes) {
for (var i = 0; i < nodes.length; i++) {
nodes[i].onclick = function einschließen (i) {
       return function(e) {alert(i);};
            (i); with' um den Bereich auf Blockebene zu simulieren
var addHandlers = function(nodes) {
für (var i = 0; i < nodes.length; i++) {
mit ({i:i}) {
nodes[i].onclick =
function(e) {alert(i) ;}
}
}
};
eval-Anweisung
Warum nicht verwenden?
1. Code-Injektion
2. Abschlussoptimierung kann nicht durchgeführt werden
3 . Nachkompilierung
Warum ist es nützlich?
1. Wenn JSON.parse nicht verfügbar ist
Jemand sagte auf Stack Overflow:
„JavaScripts Auswertung ist unsicher, verwenden Sie den JSON-Parser auf json.org.“ um JSON zu analysieren“
Jemand anderes sagte:
„Verwenden Sie nicht eval, um JSON zu analysieren! Verwenden Sie json2.js, geschrieben von Douglas!“
Aber:

// Von JSON2.js

if (/^[],:{}s]*$/
.test(text.replace(/*regEx*/, '@')
.replace(/*regEx */, ']')
.replace(/*regEx*/, '')) ) {
j = eval('(' + text + ')');
}
2. Die JavaScript-Konsole des Browsers wird mithilfe von eval
in der Webkit-Konsole oder JSBin implementiert. Führen Sie den folgenden Code in

>(function () {
console.log(String(arguments.callee) aus. caller))
})()

function eval( ) {
[native code]
}
John Resig sagte:
„eval und with werden verachtet und missbraucht , und von den meisten JavaScript-Programmierern offen verurteilt, aber wenn man sie richtig verwendet, kann man damit wunderbare Codes schreiben, die mit anderen Funktionen nicht realisiert werden können.“
Funktionskonstruktor
Warum ist er nützlich?
1 . Der Code wird auf vorhersehbare Weise innerhalb der Domäne ausgeführt
2. Es können nur globale Variablen dynamisch erstellt werden
Wo wird es verwendet?
1 🎜>
// jQuery parseJSON

// Logik entlehnt von http://json.org/json2.js
if (rvalidchars.test(data.replace(rvalidescape,"@")
.replace( rvalidtokens, "]")
.replace( rvalidbraces,""))) {

return ( new Function( "return " + data ) )();
}
2.Unterstrich. String-Interpolation von js

//von _.template

// Wenn keine Variable angegeben ist,
// Datenwerte einfügen lokaler Geltungsbereich.
if ( !settings.variable)
source = 'with(obj||{}){n' + source + '}n';

//..

var render = new Function(
settings.variable || 'obj', '_', source);
== Operator
Warum nicht verwenden?
1 Operanden auf beiden Seiten in den gleichen Typ konvertieren
Warum ist das sinnvoll?
1. Erzwingen Sie die Konvertierung der Operanden auf beiden Seiten in den gleichen Typ

//Ist es schwierig, so zu schreiben?
if ((x === null) || (x === undefiniert))

//Sie können es so schreiben
if (x == null)
3. Wird verwendet, wenn die Operandentypen auf beiden Seiten offensichtlich gleich sind

typeof thing == "function" //Der typeof-Operator gibt definitiv eine Zeichenfolge zurück
myArray.length == 2;
myString.indexOf('x') == 0; //Die indeOf-Methode gibt definitiv eine Zahl zurück
True-Wert bedeutet nicht unbedingt ==true, falscher Wert nicht unbedingt ==false

if ("potato") {
"potato" == true; //false
}
Array-Konstruktor
Warum nicht verwenden?
1.new Array() ist auch böse? JSLint empfiehlt auch die Verwendung von [].
Warum ist es nützlich?

//Aus der Erweiterung „prototyp.js“ von
//String.prototype
function times(count) {
return count < 1 ?
'' : new Array(count + 1).join(this);
}
' me'.times(10); //"mememememememememe"
Andere
Erweitern Sie das native Prototypobjekt nicht
(es tun dies alle 5 Shims)
Tun Sie dies immer, wenn for/in nach durchläuft Verwenden Sie hasOwnProperty
(Es besteht keine Notwendigkeit, dies zu tun, ohne den Objektprototyp zu erweitern)
Alle var-Anweisungen oben platzieren
(Für Anweisungen ist es besser, sie in Initialisierungsausdrücke einzufügen)
Um die zu deklarieren Funktion vor dem Aufruf
(wird verwendet, wenn Implementierungsdetails Priorität haben)
Verwenden Sie nicht den Kommaoperator
(kann bei Verwendung mehrerer Ausdrücke verwendet werden)
Verwenden Sie immer parseInt. Geben Sie den zweiten Parameter als 10 an
(es sei denn, die Zeichenfolge beginnt mit „0“ oder „x“, andernfalls ist dies nicht erforderlich)
Anmerkung des Übersetzers
Nachdem ich so viel gesagt habe, habe ich selbst auch an eines gedacht. Das, was viele Leute missverstehen, ist Flucht Im Internet heißt es: „Verwenden Sie kein Escape.“
Warum soll es nützlich sein?
1. Escapezeichen maskieren mehr Zeichen und müssen manchmal mit Escapezeichen versehen werden Funktionen.
ASCII char escape() encodeURI() encodeURIComponent()
# %23 # %23
$ %24 $ %24
& %26 & % 26
' %27 ' '
( %28 ( (
) %29 ) )
+ + + %2B
, %2C , %2C
/ / / %2F
: %3A : %3B
= %3D = %3D
@ @ @ %40
~ %7E ~ ~
2. Konvertieren Sie die Zeichenfolge in die UTF8-Codierung, die normalerweise in base64 verwendet wird.
escape entspricht dem Escapezeichen der utf16-codierten Zeichenfolge, und encodeURIComponent entspricht zunächst dem Konvertieren der utf16-Zeichenfolge in die utf8-Codierung und dann dem Escapezeichen.
encodeURIComponent(str) === escape(UTF16ToUTF8(str))
Sie können UTF16ToUTF8(str) === unescape( encodeURIComponent( str )
ableiten. Dann kann es in der Base64-Codierung verwendet werden viel einfacher als im Internet. Beachten Sie, dass es bei BTOA und ATOB Kompatibilitätsprobleme gibt 🎜>
function base64Decode(str) {
return decodeURIComponent(escape(atob(str)));
}