Question

我有这个可爱的，写得很好的功能（感谢CSS Tricks（好文章顺便说一下） - 见Codepen）：

document.documentElement.style.setProperty("--mainColor",
localStorage.getItem("userThemeColor"));
var colorInput = document.querySelector("#choose-theme-color");


colorInput.addEventListener("change", function() {
document.documentElement.style.setProperty("--mainColor", this.value);
localStorage.setItem("userThemeColor", this.value);

});

我不止一次使用它，所以为了避免重复，我想将它重构为可重用的函数。我整天都在使用它，并且在将querySelector值（this.value和我已经命名的任何其他内容）放入返工函数时遇到了麻烦。我尝试过的所有内容都会破坏这个功能（我认为我已经将Codepen打破了一段时间......）或最终没有定义的价值＆＃39;

如果我能看到它是如何完成的，我相信它对我更有意义，并且我能够在我的代码中的其他地方应用相同的逻辑。我正在努力学习“良好实践”，所以如果有人能提供帮助，我真的很感激！

提前致谢。

document.documentElement.style.setProperty("--mainColor", localStorage.getItem("userThemeColor"));
document.documentElement.style.setProperty("--footerColor", localStorage.getItem("userFooterColor"));

var colorInput1 = document.querySelector("#choose-theme-color");
var colorInput2 = document.querySelector("#choose-theme-2");

var color1 = new Picker("--mainColor", "userThemeColor");
var color2 = new Picker("--footerColor", "userFooterColor");

// Object contructor
function Picker(arg1, arg2){

//  this.arg1 = arg1; // property to set - not req'd
//  this.arg2 = arg2; // local property item - not req'd

  this.setStyles = function() { // this.value is original code
  document.documentElement.style.setProperty(arg1, this.value);
  localStorage.setItem(arg2, this.value);
  }
}

colorInput1.addEventListener("change", color1.setStyles);
colorInput2.addEventListener("change", color2.setStyles);

// 14 LINES OF CODE / AGAINST 6 X 2 IF USING DUPLICATES OF THE ORIGINAL

重构javascript函数以便重用

0 个答案: