堆栈内存溢出
  繁体   English   中英

重构重复代码-js

[英]Refactoring repetitive code -js

 原文  2015-05-01 20:48:23  7   2    javascript/ refactoring/ dry

问题描述

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

 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);

2 个解决方案

解决方案1
 2 已采纳  2015-05-01 21:03:21

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

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);

解决方案2
 1  2015-05-01 21:08:31

首先，按照您的命名约定进行操作。 名为getElementOffset的函数应返回元素偏移量。 尝试使用此代码确实非常困难，因为您的命名约定无法帮助读者理解正在发生的事情。

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

重构并不一定总是关于速度。 有时事情可能足够快。 您的代码确实很难阅读，如果您将逻辑分解为每个功能都具有单一职责和有意义的名称的函数，那么将来或对于其他尝试维护您的代码的开发人员来说，将更容易阅读。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 将重复的PHP属性重构为JS jQuery重构，如何避免重复代码？ JS：将代码重构为OOP 如何改善重复的js代码 如何最小化JS中函数内的重复代码 如何让这段js重复代码变成循环？ 重构passport.js认证码 将jQuery代码重构为Angular JS代码 以函数式方式重构 JS 代码 - 闭包 重构来自 API 调用的重复 if 语句
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM