第18周技术周报

尝试总结每周遇到的技术问题，分享一些有用的知识点，忙于工作能学习整理的只是很少一部分，但一年52周持续积累总会有不同的结果：

1. CSS: inline-block的元素发生塌陷
2. CSS：如何实现超出边界的水平滚动条
3. CSS: 层叠上下文和fixed的从父原则
4. Webpack项目的性能优化：拆分js
5. packge-lock.json冲突、无法被添加到.gitignore的问题
6. 修改hosts文件解决钉钉跨域调用
7. Axios初探

1. CSS: inline-block的元素发生塌陷

a. 问题

如下效果图，有这样的疑问为什么some remark部分会错位（当然可以用vertical-align的方式解决，但这里尝试解答为什么会错位的问题）：

inline-block-downward.png

HTML代码：

<div class="flow">
  <div class="stage">
    <div class="mark">First</div>
    <div class="desc">desc</div>
    <div class="date">2019-08-08</div>
  </div>
  <div class="stage">
    <div class="mark">Second</div>
    <div class="desc">desc</div>
    <div class="date">2019-08-08</div>
  </div>
  <div class="stage reason">
      some remark
    </div>
</div>

CSS代码：

<style>
  .stage {
    display: inline-block;
    border: 1px solid red;
    border-radius: 5px;
  } 
  .stage.reason {
    height: 50px;
    background: #ccc;
  } 
</style>

b. 分析

why-is-this-inline-block-element-pushed-downward 是stackoverflow上的另外一个问题，但又非常通俗地介绍了 baseline、以及如何确定inline-block的baseline。基本可以回答上述问题：

（1）baseline是文字对齐的基准，在div中的多个inline-block也会有一条通用的baseline。部分字母如'fgjpq`的的部分内容是下沉到baseline以下的。

（2）如果block的元素包含inline-block的元素，inline-block的overflow属性值为visible（默认就是），那么inline-block的baseline会成为block元素的baseline。

（3）在例子中第三个div的baseline跟前两个是一样的，因此文字底部是对齐的，设置了高度后朝下撑开后形成了错位（至于为什么不是向上撑开是其他问题了）。可以尝试在第三个div中输入两行文字，可以看到文字第二行跟前面div的底部是对齐的。

（4）另外之所以提到 overflow: visible，是因为overflow值在其他情况下，inline-block的底部如果有margin，margin会被加在baseline之上，跟相邻的inline-block还是会出现视觉上的错位。

2. CSS：如何实现超出边界的水平滚动条

a. 需求

inline-block-scroll.png

假定系统中有一个流程审批需要并排展示多个流程，即无限宽度可以进行水平滚动。inline-block不论是否加float都会换行，因此需要考虑其他解决办法。

b. 解决

HTML代码

<div class="audit-flow">
    <div class="audit-scroll-bar">
      <div class="audit-stage" >
        <div class="status"></div>
        <div class="desc bold">{{stage.text}}</div>
        <div class="date">{{stage.time | format}}</div>
      </div>
    </div>
</div>

CSS代码（部分关键代码）

.audit-flow {
  overflow-x: auto;
  .audit-scroll-bar {
    width: 10000px;
    .audit-stage {
      float: left;
    }
  }
}

解决方案是属于自己无意发现的。要实现滚动条，考虑将audit-scroll-bar的宽度设置得非常大，然后在audit-flow中滚动，但是不由担心滚动条滚动到后面会出现大片没有内容的区域。

意外的，发现滚动条到达.audit-status的最远位置（假定宽度总计1200像素）就停止了，并没有真的可以滚动10000px。一些现象是：

（1）.audit-stage是float的，导致.audit-scroll-bar的height为0
（2）.audiot-flow不受到float的影响，有了比较符合预期的宽（所有.audit-stage的累计宽度）和高（.audit-stage的高度）。

要完全理解它，仍旧需要阅读CSS标准，尝试理解：
（1）float如何父元素，和祖先元素
（2）滚动区域是如何确定的，上例中并非子元素宽度，而是孙子元素的实际宽度。
（3）上例中给 .audit-scroll-bar 设置 overflow: hidden/auto, 或者 border: 1px solid green; 都能打破这种滚动区域依赖孙子，从符合需求的宽度变到10000px。

3. CSS: 层叠上下文和fixed的从父原则

a. 问题

在项目中使用 element 提供的dialog组件，弹窗发现弹出的结果如下

dialog-effect.png

b. 分析

dialog-effect-analysis.png

