用按钮动态替换java脚本文件

replacing java script files dynamically with button

本文关键字：脚本 文件 java 替换 按钮 动态      更新时间：2024-06-09

下面的代码有3个按钮。前两个按钮使用drawin.js，第三个按钮使用shapes.js

有没有一种方法可以在按钮点击中动态替换javascript？比如当我按下添加多边形或仅添加线时绘制.js有效，而当我按下增加门形状时，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>

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

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

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

您可以使用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"）；

相关文章：