去除 JavaScript 程式碼的怪味

塗鴉碼龍發表於2015-05-22

難聞的程式碼

/* const */ var CONSONANTS = 'bcdfghjklmnpqrstvwxyz';
/* const */ var VOWELS = 'aeiou';

function englishToPigLatin(english) {
  /* const */ var SYLLABLE = 'ay';
  var pigLatin = '';

  if (english !== null && english.length > 0 &&
    (VOWELS.indexOf(english[0]) > -1 ||
    CONSONANTS.indexOf(english[0]) > -1 )) {
    if (VOWELS.indexOf(english[0]) > -1) {
      pigLatin = english + SYLLABLE;
    } else {
      var preConsonants = '';
      for (var i = 0; i < english.length; ++i) {
        if (CONSONANTS.indexOf(english[i]) > -1) {
          preConsonants += english[i];
          if (preConsonants == 'q' &&
            i+1 < english.length && english[i+1] == 'u') {
            preConsonants += 'u';
            i += 2;
            break;
          }
        } else { break; }
      }
      pigLatin = english.substring(i) + preConsonants + SYLLABLE;
    }
  }

  return pigLatin;
}

/* const */ var CONSONANTS = 'bcdfghjklmnpqrstvwxyz';

/* const */ var VOWELS = 'aeiou';

