Wieviel und welche JS Syntax nutzen?

[beatovich]

hallo allerseits

Mein Thema möchte mit einem Beispiel begleiten:

var ob={
  "-dir-x":{
    "-dir-y":{
      "-file-x":{}
    }
  }
};
var path= "x/y";

function fsTest(o, q){
  return q.split("/").map(x => "-dir-"+x).reduce(
    function(u,v){
      console.log("u:"+u, "v:"+v);
      return ( u === undefined ? undefined  
       : u[v] === undefined  ? undefined : u[v] )
    },
    o
  );
}

console.log( fsTest(ob, path) );

In diesem Script kommt die Methode Array.prototype.reduce() vor. Es kommt in der map() Funktion aber auch eine Shorthand-Funktion vor, also als Beispiel-Syntax:

a,b => return a+b

Nun erscheint es mir einfach, für reduce ein polyfill einzusetzen. Aber im Fall der Shorthand-Funktion gibt wohl nichts ähnliches.

Was mich zur Frage führt, bei welcher Syntax sollte man heute vorsichtig sein? Und gerne eure Kommentare nicht betreffs der Shorthand-Funktion.

btw caniuse ist mir selbstverständlich bekannt.

[dedlfix]

Tach!

In diesem Script kommt die Methode Array.prototype.reduce() vor. Es kommt in der map() Funktion aber auch eine Shorthand-Funktion vor, also als Beispiel-Syntax:

a,b => return a+b

Nun erscheint es mir einfach, für reduce ein polyfill einzusetzen.

Kann man, sieht aber nicht sinnvoll aus, solange du IE8 nicht mehr erreichen möchtest.

Aber im Fall der Shorthand-Funktion gibt wohl nichts ähnliches.

Das kann nicht, weil das der Parser verstehen muss.

Was mich zur Frage führt, bei welcher Syntax sollte man heute vorsichtig sein?

Kommt auf die Zielgruppe an. Arrow Functions schließen alle IE aus, der Rest ist dabei.

Und gerne eure Kommentare nicht betreffs der Shorthand-Funktion.

Es gibt TypeScript und Babel, um mit Next-Generation-Javascript arbeiten zu können. Die übersetzen das in veraltete Sprachversionen.

dedlfix.

[beatovich]

hallo

Es gibt TypeScript und Babel, um mit Next-Generation-Javascript arbeiten zu können. Die übersetzen das in veraltete Sprachversionen.

Was nichts anderes heisst, als dass ich halt das gleich selber mache. Bei Arrow Funtionen ist der Mehraufwand nicht gross.

[dedlfix]

Tach!

Es gibt TypeScript und Babel, um mit Next-Generation-Javascript arbeiten zu können. Die übersetzen das in veraltete Sprachversionen.

Was nichts anderes heisst, als dass ich halt das gleich selber mache.

Man bindet das einmalig in seine Entwicklungsumgebung ein und dann läuft das selbständig im Hintergrund und erzeugt bei jedem Speichern die (ältere) Javascript-Version. Bei TypeScript kommt noch hinzu, dass man bei Nutzung von dessen Features, besonders der Typisierung, einen wertvollen Helfer hinzubekommt, der einen gleich beim Entwickeln auf Probleme aufmerksam macht und mit Autovervollständigung aufwarten kann.

Bei Arrow Funtionen ist der Mehraufwand nicht gross.

Im Prinzip ja, aber man bekommt dadurch auch unnötig geschwätzigen Code.

dedlfix.

[beatovich]

hallo

Es gibt TypeScript und Babel, um mit Next-Generation-Javascript arbeiten zu können. Die übersetzen das in veraltete Sprachversionen.

Hier eine Frage zu Babel

for( let item in apps ){ 
	…
	i.onclick = function(){ loadAndRunScript(apps[item]) };
…	
}

Früher gab's ja keine let-Deklaration. Ein Umschreiben nach var hat hier eindeutig unerwünschte Nebeneffekte. Besitzt Babel überhaupt eine PRüfmöglichkeit solcher Nebeneffekte?

[dedlfix]

Tach!

Früher gab's ja keine let-Deklaration. Ein Umschreiben nach var hat hier eindeutig unerwünschte Nebeneffekte. Besitzt Babel überhaupt eine PRüfmöglichkeit solcher Nebeneffekte?

Schau dir an, was Babel oder auch TypeScript in dem Fall macht. Babel hat einen Übersetzer direkt auf der Startseite, für Typescript gibts den Playground.

Um die Frage zu beantworten: Man kann recht gut erkennen, ob eine lokale Variable mit einer aus einem übergeordneten Scope kollidiert und kann dann für diesen lokalen Scope einen anderen Namen nehmen. Geht leider nicht für alle Fälle, vor allem dann nicht, wenn der Name im übergeordneten Scope zur Laufzeit beliebig gebildet werden kann und dann zufällig mit dem lokalen Ersatznamen übereinstimmt.

dedlfix.

[beatovich]

hallo

Ich verwende hier den Playground https://babeljs.io/

vor Verwendung des Schleifeniterators mein Code

var ob = {a:1};

for (let x in ob){
  var li=document.createElement("li");
  li.onclick=function(){run()}
}

Babel:

"use strict";

var ob = { a: 1 };

for (var x in ob) {
  var li = document.createElement("li");
  li.onclick = function () {
    run();
  };
}

Mein Code, x in run() eingefügt:

var ob = {a:1};

for (let x in ob){
  var li=document.createElement("li");
  li.onclick=function(){run(x)}
}

Babel

"use strict";

var ob = { a: 1 };

var _loop = function _loop(x) {
  li = document.createElement("li");

  li.onclick = function () {
    run(x);
  };
};

for (var x in ob) {
  var li;

  _loop(x);
}

Das sagt mir natürlich jetzt nicht auf den ersten Blick, dass der Code auch das intendierte produziert. Aber offensichtlich ist hier einiges an Gedanken und Erfahrung hineingeflossen.

[dedlfix]

Tach!

Das sagt mir natürlich jetzt nicht auf den ersten Blick, dass der Code auch das intendierte produziert.

Dein Code enthält keine Kollisionen. Greif mal auf eine Variable namens x außerhalb der Schleife zu. Babel benennt dann das x in der Schleife zu _x um und TypeScript zu x_1.

Aber offensichtlich ist hier einiges an Gedanken und Erfahrung hineingeflossen.

Davon kann man ausgehen.

dedlfix.