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

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

javascript js 文件 File 1.17K 次浏览
0

JavaScript/js的前端开发中,是否有类似于CSS中的@import的语法,允许开发者在一个JavaScript/js文件中包含另一个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的个人主页

    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的个人主页

      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的个人主页

        Rector

        2021-11-06 回答

        我来回答