function englishToPigLatin(english) {

/* const */ var SYLLABLE = 'ay';

var pigLatin = '';

if (english !== null && english.length > 0 &&

(VOWELS.indexOf(english[0]) > -1 ||

CONSONANTS.indexOf(english[0]) > -1 )) {

if (VOWELS.indexOf(english[0]) > -1) {

pigLatin = english + SYLLABLE;

} else {

var preConsonants = '';

for (var i = 0; i < english.length; ++i) {

if (CONSONANTS.indexOf(english[i]) > -1) {

preConsonants += english[i];

if (preConsonants == 'q' &&

i+1 < english.length && english[i+1] == 'u') {

preConsonants += 'u';

i += 2;

break;

}

} else { break; }

}

pigLatin = english.substring(i) + preConsonants + SYLLABLE;

}

return pigLatin;

}

為毛是這個味？

很多原因：

宣告過多
巢狀太深
複雜度太高

檢查工具

Lint 規則

/*jshint maxstatements:15, maxdepth:2, maxcomplexity:5 */
/*jshint 最多宣告:15, 最大深度:2, 最高複雜度:5*/

/*eslint max-statements:[2, 15], max-depth:[1, 2], complexity:[2, 5] */

/*jshint maxstatements:15, maxdepth:2, maxcomplexity:5 */

/*jshint 最多宣告:15, 最大深度:2, 最高複雜度:5*/

/*eslint max-statements:[2, 15], max-depth:[1, 2], complexity:[2, 5] */

結果

7:0 - Function 'englishToPigLatin' has a complexity of 7.
//englishToPigLatin 方法複雜度為 7
7:0 - This function has too many statements (16). Maximum allowed is 15.
// 次方法有太多宣告(16)。最大允許值為 15。
22:10 - Blocks are nested too deeply (5).
// 巢狀太深(5)

7:0 - Function 'englishToPigLatin' has a complexity of 7.

//englishToPigLatin 方法複雜度為 7

7:0 - This function has too many statements (16). Maximum allowed is 15.

// 次方法有太多宣告(16)。最大允許值為 15。

22:10 - Blocks are nested too deeply (5).

// 巢狀太深(5)

重構

const CONSONANTS = ['th', 'qu', 'b', 'c', 'd', 'f', 'g', 'h', 'j', 'k',
'l', 'm', 'n', 'p', 'q', 'r', 's', 't', 'v', 'w', 'x', 'y', 'z'];
const VOWELS = ['a', 'e', 'i', 'o', 'u'];
const ENDING = 'ay';

let isValid = word => startsWithVowel(word) || startsWithConsonant(word);
let startsWithVowel = word => !!~VOWELS.indexOf(word[0]);
let startsWithConsonant = word => !!~CONSONANTS.indexOf(word[0]);
let getConsonants = word => CONSONANTS.reduce((memo, char) => {
  if (word.startsWith(char)) {
    memo += char;
    word = word.substr(char.length);
  }
  return memo;
}, '');

function englishToPigLatin(english='') {
   if (isValid(english)) {
      if (startsWithVowel(english)) {
        english += ENDING;
      } else {
        let letters = getConsonants(english);
        english = `${english.substr(letters.length)}${letters}${ENDING}`;
      }
   }
   return english;
}

const CONSONANTS = ['th', 'qu', 'b', 'c', 'd', 'f', 'g', 'h', 'j', 'k',

'l', 'm', 'n', 'p', 'q', 'r', 's', 't', 'v', 'w', 'x', 'y', 'z'];

const VOWELS = ['a', 'e', 'i', 'o', 'u'];

const ENDING = 'ay';

let isValid = word => startsWithVowel(word) || startsWithConsonant(word);

let startsWithVowel = word => !!~VOWELS.indexOf(word[0]);

let startsWithConsonant = word => !!~CONSONANTS.indexOf(word[0]);

let getConsonants = word => CONSONANTS.reduce((memo, char) => {

if (word.startsWith(char)) {

memo += char;

word = word.substr(char.length);

}

return memo;

}, '');

function englishToPigLatin(english='') {

if (isValid(english)) {

if (startsWithVowel(english)) {

english += ENDING;

} else {

let letters = getConsonants(english);

english = `${english.substr(letters.length)}${letters}${ENDING}`;

}

return english;

}

重構後統計

max-statements（最多宣告）: 16 → 6
max-depth（最大巢狀）: 5 → 2
complexity（複雜度）: 7 → 3
max-len（最多行數）: 65 → 73
max-params（最多引數）: 1 → 2
max-nested-callbacks（最多巢狀回撥）: 0 → 1

資源

jshint – http://jshint.com/
eslint – http://eslint.org/
jscomplexity – http://jscomplexity.org/
escomplex – https://github.com/philbooth/escomplex
jasmine – http://jasmine.github.io/

複製貼上程式碼的味道

已有功能…

已有程式碼，BOX.js

// ... more code ...

var boxes = document.querySelectorAll('.Box');

[].forEach.call(boxes, function(element, index) {
  element.innerText = "Box: " + index;
  element.style.backgroundColor =
    '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
});

// ... more code ...

// ... more code ...

var boxes = document.querySelectorAll('.Box');

[].forEach.call(boxes, function(element, index) {

element.innerText = "Box: " + index;

element.style.backgroundColor =

'#' + (Math.random() * 0xFFFFFF << 0).toString(16);

});

// ... more code ...

那麼，現在想要這個功能

於是，Duang! CIRCLE.JS 就出現了…

// ... more code ...

var circles = document.querySelectorAll(".Circle");

[].forEach.call(circles, function(element, index) {
  element.innerText = "Circle: " + index;
  element.style.color =
    '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
});

// ... more code ...

// ... more code ...

var circles = document.querySelectorAll(".Circle");

[].forEach.call(circles, function(element, index) {

element.innerText = "Circle: " + index;

element.style.color =

'#' + (Math.random() * 0xFFFFFF << 0).toString(16);

});

// ... more code ...

為毛是這個味？因為我們複製貼上了！

工具

JSINSPECT

檢查複製貼上和結構相似的程式碼

一行命令：

jsinspect

jsinspect

JSCPD

程式原始碼的複製 / 貼上檢查器

(JavaScript, TypeScript, C#, Ruby, CSS, SCSS, HTML, 等等都適用…)

jscpd -f **/*.js -l 1 -t 30 --languages javascript

1	jscpd -f */.js -l 1 -t 30 --languages javascript

怎麼能不被發現？重構

把隨機顏色部分丟出去…

let randomColor = () => `#${(Math.random() * 0xFFFFFF << 0).toString(16)};

let boxes = document.querySelectorAll(".Box");
[].forEach.call(boxes, (element, index) => {
  element.innerText = "Box: " + index;
  element.style.backgroundColor = randomColor();
});

let circles = document.querySelectorAll(".Circle");
[].forEach.call(circles, (element, index) => {
  element.innerText = "Circle: " + index;
  element.style.color = randomColor();
});

let randomColor = () => `#${(Math.random() * 0xFFFFFF << 0).toString(16)};

let boxes = document.querySelectorAll(".Box");

[].forEach.call(boxes, (element, index) => {

element.innerText = "Box: " + index;

element.style.backgroundColor = randomColor();

});

let circles = document.querySelectorAll(".Circle");

[].forEach.call(circles, (element, index) => {

element.innerText = "Circle: " + index;

element.style.color = randomColor();

});

再重構

再把怪異的 [].forEach.call 部分丟出去…

let randomColor = () => `#${(Math.random() * 0xFFFFFF << 0).toString(16)};

let $$ = selector => [].slice.call(document.querySelectorAll(selector || '*'));

$$('.Box').forEach((element, index) => {
  element.innerText = "Box: " + index;
  element.style.backgroundColor = randomColor();
});

$$(".Circle").forEach((element, index) => {
  element.innerText = "Circle: " + index;
  element.style.color = randomColor();
});

let randomColor = () => `#${(Math.random() * 0xFFFFFF << 0).toString(16)};

let $$ = selector => [].slice.call(document.querySelectorAll(selector || '*'));

$$('.Box').forEach((element, index) => {

element.innerText = "Box: " + index;

element.style.backgroundColor = randomColor();

});

$$(".Circle").forEach((element, index) => {

element.innerText = "Circle: " + index;

element.style.color = randomColor();

});

再再重構

let randomColor = () => `#${(Math.random() * 0xFFFFFF << 0).toString(16)};

let $$ = selector => [].slice.call(document.querySelectorAll(selector || '*'));

let updateElement = (selector, textPrefix, styleProperty) => {
  $$(selector).forEach((element, index) => {
    element.innerText = textPrefix + ': ' + index;
    element.style[styleProperty] = randomColor();
  });
}

updateElement('.Box', 'Box', 'backgroundColor');

updateElement('.Circle', 'Circle', 'color');

let randomColor = () => `#${(Math.random() * 0xFFFFFF << 0).toString(16)};

let $$ = selector => [].slice.call(document.querySelectorAll(selector || '*'));

let updateElement = (selector, textPrefix, styleProperty) => {

$$(selector).forEach((element, index) => {

element.innerText = textPrefix + ': ' + index;

element.style[styleProperty] = randomColor();

});

}

updateElement('.Box', 'Box', 'backgroundColor');

updateElement('.Circle', 'Circle', 'color');

資源

switch 味道

難聞的程式碼

function getArea(shape, options) {
  var area = 0;

  switch (shape) {
    case 'Triangle':
      area = .5 * options.width * options.height;
      break;

    case 'Square':
      area = Math.pow(options.width, 2);
      break;

    case 'Rectangle':
      area = options.width * options.height;
      break;

    default:
      throw new Error('Invalid shape: ' + shape);
  }

  return area;
}

getArea('Triangle',  { width: 100, height: 100 });
getArea('Square',    { width: 100 });
getArea('Rectangle', { width: 100, height: 100 });
getArea('Bogus');

function getArea(shape, options) {

var area = 0;

switch (shape) {

case 'Triangle':

area = .5 * options.width * options.height;

break;

case 'Square':

area = Math.pow(options.width, 2);

break;

case 'Rectangle':

area = options.width * options.height;

break;

default:

throw new Error('Invalid shape: ' + shape);

}

return area;

}

getArea('Triangle', { width: 100, height: 100 });

getArea('Square', { width: 100 });

getArea('Rectangle', { width: 100, height: 100 });

getArea('Bogus');

為毛是這個味？違背“開啟 / 關閉原則”

增加個新形狀

function getArea(shape, options) {
  var area = 0;

  switch (shape) {
    case 'Triangle':
      area = .5 * options.width * options.height;
      break;

    case 'Square':
      area = Math.pow(options.width, 2);
      break;

    case 'Rectangle':
      area = options.width * options.height;
      break;

    case 'Circle':
      area = Math.PI * Math.pow(options.radius, 2);
      break;

    default:
      throw new Error('Invalid shape: ' + shape);
  }

  return area;
}

function getArea(shape, options) {

var area = 0;

switch (shape) {

case 'Triangle':

area = .5 * options.width * options.height;

break;

case 'Square':

area = Math.pow(options.width, 2);

break;

case 'Rectangle':

area = options.width * options.height;

break;

case 'Circle':

area = Math.PI * Math.pow(options.radius, 2);

break;

default:

throw new Error('Invalid shape: ' + shape);

}

return area;

}

加點設計模式

(function(shapes) { // triangle.js
  var Triangle = shapes.Triangle = function(options) {
    this.width = options.width;
    this.height = options.height;
  };
  Triangle.prototype.getArea = function() {
    return 0.5 * this.width * this.height;
  };  
}(window.shapes = window.shapes || {}));

function getArea(shape, options) {
  var Shape = window.shapes[shape], area = 0;

  if (Shape && typeof Shape === 'function') {
    area = new Shape(options).getArea();
  } else {
    throw new Error('Invalid shape: ' + shape);
  }

  return area;
}

getArea('Triangle',  { width: 100, height: 100 });
getArea('Square',    { width: 100 });
getArea('Rectangle', { width: 100, height: 100 });
getArea('Bogus');

(function(shapes) { // triangle.js

var Triangle = shapes.Triangle = function(options) {

this.width = options.width;

this.height = options.height;

};

Triangle.prototype.getArea = function() {

return 0.5 * this.width * this.height;

};

}(window.shapes = window.shapes || {}));

function getArea(shape, options) {

var Shape = window.shapes[shape], area = 0;

if (Shape && typeof Shape === 'function') {

area = new Shape(options).getArea();

} else {

throw new Error('Invalid shape: ' + shape);

}

return area;

}

getArea('Triangle', { width: 100, height: 100 });

getArea('Square', { width: 100 });

getArea('Rectangle', { width: 100, height: 100 });

getArea('Bogus');

再增加新形狀時

// circle.js
(function(shapes) {
  var Circle = shapes.Circle = function(options) {
    this.radius = options.radius;
  };

  Circle.prototype.getArea = function() {
    return Math.PI * Math.pow(this.radius, 2);
  };

  Circle.prototype.getCircumference = function() {
    return 2 * Math.PI * this.radius;
  };
}(window.shapes = window.shapes || {}));

// circle.js

(function(shapes) {

var Circle = shapes.Circle = function(options) {

this.radius = options.radius;

};

Circle.prototype.getArea = function() {

return Math.PI * Math.pow(this.radius, 2);

};

Circle.prototype.getCircumference = function() {

return 2 * Math.PI * this.radius;

};

}(window.shapes = window.shapes || {}));

還有其它的味道嗎？神奇的字串

function getArea(shape, options) {
  var area = 0;

  switch (shape) {
    case 'Triangle':
      area = .5 * options.width * options.height;
      break;
    /* ... more code ... */
  }

  return area;
}

getArea('Triangle', { width: 100, height: 100 });

function getArea(shape, options) {

var area = 0;

switch (shape) {

case 'Triangle':

area = .5 * options.width * options.height;

break;

/* ... more code ... */

}

return area;

}

getArea('Triangle', { width: 100, height: 100 });

神奇的字串重構為物件型別

var shapeType = {
  triangle: 'Triangle'
};

function getArea(shape, options) {
  var area = 0;
  switch (shape) {
    case shapeType.triangle:
      area = .5 * options.width * options.height;
      break;
  }
  return area;
}

getArea(shapeType.triangle, { width: 100, height: 100 });

var shapeType = {

triangle: 'Triangle'

};

function getArea(shape, options) {

var area = 0;

switch (shape) {

case shapeType.triangle:

area = .5 * options.width * options.height;

break;

}

return area;

}

getArea(shapeType.triangle, { width: 100, height: 100 });

神奇字元重構為 CONST & SYMBOLS

const shapeType = {
  triangle: new Symbol()
};

function getArea(shape, options) {
  var area = 0;
  switch (shape) {
    case shapeType.triangle:
      area = .5 * options.width * options.height;
      break;
  }
  return area;
}

getArea(shapeType.triangle, { width: 100, height: 100 });

const shapeType = {

triangle: new Symbol()

};

function getArea(shape, options) {

var area = 0;

switch (shape) {

case shapeType.triangle:

area = .5 * options.width * options.height;

break;

}

return area;

}

getArea(shapeType.triangle, { width: 100, height: 100 });

工具！？！

木有 :(

ESLINT-PLUGIN-SMELLS
用於 JavaScript Smells（味道）的 ESLint 規則

規則

no-switch – 不允許使用 switch 宣告
no-complex-switch-case – 不允許使用複雜的 switch 宣告

資源

this 深淵的味道

難聞的程式碼

function Person() {
  this.teeth = [{ clean: false }, { clean: false }, { clean: false }];
};

Person.prototype.brush = function() {
  var that = this;

  this.teeth.forEach(function(tooth) {
    that.clean(tooth);
  });

  console.log('brushed');
};

Person.prototype.clean = function(tooth) {
  tooth.clean = true;
}

var person = new Person();
person.brush();
console.log(person.teeth);

function Person() {

this.teeth = [{ clean: false }, { clean: false }, { clean: false }];

};

Person.prototype.brush = function() {

var that = this;

this.teeth.forEach(function(tooth) {

that.clean(tooth);

});

console.log('brushed');

};

Person.prototype.clean = function(tooth) {

tooth.clean = true;

}

var person = new Person();

person.brush();

console.log(person.teeth);

為什麼是這個味？that 還是 self 還是 selfie

替換方案
1) bind

Person.prototype.brush = function() {
  this.teeth.forEach(function(tooth) {
    this.clean(tooth);
  }.bind(this));

  console.log('brushed');
};

Person.prototype.brush = function() {

this.teeth.forEach(function(tooth) {

this.clean(tooth);

}.bind(this));

console.log('brushed');

};

替換方案
2) forEach 的第二個引數

Person.prototype.brush = function() {
  this.teeth.forEach(function(tooth) {
    this.clean(tooth);
  }, this);

  console.log('brushed');
};

Person.prototype.brush = function() {

this.teeth.forEach(function(tooth) {

this.clean(tooth);

}, this);

console.log('brushed');

};

替換方案
3) ECMAScript 2015 (ES6)

Person.prototype.brush = function() {
  this.teeth.forEach(tooth => {
    this.clean(tooth);
  });

  console.log('brushed');
};

Person.prototype.brush = function() {

this.teeth.forEach(tooth => {

this.clean(tooth);

});

console.log('brushed');

};

4a) 函數語言程式設計

