Question

以下代码有3个按钮。虽然前两个按钮使用 draw.js ，但第三个按钮使用 shapes.js 。两个javascripts都有一个onclick事件处理程序，所以我不能同时使用这两个脚本。

有没有办法可以在按钮点击中动态替换javascript？就像我按添加多边形或仅添加线 draw.js 一样，当我按下添加门时 shapes.js 有效吗？

我尝试了以下操作：http://www.javascriptkit.com/javatutors/loadjavascriptcss2.shtml但是我什么都不懂，并且弄糟了我的代码。同样地，正如您可以通过代码猜测的那样，我在画布上画画，因此当我更改脚本时，我不想在画布上丢失任何内容。

 <!DOCTYPE html>
 <html>
   <head>
     <script type="text/javascript" src="shapes.js"></script>
     <script type="text/javascript" src="draw.js"></script>
   </head>
   <body>
     <div id="board">
        <canvas id="canvas1" width="300" height="300" style="border: 1px solid black;">  </canvas>
        <br />
        <input type="button" value="Add polygon" class="draw" data-type="poly">
        <input type="button" value="Add line" class="draw" data-type="line">
        <input type="button" value="Add door" >
     </div>
   </body>
</html>

Answer 1

您可以使用HeadJs库。

HeadJS是一个JavaScript文件和模块加载器，一个用于响应式设计，功能检测和功能的小型库。资源加载

HeadJs非常有用，请尝试一下。

需要快速加载JS或CSS文件

//加载一些JS

head.load（“jQuery.js”，function（）{

// Call a function when done
console.log("Done loading jQuery");

}）;

//加载一些CSS

head.load（ “bootstrap.css”）;

Answer 2

您可以使用RequireJS库（http://requirejs.org/）。 RequireJS是一个JavaScript文件和模块加载器。它针对浏览器内使用进行了优化，但可以在其他JavaScript环境中使用。

像这样，您可以通过RequireJS添加任何JS：

<script data-main="shapes.js" src="js/require.js"></script>

用按钮动态替换javascript文件

2 个答案: