Question

我想要完成的伪代码：

if(in dev environment){
   //write unminified scripts to the head tag
}
else{ // in production
  // write the minified distribution script to the head
}

选项1.）在Chrome桌面浏览器中间歇性地工作，并在Safari Mobile中间歇性地工作。

function write_to_head (path ,js_file_src){
  var js_script = document.createElement('script');
  js_script.type = "text/javascript";
  js_script.src = path + js_file_src;
  document.getElementsByTagName('head')[0].appendChild(js_script);
}

选项2.）在Chrome中100％可以正常工作，并在Safari Mobile中间歇性地工作。当async：false时，似乎工作得更好，但这是不可能的，因为它可能会阻止用户交互。

function load_script(path ,js_file_src){    
    $.ajax({
      async:true,     // false may block user interaction               
      type:'GET',
      url:path +""+ js_file_src,
      data:null,
      cache: true,
      success:_onsuccess,
      error: _onerror,
      dataType:'script'
    });

}

我根据我是在开发环境还是生产环境中调用以下函数之一。

var dev_scripts = ["script1.js","script2.js","script3.js",........etc];
var prod_scripts = ["all-dist.min.js",........etc];

function load_dev(){
  for(var i=0;i<dev_scripts.length;i++){
     //  call write_to_head ("/api/path/",dev_scripts [i] );
     //  or  
     //  load_script("/api/path/",dev_scripts [i] );
  }
}


function load_prod(){
  for(var i=0;i<prod_scripts .length;i++){
     //  call write_to_head ("/api/path/",prod_scripts [i] );
     //  or  
     //  load_script("/api/path/",prod_scripts [i] );
  }
}

是否有更好的方法可以在所有移动设备和桌面浏览器上完成我上面讨论的内容？

Answer 1

根据您的约束和设计，有几个可能的答案。

好的 - 这是从客户端手动附加文件的规范方式，没有任何外部库。您正在复制＆＃34;标记管理器＆＃34;，这是一项为您管理这些列表的服务。 BrightTag就是这样做的供应商的一个例子。

更优选，可以使用类似require.js的内容来加载依赖项，假设（1）您拥有与页面位于同一域的所有脚本（避免CORS问题）（2）它们可以异步加载。

最佳做法会要求您正确使用require.js ，并设计所有模块以遵循AMD规范。

在开发案例中，您将使用这些文档中描述的<script src="some/require.js" data-main="my/root/file.js"></script>模式，这些模式会加载require.js库，然后加载您的根模块，然后在执行之前引入所有其他声明的依赖项。< / p>

在生产案例中，您可以使用require.js packaging tool（r.js或类似）将文件编译为一个文件。该工具使用您选择的uglify.js或Google Closure Compiler来缩小和连接所有文件，就像您（显然）已经完成的那样。

祝你好运！

如何在开发和生产中动态包含脚本

}

1 个答案: