如何在javascript中重构DOM遍历器?

时间:2015-04-27 02:54:33

标签: javascript jquery html

我最近阅读了罗伯特·马丁的“清洁代码”,我正在努力实现一些优秀代码的原则,特别是“不要重复自己”或“干”的原则。我正在编写一个可以在HTML文档的DOM内向前或向后移动的walker,假设元素是按深度优先搜索排序的。

盯着我的代码,我无法摆脱我重复大部分逻辑的感觉,但对于我的生活,我无法想到任何特定的重构策略。我知道它只有~50行代码,我应该只是使用它并继续我的生活。但是,如果有更好的方法,我仍然非常好奇,只是出于学术原因。

如何让这段代码更干净?有什么想法吗?

//returns previous element in a depth-first search traversal
//returns null if at the start of the tree
TreeWalker.prototype.getPreviousElement = function(element) {
  var previousElement;
  if(element.previousElementSibling === null) {
    var parent = element.parentElement;
    if($(parent).is(this.rootSelector)) {
      previousElement = null;
    } else {
      previousElement = parent;
    }
  } else {
    var beforeBranch = element.previousElementSibling;
    previousElement = this.cycleToPreviousBranch(beforeBranch);
  }
  return previousElement;
};


TreeWalker.prototype.cycleToPreviousBranch = function(element) {
  var previousElement;
  if(element.children.length === 0) {
    previousElement = element;
  } else {
    var lastChild = element.lastElementChild;
    previousElement = this.cycleToPreviousBranch(lastChild);
  }
  return previousElement;
};

//returns next element in a depth-first search traversal
//returns null if at the end of the tree
TreeWalker.prototype.getNextElement = function(element) {
  var nextElement;
  if(element.children.length > 0) {
    nextElement = element.children[0];
  } else {
    nextElement = this.cycleToNextBranch(element);
  }
  return nextElement;
};

TreeWalker.prototype.cycleToNextBranch = function(element) {
  var nextElement;
  if(element.nextElementSibling !== null) {
    nextElement = element.nextElementSibling;
  } else {
    var parent = element.parentElement;
    if($(parent).is(this.rootSelector)) {
      nextElement = null;
    } else {
      nextElement = this.cycleToNextBranch(parent);
    }
  }
  return nextElement;
};

0 个答案:

没有答案