Person.prototype.brush = function() {
  this.teeth.forEach(this.clean);

  console.log('brushed');
};

Person.prototype.brush = function() {

this.teeth.forEach(this.clean);

console.log('brushed');

};

4b) 函數語言程式設計

Person.prototype.brush = function() {
  this.teeth.forEach(this.clean.bind(this));

  console.log('brushed');
};

Person.prototype.brush = function() {

this.teeth.forEach(this.clean.bind(this));

console.log('brushed');

};

工具

ESLint

字串連線的味道

難聞的程式碼

var build = function(id, href) {
  return $( "<div id='tab'><a href='" + href + "' id='"+ id + "'></div>" );
}

var build = function(id, href) {

return $( "<div id='tab'><a href='" + href + "' id='"+ id + "'></div>" );

}

為毛是這個味？因為字串連線

替換方案
@thomasfuchs 推文上的 JavaScript 模板引擎

function t(s, d) {
  for (var p in d)
    s = s.replace(new RegExp('{' + p + '}', 'g'), d[p]);
  return s;
}

var build = function(id, href) {
  var options = {
    id: id
    href: href
  };

  return t('<div id="tab"><a href="{href}" id="{id}"></div>', options);
}

function t(s, d) {

for (var p in d)

s = s.replace(new RegExp('{' + p + '}', 'g'), d[p]);

return s;

}

var build = function(id, href) {

var options = {

id: id

href: href

};

return t('<div id="tab"><a href="{href}" id="{id}"></div>', options);

}

替換方案
2) ECMAScript 2015 (ES6) 模板字串

var build = (id, href) =>
  `<div id="tab"><a href="${href}" id="${id}"></div>`;

1 2	var build = (id, href) => `<div id="tab"><a href="${href}" id="${id}"></div>`;

替換方案
3) ECMAScript 2015 (ES6) 模板字串 (多行)

替換方案
4) 其它小型庫或大型庫 / 框架

Lowdash 或 Underscore
Angular
React
Ember
等等…

工具

ESLINT-PLUGIN-SMELLS
no-complex-string-concat

資源

Tweet Sized JavaScript Templating Engine by @thomasfuchs
Learn ECMAScript 2015 (ES6) – http://babeljs.io/docs/learn-es6/

jQuery 調查

難聞的程式碼

$(document).ready(function() {
  $('.Component')
    .find('button')
      .addClass('Component-button--action')
      .click(function() { alert('HEY!'); })
    .end()
    .mouseenter(function() { $(this).addClass('Component--over'); })
    .mouseleave(function() { $(this).removeClass('Component--over'); })
    .addClass('initialized');
});

$(document).ready(function() {

$('.Component')

.find('button')

.addClass('Component-button--action')

.click(function() { alert('HEY!'); })

.end()

.mouseenter(function() { $(this).addClass('Component--over'); })

.mouseleave(function() { $(this).removeClass('Component--over'); })

.addClass('initialized');

});

