重构重复代码-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);