代码之家  ›  专栏  ›  技术社区  ›  Carmoreno

动态加载脚本(angularjs)

  •  0
  • Carmoreno  · 技术社区  · 6 年前

    我的angularjs应用程序中有一些库和依赖项,我希望只使用一个脚本加载所有这些,因为我有三个应用程序使用此依赖项。 实际上我有一个自定义脚本:

    var initDependencies = {
    
      _dependencies: [
        '/path/to/jquery.js', '/path/to/angular.js', 'path/to/bootstrap.js', ...];
      ],
    
      _currentFolder: '/' + window.location.pathname.split('/')[1],
    
    /**
     * Constructor
     */
      init: function() {
        initDependencies.createDependencies();
      },
    
    /**
     * Retorna el folder actual
     */
      getCurrentFolder : function() {
        return initDependencies._currentFolder;
      },
    
    /**
     * Retorna el array de dependencia
     */
      getDependencies: function() {
        return initDependencies._dependencies; 
      },
    
    /**
     * Crea un nuevo tag <script> con su correspondiente src
     * @param {*} src 
     */
      createNewDependencie : function(src) {
        var myScript = document.createElement("script");
        myScript.type = "text/javascript";
        myScript.src = src;
        console.log('myScript :', myScript);
        document.body.appendChild(myScript);
      },
    
    /**
     * Crea todas las dependencias
     */
      createDependencies: function() {
        for (var dependencie in initDependencies.getDependencies()) {
            var src = this.getCurrentFolder() + initDependencies.getDependencies()[dependencie];
            initDependencies.createNewDependencie(src);
        }
      }
    }
    
    document.addEventListener("DOMContentLoaded",initDependencies.init);
    

    但我有一个错误,其他的依赖到我的 dependencies 数组,实际上我有很多类型的错误:

    Uncaught TypeError: Cannot read property 'module' of undefined (我想 angular 变量未定义)。

    如何动态加载依赖项和库?

    1 回复  |  直到 6 年前
        1
  •  0
  •   CodeSmith    6 年前

    这些工作通常是通过任务管理器为特定目标预先构建的。 咕噜声 吞咽 很容易获取,在nodejs上运行,nodejs很容易设置,根据环境或目标部署,很值得花一两个小时来设置构建过程。这允许您拥有越来越少的js代码文件。

    nodejs还有内置函数来处理上面所写的大部分内容,如果您想忽略构建器,您可以自己编写代码。

    记住,如果你在浏览器中执行任务,它没有权限对操作系统的文件系统等做很多事情。其他人的nodejs将拥有并允许你预先构建任何你想要的东西。

    这可能更简单和更快,因为你可以丑化,缩小和加载所有的js文件,而不是加载他们以后,而用户等待一些结果,你正在加载一对mb的库在那一刻,然后才提出请求。

    依赖关系生态系统还为您跟踪版本(如果您将npm与nodejs一起使用),这将随着时间的推移在维护依赖关系方面带来巨大的好处。

    设置好之后,您可以复制正确配置的依赖文件npm in it from it,run builder for specific environment选项,然后在10秒内使用旧的文件系统组织并设置一些差异来设置新的应用程序。它还允许您以一种在版本控制方面更实际的方式存储所有这些内容。你不想在存储库中有1000个依赖文件来构建你的最终应用,你想在2个纯文本文件中有npm和builder配置。

    我希望这鼓励了你去研究它,因为我相信任何严肃的项目,这是一条路,而不是你试图采取的一个。

    我会把这个放在评论里,但是太长了,并且说“使用构建器来处理那个”听起来像是什么也解释不了。