為毛是這個味？喪心病狂的鏈式呼叫

愉快地重構吧

// Event Delegation before DOM Ready
$(document).on('mouseenter mouseleave', '.Component', function(e) {
  $(this).toggleClass('Component--over', e.type === 'mouseenter');  
});

$(document).on('click', '.Component', function(e) {
  alert('HEY!');
});

$(document).ready(function() {
  $('.Component button').addClass('Component-button--action');
});

// Event Delegation before DOM Ready

$(document).on('mouseenter mouseleave', '.Component', function(e) {

$(this).toggleClass('Component--over', e.type === 'mouseenter');

});

$(document).on('click', '.Component', function(e) {

alert('HEY!');

});

$(document).ready(function() {

$('.Component button').addClass('Component-button--action');

});

最終 Demo

工具

ESLINT-PLUGIN-SMELLS

no-complex-chaining

難以琢磨的計時器

難聞的程式碼

setInterval(function() {
  console.log('start setInterval');
  someLongProcess(getRandomInt(2000, 4000));
}, 3000);

function someLongProcess(duration) {
  setTimeout(
    function() { console.log('long process: ' + duration); },
    duration
  );  
}

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

setInterval(function() {

console.log('start setInterval');

someLongProcess(getRandomInt(2000, 4000));

}, 3000);

function someLongProcess(duration) {

setTimeout(

function() { console.log('long process: ' + duration); },

duration

);

}

function getRandomInt(min, max) {

return Math.floor(Math.random() * (max - min + 1)) + min;

}

為毛這個味？無法同步的計時器

Demo: setInterval

用 setTimeout 保證順序

setTimeout(function timer() {
  console.log('start setTimeout')
  someLongProcess(getRandomInt(2000, 4000), function() {
    setTimeout(timer, 3000);
  });
}, 3000);

function someLongProcess(duration, callback) {
  setTimeout(function() {
    console.log('long process: ' + duration);
    callback();
  }, duration);  
}

/* getRandomInt(min, max) {} */

setTimeout(function timer() {

console.log('start setTimeout')

someLongProcess(getRandomInt(2000, 4000), function() {

setTimeout(timer, 3000);

});

}, 3000);

function someLongProcess(duration, callback) {

setTimeout(function() {

console.log('long process: ' + duration);

callback();

}, duration);

}

/* getRandomInt(min, max) {} */

Demo: setTimeout

重複定義

難聞的程式碼

data = this.appendAnalyticsData(data);
data = this.appendSubmissionData(data);
data = this.appendAdditionalInputs(data);
data = this.pruneObject(data);

data = this.appendAnalyticsData(data);

data = this.appendSubmissionData(data);

data = this.appendAdditionalInputs(data);

data = this.pruneObject(data);

替換方案
1) 巢狀呼叫函式

data = this.pruneObject(
  this.appendAdditionalInputs(
    this.appendSubmissionData(
      this.appendAnalyticsData(data)
    )
  )
);

data = this.pruneObject(

this.appendAdditionalInputs(

this.appendSubmissionData(

this.appendAnalyticsData(data)

)

);

2) forEach

var funcs = [
  this.appendAnalyticsData,
  this.appendSubmissionData,
  this.appendAdditionalInputs,
  this.pruneObject
];

funcs.forEach(function(func) {
  data = func(data);
});

var funcs = [

this.appendAnalyticsData,

this.appendSubmissionData,

this.appendAdditionalInputs,

this.pruneObject

];

funcs.forEach(function(func) {

data = func(data);

});

3) reduce

var funcs = [
  this.appendAnalyticsData,
  this.appendSubmissionData,
  this.appendAdditionalInputs,
  this.pruneObject
];

data = funcs.reduce(function(memo, func) {
  return func(memo);
}, data);

var funcs = [

this.appendAnalyticsData,

this.appendSubmissionData,

this.appendAdditionalInputs,

this.pruneObject

];

data = funcs.reduce(function(memo, func) {

return func(memo);

}, data);

4) flow

data = _.flow(
  this.appendAnalyticsData,
  this.appendSubmissionData,
  this.appendAdditionalInputs,
  this.pruneObject
)(data);

data = _.flow(

this.appendAnalyticsData,

this.appendSubmissionData,

this.appendAdditionalInputs,

this.pruneObject

)(data);

工具

ESLINT-PLUGIN-SMELLS

no-reassign

資源

過度耦合

難聞的程式碼

function ShoppingCart() { this.items = []; }
ShoppingCart.prototype.addItem = function(item) {
  this.items.push(item);
};

function Product(name) { this.name = name; }
Product.prototype.addToCart = function() {
  shoppingCart.addItem(this);
};

var shoppingCart = new ShoppingCart();
var product = new Product('Socks');
product.addToCart();
console.log(shoppingCart.items);

function ShoppingCart() { this.items = []; }

ShoppingCart.prototype.addItem = function(item) {

this.items.push(item);

};

function Product(name) { this.name = name; }

Product.prototype.addToCart = function() {

shoppingCart.addItem(this);

};

var shoppingCart = new ShoppingCart();

var product = new Product('Socks');

product.addToCart();

console.log(shoppingCart.items);

為毛是這個味？緊密耦合的依賴關係

如何改善！？！

依賴注入
訊息訂閱
依賴注入

function ShoppingCart() { this.items = []; }
ShoppingCart.prototype.addItem = function(item) {
  this.items.push(item);
};

