发表于 |

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

发表于 | 分类于 |

相关链接：

http://www.cnblogs.com/xiaohuochai/p/5350254.html#anchor2
http://www.cnblogs.com/xiaohuochai/p/5351477.html
透视原理与实现 http://blog.csdn.net/goncely/article/details/5397729
http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

在实现carousel效果的时候，用到了transform:translate属性，哎，以前看过的都忘了，只有再重新拾起来，这里做个备忘。上面4个链接可以帮助理解。尤其是张鑫旭大神的，如果对透视不太理解，然后再结合透视原理那篇文章。
下面是用到的关键css属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
.parent{
  perspective:500px; /*视距，视角*/
  perspective-origin:center;/*视点*/
}
.child{
  transform-origin:50% 50%;/*变换中心*/
  /*transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。值：flat|preserve-3d,flat元素会被拍扁不会呈现3d效果，而preserve-3d可以呈现3d效果*/
  transform-style: preserve-3d;
  transform: rotateY(50deg) /*旋转，绕Y轴旋转50°*/
    scale(0.45)  /*缩放，为原来的0.45倍*/
    skewX(10deg) /*倾斜，在X轴倾斜，表示原来垂直X轴的变发生倾斜*/
    translate3d(10px,10px,-10px);/*平移，在空间中发生移动*/
}

发表于 | 分类于 |

参考 https://webpack.js.org/guides/caching/

使用webpack打包好久了，但是对具体的配置的含义，有的还是不明白，其中一个就是webpack caching。
webpack caching主要目的是，使浏览器缓存公共文件，不必每次都从服务器请求新的bundle文件。
下面是基本的配置。

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
// webpack.config.prod.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  context: path.resolve(__dirname, ".."),//我把配置文件放在了config文件夹下
  entry: {
    app: ['./src/index.js'],
    vendor: [
      'react',
      'react-dom',
      'redux',
      'react-router'
    ]
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: "[name].[chunkhash:8].js",
    chunkFilename: "[name].[chunkhash:8].js",
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [['env', { modules: false }], 'react'],
          plugins: ['transform-runtime'],
          cacheDirectory: true
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: ["vendor","manifest"],
      filename: '[name].[chunkhash:8].js',
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html'
    }),
    new webpack.NamedModulesPlugin(),
  ]
}

接下来对上面配置做个具体分析。
对于有多个入口的打包，如果不提取公共文件，打包后的文件是不相相互影响的。但是提取公共文件后，公共文件包含公共manifest，这样打包后的文件就是相互影响的了。
输出文件文件名配置有[hash]和[chunkhash]，他们的区别是如下

  • [hash]这种方式，所有的文件hash后缀,都会相同，因此每次打包只要有一个文件改变所有的文件名都会改变。但是只有文件内容改变的文件，打包后的文件内容才会改变。
  • [chunkhash]这种方式会为每个文件单独起一个文件名，文件hash根据每一个文件的内容的hash值确定。因此文件内容不改变，文件名不变。如果不提取公共文件，没有改变的bundle，依旧可以被浏览器缓存。

如果将公共代码提取出来，那么公共文件vendor中包含manifest (along with bootstrapping/runtime code) ，在每次应用代码文件修改的时候，文件的hash都会改变，在公共文件的bootstrapping中含有文件的哈希值，因此每次文件改变，公共文件内容也会改变，这就使得公共文件的意义不大了。因此需要把manifest单独提取出来。（ps:可以自己看一下manifest文件的内容，可以比对两次打包manifest内容的变化）。

这里没有使用webpack官网的配置方式，因为没有必要，manifest文件不太大，每次文件改变都对manifest文件重新发出请求的开销还是可以接受的。
上面的配置文件中使用了，HtmlWebpackPlugin插件，每次打包会在index.html中自动插入打包后的文件链接。就算多次打包文件名发生改变，也不用手动更改引用。

发表于 | 分类于 ， |

上周复习巩固了正则表达式要点，做个总结！

起源

看到别人处理css选择器的时候，使用到了正则表达式，涉及到分组捕获等知识，还有实现数字每三位逗号分隔这种形式，使用正则表达式实现，想破头皮弄不出来，只好重新学习正则表达式。

易忘难点

  1. 在操作符后面加一个问号?字符（?操作符的一个重载），如/a+?/:让表达式变成非贪婪的，进行最小限度的匹配。
  2. 分组捕获：正则表达式有一部分用括号进行分组时，它具有双重责任，同时也创建所谓的捕获。/(ab)+/匹配一个或多个连续出现的子字符串‘ab’
  3. 或操作符：可以用(|)字符表示或者的关系。/(ab)+|(cd)+/匹配出现一次或多次的”ab”或”cd”。
  4. 反向引用：捕获的反向引用。如：/^([dtn]a\1)/：可以匹配任意一个以”d””t””n”开头，且后面紧跟着一个a字符，并且后面跟着和第一个捕获相同字符的字符串。\1匹配的字符需要在匹配的时候才能确定。
  5. 在匹配xml类型标记元素的时候可能会很有用，如：/<(\w+)>(.+)<\/\1>/可以匹配<strong>something</strong>这样的简单元素。如果不使用反向引用是无法做到的，因为我们无法知道闭合标签和开始标签是否匹配。
  6. \b : 匹配单词边界,就是位于字符\w（[a-zA-Z0-9_]）和\W[^a-zA-Z0-9_]之间的位置，或者位于字符\w和字符串的开头或者结束之间的位置。
  7. \B: 匹配非单词边界
  8. exp1(?=exp2):正向前瞻（零宽正向先行断言）,要匹配的exp1要满足后面是exp2
  9. exp1(?!exp2):负向前瞻（零宽负向先行断言），要匹配的exp1要满足后面是不是exp2
  10. (?:exp):正则表达式中小括号具有分组和捕获双重作用，如果在小阔号里面开始加上?:则可以使其不被捕获。
阅读全文 »

发表于 | 分类于 ， |

分享很好的一篇文章，原文链接：https://github.com/krasimir/react-in-patterns/tree/master/patterns/dependency-injection

React in patterns / Dependency injection

Big part of the modules/components that we write have dependencies. A proper management of these dependencies is critical for the success of the project. There is a technique (some people consider it as a pattern) called dependency injection that helps solving the problem.

In React the need of dependency injector is easily visible. Let’s consider the following application tree:

阅读全文 »

发表于 | 分类于 ， |

起源

前两天看到一个面试题，问CSS实现三角形原理，想到以前做过气泡弹出框，气泡弹出框的小角是个三角形，因此对CSS实现三角形原理还是了解的。但是具体实现有些生疏了，因此又实现了一遍。同时注意到，使用Google划词翻译的时候，会弹出气泡框显示翻译内容，激发了我做出这种效果的欲望，可是那时候正在学习其它的东西，就先搁置先来了，不过呢，看来是天意，鬼使神差般把我链接到了medium。并且有下面的情形。
medium
这时就决定做一个玩玩。

阅读全文 »

发表于 | 分类于 ， |

前两天又看了一遍《你不知道的javascript（上）》，依旧收货颇多。发现书上将的一些内容，再次看的时候已经记不清楚了。一些理解有偏颇的概念，得到了重新的认识。最后讲的“行为委托”对象关联模型与面向“类”的编程思想进行了对比，作者阐述了对象关联模型在javascript中的优势，应用对象关联模型进行javascript编程更加自然、更加符合javascript语言特性。
下面我记载了一些，自己没有掌握的或者容易出错、容易遗忘的内容。

阅读全文 »

发表于 | 分类于 |

Get和Post方法区别

Http协议定义了很多与服务器交互的方法，最基本的有4种，分别是GET,POST,PUT,DELETE. 一个URL地址用于描述一个网络上的资源，而HTTP中的GET, POST, PUT, DELETE就对应着对这个资源的查，改，增，删4个操作。 我们最常见的就是GET和POST了。GET一般用于获取/查询资源信息，而POST一般用于更新资源信息.

  1. GET提交的数据会放在URL之后，以?分割URL和传输数据，参数之间以&相连。如userInfo.php?id=17065&name=test.POST方法是把提交的数据放在HTTP包的Body中。
  2. GET提交的数据大小有限制（因为浏览器URL的长度有限制），而POST方法提交的数据没有限制。
  3. GET方式提交数据会有安全问题。

Cache-Control

http://mp.weixin.qq.com/s/tluGR6Xc2tCjtaOLWO9q6Q
http://www.cnblogs.com/wakey/p/4241516.html

Cache-Control即可以用于请求头，也可以用于响应头。响应头是重点掌握内容。
它控制着两个缓存：本地缓存（私有缓存）和共享缓存。
本地缓存，是指在客户端本地机器中的缓存。站在开发者的角度，它并不完全受你的控制，通常浏览器会自己决定是否把某些内容放到缓存中，这意味着：不要依赖于本地缓存。
共享缓存，处于客户端和服务器之间的缓存。即 CDN。你对共享缓存拥有绝对的控制，应该好好地利用它。

阅读全文 »

发表于 | 分类于 ， |

目的

测试全局一个XMLHttpRequest对象，用来发送ajax请求，会出现的问题。
加深对ajax的认识，以及chrome一个请求的timing分析。
分析过程如下

服务器端php+apache

作用是客户端发送post请求数据（json格式），根据发送的来请求进行休眠（便于观察），然后直接返回请求内容。

1
2
3
4
5
6
header("Access-control-allow-origin:*");//这里我是测试的允许跨域
$str = file_get_contents('php://input'); //这里得到字符串
$data = json_decode($str);//转成JSON对象
sleep($data->sleepTime);//休眠，便于观察
//echo $data->masterIP;//如果要操作数据可以这样操作
echo json_encode($data); //json_encode又转成字符串

阅读全文 »

发表于 | 分类于 |

参考链接

https://reacttraining.com/react-router/web/api/BrowserRouter
https://github.com/ReactTraining/history

版本：react-router V4

history

react-router官方文档有说history is mutable。
给的例子：

1
2
3
4
5
6
7
8
9
10
class Comp extends React.Component {
  componentWillReceiveProps(nextProps) {
    // will be true
    const locationChanged = nextProps.location !== this.props.location

    // INCORRECT, will *always* be false because history is mutable.
    const locationChanged = nextProps.history.location !== this.props.history.location
  }
}
<Route component={Comp}/>

原因是：<Route>向Comp传入props包括match, location, history, staticContext(见<Route>分析),history是从context上下文中获取得到，一直是对同一个对象的引用，所以一直nextProps.history.location === this.props.history.location，而nextProps.location !== this.props.location，是因为在history库里面history.location的计算方式，是重新计算location对象。const location = createLocation(path, state, createKey(), history.location)。具体见https://github.com/ReactTraining/history/blob/master/modules/LocationUtils.js

阅读全文 »