Question

下面是我今天想到并创建的一个小项目的链接。我不能使用IIFE来使该按钮多次工作。.我已经找到了没有IIFE的按钮，但是我的理解是最好将代码私有化...任何建议将不胜感激。

let randomColor = (function(){

// generate a random number 
let randNum= () => Math.floor(Math.random() * 10);
// invoke random number 6 times to create hexcolor
let randColor = parseInt([randNum(), randNum(), randNum(), randNum(), 
randNum(), randNum()].join(''))

const hexColor = (`#${randColor}`)

return hexColor;

})();

const makeColor = (function() {
let color1 = randomColor;
console.log(color1);
let setupEventListener = function(){ 

    document.querySelector('.final-button').addEventListener('click', 
function(){
        document.querySelector('.main-box').style.backgroundColor = color1;
    });
};

setupEventListener();

})();

Answer 1

randomColor仅在文件首次加载时分配一次。 let color1 = randomColor;仅获取randomColor的值，它不会再次运行IIFE来获得新的颜色。

如果您希望

randomColor重新运行并生成新颜色，则它应该是一个函数（而不是对IIFE返回值的引用）。如果需要，可以使用IIFE将全部内容包装起来，如果不希望将randomColor放在某种范围内，则可以将其放在全局范围内。

值得注意的是，每次单击时，单击处理程序都在运行，但是颜色没有改变，因为randomColor没有改变。

Answer 2

在click事件上，仅将调用作为第二个参数的addEventListener赋予的功能。变量color1是在此函数之外分配的，因此该值将保持不变。

Answer 3

只是对 randomColor 函数的扩展注释。

我不喜欢使用指示函数声明的函数表达式。该分配仍会创建一个全局变量，不保存任何字符，并且会引入声明中不存在的问题。

在函数中，还有另一个函数表达式被调用6次，然后创建并连接一个数组，最后使用 parseInt 会引入偶发错误（它将删除前导零）因此该值不再包含6位数字），考虑到您想要字符串结果，则完全不需要。

最后，结果值实际上是十进制的，因为它只包含从0到9的数字。

使用循环可能不合时宜，但是它们实际上是最基本的，因此至少应在指示它们的位置加以考虑。例如：

// Generate random 6 digit hex value where digits are 0 - 9
function randomColor() {
  var color = '#';
  for (var i=0; i<6; i++) {
    color = color + Math.floor(Math.random() * 10);
  }
  return color;
}

console.log('Decimal color: ' + randomColor());

如果要生成十六进制值（数字0至f），请考虑：

// Generate random 6 digit hex value
// This uses parseInt to get hex value, but makes it a string
// immediately so leading zeros are kept if they occur
function randomHexColor() {
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color = color + (Math.random() * 16 | 0).toString(16);
  }
  return color.toUpperCase();
}

console.log('Hexidecimal color: ' + randomHexColor());

或者，如果您必须使用较新的功能并创建更通用的功能，也许：

// Generate hex value of length len
function getRandomHex(len) {
  return new Array(len).fill(0).map(x=>(Math.random()*16|0).toString(16)).join('');
}

console.log('#' + getRandomHex(6).toUpperCase())

哪个更短，但效率却低得多。如果 Array.prototype.fill 接受表达式而不是原始值，则可能是一个可行的选择，例如：

var randomArray = new Array(6).fill((Math.random()*16|0).toString(16));

已针对每个值进行了评估，但仅评估了一次，并对每个元素重复了该值。

为什么我下面的IIFE代码只能与clickEvent一起使用

3 个答案: