jQuery-將函數轉換為變量

Question

我為particles.js定義了一些預定義的參數，這是一個用於創建動畫背景的免費插件。 用戶可以更改動畫的顏色和不透明度。 稍后，我想使用jsZip將particles.js參數添加到一個zip文件中。

問題：我無法將參數/函數存儲到jsZip的變量中。

這是我的Particles.Js示例代碼

function particleBG2(particleColor, particleAlpha) {
  particlesJS("particles-js", {
    particles: {
      number: {
        value: 80,
        density: {
          enable: true,
          value_area: 800
        }
      },
      color: {
        value: particleColor
      },
      shape: {
        type: "circle",
        stroke: {
          width: 0
        },
        polygon: {
          nb_sides: 5
        },
        image: {
          src: "img/github.svg",
          width: 100,
          height: 100
        }
      },
      opacity: {
        value: particleAlpha,
        random: false,
        anim: {
          enable: false,
          speed: 1,
          opacity_min: 0.1,
          sync: false
        }
      },
      size: {
        value: 3,
        random: true,
        anim: {
          enable: false,
          speed: 40,
          size_min: 0.1,
          sync: false
        }
      },
      line_linked: {
        enable: true,
        distance: 150,
        color: particleColor,
        opacity: particleAlpha,
        width: 1
      },
      move: {
        enable: true,
        speed: 3,
        direction: "none",
        random: false,
        straight: false,
        out_mode: "out",
        bounce: false,
        attract: {
          enable: false,
          rotateX: 600,
          rotateY: 1200
        }
      }
    },
    interactivity: {
      detect_on: "canvas",
      events: {
        onhover: {
          enable: false,
          mode: "repulse"
        },
        onclick: {
          enable: false,
          mode: "push"
        },
        resize: true
      },
      modes: {
        grab: {
          distance: 400,
          line_linked: {
            opacity: 1
          }
        },
        bubble: {
          distance: 400,
          size: 40,
          duration: 2,
          opacity: 8,
          speed: 3
        },
        repulse: {
          distance: 200,
          duration: 0.4
        },
        push: {
          particles_nb: 4
        },
        remove: {
          particles_nb: 2
        }
      }
    },
    retina_detect: true
  });
}

如果我能以某種方式將所有這些存儲在一個變量中，例如， particlescript腳本，那么我可以將其提供給jsZip，以作為腳本文件添加。

var zip = new JSZip();
zip.file("script.js", particlescript);
zip.generateAsync({type:"blob"}).then(function(content) {
    saveAs(content, "project.zip");
});

Answer 1

您可以將腳本內容存儲為字符串。 將變量保留為占位符，並將其替換為用戶輸入的值。

像這樣：

 var template = `function particleBG2() { var particleColor = '{particleColor}'; var particleAlpha = '{particleAlpha}'; particlesJS("particles-js", { particles: { number: { value: 80, density: { enable: true, value_area: 800 } }, color: { value: particleColor }, shape: { type: "circle", stroke: { width: 0 }, polygon: { nb_sides: 5 }, image: { src: "img/github.svg", width: 100, height: 100 } }, opacity: { value: particleAlpha, random: false, anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false } }, size: { value: 3, random: true, anim: { enable: false, speed: 40, size_min: 0.1, sync: false } }, line_linked: { enable: true, distance: 150, color: particleColor, opacity: particleAlpha, width: 1 }, move: { enable: true, speed: 3, direction: "none", random: false, straight: false, out_mode: "out", bounce: false, attract: { enable: false, rotateX: 600, rotateY: 1200 } } }, interactivity: { detect_on: "canvas", events: { onhover: { enable: false, mode: "repulse" }, onclick: { enable: false, mode: "push" }, resize: true }, modes: { grab: { distance: 400, line_linked: { opacity: 1 } }, bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 }, repulse: { distance: 200, duration: 0.4 }, push: { particles_nb: 4 }, remove: { particles_nb: 2 } } }, retina_detect: true }); }`; document.querySelector('button').addEventListener('click', function() { var particleAlpha = document.querySelector('#particleAlpha').value; var particleColor = document.querySelector('#particleColor').value; var particlescript = template.replace(/\\{(.*)\\}/g, function(a, b, c) { return eval(b); }); console.log(particlescript); // var zip = new JSZip(); // zip.file("script.js", particlescript); // zip.generateAsync({type:"blob"}).then(function(content) { // saveAs(content, "project.zip"); // }); }); 

 <input id="particleColor" type="text" placeholder="particleColor" value="#ddd" /><br /> <input id="particleAlpha" type="text" placeholder="particleAlpha" value="0.5" /><br /> <button>Save</button>