HTTP/1.1协议中和网页缓存相关的字段：

HTTP/1.0协议中有一个功能比较弱的缓存控制机制：Pragma，使用HTTP/1.0的缓存将忽略Expires和Cache-Control。

Last-Modified 是http响应头的一部分，与之相对的是请求头中的 If-Modified-Since ，都表示请求资源的最后修改时间。

工作原理

1. 当客户端访问页面时，服务器会将页面最后修改时间通过 Last-Modified 标识由服务器发往客户端
2. 客户端记录修改时间，再次请求本地存在的cache页面时，客户端会通过 If-Modified-Since 头将先前服务器端发过来的最后修改时间戳发送回去
3. 服务器端通过这个时间戳判断客户端的页面是否是最新的，如果不是最新的，则返回新的内容，如果是最新的，则返回 304 告诉客户端其本地 cache 的页面是最新的

由此客户端可以直接从本地加载页面，减少在网络上传输的数据，同时也减轻了服务器的负担。

从输入URL到DOM

1. 用户输入URL，webkit调用其资源加载器加载对应的网页
2. 网页被交给HTML解释器,经历以下解析变成DOM结构：Bytes → Characters → Tokens → Nodes → Object Model。如果节点需要依赖其他资源：图片、css、视频等，调用资源加载器异步加载他们，期间不阻碍DOM树的构建
3. 如果遇到js标签，调用js引擎解释并执行，js可能会修改DOM树结构，所以会阻碍DOM树的构建。网页中依赖的js资源加载完成后，触发DOMContentLoad事件

提取库文件

CommonsChunkPlugin

React、jQuery等库文件很少变化，并且到处被复用，应该被提取出来，并且得到长时间的缓存。
使用插件：webpack.optimize.CommonsChunkPlugin（webpack内建插件）

1
2
3
4
5
6
7
8
9
10

entry: {
  react: ['react'],
  jquery: ['jquery']
},
plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: ['jquery', 'react'],
    minChunks: Infinity
  })
]

冲突发生的情况

假设A、B两个用户，他们分别从SVN服务器中检出了test.js文件，此时A、B、服务器三个地方的test.js的版本都是13。现在，B用户修改文件内容并提交，此时B用户和服务器的test.js的版本都变为14，只有A用户的test.js的版本还是13。接下来，A用户修改不同的内容然后提交。
由于A用户是在13版本上做的修改，而服务器已经是14版本了，所以会提交失败。
提交失败之后有两个选择：第一，选择revert，省去了解决冲突的麻烦；第二，选择更新文件，这时会有冲突问题。

Vue 中要遍历 n 项可以这么写

1
2

<div v-for="i in n">{{i}}</div>
<div v-for="i in new Array(n)">{{i}}</div>

遍历数组

1
2
3

<div v-for="(item, index)in array">
  {{ item }} - {{ index }}
</div>

遍历对象，遍历顺序就是对象书写顺序

1
2
3

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

收集了一些日常项目中经常会用到的 webpack 配置，加深对webpack配置的理解。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

module.exports = {
    // entry: 打包的入口文件，一个字符串或者一个对象
    entry: {
        bundle: './index.js',
    },
    // output:配置打包的结果，一个对象
    output: {
        // fileName：定义输出文件名，一个字符串
        // path：定义输出文件路径，一个字符串
        path: __dirname,
        filename: '[name].js' // 这里的name就是指 entry 对象的键名，即 bundle
    },
    // module: 定义对模块的处理逻辑，一个对象
    module: {
        // rules: 定义文件加载规则，一个数组
        rules: [{
            test: /\.vue$/, // 正则表达式，用于匹配指定文件
            loader: 'vue-loader', // 加载器名字
            options: vueLoaderConfig, // 传入加载器的参数
            // include: 字符串或者数组，规定需要解析的文件夹
            include: [resolve('src')],
            // exclude：字符串或者数组，规定不需要解析的文件夹
            exclude: [resolve('node_modules')]
        }],
        // loaders: 定义一系列的加载器，一个数组
        loaders: [{
            test: /\.css$/,
            loader: "style-loader!css-loader"
        }],
    },
    // devtool: 规定一个开发工具来加快调试，字符串
    devtool: 'cheap-module-eval-source-map',
    // resolve: 模块解析的相关配置，一个对象
    resolve: {
        // extensions：自动补全没有后缀的文件，一个数组
        extensions: ['.js', '.vue', '.json'],
        // alias: 设置解析别名，一个对象
        alias: {
            '~': resolve('src/components'), // 配置后使 import('~') 等价于 import('src/components')
        }
    },
    // externals: 规定某些依赖不会被webpack解析，一个对象
    externals: {
        // externals中的key是import中使用的
        // externals中的value是window下调用的
        echarts: 'echarts',
        _: 'lodash'
    },
    // plugins: 定义一系列的插件，一个数组
    plugins: [
        new MyPlugin({name: 'hanger'})
    ]
};

更多更详细的介绍在官方文档。

在实际的移动端项目中会遇到横幅展示的需求，用来展示最新上架的内容或者广告等。为此我制作了一个 Vue 组件（Demo&源码），让我们来一步步实现这个组件吧，有可以改进的地方欢迎指正。

制定一个小目标

首先我们搭建一个简单的例子，并希望引入Banner组件就可以实现 banner 效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<template>
  <div>
    <banner>
      <div slot="item" class="item"><img src="http://olislpb6q.bkt.clouddn.com/bizhi1.jpg"></div>
      <div slot="item" class="item"><img src="http://olislpb6q.bkt.clouddn.com/bizhi2.jpg"></div>
      <div slot="item" class="item"><img src="http://olislpb6q.bkt.clouddn.com/bizhi4.jpg"></div>
    </banner>
  </div>
</template>

<script>
import { Banner } from '@/components';
export default {
  name: 'el-banner',
  components: { Banner }
};
</script>

<style lang="scss" scoped>
.item {
  img {
    height: 150px;
    width: 100%;
  }
}
</style>

传统的position: fixed;是相对于窗口的固定定位，但是实际项目中经常会遇到需要根据指定父元素固定定位的情况。研究后找到了两种可行的实现方案。以下代码的效果是.header会相对于.wrapper固定显示，这就实现了相对于父元素的固定定位。

1
2
3
4
5
6

<div class="wrapper">
  <div class="header">little title</div>
  <div class="content">
    <div v-for="(item, index) in new Array(30)">item - {{index}}</div>
  </div>
</div>

学习 ReactNative 的第一步就是搭建开发环境，在搭建Android开发环境中又遇到不少坑，详细安装过程见这里，以下记录搭建过程中遇到的坑。

坑一

运行react-native run-android后报错

1
2
3

* What went wrong:
A problem occurred evaluating project ':app'.  
> SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.

解决方法是在android目录下创建一个名叫local.properties文件，里边的内容如下

• in Windows: C:/Users/USERNAME/AppData/Local/Android/sdk
• in macOS: sdk.dir = /Users/USERNAME/Library/Android/sdk
• in linux: sdk.dir = /home/USERNAME/Android/Sdk

这里的USERNAME是你的用户名，然后在终端运行react-native run-android。