一般に、必要な JavaScript コードをすべて一度にロードすると、最初の Web ページを開くのが遅くなりますが、ロードされたコードの多くは使用する必要がありません。このような不必要なパフォーマンスの浪費は避けるべきです。 。 JavaScript コードを動的にロードする場合は、DOM モデルを使用して HTML ドキュメントに ノードを追加し、このノード (つまり、外部 Javascript ファイル) の src 属性を必要な JavaScript コードに設定します。動的にロードされる。 </p> <p>以下はそのような関数を完成させる例です: </p> <p>(1)、新しい JsLoaderTest.html ファイルを作成します </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xhtml;"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>按需载入JavaScript代码的例子</title> <script type="text/javascript"> function JsLoader(){ this.load=function(url){ //获取所有的<script>标记 var ss=document.getElementsByTagName("script"); //判断指定的文件是否已经包含，如果已包含则触发onsuccess事件并返回 for (i=0;i<ss.length;i++){ if (ss[i].src && ss[i].src.indexOf(url)!=-1){ this.onsuccess(); return; } } //创建script结点,并将其属性设为外联JavaScript文件 s=document.createElement("script"); s.type="text/javascript"; s.src=url; //获取head结点，并将<script>插入到其中 var head=document.getElementsByTagName("head")[0]; head.appendChild(s); //获取自身的引用 var self=this; //对于IE浏览器，使用readystatechange事件判断是否载入成功 //对于其他浏览器，使用onload事件判断载入是否成功 //s.onload=s.onreadystatechange=function(){ s.onload=s.onreadystatechange=function(){ //在此函数中this指针指的是s结点对象，而不是JsLoader实例, //所以必须用self来调用onsuccess事件，下同。 if (this.readyState && this.readyState=="loading") return; self.onsuccess(); } s.onerror=function(){ head.removeChild(s); self.onfailure(); } }; //定义载入成功事件 this.onsuccess=function(){}; //定义失败事件 this.onfailure=function(){}; } function btnClick(){ //创建对象 var jsLoader=new JsLoader(); //定义载入成功处理程序 jsLoader.onsuccess=function(){ sayHello(); } //定义载入失败处理程序 jsLoader.onfailure=function(){ alert("文件载入失败！"); } //开始载入 jsLoader.load("hello.js"); }
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
