JavaScript(js)中如何在一个JavaScript文件中引用/导入/包含另一个JavaScript(js)文件?

3 个回答

• 0

  旧版本的JavaScript没有导入、包含(import, include,require)等语法，因此开发了许多非官方的方法来解决这个问题。

  直到ES6的出现，引入了js文件的模块化来从不同的js文件引入需要的模块。

  为了兼容旧的浏览器，可以使用Webpack和Rollup等构建工具，以及像Babel等这样的翻译工具。

  在现代浏览器中，动态引入js文件模块的方式如下：

  <script type="module">
    import('hello.mjs').then(module => {
        module.hello('world');
      });
  </script>
  

  或者，你也可以使用JavaScript创建srcipt标签的形式动态加载js文件，如下：

  function loadScript(url, callback)
  {
      // 建议在html的head标签中加载js脚本文件
      var head = document.head;
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = url;
  
      // 为脚本加载完成绑定回调
      script.onreadystatechange = callback;
      script.onload = callback;
  
      // 开始加载外部的js脚本文件
      head.appendChild(script);
  }
  

  调用示例：

  var myPrettyCode = function() {
     // 逻辑代码
  };
  

  或者

  loadScript("my_script.js", myPrettyCode);
  

  评论 分享

  

  Rector

  2021-11-06 回答
• 0

  如果使用jQuery，则可以：

  (function($)
  {
      var import_js_imported = [];
  
      $.extend(true,
      {
          import_js : function(script)
          {
              var found = false;
              for (var i = 0; i < import_js_imported.length; i++)
                  if (import_js_imported[i] == script) {
                      found = true;
                      break;
                  }
  
              if (found == false) {
                  $("head").append($('<script></script').attr('src', script));
                  import_js_imported.push(script);
              }
          }
      });
  
  })(jQuery);
  

  调用示例：

  $.import_js('/path_to_project/scripts/somefunctions.js');
  

  评论 分享

  

  Rector

  2021-11-06 回答
• 0

  使用XMLHttpRequest封装的函数：

  function myRequire( url ) {
      var ajax = new XMLHttpRequest();
      ajax.open( 'GET', url, false ); // <-- 第三个参数设置成'false'表示同步加载
      ajax.onreadystatechange = function () {
          var script = ajax.response || ajax.responseText;
          if (ajax.readyState === 4) {
              switch( ajax.status) {
                  case 200:
                      eval.apply( window, [script] );
                      console.log("script loaded: ", url);
                      break;
                  default:
                      console.log("ERROR: script not loaded: ", url);
              }
          }
      };
      ajax.send(null);
  }
  

  评论 分享

  

  Rector

  2021-11-06 回答