JavaScript Refactoring Techniques

Workflow & Best Practices
, ,
1

Un mini-curs gratuit foarte interesant despre cum poți face refactor la anumite părți din cod.

Mi s-a părut ingenios modul în care poți simplifica un if mai complex: extragi totul într-un array, după care îl iterezi. În curs se folosește underscore, dar se poate extrage destul de ușor respectiva funcționalitate:

2016-08-15__06_08.jpg996×678 41.4 KB

2

Personal as merge pe varianta cea mai “readable”, din experienta am invatat ca e bine sa ma feresc sa scriu “clever code”.

As crea un set de functii care sa faca exact ce spun ca fac si le-as da prefixul is.

const isLenghty = (code) => (
  code.length < 10 && code.length > 100
)


const isCleverCode = (code) => {
  if (code.veryCleverShit) {
    return true
  }

  if (code.keepsItSimple) {
    return false
  }
}


if (isLenghty(code) && isCleverCode(code)) {
  throw Error('success!!')
}
3 Likes
3

Cheesus F. Christ, exista un curs care preda asemenea obscenitati?

In some teams you can get your ass kicked for writing stuff like that.

4

Mie tot mi se pare ingenioasă abordarea. În practică aș extrage fiecare condiție (sau grup de condiții) în metode separate, cu nume sugestiv (așa cum a zis și Eugen mai sus, aș folosi prefixurile is* sau has*; e.g. isFeatured(), hasChildren() etc)

Dar între abordarea de mai sus si un set de condiții ce se întinde pe patru rânduri ce crezi că aș alege? :smiley:

5

Exista si alte variante:

var SpecialOfferChecker = function(age, gamer, adNetworks, specialStuff) {
  this.age = age;
  this.gamer = gamer;
  this.adNetworks = adNetworks;
  this.specialStuff = specialStuff;
  this.validators = ['isTeenager', 'isFirstTimeGame', 'isPartOfAdNetwork'];
}

SpecialOfferChecker.prototype = {
  isTeenager: function() { return (this.age > 0 && this.age < 20); },
  isFirstTimeGame: function() { return false; /* bla bla */ },
  isPartOfAdNetwork: function() { return false; /* bla bla */ },
  isValid: function() {
    // disclaimer: I was just having fun here do not use in real code
    // this is false bc. the original code uses `||`; for `&&`set it to true
    var valid = false;     
    for(var i = 0; i < this.validators.length; i++) {
      funcNameString = this.validators[i];
      valid = valid || this[funcNameString]();
    }
    return valid;
  }
}

test = new SpecialOfferChecker(18)
test.isValid() // => true
6

Mai sus este o varianta OOP (in opinia mea), varianta FP ar fi:

const isTeenager = (data) => (
  data.age > 0 && data.age < 20
)


const isFirstTimeGame = (data) => {
  /* bla bla */
  if (!data) return false
}


const isPartOfAdNetwork = (data) => {
  /* bla bla */
  if (!data) return false
}


const checkOffer = (data, validators) => {
  for (let i = 0; i < validators.length; ++i) {
    const validate = validators[i]

    if (!validate(data)) {
      return false
    }
  }

  return true
}


const offer = { age, gamer, adNetworks, specialStuff }


checkOffer(offer, [
  isTeenager,
  isFirstTimeGame,
  isPartOfAdNetwork,
])
7

hint hint: JS is OOP :slight_smile: why do we have to FP everything just for the sake of the FP/React-hype?

EDIT:

rhetorical question, let’s not start a flame war :sunny: