Haben Sie gute Vorschläge zum Refactoring des folgenden JavaScript-Codes?

Question

Irgendwelche Ideen oder Vorschläge für eine prägnantere Art, diesen Code zu refaktorieren?

Vielleicht eine Loop-Lösung oder etwas ähnliches?

this._featuredImage = '../../../../../../../../content/images/' + this.post.slug + '.jpg'; 
this._checkImage(this._featuredImage, function() { // Image exists 
    this.featuredImage = this._featuredImage; 
}.bind(this), function() { // Image doesn't exist 
    this._featuredImage = '../../../../../../../../content/images/' + this.post.slug + '.png'; 
    this._checkImage(this._featuredImage, function() { // Image exists 
    this.featuredImage = this._featuredImage; 
    }.bind(this), function() { // Image doesn't exist 
    this._featuredImage = '../../../../../../../../content/images/' + this.post.datestamp + '.jpg'; 
    this._checkImage(this._featuredImage, function() { // Image exists 
     this.featuredImage = this._featuredImage; 
    }.bind(this), function() { // Image doesn't exist 
     this._featuredImage = '../../../../../../../../content/images/' + this.post.datestamp + '.png'; 
     this._checkImage(this._featuredImage, function() { // Image exists 
     this.featuredImage = this._featuredImage; 
     }.bind(this), function() { // Image doesn't exist 
     this.featuredImage = false; 
     }.bind(this)); 
    }.bind(this)); 
    }.bind(this)); 
}.bind(this)); 

Danke, ich hoffe, das macht Sinn.

Answer 1

ich von wechselnden fest codierten Strings und Code beginnen würde, die auf den ersten Blick dupliziert wird:

this.setFeaturedImage = function(newImage) { 

    this.featuredImage = newImage; 
} 

this.unsetFeatureImage = function() { 
    this.featuredImage = false; 
} 

this.imagesRoot = '../../../../../../../../content/images/'; 
this.fileExtensions = ['jpg' => '.jpg', 'png' => '.png']; 

this.getPostSlugImage = function(extension) { 
    return this.imagesRoot + this.post.slug + fileExtensions[extension]; 
} 

this.getPostDatestampImage = function(extension) { 
    return this.imagesRoot + this.post.datestamp + fileExtensions[extension]; 
} 

Als ich änderte anonyme Funktionen Aufrufe an diese Objekte Methoden. Hier sah ich, dass sich diese Methode bei einem Fehler in der Kette nennt. Also änderte ich sie unsetFeaturedImage rufen scheitern und Rückkehr falsch

this.trySetPostSlugJpgImage = function() { 
    this._checkImage(this.getPostSlugImage('jpg'), this.setFeaturedImage(this.getPostSlugImage('jpg')).bind(this), unsetFeatureImage.bind(this)); 
    if(this.featuredImage == false) return false; 
} 

this.trySetPostSlugPngImage = function() { 
    this._checkImage(this.getPostSlugImage('png'), this.setFeaturedImage(this.getPostSlugImage('png')).bind(this), unsetFeatureImage.bind(this)); 
    if(this.featuredImage == false) return false; 
} 

this.trySetPostDatestampJpgImage = function() { 
    this._checkImage(this.getPostDatestampImage('jpg'), this.setFeaturedImage(this.getPostDatestampImage('jpg')).bind(this), unsetFeatureImage.bind(this)); 
    if(this.featuredImage == false) return false; 
} 

this.trySetPostDatestampPngImage = function() { 
    this._checkImage(this.getPostDatestampImage('png'), this.setFeaturedImage(this.getPostDatestampImage('png')).bind(this), unsetFeatureImage.bind(this)); 
    if(this.featuredImage == false) return false; 
} 

Und als Ergebnis habe ich:

if(!this.trySetPostSlugJpgImage()) 
    if(!this.trySetPostSlugPngImage()) 
    if(!this.trySetPostDatestampJpgImage()) 
     if(!this.trySetPostDatestampPngImage()) 

Dass wir Funktion mit einfachen Namen schließen in und verwenden können, in unserem System

Answer 2

Ja, eine Schleife der Art, sondern weil Ihre _checkImage Funktion asynchron ist, kann es nicht buchstäblich ein for oder while:

var images = [this.post.slug + '.jpg', this.post.slug + '.png', this.post.datestamp + '.jpg', this.post.datestamp + '.png']; 
var index = 0; 
setFeaturedImage(this); 
function setFeaturedImage(t) { 
    if (index < images.length) { 
     t._featuredImage = '../../../../../../../../content/images/' + images[index]; 
     t._checkImage(t._featuredImage, 
      function() { // Image exists 
       t.featuredImage = t._featuredImage; 
      }, 
      function() { // Image doesn't exist 
       ++index; 
       setFeaturedImage(t); 
      } 
     ); 
    } 
} 

Ich verstehe nicht ganz, warum Sie das Bildmotiv Spar getestet als _featuredImage. Wenn das nicht notwendig ist, können wir es loswerden:

var images = [this.post.slug + '.jpg', this.post.slug + '.png', this.post.datestamp + '.jpg', this.post.datestamp + '.png']; 
var index = 0; 
setFeaturedImage(this); 
function setFeaturedImage(t) { 
    if (index < images.length) { 
     var image = '../../../../../../../../content/images/' + images[index]; 
     t._checkImage(image, 
      function() { // Image exists 
       t.featuredImage = image; 
      }, 
      function() { // Image doesn't exist 
       ++index; 
       setFeaturedImage(t); 
      } 
     ); 
    } 
} 

Answer 3

Sie können den Code Refactoring und vereinfachen, indem this in einer Variablen zu speichern anstelle der Verwendung Function.prototype.bind

var prefix = '../../../../../../../../content/images/'; 
var that = this; 

function activateImageIfExists(image, elseCall) { 
    var fullImagePath = prefix + image; 
    that._checkImage(fullImagePath , function() { that.featuredImage = fullImagePath; }, elseCall); 
} 

activateImageIfExists(that.post.slug + '.jpg', function() { 
    activateImageIfExists(that.post.slug + '.png', function() { 
     activateImageIfExists(that.post.datestamp + '.jpg', function() { 
      activateImageIfExists(that.post.datestamp + '.png', function() { 
       that.featuredImage = false; 
      }); 
     }); 
    }); 
}); 

Wenn Sie nicht unterstützen müssen alte Browser können Sie Pfeil-Funktionen verwenden

var prefix = '../../../../../../../../content/images/'; 

var activateImageIfExists = (image, elseCall) => { 
    var fullImagePath = prefix + image; 
    this._checkImage(fullImagePath,() => this.featuredImage = fullImagePath , elseCall); 
} 

activateImageIfExists(this.post.slug + '.jpg',() => 
activateImageIfExists(this.post.slug + '.png',() => 
activateImageIfExists(this.post.datestamp + '.jpg',() => 
activateImageIfExists(this.post.datestamp + '.png',() => this.featuredImage = false)))); 

Answer 4

const path = '../../../../../../../../content/images/'; 
const images = [ 
    path + this.post.slug + '.jpg', 
    path + this.post.slug + '.png', 
    path + this.post.datestamp + '.jpg', 
    path + this.post.datestamp + '.png', 
]; 
const c1 =() => this.featuredImage = this._featuredImage; 
const c2 =() => { 
    let box = images.shift(); 
    this._featuredImage = box; 
    this._checkImage(box, c1, box? c2 :() => { 
     this.featuredImage = false; 
    }); 
}; 

c2();