Fork me on GitHub

发表于 |

React学习捷径：

深入模式: React+ES6+WebPack+React Redux+Fetch+React Router+Immutable+React Native+NodeJs
正常模式: React+ES6+WebPack+React Redux
简易模式: React+ES6+WebPack+React Flux(React官方Flux库)

在看了一些react的文档以及以下新手入门文档之后，就想动手写个项目练练手，虽然知道要用react、react-router等，但是项目的脚手架如果自己写的话对于新手来说基本不可能，所以网上找了一款脚手架：Create React App

1
2
3
4
5
npm install -g create-react-app

create-react-app my-app
cd my-app/
npm start

然后访问 http://localhost:3000 就可以看到初始页面了哦

当然这个只是包含了react基础的npm包，以及静态服务，热插拔，其他如果要用的话可以自己install相关的插件。

阅读全文 »

发表于 |

之前一直没好好看过（看过忘了）package.json，然后各种项目本地运行的命令又很多，如：

1
2
3
4
5
node index
node server index
npm run dev
webpack --progress --colors
webpack-dev-server --progress --colors

这些命令很多，所以就研究了下package.json

概述

每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

下面是一个最简单的package.json文件，只定义两项元数据：项目名称和项目版本。

1
2
3
4
{
  "name" : "xxx",
  "version" : "0.0.0",
}

上面代码说明，package.json文件内部就是一个JSON对象，该对象的每一个成员就是当前项目的一项设置。比如name就是项目名称，version是版本（遵守“大版本.次要版本.小版本”的格式）。

阅读全文 »

发表于 |

此原则的核心就是解耦和增强内聚性。

定义

一个方法只负责一项职责

其实很好理解，每个方法只有单一的功能，这样就不会相互影响，修改这个方法也就不会影响到其他的方法

说到单一职责原则，很多人都会不屑一顾。因为它太简单了。稍有经验的程序员即使从来没有读过设计模式、从来没有听说过单一职责原则，在设计软件时也会自觉的遵守这一重要原则，因为这是常识。在软件编程中，谁也不希望因为修改了一个功能导致其他的功能发生故障。而避免出现这一问题的方法便是遵循单一职责原则。虽然单一职责原则如此简单，并且被认为是常识，但是即便是经验丰富的程序员写出的程序，也会有违背这一原则的代码存在。

遵循单一职责原的优点

  • 可以降低类的复杂度，一个类只负责一项职责，其逻辑肯定要比负责多项职责简单的多；
  • 提高类的可读性，提高系统的可维护性；
  • 变更引起的风险降低，变更是必然的，如果单一职责原则遵守的好，当修改一个功能时，可以显著降低对其他功能的影响。

tips：请尽量遵循这一原则，不要为了偷懒而把一些简单的功能写到一个方法里面。因为未来可能会有一些需求或者什么，加点功能或修改一点功能，最终这个很简单的方法就会变得臃肿并且很难着手修改，修改也可能会影响到其他地方。

发表于 |

PC端项目很多都会用到复制到粘贴板的功能，但是由于浏览器的差异（IE/ff）和支持情况的而不同导致各种兼容

本来一直用的zeroClipboard插件，这个插件主要用了flash来实现，flash可以绕过浏览器不兼容的问题，兼容性还不错，但是依赖浏览器flash插件，有些用户可能会为了禁掉各种广告而禁掉flash插件，甚至FF浏览器本身就对flash插件进行了限制，导致有客户来问，所以研究了下相关内容；

这里介绍一套解决方案：clipBoard.js，这个插件纯js实现，主要原理是用到了document.execCommand('copy')方法，使用详解，这个方法可以鼠标选中的内容；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
简单的实现：
<input type="text" id="input1">
    <input type="button" Value="click" onclick="copy()">
    <script>
        function copy () {
            var input = document.createElement('input');
            input.value = document.getElementById('input1').value;
            input.style = "opacity:0"
            document.body.appendChild(input);
            input.select();
            document.execCommand('copy');
            console.log('Copy!');
            input.remove();
        }

    </script>

下面介绍一整套解决方案:

判断浏览器

因为clipboard兼容ie9以上，所以需要判断浏览器

阅读全文 »

发表于 |

最近正在学习vue，看了遍api和新手教程，打算动手做个单页面应用练手，在此记录一下

开发一个单页面应用涉及的点很多，路由，模块打包，资源请求等，我们用vue-cli来帮助快速构建一个单页面应用，vue-cli 可以生成一套提前定义好的构建文件，和相应的文件。

vue-cli

vue-cli有5个对应的项目结构。我们使用的是vue-webpack-boilerplate。

阅读全文 »

发表于 |

事实上Git 的推送和删除远程标签命令是相同的，删除操作实际上就是推送空的源标签refs：

1
git push origin 标签名

相当于

1
git push origin refs/tags/源标签名:refs/tags/目的标签名

推送标签：

1
git push origin 标签名

删除本地标签：

1
git tag -d 标签名

删除远程标签：

1
2
3
git push origin :refs/tags/标签名

git push origin :refs/tags/protobuf-2.5.0rc1

阅读全文 »

发表于 |

最近因为fiddler升级，引发的一系列血案，花了整整2个小时才解决，必须记录一下

安装并设置

下载fiddler最新版本，官网地址：http://www.telerik.com/fiddler

设置

1.打开Fiddler，然后点击菜单栏的Tools > Fiddler Options，打开“Fiddler Options”对话框。

2.在打开的对话框中切换到“HTTPS”选项卡

3.在打开的“HTTPS”选项卡中，勾选“Capture HTTPS CONNECTs”和“Decrypt HTTPS traffic”前面的复选框，然后点击“OK”。

4.现在Fiddler就是在监听https的请求和响应了。

阅读全文 »