文章发布

Author: p2227

README.md

@@ -2,5 +2,3 @@
 
 本repo主要拿来索引、存档、存放图片等资源文件
 
-- [2015年技术总结](//github.com/p2227/p2227.github.io/issues/2)
-

article/20160116-2015年技术总结.md

@@ -1,33 +1,33 @@
-# 2015年技术总结
-## 各个技术栈的实践
-* `ES6+babel` 的开发模式广泛应用在开发上，多了很多语法糖
-* `react` 组件化的开发，使得前端以往界面复杂，组合多的问题有了新的突破与解决
-* `redux` 函数式编程，能很方便地进行解耦与测试
-* `postcss` 应用于项目中，体会到一个all in  js的原则，连css/html都先经过js处理，再输出
-
-## 综合利用各种资源解决问题
-* 综合利用npm提供的集中的js插件管理平台，容易找到轮子，并且应用于自己的问题解决上
-* 综合利用不同的框架和库去搭建一个适配业务的框架，其实不管是`backbone+grunt`, `requirejs+ng`,  `react+redux+webpack`，各种组合，归根到底都是一些基础的html/css/js问题，一些业务逻辑的问题大都能自己思考解决。
-* 两个一开始独立开发的项目，到后期突然有需求要合并在一起，此时项目之间的通讯对接问题，就需要综合各种知识去解决了，除了前端，还有各种http的知识也要应用上。
-* 在做了差不多一年的手机项目时，也做了一个PC端的，发现因为前面有过[总结](http://www.cnblogs.com/p2227/)，很多东西能立马回顾起来。
-
-## 前端性能、缓存方面的突破
-在过去的一年里，项目组内综合了http缓存、manifest和webpack的hash指纹技术，制定出了一套webapp的按需加载，增量更新的打包方案。大大减少了webapp的二次加载的时间和更新的流量。其实我觉得还能综合利用localstorage技术去再做一步缓存。
-
-## 重视代码测试
-* 利用`mocha`,`Karma`等框架进行前端功能的单元测试，减少BUG重复出现的概率。
-* 要想用好react的组件化，测试用例也是必不可少的，否则你无法预测对通用组件的修改会否影响到以前的功能。
-* redux的引入，令到业务逻辑的测试非常简单。
-* 测试用例也是一个很好的API说明。一些库或者代码文档不全，源代码又不太好阅读时，看懂其中的测试用例也能很好地理解其中的功能。
-
-## 要有耐心、沉着地去写代码
-前端这一年，出现了很多新的框架与技术，当要应用到项目上时，总要有一段学习与尝试的过程。这段时间内需要掌握很多新的东西，这些东西往往不是一两行代码就会有效果的，而且经常会与原来项目中的东西冲突，需要自己去理解并想办法解决。所以一定要有耐心、不要老是想着“看看效果怎么样再说”，这样反而很容易把时间花在刷新、定位错误等重重复复的事情上。比如我现在要把redux引入到项目中，就一定要把store,dispatch,action,reduce等所有的东西都要引用进来，才会有效果，如果写一行代码又看一下效果，另外一行又想看，会导致事倍功半。
-
-## 未完成的东西
-因为实在有很多新的东西了，在这一年里面还有很多东西没能体验利用到
-* `react-native` 利用js去写原生应用。
-* `react同构技术` 的尝试，利用js去写服务端的程序。
-* 一个性能监控、用户行为收集的系统。前面既然写了一些缓存利用、性能提升的代码，那么这些代码最终达到一些什么样的效果，如何去量化这些效果呢，如果没有一个反馈系统，确实也是不好说的。
-
-## 最后的话
-以上是本人的2015年技术总结，希望在新的一年里面能有更大的进步！
+# 2015年技术总结
+## 各个技术栈的实践
+* `ES6+babel` 的开发模式广泛应用在开发上，多了很多语法糖
+* `react` 组件化的开发，使得前端以往界面复杂，组合多的问题有了新的突破与解决
+* `redux` 函数式编程，能很方便地进行解耦与测试
+* `postcss` 应用于项目中，体会到一个all in  js的原则，连css/html都先经过js处理，再输出
+
+## 综合利用各种资源解决问题
+* 综合利用npm提供的集中的js插件管理平台，容易找到轮子，并且应用于自己的问题解决上
+* 综合利用不同的框架和库去搭建一个适配业务的框架，其实不管是`backbone+grunt`, `requirejs+ng`,  `react+redux+webpack`，各种组合，归根到底都是一些基础的html/css/js问题，一些业务逻辑的问题大都能自己思考解决。
+* 两个一开始独立开发的项目，到后期突然有需求要合并在一起，此时项目之间的通讯对接问题，就需要综合各种知识去解决了，除了前端，还有各种http的知识也要应用上。
+* 在做了差不多一年的手机项目时，也做了一个PC端的，发现因为前面有过[总结](http://www.cnblogs.com/p2227/)，很多东西能立马回顾起来。
+
+## 前端性能、缓存方面的突破
+在过去的一年里，项目组内综合了http缓存、manifest和webpack的hash指纹技术，制定出了一套webapp的按需加载，增量更新的打包方案。大大减少了webapp的二次加载的时间和更新的流量。其实我觉得还能综合利用localstorage技术去再做一步缓存。
+
+## 重视代码测试
+* 利用`mocha`,`Karma`等框架进行前端功能的单元测试，减少BUG重复出现的概率。
+* 要想用好react的组件化，测试用例也是必不可少的，否则你无法预测对通用组件的修改会否影响到以前的功能。
+* redux的引入，令到业务逻辑的测试非常简单。
+* 测试用例也是一个很好的API说明。一些库或者代码文档不全，源代码又不太好阅读时，看懂其中的测试用例也能很好地理解其中的功能。
+
+## 要有耐心、沉着地去写代码
+前端这一年，出现了很多新的框架与技术，当要应用到项目上时，总要有一段学习与尝试的过程。这段时间内需要掌握很多新的东西，这些东西往往不是一两行代码就会有效果的，而且经常会与原来项目中的东西冲突，需要自己去理解并想办法解决。所以一定要有耐心、不要老是想着“看看效果怎么样再说”，这样反而很容易把时间花在刷新、定位错误等重重复复的事情上。比如我现在要把redux引入到项目中，就一定要把store,dispatch,action,reduce等所有的东西都要引用进来，才会有效果，如果写一行代码又看一下效果，另外一行又想看，会导致事倍功半。
+
+## 未完成的东西
+因为实在有很多新的东西了，在这一年里面还有很多东西没能体验利用到
+* `react-native` 利用js去写原生应用。
+* `react同构技术` 的尝试，利用js去写服务端的程序。
+* 一个性能监控、用户行为收集的系统。前面既然写了一些缓存利用、性能提升的代码，那么这些代码最终达到一些什么样的效果，如何去量化这些效果呢，如果没有一个反馈系统，确实也是不好说的。
+
+## 最后的话
+以上是本人的2015年技术总结，希望在新的一年里面能有更大的进步！

article/20160116-初用react容易踩的坑.md

@@ -1,56 +1,56 @@
-# 初用react容易踩的坑
-
-## 自定义组件忘记大写第一个字母 
-```javascript
-var myComp = React.createClass({
-  render: function() {
-    return <div>Hello world</div>;
-  }
-});
-
-ReactDOM.render(<myComp  />, mountNode);
-```
-如上代码则不会渲染出组件，因为自定义组件的第一个字母必须要大写
-
-
-## 在组件上传递onClick等特殊属性
-接着上面的例子，把myComp改成MyComp，此时又容易写出如下代码
-```javascript
-<MyComp onClick={func}/>
-```
-没做其他处理的话，点击该组件是不会生效的，因为自定义组件中的所有属性都只会作为一个一般的属性去处理，需要在组件内部把该属性进行处理才会生效，即
-```javascript
-var MyComp = React.createClass({
-  render: function() {
-    return <div onClick={this.props.onClick}>Hello world</div>;
-  }
-});
-
-ReactDOM.render(<MyComp onClick={func} />, mountNode);
-```
-
-其他className、htmlFor等属性也类似处理
-
-## 滥用this.func.bind
-利用`React.createClass`创建的组件中，事件的调用函数是不需要加上.bind(this)的，除非要传参数
-```javascript
-var MyComp = React.createClass({
-  func:function(){
-     //do Something
-  },
-  render: function() {
-    return <div onClick={this.func.onClick}>Hello world</div>;
-  }
-});
-```
-如果是用ES6的写法，则需要
-
-## 直接给input value设置一个state
-
-```javascript
-<input value={this.state.text} />
-```
-如果像上面这样写，则input是不可修改的，有两种解决方案。
-如果是要一次性设置一个值，用`defaultValue`，如果是要双向绑定，则可以用`ReactLink`，具体官方都有连接 
-defaultValue :  https://facebook.github.io/react/docs/forms.html 
+# 初用react容易踩的坑
+
+## 自定义组件忘记大写第一个字母 
+```javascript
+var myComp = React.createClass({
+  render: function() {
+    return <div>Hello world</div>;
+  }
+});
+
+ReactDOM.render(<myComp  />, mountNode);
+```
+如上代码则不会渲染出组件，因为自定义组件的第一个字母必须要大写
+
+
+## 在组件上传递onClick等特殊属性
+接着上面的例子，把myComp改成MyComp，此时又容易写出如下代码
+```javascript
+<MyComp onClick={func}/>
+```
+没做其他处理的话，点击该组件是不会生效的，因为自定义组件中的所有属性都只会作为一个一般的属性去处理，需要在组件内部把该属性进行处理才会生效，即
+```javascript
+var MyComp = React.createClass({
+  render: function() {
+    return <div onClick={this.props.onClick}>Hello world</div>;
+  }
+});
+
+ReactDOM.render(<MyComp onClick={func} />, mountNode);
+```
+
+其他className、htmlFor等属性也类似处理
+
+## 滥用this.func.bind
+利用`React.createClass`创建的组件中，事件的调用函数是不需要加上.bind(this)的，除非要传参数
+```javascript
+var MyComp = React.createClass({
+  func:function(){
+     //do Something
+  },
+  render: function() {
+    return <div onClick={this.func.onClick}>Hello world</div>;
+  }
+});
+```
+如果是用ES6的写法，则需要
+
+## 直接给input value设置一个state
+
+```javascript
+<input value={this.state.text} />
+```
+如果像上面这样写，则input是不可修改的，有两种解决方案。
+如果是要一次性设置一个值，用`defaultValue`，如果是要双向绑定，则可以用`ReactLink`，具体官方都有连接 
+defaultValue :  https://facebook.github.io/react/docs/forms.html 
 ReactLink : http://facebook.github.io/react/docs/two-way-binding-helpers.html

article/20160419-搭建一个PC版本的 ng-redux 项目 1 （引入开源库）.md

@@ -1,49 +1,49 @@
-# 搭建一个PC版本的 ng-redux 项目 1 （引入开源库）
-
-## 背景
-redux在建立的时候，就把项目定位于不仅仅服务于react。最近因为项目实际的需要，搭建了angular与redux结合的项目。类似于react全家桶，要想把ng与redux结合起来，也需要好几个库或者框架。基本联系如下图。也用了webpack打包与babel转码器。
-
-![整体流程](https://raw.githubusercontent.com/p2227/p2227.github.io/master/asset/ng-redux-flow.png)
-
-
-## angular
-由于浏览器版本问题(产品定位是IE7及IE8)，暂时不考虑react及高版本的ng，定位了1.0.8版本的ng。以此为基准考虑其他框架。为了方便切换版本，npm安装的是1.4.x,而另外手工准备一份旧的，需要的时候直接打包进vendor.js中。
-
-## ui-router
-在引入这个库时，并没有多大问题，因为这是一个典型的ng生态ui解决方案，**看源码**可以知道是里面的angular是全局变量，要与webpack结合，推荐用webpack官方的`imports-loader`载入。
-
-## redux-ui-router
-利用官网的利用和ng 1.4.x 的时候都好好的，但是一切换到1.0.8，就会提示
- `WARNING: Tried to load angular more than once.` 和报错 `Uncaught TypeError: window.angular.$$csp is not a function` 一开始的时候，并我没有理会waring，而直接去找错误，一般会认为`$$csp`是一个新版本才有的功能。但是实际上并不是，1.0.8也有。于是我把目光转向warning，但是那句warning即使google找到的答案也是千奇百怪的。  
- 经过自己冷静思考和逐步排查分析之后，终于发现是这样的。由于`redux-ui-router`要求ng版本为1.4.x (peerDependencies) ，但是我并不是那个版本，所以我的ng并不是直接在npm上拿下来的包，而是手工放进去了。但是npm还是会把1.4.x版本的ng拿到node_modules里面去，这样，当 redux-ui-router 中运行 `require('angular')`的时候，拿的是1.4.x版本的ng，同时我全局引入1.0.8的ng，两个就冲突了。 
- 
- 于是我新建了一个入口文件，直接引用redux-ui-router下面的一些功能，把`require('angular')`避开了。成功解决了这个问题。
-
-## ng-redux
-除了上面重复引入ng的问题，使用ng-redux的时候，还有另外一个问题。 
-
-官方的例子是利用`controllerAs`语法的，在高版本的ng下跑是没有问题的，但一切换到目标版本就会有问题。大招**看源码**有点费时间，在此之前我们可以先尝试**看测试用例**
-
-https://github.com/wbuchwalter/ng-redux/blob/master/test/components/connector.spec.js#L38
-
-```javascript
-  it('Should extend target (Object) with selected state once directly after creation', () => {
-     connect(
-      () => ({
-        vm: { test: 1 }
-      }))(targetObj);
-
-    expect(targetObj.vm).toEqual({ test: 1 });
-  });
-```
-
-由于之前一直在用过`react-redux`，connect是redux数据中心发生变化之后调用的函数，通知视图要改变，我们看到ng-redux在此要做的事情是在targetObj中修改一些属性。再结合以前用ng时候的情况，
-修改 `$scope`的属性就可以引起视图的改变。于是我把官网绑定在controller的例子改成绑定在`$scope`上。于是在controller中就这样写
-```
-const unsubscribe = $ngRedux.connect(state=> {
-    //some code
-    })($scope);
-```
-
-##  
-于是，我就把这三个库引入到项目中，从1.4.x版本的ng迁移到了1.0.8版本的ng。
+# 搭建一个PC版本的 ng-redux 项目 1 （引入开源库）
+
+## 背景
+redux在建立的时候，就把项目定位于不仅仅服务于react。最近因为项目实际的需要，搭建了angular与redux结合的项目。类似于react全家桶，要想把ng与redux结合起来，也需要好几个库或者框架。基本联系如下图。也用了webpack打包与babel转码器。
+
+![整体流程](https://raw.githubusercontent.com/p2227/p2227.github.io/master/asset/ng-redux-flow.png)
+
+
+## angular
+由于浏览器版本问题(产品定位是IE7及IE8)，暂时不考虑react及高版本的ng，定位了1.0.8版本的ng。以此为基准考虑其他框架。为了方便切换版本，npm安装的是1.4.x,而另外手工准备一份旧的，需要的时候直接打包进vendor.js中。
+
+## ui-router
+在引入这个库时，并没有多大问题，因为这是一个典型的ng生态ui解决方案，**看源码**可以知道是里面的angular是全局变量，要与webpack结合，推荐用webpack官方的`imports-loader`载入。
+
+## redux-ui-router
+利用官网的利用和ng 1.4.x 的时候都好好的，但是一切换到1.0.8，就会提示
+ `WARNING: Tried to load angular more than once.` 和报错 `Uncaught TypeError: window.angular.$$csp is not a function` 一开始的时候，并我没有理会waring，而直接去找错误，一般会认为`$$csp`是一个新版本才有的功能。但是实际上并不是，1.0.8也有。于是我把目光转向warning，但是那句warning即使google找到的答案也是千奇百怪的。  
+ 经过自己冷静思考和逐步排查分析之后，终于发现是这样的。由于`redux-ui-router`要求ng版本为1.4.x (peerDependencies) ，但是我并不是那个版本，所以我的ng并不是直接在npm上拿下来的包，而是手工放进去了。但是npm还是会把1.4.x版本的ng拿到node_modules里面去，这样，当 redux-ui-router 中运行 `require('angular')`的时候，拿的是1.4.x版本的ng，同时我全局引入1.0.8的ng，两个就冲突了。 
+ 
+ 于是我新建了一个入口文件，直接引用redux-ui-router下面的一些功能，把`require('angular')`避开了。成功解决了这个问题。
+
+## ng-redux
+除了上面重复引入ng的问题，使用ng-redux的时候，还有另外一个问题。 
+
+官方的例子是利用`controllerAs`语法的，在高版本的ng下跑是没有问题的，但一切换到目标版本就会有问题。大招**看源码**有点费时间，在此之前我们可以先尝试**看测试用例**
+
+https://github.com/wbuchwalter/ng-redux/blob/master/test/components/connector.spec.js#L38
+
+```javascript
+  it('Should extend target (Object) with selected state once directly after creation', () => {
+     connect(
+      () => ({
+        vm: { test: 1 }
+      }))(targetObj);
+
+    expect(targetObj.vm).toEqual({ test: 1 });
+  });
+```
+
+由于之前一直在用过`react-redux`，connect是redux数据中心发生变化之后调用的函数，通知视图要改变，我们看到ng-redux在此要做的事情是在targetObj中修改一些属性。再结合以前用ng时候的情况，
+修改 `$scope`的属性就可以引起视图的改变。于是我把官网绑定在controller的例子改成绑定在`$scope`上。于是在controller中就这样写
+```
+const unsubscribe = $ngRedux.connect(state=> {
+    //some code
+    })($scope);
+```
+
+##  
+于是，我就把这三个库引入到项目中，从1.4.x版本的ng迁移到了1.0.8版本的ng。