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