javascript - 有没有更好的方法在一个 html 页面上多次运行 JavaScript？

Question

脚本是:

<code>
  <script>
  // set up the base pattern
  var pattern = Trianglify({
    height:210,
    width: 360,
x_colors:'random',
    cell_size: 20 })
  // svg
  document.getElementById("img").appendChild(pattern.svg())
// select the div (or someting) to generate a svg image.
  </script>
</code>

名为“trianglify”的插件(https://github.com/qrohlf/trianglify)。

问题是，我有几个 div 可以选择和填充，但是当这个脚本运行时，它只为所有的生成一个随机代码，所以所有的 div 的结果都是一样的。

我想到的正常而愚蠢的方法是将此脚本复制到每个需要结果的地方，但它似乎不酷也不干净。

在这种情况下有没有更好的方法来获得几个不同的随机模式？

就像遇到一个小脚本 -> 加载主脚本生成 -> 下一个小脚本....如何在 js 中实现？

感谢任何建议。

Answer 1

构建一个接收可配置项的函数，然后在需要时运行它。这将减少代码重复。

function RunTriangle(height, width, colors, cellSize, element) {
      var pattern = Trianglify({
          height:height,
          width: width,
          x_colors:colors,
          cell_size: cellSize
      })

      document.getElementById(element).appendChild(pattern.svg())
}

然后这样调用(我在这里使用原始数据):

RunTriangle(210, 360, 'random', 20, 'img');

如果你想多次运行这个，创建一个Dictionary所有项目作为objects，然后遍历它，用对象属性调用这个方法.

const triangles = {
    first: {
        height: 100,
        width: 20,
        colors: 'random',
        cellSize: 10,
        element: 'anotherElement'
    },
    // repeat this however many times you want
};

然后你可以这样使用:

const configurableTriangles = Object.keys(triangles);

for(let key in configurableTriangles) {
    const current = triangles[key];
    RunTriangle(current.height, current.width, current.colors, current.cellSize, current.element
}

这将从您的对象中获取每个已配置的 Triangle，然后针对您正在做的任何事情运行它。