Gibt es legitime Anwendungen für JavaScript ist "mit" Aussage?

Anderen Nutzung kam mir heute, also suchte ich im Internet aufgeregt und fand einen bestehenden erwähnen: Definition von Variablen, die im inneren Blockbereich.

Hintergrund

JavaScript, die trotz Ihrer oberflächlichen ähnlichkeit zu C und C++, nicht scope-Variablen, um den block, Sie sind definiert in:

var name = "Joe";
if ( true )
{
   var name = "Jack";
}
//name now contains "Jack"

Erklärt, eine Schließung in einer Schleife ist eine gemeinsame Aufgabe, wo dies zu Fehlern führen kann:

for (var i=0; i<3; ++i)
{
   var num = i;
   setTimeout(function() { alert(num); }, 10);
}

Weil die for-Schleife nicht vorstellen, einen neuen Bereich, die gleichen num - mit einem Wert von 2 - werden gemeinsam von allen drei Funktionen.

Einen neuen Bereich: let und with

Mit der Einführung der let Anweisung in ES6wird es leicht, die Einführung einer neuen Reichweite, wenn notwendig, um diese Probleme zu vermeiden:

//variables introduced in this statement 
//are scoped to each iteration of the loop
for (let i=0; i<3; ++i)
{
   setTimeout(function() { alert(i); }, 10);
}

Oder auch:

for (var i=0; i<3; ++i)
{
   //variables introduced in this statement 
   //are scoped to the block containing it.
   let num = i;
   setTimeout(function() { alert(num); }, 10);
}

Bis ES6 ist universell verfügbar, dieser Einsatz ist begrenzt auf den neuesten Browsern und Entwickler bereit zu verwenden transpilers. Allerdings können wir einfach die Simulation dieses Verhaltens mit with:

for (var i=0; i<3; ++i)
{
   //object members introduced in this statement 
   //are scoped to the block following it.
   with ({num: i})
   {
      setTimeout(function() { alert(num); }, 10);
   }
}

Die Schleife funktioniert jetzt wie vorgesehen, die Schaffung von drei separaten Variablen, die mit Werten von 0 bis 2. Beachten Sie, dass Variablen deklariert innerhalb der block nicht eingeschränkt auf, im Gegensatz zu dem Verhalten der Blöcke in C++ (in C, Variablen müssen deklariert werden, die am Anfang eines Blocks, also in einer Weise ist es ähnlich). Dieses Verhalten ist tatsächlich ganz ähnlich wie ein lassen - block syntax eingeführt, die in früheren Versionen von Mozilla-Browsern, aber nicht weit verbreitet anderswo.

InformationsquelleAutor der Antwort Shog9

Als meine vorherigen Kommentaren angedeutet, ich glaube nicht, dass Sie verwenden können with sicher, egal wie verlockend es sein könnte, in einer bestimmten situation. Da die Frage nicht direkt hier behandelt, ich wiederhole es. Betrachten Sie den folgenden code

user = {};
someFunctionThatDoesStuffToUser(user);
someOtherFunction(user);

with(user){
    name = 'Bob';
    age  = 20;
}

Ohne sorgfältig zu untersuchen, diese Funktion Aufrufe, gibt es keine Möglichkeit zu sagen, was der Staat Ihr Programm wird nach der Ausführung dieses Codes. Wenn user.name bereits gesetzt wurde, wird es nun Bob. Wenn es nicht gesetzt, wird die Globale name wird initialisiert oder geändert werden, um Bob und die user Objekt bleibt ohne name Eigenschaft.

Fehler passieren. Wenn Sie mit Sie schließlich tun Sie das, und die Chancen erhöhen, Ihr Programm wird scheitern. Schlimmer noch, Sie Begegnung ein funktionierendes Programm setzt einen globalen in der with-block, entweder absichtlich oder durch den Autor nicht zu wissen, über diese Eigenart des Konstrukts. Es ist eine Menge, wie die Begegnung mit fallen, durch auf einen zu wechseln, Sie haben keine Ahnung, ob der Autor das beabsichtigt und es gibt keine Möglichkeit zu wissen, ob "Befestigung" der code wird die Einführung einer regression.

Moderne Programmiersprachen sind keilte fest voll von Funktionen. Einige Funktionen, nach Jahren, entdeckt werden, sind schlecht und sollten vermieden werden. Javascript ist with ist einer von Ihnen.

InformationsquelleAutor der Antwort Alan Storm

Ja, ja und ja. Es ist eine sehr legitime Nutzung. Uhr:

with (document.getElementById("blah").style) {
    background = "black";
    color = "blue";
    border = "1px solid green";
}

Grundsätzlich jede andere DOM oder CSS-hooks sind fantastisch nutzt. Es ist nicht wie "CloneNode" nicht definiert wird und gehen Sie zurück zu den globalen Gültigkeitsbereich, es sei denn, Sie gingen aus dem Weg und beschlossen, es möglich zu machen.

Crockford ' s speed Beschwerde ist, dass ein neuer Kontext erstellt wird. Kontexte sind in der Regel teuer. Ich bin damit einverstanden. Aber wenn Sie gerade erstellt ein div-Element und nicht über einige Rahmenbedingungen auf der hand für die Einstellung der css und müssen bis 15 oder so CSS-Eigenschaften per hand, dann die Erstellung eines Kontext wird wahrscheinlich billiger sein, dann variable Schöpfung und 15 dereferenziert:

var element = document.createElement("div"),
    elementStyle = element.style;

elementStyle.fontWeight = "bold";
elementStyle.fontSize = "1.5em";
elementStyle.color = "#55d";
elementStyle.marginLeft = "2px";

etc...

InformationsquelleAutor der Antwort

Scheint kaum lohnen, da kannst du das folgende tun:

var o = incrediblyLongObjectNameThatNoOneWouldUse;
o.name = "Bob";
o.age = "50";

InformationsquelleAutor der Antwort Allain Lalonde

Visual Basic.NET hat eine ähnliche With - Anweisung. Einer der häufigsten Wege, auf dem ich es verwenden, um schnell eine Reihe von Eigenschaften. Statt:

someObject.Foo = ''
someObject.Bar = ''
someObject.Baz = ''

Kann ich schreiben:

With someObject
    .Foo = ''
    .Bar = ''
    .Baz = ''
End With

Dies ist nicht nur eine Frage der Faulheit. Es macht auch viel mehr lesbaren code. Und im Gegensatz zu JavaScript, die es nicht leiden von Mehrdeutigkeit, da Sie als Präfix alles betroffen von der Anweisung mit einem . (dot). So, die beiden folgenden sind klar:

With someObject
    .Foo = ''
End With

vs.

With someObject
    Foo = ''
End With

Ersteres ist someObject.Foo; die letztere ist Foo im Rahmen außerhalb someObject.

Finde ich, dass JavaScript-die mangelnde Unterscheidung macht es weit weniger nützlich, als Visual Basic-Variante, da die Gefahr von Mehrdeutigkeit zu hoch. Other than, die with ist immer noch eine starke Idee, die machen können, für bessere Lesbarkeit.

InformationsquelleAutor der Antwort Sören Kuklau

Verwendung von "mit" machen den code mehr trocken.

Betrachten Sie den folgenden code:

var photo = document.getElementById('photo');
photo.style.position = 'absolute';
photo.style.left = '10px';
photo.style.top = '10px';

Können Sie es trocken, um die folgenden:

with(document.getElementById('photo').style) {
  position = 'absolute';
  left = '10px';
  top = '10px';
}

Ich denke, es hängt davon ab, ob Sie eine Präferenz haben für die Lesbarkeit oder Ausdruckskraft.

Das erste Beispiel ist besser lesbar und wahrscheinlich auch empfohlen für die meisten code. Aber die meisten code ist ziemlich zahm sowieso. Der zweite ist ein bisschen mehr verdecken, sondern nutzt die expressive Natur der Sprache, zur Senkung der code-Größe und überflüssige Variablen.

Ich kann mir gut vorstellen, wie Java oder C# würde den ersten Weg wählst (Objekt.Mitglied), und diejenigen, die lieber Ruby oder Python würde sich für letzteres entscheiden.

InformationsquelleAutor der Antwort Jonah

Ich denke, dass die offensichtliche Verwendung ist wie eine Verknüpfung. Wenn Sie z.B. die Initialisierung eines Objekts, die Sie einfach speichern Sie die Eingabe eine Menge von "ObjectName." Art wie lisp "mit-slots" können Sie schreiben

(with-slots (foo bar) objectname
   "some code that accesses foo and bar"

das ist das gleiche wie das schreiben

"some code that accesses (slot-value objectname 'foo) and (slot-value objectname 'bar)""

Es ist mehr offensichtlich, warum dies ist eine Verknüpfung dann, wenn Ihre Sprache ermöglicht "Objectname.foo", aber immer noch.

InformationsquelleAutor der Antwort Sarien

In der with-Anweisung kann verwendet werden zum verringern der code-Größe oder für Klassenelemente, z.B.:

//demo class framework
var Class= function(name, o) {
   var c=function(){};
   if( o.hasOwnProperty("constructor") ) {
       c= o.constructor;
   }
   delete o["constructor"];
   delete o["prototype"];
   c.prototype= {};
   for( var k in o ) c.prototype[k]= o[k];
   c.scope= Class.scope;
   c.scope.Class= c;
   c.Name= name;
   return c;
}
Class.newScope= function() {
    Class.scope= {};
    Class.scope.Scope= Class.scope;
    return Class.scope;
}

//create a new class
with( Class.newScope() ) {
   window.Foo= Class("Foo",{
      test: function() {
          alert( Class.Name );
      }
   });
}
(new Foo()).test();

Die with-Anweisung ist sehr nützlich, wenn Sie ändern möchten, den Rahmen, was notwendig ist, dafür, dass Sie Ihre eigenen globalen Bereich, die Sie Bearbeiten können zur Laufzeit. Sie können Konstanten oder bestimmte Hilfsfunktionen, die oft verwendet wie z.B. "toUpper", "toLower" oder "ISTZAHL", "clipNumber" aso..

Über die schlechte performance ich habe gelesen, dass oft: Erfassungsbereich für eine Funktion haben keine Auswirkungen auf die Leistung, in der Tat in meiner FF ein scoped-Funktion läuft dann schneller ein ohne bereichseinschränkung:

var o={x: 5},r, fnRAW= function(a,b){ return a*b; }, fnScoped, s, e, i;
with( o ) {
    fnScoped= function(a,b){ return a*b; };
}

s= Date.now();
r= 0;
for( i=0; i < 1000000; i++ ) {
    r+= fnRAW(i,i);
}
e= Date.now();
console.log( (e-s)+"ms" );

s= Date.now();
r= 0;
for( i=0; i < 1000000; i++ ) {
    r+= fnScoped(i,i);
}
e= Date.now();
console.log( (e-s)+"ms" );

So, in der oben beschriebenen Art und Weise verwendet, die mit-Anweisung hat keine negative Auswirkung auf die performance, aber ein guter, wie es verstirbt die code-Größe, welche Auswirkungen die Speicher-Nutzung auf mobilen Geräten.

InformationsquelleAutor der Antwort alex

Ich denke, dass die with-Anweisung kann in handliches kommen, wenn die Umwandlung einer template-Sprache in JavaScript. Zum Beispiel JST in base2aber ich habe es schon öfter gesehen.

Ich Zustimmen, man kann das Programm ohne die with-Anweisung. Aber da es gibt keine Probleme, es ist eine legitime Nutzung.

InformationsquelleAutor der Antwort doekman

Erstellte ich ein "merge" - Funktion, die eliminiert einige dieser Mehrdeutigkeit mit der with Aussage:

if (typeof Object.merge !== 'function') {
    Object.merge = function (o1, o2) { //Function to merge all of the properties from one object into another
        for(var i in o2) { o1[i] = o2[i]; }
        return o1;
    };
}

Kann ich es verwenden, ähnlich wie withaber ich kann wissen, dass es nicht Auswirkungen auf alle Bereich, die ich nicht beabsichtigen, es zu beeinflussen.

Verwendung:

var eDiv = document.createElement("div");
var eHeader = Object.merge(eDiv.cloneNode(false), {className: "header", onclick: function(){ alert("Click!"); }});
function NewObj() {
    Object.merge(this, {size: 4096, initDate: new Date()});
}

InformationsquelleAutor der Antwort palswim

Ich denke, dass der nutzen with werden kann, abhängig davon, wie gut Ihr code ist geschrieben. Zum Beispiel, wenn Sie code schreiben, erscheint wie diese:

var sHeader = object.data.header.toString();
var sContent = object.data.content.toString();
var sFooter = object.data.footer.toString();

dann könnte man argumentieren, dass with verbessern die Lesbarkeit des Codes dadurch:

var sHeader = null, sContent = null, sFooter = null;
with(object.data) {
    sHeader = header.toString();
    sContent = content.toString();
    sFooter = content.toString();
}

Umgekehrt, es könnte argumentiert werden, dass Sie gegen die Gesetz von Demeteraber dann wieder, vielleicht auch nicht. Ich schweife ab =).

Über alles, weiß, dass Douglas Crockford empfiehlt nicht mit with. Ich fordere Sie auf, check-out seinem blog-post über with und seine alternativen hier.

InformationsquelleAutor der Antwort Tom

Es ist gut für das setzen von code, der ausgeführt wird in einem relativ komplizierten Umgebung in ein Gefäß: ich benutze es, um eine lokale Bindung für "Fenster" und wie, um code auszuführen, bedeutete für einen web-browser.

InformationsquelleAutor der Antwort aredridel

CoffeeScript ist Coco Gabel hat eine with keyword, aber es setzt einfach this (auch schreibbar als @ in CoffeeScript/Coco) an das target-Objekt innerhalb des Blocks. Dies beseitigt Unklarheiten und erreicht ES5 strict-Modus compliance:

with long.object.reference
  @a = 'foo'
  bar = @b

InformationsquelleAutor der Antwort

Verwendet werden können, um zu vermeiden, dass explizit verwalten stelligkeit bei der Verwendung von require.js:

var modules = requirejs.declare([{
    'App' : 'app/app'
}]);

require(modules.paths(), function() { with (modules.resolve(arguments)) {
    App.run();
}});

Umsetzung von requirejs.erklären:

requirejs.declare = function(dependencyPairs) {
    var pair;
    var dependencyKeys = [];
    var dependencyValues = [];

    for (var i=0, n=dependencyPairs.length; i<n; i++) {
        pair = dependencyPairs[i];
        for (var key in dependencyPairs[i]) {
            dependencyKeys.push(key);
            dependencyValues.push(pair[key]);
            break;
        }
    };

    return {
        paths : function() {
            return dependencyValues;
        },

        resolve : function(args) {
            var modules = {};
            for (var i=0, n=args.length; i<n; i++) {
                modules[dependencyKeys[i]] = args[i];
            }
            return modules;
        }
    }   
}

InformationsquelleAutor der Antwort

Arbeite ich an einem Projekt, das den Benutzern das hochladen von code, um das Verhalten zu ändern, Teile der Anwendung. In diesem Szenario, ich habe mit einem with - Klausel, um Ihren code ändern, alles, was außerhalb des Bereichs, den ich will, dass Sie Durcheinander herum mit. Die (vereinfachte) Teil code, den ich verwenden, um dies zu tun ist:

//this code is only executed once
var localScope = {
    build: undefined,

    //this is where all of the values I want to hide go; the list is rather long
    window: undefined,
    console: undefined,
    ...
};
with(localScope) {
    build = function(userCode) {
        eval('var builtFunction = function(options) {' + userCode + '}');
        return builtFunction;
    }
}
var build = localScope.build;
delete localScope.build;

//this is how I use the build method
var userCode = 'return "Hello, World!";';
var userFunction = build(userCode);

Dieser code sorgt (etwas), dass der benutzerdefinierte code hat weder Zugriff auf alle Global-Bereich in Objekten wie window noch einer meiner lokalen Variablen, die durch einen Verschluss.

Nur als ein Wort zu den weisen, die ich noch durchführen, statische code-Prüfungen auf der Benutzer-eingereichten code, um sicherzustellen, dass Sie nicht mit anderen hinterhältigen benehmen, um Zugang zu den globalen scope. Zum Beispiel, die folgenden benutzerdefinierten code packt direkten Zugang zu window:

test = function() {
     return this.window
};
return test();

InformationsquelleAutor der Antwort