开发中，链式取值是非常正常的操作，如：
res.data.goods.list[0].price
有时候会出现错误：
Uncaught TypeError: Cannot read property 'goods' of undefined

通过函数解析字符串验证

function get(obj, props, def) {
  if ((obj == null) || obj == null || typeof props !== 'string') return def;

  const temp = props.split('.');
  const fieldArr = [].concat(temp);

  temp.forEach((e, i) => {
    if (/^(\w+)\[(\w+)\]$/.test(e)) {
      const matchs = e.match(/^(\w+)\[(\w+)\]$/);
      const field1 = matchs[1];
      const field2 = matchs[2];
      const index = fieldArr.indexOf(e);
      fieldArr.splice(index, 1, field1, field2);
    }
  })

  return fieldArr.reduce((pre, cur) => {
    const target = pre[cur] || def;

    if (target instanceof Array) {
      return [].concat(target);
    }
    if (target instanceof Object) {
      return Object.assign({}, target)
    }
    return target;
  }, obj)
}

使用:

var c = {
  a: {
    b: [1, 2, 3]
  }
}
get(c, 'a.b') // [1,2,3]
get(c, 'a.b[1]') // 2
get(c, 'a.d', 12) // 12

这是 JavaScript standard 代码规范的全文。

掌握本规范的最好方法是安装并在自己的代码中使用它。

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性

设为Flex布局以后，子元素的float、clear和vertical-align属性将失效

.box{
  display: -webkit-flex;  /* -webkit */
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;  /* row */
  flex-wrap: nowrap | wrap | wrap-reverse;  /* nowrap */
  flex-flow: <flex-direction> || <flex-wrap>;  /* row nowrap */
  justify-content: flex-start | flex-end | center | space-between | space-around;  /* flex-start */
  align-items: flex-start | flex-end | center | baseline | stretch;  /* stretch */
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;  /* stretch */
}

.item {
  order: <integer>;  /* 0 */
  flex-grow: <number>;   /* 0 */
  flex-shrink: <number>;  /* 1 */
  flex-basis: <length> | auto;  /* auto */
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];  /* 0 1 auto */
  align-self: auto | flex-start | flex-end | center | baseline | stretch;  /* auto */
}

git clone 默认会下载项目的完整历史版本，如果你只关心最新版的代码，而不关心之前的历史信息，可以使用 git 的浅复制功能：

$ git clone --depth=1 git@github.com:hd1987/hd1987.github.io.git

--depth=1 表示只下载最近一次的版本，使用浅复制可以大大减少下载的数据量，如果之后又想获取完整历史信息，可以使用下面的命令：

$ git fetch --unshallow

目录结构

dist
|  font
|  |  ...
|  images
|  |  ...
|  js
|  |  index.js
|  css
|  |  styles.css
node_modules
src
|  font
|  |  ...
|  images
|  |  ...
|  js
|  |  module
|  |  |  loading.js
|  |  |  ...
|  |  index.js
|  scss
|  |  base
|  |  |  ...
|  |  function
|  |  |  ...
|  |  layout
|  |  |  ...
|  |  mixin
|  |  |  ...
|  |  _variables.scss
|  |  styles.scss
package.json
webpack.config.js
webpack.config.entry.js（把需要编译的多个js入口单独写配置文件）

使用方法

npm install 安装命令（每个项目仅需执行一次）
npm run-script build 编译一次，并压缩文件
npm start 编译并启动监听

.gitignore

# 此为注释 – 将被 Git 忽略
*.a         # 忽略所有 .a 结尾的文件
!lib.a      # 但 lib.a 除外
/TODO       # 仅仅忽略项目根目录下的 TODO 文件，不包括 subdir/TODO
build/      # 忽略 build/ 目录下的所有文件
doc/*.txt   # 会忽略 doc/notes.txt 但不包括 doc/server/arch.txt
tmp/*       # 忽略tmp文件夹所有文件，因为git不会加入空目录

其它过滤条件

• ？ : 代表任意的一个字符
• ＊ : 代表任意数目的字符
• {!ab} : 必须不是此类型
• {ab,bb,cx} : 代表ab,bb,cx中任一类型即可
• [abc] : 代表a,b,c中任一字符即可
• [ ^abc] : 代表必须不是a,b,c中任一字符

.gitignoreglobal

在用户目录下创建 ~/.gitignoreglobal 文件,
需要执行 git config --global core.excludesfile ~/.gitignoreglobal 来使得它生效。

忽略本地的文件控制，不影响全局

.git/info/exclude 这里设置的是你自己本地需要排除的文件，他不会影响到其他人，也不会提交到版本库中去。

去除已经提交文件的版本控制（公共）

1. rm -rf PATH
2. git rm -r --cached PATH
3. 修改.gitignore，添加忽略文件
4. git add -A
5. git push

忽略已经提交到版本库的文件（本地）

git update-index --assume-unchanged PATH # 忽略跟踪
git update-index --no-assume-unchanged PATH #恢复跟踪

提交空的目录树

需要提交一个空的 log 目录时，在里面放置一个空的.gitignore

Github地址: create-react-app

安装、启动命令

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

初始目录结构

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── registerServiceWorker.js

用html的file标签就能实现图片上传前预览，就是通过file标签和js的FileReader接口，把选择的图片文件调用readAsDataURL方法，把图片数据转成base64字符串形式显示在页面上。