小编not*_*ype的帖子

我想最小化客户端在浏览器中加载脚本的HTTP请求数.这将是一个相当普遍的问题,但我仍然希望我能得到一些答案,因为javascript中的模块管理到目前为止一直很痛苦.

现在的情况

现在,在开发中,每个模块都是从主html模板单独请求的,如下所示:

<script src="/libraries/jquery.js"></script>
<script src="/controllers/controllername.js"></script>
...

服务器在Node.js上运行,并在请求时发送脚本.

显然,这是最不理想的方式,因为所有模型,集合等也被分成他们自己的文件,这些文件转换成许多不同的请求.

就研究而言

我遇到的库(RequireJS使用AMD和CommonJS)可以从发送到客户端的主.js文件中请求模块,但是需要大量额外的工作来使每个模块符合每个库:

;(function(factory){

    if (typeof define === 'function' && define.amd) define([], factory);
    else factory();

}(function(){

    // Module code

    exports = moduleName;
}));

我的目标

我想在服务器上创建一个文件,将所有模块"连接"在一起.如果我可以这样做而无需向现有模块添加更多代码,那将是完美的.然后,我可以在请求时将该单个文件简单地提供给客户端.

这可能吗？

另外,如果我设法构建一个单独的文件,我应该在其中包含开源库(jQuery,Angular.js等)还是从客户端的外部cdn请求它们？

我有一个display: flex属性表,其单元格将垂直居中.如果有多个单元格而不是表格可以显示,则该overflow: scroll属性不考虑顶部单元格.

在下面的示例代码中,当它应该一直到字母A时,滚动停在字母K处.这是什么导致的？

#container {
  height: 180px;
  display: flex;
  flex-flow: row;
  align-items: stretch;
  border: 1px dashed gray;
}

table {
  display: flex;
  flex-flow: row;
  align-items: center;
  margin: 10px;
  overflow: scroll;
  border: 1px dashed blue;
}

td {
  height: 10px;
  width: 100px;
  border: 1px solid red;
}

#container div {
  flex: 1;
  margin: 10px;
  border: 1px dashed red;
}

<div id="container">
  <table>
    <tr><td>A</td></tr>
    <tr><td>B</td></tr>
    <tr><td>C</td></tr>
    <tr><td>D</td></tr>
    <tr><td>E</td></tr>
    <tr><td>F</td></tr>
    <tr><td>G</td></tr>
    <tr><td>H</td></tr>
    <tr><td>I</td></tr>
    <tr><td>J</td></tr>
    <tr><td>K</td></tr>
    <tr><td>L</td></tr>
    <tr><td>M</td></tr>
    <tr><td>N</td></tr> …