function Product(name, shoppingCart) {
  this.name = name;
  this.shoppingCart = shoppingCart;
}
Product.prototype.addToCart = function() {
  this.shoppingCart.addItem(this);
};

var shoppingCart = new ShoppingCart();
var product = new Product('Socks', shoppingCart);
product.addToCart();
console.log(shoppingCart.items);

function ShoppingCart() { this.items = []; }

ShoppingCart.prototype.addItem = function(item) {

this.items.push(item);

};

function Product(name, shoppingCart) {

this.name = name;

this.shoppingCart = shoppingCart;

}

Product.prototype.addToCart = function() {

this.shoppingCart.addItem(this);

};

var shoppingCart = new ShoppingCart();

var product = new Product('Socks', shoppingCart);

product.addToCart();

console.log(shoppingCart.items);

訊息訂閱

var channel = postal.channel();

function ShoppingCart() {
  this.items = [];
  channel.subscribe('shoppingcart.add', this.addItem);
}
ShoppingCart.prototype.addItem = function(item) {
  this.items.push(item);
};

function Product(name) { this.name = name; }
Product.prototype.addToCart = function() {
  channel.publish('shoppingcart.add', this);
};

var shoppingCart = new ShoppingCart();
var product = new Product('Socks');
product.addToCart();
console.log(shoppingCart.items);

var channel = postal.channel();

function ShoppingCart() {

this.items = [];

channel.subscribe('shoppingcart.add', this.addItem);

}

ShoppingCart.prototype.addItem = function(item) {

this.items.push(item);

};

function Product(name) { this.name = name; }

Product.prototype.addToCart = function() {

channel.publish('shoppingcart.add', this);

};

var shoppingCart = new ShoppingCart();

var product = new Product('Socks');

product.addToCart();

console.log(shoppingCart.items);

資源

postal by @ifandelse

連續不斷的互動

難聞的程式碼

var search = document.querySelector('.Autocomplete');

search.addEventListener('input', function(e) {
  // Make Ajax call for autocomplete

  console.log(e.target.value);
});

var search = document.querySelector('.Autocomplete');

search.addEventListener('input', function(e) {

// Make Ajax call for autocomplete

console.log(e.target.value);

});

Demo: 根本停不下來

解決方案：節流閥

var search = document.querySelector('.Autocomplete');

search.addEventListener('input', _.throttle(function(e) {
  // Make Ajax call for autocomplete

  console.log(e.target.value);
}, 500));

var search = document.querySelector('.Autocomplete');

search.addEventListener('input', _.throttle(function(e) {

// Make Ajax call for autocomplete

console.log(e.target.value);

}, 500));

Demo

解決方案：DEBOUNCE

var search = document.querySelector('.Autocomplete');

search.addEventListener('input', _.debounce(function(e) {
  // Make Ajax call for autocomplete

  console.log(e.target.value);
}, 500));

var search = document.querySelector('.Autocomplete');

search.addEventListener('input', _.debounce(function(e) {

// Make Ajax call for autocomplete

console.log(e.target.value);

}, 500));

Demo

資源

匿名函式

難聞的程式碼

var search = document.querySelector('.Autocomplete');

search.addEventListener('input', function(e) {
  console.log(e.target.value);
});

var search = document.querySelector('.Autocomplete');

search.addEventListener('input', function(e) {

console.log(e.target.value);

});

給函式命名的原因：

堆疊追蹤
去關聯
程式碼複用
堆疊追蹤

var search = document.querySelector('.Autocomplete');

search.addEventListener('input', function(e) {
  console.log(e.target.value);
});

var search = document.querySelector('.Autocomplete');

search.addEventListener('input', function(e) {

console.log(e.target.value);

});

修改後

var search = document.querySelector('.Autocomplete');

search.addEventListener('input', function matches(e) {
  console.log(e.target.value);
});

var search = document.querySelector('.Autocomplete');

search.addEventListener('input', function matches(e) {

console.log(e.target.value);

});

去關聯

單次事件繫結

document.querySelector('button')
  .addEventListener('click', function handler() {
      alert('Ka-boom!');
    this.removeEventListener('click', handler);
  });

document.querySelector('button')

.addEventListener('click', function handler() {

alert('Ka-boom!');

this.removeEventListener('click', handler);

});

Demo

程式碼複用

var kaboom = function() { alert('Ka-boom'); };

document.querySelector('button').addEventListener('click', kaboom);

document.querySelector('#egg').addEventListener('mouseenter', kaboom);

var kaboom = function() { alert('Ka-boom'); };

document.querySelector('button').addEventListener('click', kaboom);