通过查看代码，可以知道阴影层是被放在 .v-modal中，body标签结束前；modal的内容则嵌套在组件内的 .el-dialog__wrapper中，两者都是 fixed 类型的定位。前者的z-index为2006，后者的z-index为2007，理论上是应该弹框内容正常显示才对，不应该是2006的阴影层遮盖2007的弹框内容。

一篇不错的文章：层叠顺序与堆栈上下文知多少 介绍了层叠上下文的概念，并且最后提到了上述问题的原因：

子元素的 z-index 值只在父级层叠上下文中有意义。意思就是父元素的 z-index 低于父元素另一个同级元素，子元素 z-index再高也没用。

4. Webpack项目的性能优化：拆分js

Webpack的Code Splitting介绍了三种减少加载包大小的技术，项目中已经采用第一种技术，可以尝试运用两种：

• Entry Points: 通过配置文件中的entry手动指定
• Prevent Duplication: 通过 SplitChunksPlugin 拆分 和 杜绝重复
• Dynamic Imports: 通过行内调用来拆分代码

4.1 SplitChunksPlugin

根据页面的不同打成不同的bundle；现在可以通过SplitChunksPlugin将常用的commons打包。

webpack.config.js

{
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },
  output {      
    chunkFilename: '[name].bundle.js'
  }
}  

可以看到的原本生成的 index.bundle.js，现在变成了 vendors~index.bundle.js、index.bundle.js两个文件。

另外需要注意的是，如果我们有两个entry，除了生成各自的bundle以外（vendors~index.bundle.js 和 vendors~login.bundle.js)，基于这两个bundle的通用部分又被抽象成了 vendors~index~login.bundle.js，需要注意依次引入，不要遗漏。

如下是手动引入的示例（当然你在开发环境也可以设置 inject: true 从而不用在 html 中手写 script标签）：

dist/index.html

    <script src="./vendors~index~login.bundle.js"></script>
    <script src="./vendors~index.bundle.js"></script>
    <script src="./index.bundle.js"></script>

webpack.config.js

plugins: [
    new HtmlWebpackPlugin({
      inject: false,
      filename: 'login.html',
      template: './dist/login.html',
      chunks: ["vendors~index~login", "vendors~login", "login"]
    }),
    new HtmlWebpackPlugin({
      inject: false,
      filename: 'index.html',
      template: './dist/index.html',
      chunks: ["vendors~index~login", "vendors~index", "index"]
    }),

<script src="./vendors~index~login.bundle.js"></script>
<script src="./vendors~index.bundle.js"></script>
<script src="./index.bundle.js"></script>

4.2 Routes Dynamic Imports

首先在项目的根目录新建文件 .babelrc：

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

将路由都从

import AppFrame from "cp/app-frame.vue";

改成如下的写法

const AppFrame = () => import('cp/app-frame.vue');

这时候可以看到每次加载一个新组件的时候，都会请求单独的js。

4.3 按需加载element UI

参考 element quick start 进行配置，可以将对应的bundle文件减小，其中development环境bundle文件大小从7.5M减小到5M，production环境下大小从 1.2M 减小到 815KB。

5. pacakge-lock.json冲突、无法被添加到.gitignore

resolving-lockfile-conflicts

As of npm@5.7.0, these conflicts can be resolved by manually fixing any package.json conflicts, and then running npm install [--package-lock-only] again. npm will automatically resolve any conflicts for you and write a merged package lock that includes all the dependencies from both branches in a reasonable tree.

cant-make-git-stop-tracking-package-lock-json

gitignore only works for untracked files. If you have a tracked file that is also in your .gitignore, the fact that the file is tracked overrides the fact that it is also in .gitignore.

do-i-commit-the-package-lock-json-file-created-by-npm-5

Yes, package-lock.json is intended to be checked into source control. If you're using npm 5, you may see this on the command line: created a lockfile as package-lock.json. You should commit this file.

6. 修改hosts文件解决钉钉的跨域调用

Mac环境下使用Chrome浏览器，想在本地调用钉钉的登陆接口，会出现redirect_uri 不允许的问题。因为在钉钉内部注册的应用，只能配置一个允许redirect的地址，假定地址是 local-erp.tbsite.net，可以通过修改本地 /etc/hosts 配置文件解决本地跨域无法调试的问题：

127.0.0.1       local-erp.tbsite.net

7. Axios初探

7.1 为什么要用Axios

之前仍旧停留在jQuery的使用居多，文章 Jquery ajax, Axios, Fetch区别之我见 对三种技术的特点分析，可以看到Axios是最适合当前编程使用的，它使用Promise语法、支持node.js、支持并发请求、支持拦截器等。

7.2 项目中基础的运用

`
Github的文档 Axios 足够清楚，几乎可以找到所需要的有用信息。