Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/89.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
如何在javascript中重构DOM遍历器?_Javascript_Jquery_Html - Fatal编程技术网

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

如何在javascript中重构DOM遍历器?,javascript,jquery,html,Javascript,Jquery,Html,我最近阅读了Robert Martin的Clean Code,我正在尝试实现好代码的一些原则,特别是“不要重复你自己”或“枯燥”的原则。我正在编写一个walker,它可以在HTML文档的DOM中向前或向后移动,假设元素是按深度优先搜索排序的 盯着我的代码,我无法摆脱重复大部分逻辑的感觉,但就我的一生而言,我想不出任何具体的重构策略。我知道它只有大约50行代码,我应该使用它继续我的生活。不过,我还是非常好奇是否有更好的方法,哪怕只是出于学术原因 我该如何使代码更干净?有什么想法吗 //return

我最近阅读了Robert Martin的Clean Code,我正在尝试实现好代码的一些原则,特别是“不要重复你自己”或“枯燥”的原则。我正在编写一个walker,它可以在HTML文档的DOM中向前或向后移动,假设元素是按深度优先搜索排序的

盯着我的代码,我无法摆脱重复大部分逻辑的感觉,但就我的一生而言,我想不出任何具体的重构策略。我知道它只有大约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;
};

如果这是有效的代码,并且您只是在寻求改进,那么可能是您发布的地方。此外,您需要确保清楚地描述每个函数的用途,并说明为什么如果您有jQuery,除了选择器比较之外,您没有使用jQuery?