重构重复代码-js

Question

我有一个设置所有变量位置的非常长的函数。就这样保留它还是尝试重构它更好？如果我重构它，我能想到的唯一方法就是做类似的事情：

 function getPosition(name, id){
    var name+"Box" = id.getBoundingClientRect();
    var name+"Top" = name+"Box".top + window.pageYOffset - de.clientTop;
    var name+"Bottom" = name+"Box".bottom + window.pageYOffset - de.clientTop;

    name+"Diff" = name+"Bottom" - name+"Top";
    var pagePadding = winHight - ame+"Diff";
    name+"StartP" = name+"Top" - (name+"Padding"-100);
    }

这对速度有好处吗？

我说的代码：

function getElementOffset(){ 
    var de = document.documentElement;
    var winHight = window.innerHeight; 

    var pageBox = featurePage.getBoundingClientRect();
    var pageTop = pageBox.top + window.pageYOffset - de.clientTop;
    var pageBottom = pageBox.bottom + window.pageYOffset - de.clientTop;

    pageDiff = pageBottom - pageTop;
    var pagePadding = winHight - pageDiff;
    pageStartP = pageTop - (pagePadding-100);

    var profileBox = featureProfile.getBoundingClientRect();
    var profileTop = profileBox.top + window.pageYOffset - de.clientTop;
    var profileBottom = profileBox.bottom + window.pageYOffset - de.clientTop;

    profileDiff = profileBottom - profileTop;
    var profilePadding = winHight - profileDiff;
    profileStartP = profileTop - (profilePadding);

    var barOneBox = firstBar.getBoundingClientRect();
    var barOneTop = barOneBox.top + window.pageYOffset - de.clientTop;
    var barOneBottom = barOneBox.bottom + window.pageYOffset - de.clientTop;

    barOneDiff = barOneBottom - barOneTop;
    var barOnePadding = winHight - barOneDiff;
    barOneStartP = barOneTop - (barOnePadding -200);
    barOneStart2P = barOneTop - (barOnePadding -barOnePadding +100);

    var barTwoBox = secondBar.getBoundingClientRect();
    var barTwoTop = barTwoBox.top + window.pageYOffset - de.clientTop;
    var barTwoBottom = barTwoBox.bottom + window.pageYOffset - de.clientTop;

    barTwoDiff = barTwoBottom - barTwoTop;
    var barTwoPadding = winHight - barTwoDiff;
    barTwoStartP = barTwoTop - (barTwoPadding -200);
    barTwoStart2P = barTwoTop - (barOnePadding -barOnePadding +100);

    var barThreeBox = thirdBar.getBoundingClientRect();
    var barThreeTop = barThreeBox.top + window.pageYOffset - de.clientTop;
    var barThreeBottom = barThreeBox.bottom + window.pageYOffset - de.clientTop;

    barThreeDiff = barThreeBottom - barThreeTop;
    var barThreePadding = winHight - barThreeDiff;
    barThreeStartP = barThreeTop - (barThreePadding -200);
    barThreeStart2P = barThreeTop - (barOnePadding -barOnePadding +100);

    scrollAnimations();
}

整个 js 文件：

var featurePage =  document.getElementById('page-feature')
var pageScroll = document.getElementById('page-scroll'); 
var featureProfile =  document.getElementById('profile-feature')
var profileScroll = document.getElementById('profile-scroll'); 
var profileScrollWrapper = document.getElementById('profile-scroll-wrapper');
var firstBar = document.getElementById('first-bar');
var secondBar = document.getElementById('second-bar');
var thirdBar = document.getElementById('third-bar');

var pageStartP, 
    pageDiff,
    profileStartP,
    profileDiff,
    barOneStartP,
    barOneStart2P,
    barOneDiff,
    barTwoStartP,
    barTwoStart2P,
    barTwoDiff,
    barThreeStartP,
    barThreeStart2P,
    barThreeDiff;

function getElementOffset(){ 
    var de = document.documentElement;
    var winHight = window.innerHeight; 

    var pageBox = featurePage.getBoundingClientRect();
    var pageTop = pageBox.top + window.pageYOffset - de.clientTop;
    var pageBottom = pageBox.bottom + window.pageYOffset - de.clientTop;

    pageDiff = pageBottom - pageTop;
    var pagePadding = winHight - pageDiff;
    pageStartP = pageTop - (pagePadding-100);

    var profileBox = featureProfile.getBoundingClientRect();
    var profileTop = profileBox.top + window.pageYOffset - de.clientTop;
    var profileBottom = profileBox.bottom + window.pageYOffset - de.clientTop;

    profileDiff = profileBottom - profileTop;
    var profilePadding = winHight - profileDiff;
    profileStartP = profileTop - (profilePadding);

    var barOneBox = firstBar.getBoundingClientRect();
    var barOneTop = barOneBox.top + window.pageYOffset - de.clientTop;
    var barOneBottom = barOneBox.bottom + window.pageYOffset - de.clientTop;

    barOneDiff = barOneBottom - barOneTop;
    var barOnePadding = winHight - barOneDiff;
    barOneStartP = barOneTop - (barOnePadding -200);
    barOneStart2P = barOneTop - (barOnePadding -barOnePadding +100);

    var barTwoBox = secondBar.getBoundingClientRect();
    var barTwoTop = barTwoBox.top + window.pageYOffset - de.clientTop;
    var barTwoBottom = barTwoBox.bottom + window.pageYOffset - de.clientTop;

    barTwoDiff = barTwoBottom - barTwoTop;
    var barTwoPadding = winHight - barTwoDiff;
    barTwoStartP = barTwoTop - (barTwoPadding -200);
    barTwoStart2P = barTwoTop - (barOnePadding -barOnePadding +100);

    var barThreeBox = thirdBar.getBoundingClientRect();
    var barThreeTop = barThreeBox.top + window.pageYOffset - de.clientTop;
    var barThreeBottom = barThreeBox.bottom + window.pageYOffset - de.clientTop;

    barThreeDiff = barThreeBottom - barThreeTop;
    var barThreePadding = winHight - barThreeDiff;
    barThreeStartP = barThreeTop - (barThreePadding -200);
    barThreeStart2P = barThreeTop - (barOnePadding -barOnePadding +100);

    scrollAnimations();
}