document.querySelector('#egg').addEventListener('mouseenter', kaboom);

資源

Chrome DevTools

結尾

更多的 ESLint 規則

資源

NPM 搜尋 eslint-plugin

打賞支援我寫出更多好文章，謝謝！
打賞作者

打賞支援我寫出更多好文章，謝謝！

任選一種支付方式

去除 JavaScript 程式碼的怪味

javascript去除陣列中重複元素程式碼例項
2017-04-12
JavaScript陣列
機器學習去除馬賽克案例（程式碼）
2019-02-13
機器學習
php批量檢測並去除BOM頭的程式碼
2018-01-03
PHP
批量去除PHP檔案中bom的PHP程式碼
2012-11-02
PHP
去除字串中所有js,css程式碼類
2019-05-11
字串JSCSS
js 的陣列去除重複元素程式碼例項
2017-03-28
JS陣列
去除冗餘 – 精簡您的CSS樣式程式碼
2015-03-20
CSS
常用的JavaScript程式碼
2009-04-18
JavaScript
去除input焦點描邊程式碼例項
2017-04-12
javascript的for in例項程式碼
2017-03-17
JavaScript
JavaScript 程式碼的加入(轉)
2007-08-12
JavaScript
使用jQuery去除陣列中的重複元素程式碼例項
2017-03-27
jQuery陣列
一個利用正規表示式進行程式碼重構，去除冗餘程式碼的例子
2020-03-09
行程
JavaScript程式碼收集
2007-05-06
JavaScript
小程式中button的邊框無法去除 button邊框如何去除
2020-12-03
重構你的javascript程式碼
2019-01-21
JavaScript
Eclipse去除js(JavaScript)驗證錯誤
2014-12-23
EclipseJSJavaScript
javaScript程式碼優化
2019-02-16
JavaScript優化
javascript程式碼積累
2016-10-31
JavaScript
javascript常用程式碼段
2011-11-01
JavaScript
如何寫出漂亮的 JavaScript 程式碼
2019-12-12
JavaScript
JavaScript的程式碼執行機制
2019-09-16
JavaScript
javascript實現的放大效果程式碼
2017-03-15
JavaScript
JavaScript誰動了你的程式碼
2016-12-01
JavaScript
最流行的JavaScript程式碼規範
2014-02-17
JavaScript
一行神奇的javascript程式碼
2015-02-10
JavaScript
很有用的HTML+JavaScript程式碼
2011-04-24
HTMLJavaScript
javascript實現的驗證碼程式碼例項
2017-03-08
JavaScript
9個實用的Javascript程式碼高亮指令碼
2011-07-05
JavaScript指令碼
java程式碼實現對excel加密、解密（設定或去除開啟密碼）
2015-03-13
JavaExcel加密解密密碼
javascript測試程式碼的執行時間程式碼例項
2017-04-11
JavaScript
Eclipse去除網上覆制下來的來程式碼帶有的行號
2017-11-17
Eclipse
程式設計技巧│提高 Javascript 程式碼效率的技巧
2022-06-30
程式設計JavaScript
JavaScript base64解碼程式碼
2018-07-09
JavaScript
[譯] 如何寫出漂亮的 JavaScript 程式碼
2019-06-25
JavaScript
編寫更優雅的 JavaScript 程式碼
2018-09-05
JavaScript
javascript應用cookie的封裝程式碼
2017-03-10
JavaScriptCookie封裝
javascript刪除陣列元素的程式碼
2017-03-21
JavaScript陣列

去除 JavaScript 程式碼的怪味

難聞的程式碼

為毛是這個味？

很多原因：

檢查工具

重構

資源

複製貼上程式碼的味道

工具

怎麼能不被發現？重構

資源

switch 味道

難聞的程式碼

為毛是這個味？違背“開啟 / 關閉原則”

還有其它的味道嗎？神奇的字串

工具！？！

資源

this 深淵的味道

難聞的程式碼

為什麼是這個味？that 還是 self 還是 selfie

工具

字串連線的味道

難聞的程式碼

為毛是這個味？因為字串連線

工具

資源

jQuery 調查

難聞的程式碼

為毛是這個味？喪心病狂的鏈式呼叫

工具

難以琢磨的計時器

難聞的程式碼

為毛這個味？無法同步的計時器

重複定義

難聞的程式碼

工具

資源

過度耦合

難聞的程式碼

為毛是這個味？緊密耦合的依賴關係

連續不斷的互動

難聞的程式碼

匿名函式

難聞的程式碼

資源

結尾

資源

打賞支援我寫出更多好文章，謝謝！

相關文章