function scrollAnimations(){
  scrollPage();
  scrollProfile();
  scrollBarOne();
  scrollBarTwo();
  scrollBarThree();
}

function scrollPage(){
  var scrollPageHeight = pageScroll.offsetHeight; //full height of scroll image
  var scrollPos = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
  var s1 = scrollPos - pageStartP;
  var realPos = -s1/pageDiff;

  var lengthLeft = scrollPageHeight - (pageDiff) // + pageScroll.scrollTop 

  if (realPos > 0.09) {
    transY = 0.09 * lengthLeft;
  } else if(realPos < -1) {
    transY = -1 * lengthLeft;
  } else {
    transY = realPos * lengthLeft;
  }

  pageScroll.setAttribute('style', '-webkit-transform:translate3d(0,' + transY + 'px,0); -ms-transform:translate3d(0,' + transY + 'px,0); transform:translate3d(0,' + transY + 'px,0);'); 

}

function scrollProfile(){
  var scrollProfileWidth = profileScroll.offsetWidth; 
  var scrollPos = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
  var s1 = scrollPos - profileStartP;
  var realPos = -s1/profileDiff;

  var lengthLeft = scrollProfileWidth - (profileDiff)

  if (realPos > 0) {
    transX = 0 * lengthLeft;
  } else if(realPos < -0.604) {
    transX = -0.604 * lengthLeft;
  } else {
    transX = realPos * lengthLeft;
  }
    profileScroll.setAttribute('style', '-webkit-transform:translate3d('+(-transX) + 'px,0,0); -ms-transform:translate3d('+ (-transX) + 'px,0,0); transform:translate3d('+ (-transX) + 'px,0,0);'); 

}

function scrollBarOne() {
  var scrollBarOneWidth = firstBar.offsetWidth;
  var scrollPos = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
  var s1 = scrollPos - barOneStartP;
  var realPos = s1/barOneDiff;
  var s2 = scrollPos - barOneStart2P;
  var realPos2 = -s2/barOneDiff;
  var lengthLeft = scrollBarOneWidth - (barOneDiff);

  barScrollPosition(realPos, realPos2, lengthLeft, firstBar);
}

function scrollBarTwo() {
  var scrollBarTwoWidth = secondBar.offsetWidth; 
  var scrollPos = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
  var s1 = scrollPos - barTwoStartP;
  var realPos = s1/barTwoDiff;
  var s2 = scrollPos - barTwoStart2P;
  var realPos2 = -s2/barTwoDiff;
  var lengthLeft = scrollBarTwoWidth - (barTwoDiff) 

  barScrollPosition(realPos, realPos2, lengthLeft, secondBar);

}

function scrollBarThree() {
  var scrollBarThreeWidth = thirdBar.offsetWidth;
  var scrollPos = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
  var s1 = scrollPos - barThreeStartP;
  var realPos = s1/barThreeDiff;
  var s2 = scrollPos - barThreeStart2P;
  var realPos2 = -s2/barThreeDiff;
  var lengthLeft = scrollBarThreeWidth - (barThreeDiff)

  barScrollPosition(realPos, realPos2, lengthLeft, thirdBar);

}

function barScrollPosition(realPos, realPos2, lengthLeft, targetBar) {
  if (realPos > -9) {
    if (realPos > 1) {
      transX = 1 * lengthLeft;
    } else if(realPos < -0.094) {
      transX = -0.094 * lengthLeft;
    } else {
      transX = realPos * lengthLeft;
    }
  } 

  if (realPos2 < 9) {
    if (realPos2 < -0.183) {
      transX = -0.183 * lengthLeft;
    } else if(realPos2 > 0.51) {
      transX = 0.51 * lengthLeft;
    } else {
      transX = realPos2 * lengthLeft;
    }
  }

  targetBar.setAttribute('style', '-webkit-transform:translate3d('+(-transX) + 'px,0,0); -ms-transform:translate3d('+ (-transX) + 'px,0,0); transform:translate3d('+ (-transX) + 'px,0,0);'); 
}

window.addEventListener('resize', getElementOffset);
document.addEventListener('scroll', getElementOffset);

Answer 1

使用对象而不是单独的变量。然后将公共代码从中提取到创建对象的函数中：

function getTopBottom(el, de) {
    var result = {};
    var box = el.getBoundingClientRect();
    result.top = box.top + window.pageYOffset - de.clientTop;
    result.bottom = box.bottom + window.pageYOffset - de.clientTop;
    result.diff = result.bottom - result.top;
    result.padding = window.innerHeight - result.diff;
    return result;
}

然后在你的getElementOffset函数中你可以这样写：

var page = getTopBottom(featurePage, de);

Answer 2

首先，制定您的命名约定。一个名为 getElementOffset 的函数应该 return 一个元素偏移量。尝试使用此代码会非常困难，因为您的命名约定无助于 reader 理解正在发生的事情。

其次，为您的盒子和其他元素创建可重复使用的对象。

重构并不总是与速度有关。有时事情可以足够快。你的代码真的很难阅读，如果你将你的逻辑分解成每个函数都有一个单一的职责和有意义的名称，那么将来或对于试图维护你的代码的其他开发人员来说，它会更容易阅读。

重构重复代码-js

Refactoring repetitive code -js

javascript

refactoring

dry