Webstorm中使用正则替换文本

Webstorm中使用正则替换文本

需求

有这样一段代码:

var num = req.body.num;
var bankcard = req.body.bankcard2;
var pay_type = req.body.pay_type;

需要快速替换成如下格式:

var num = req.param.('num');
var bankcard = req.param.('bankcard2');
var pay_type = req.param.('pay_type');

分析

显然普通的替换方法做不到这样的效果,看来需要用到正则了,如果只是查找文本,这个正则很好写:

req.body.w+

但是替换的时候用正则怎么做呢?
因为使用 WebStorm 开发,所以去 WebStorm Help 文档里瞄一下,哈哈,万能的 WebStorm 果然支持正则替换。见文档:https://www.jetbrains.com/webstorm/help/find-and-replace-in-path.html

这里讲到了一个 back references 向后引用的概念,在替换文本中使用 $n 来表示 back references ,就可以实现动态替换。那 back references 究竟是什么呢,还是看示例吧。

示例

就上文中的需求,我们先写出查询的正则:

req.body.(w+)

这里用到 w+ 通配符来适配 req.body. 之后的不同内容,注意这里用括号()包起了 w+ ,括号的作用是定义一个 back references。
那么替换的正则是:

req.param.('$1')

就这样,我们使用 $1 来动态替换 (w+) 这个back references 匹配到的内容。

总结

  1. 正则替换不是所以编辑器都支持的,而且每个编辑器的支持方法都不一致,这里描述的方法只适用于 WebStorm ,理论上适用于 jetbrains 出品的其他编辑器如 IDEA PhpStorm PyCharm 等。

  2. 查询的时候顺便找到了 Notepad++ 的正则替换实现,有兴趣的瞄一下:http://www.crifan.com/files/doc/docbook/rec_soft_npp/release/htmls/npp_func_regex_replace.html

思想是什么

思想是什么

– 摘自阮一峰博客

什么是思想?

首先,思想就是观点。当你对一件事物有观点时,你就是有思想的。根据我的观察,在别人告诉他以前,大多数人其实都是没有观点的。观点越多且越接近本质,那么你的思想也越是丰富和深刻。
这里要注意两个问题:
(1)观点不是事实。
观点是基于事实之上的一种系统性判断和理解框架,事实是观点的基础。你了解和掌握的事实越多,就越容易做出自己的判断。(注意:这个命题既不是充分条件,也不是必要条件,只是在大多数情况下成立而已。)但是,事实本身不是观点。我们可以看到有这种人,他非常博学,但是没有思想。
(2)观点不一定是正确的。
错误的思想也是思想。观点既然是一种判断,那么当然有可能判断错误。不过,更多的情况是,很难判断某种思想是否正确,大多数思想都只是在一定的范围内是正确的。
因此,你可以问一下自己:你是否对大多数事物都有自己的观点,而且可以为这些观点辩护(defend),也就是可以说出支持这些看法的理由?
如果回答是肯定的,那么你就是有思想的。

世界上的所有观点,如果细分一下,无非有四个组成部分:

(1)事实。也就是客观的存在,是百分之百成立的,比如“太阳从东方升起”。
(2)前提。这是做出推断的依据,是不需要证明的公理,比如“两点之间直线最短”。很多前提都是价值判断。
(3)逻辑。也就是做出推理的规则,就好像体育比赛必须遵守规则一样,思想也有自己的逻辑规则。逻辑本质上就是数学,所以马克思会说:“任何学科只有到可以用数学表达的阶段,它才是完善的”。
(4)结论。也就是最后得到的观点。
因此,我们有这样一个简单的公式:

事实+前提+逻辑=观点

我做一个简单的分析示范。很多人说应该提高对高收入者的所得税,这个观点是怎么来的?
(1)“事实”是社会中收入分配不均,有人穷有人富;
(2)“前提”是缩小贫富差距对社会发展有好处。
(3)“逻辑”是提高所得税是缩小贫富差距的一种手段。
(4)“结论”就是前面的那个观点。

快速搭建一个监控服务

快速搭建一个监控服务

业务需要,要监控服务每个接口的访问速度和每个接口所花费的时间。同事推荐 statsd + graphite + docker 组合,花了点时间收集一下相关的信息,尝试在阿里云上把这个服务搭建起来。

整个服务的三个关键步骤:

运行服务(阿里云+docker)
发送数据(node)
收集展示数据(statsd + graphite)

一 安装运行服务:

需要的文档

在服务都安装好之后,需要在 sails 里安装 express 的中间件 node-statsd-client 用于发送数据。
怎么安装? sails 有文档 http://sailsjs.org/documentation/concepts/middleware

这里给个示例,修改 sails 项目下的 config/http.js 文件。
初始化:

1.var SDC = new require('statsd-client');
2.var statsdClient = new SDC({ host: '112.74.207.91', port: 8125, debug: false }).getChildClient('koala');

添加一个中间件,中间件过滤每个请求,这里做了个比较巧妙的事情,在中间件里替换了 res.end 方法,就可以在响应的时候发送数据了。

1.statsd_client: function (req, res, next) {
2. var startTime = new Date();
3. // Shadow end request
4. var end = res.end;
5. res.end = function () {
6. end.apply(res, arguments);
7. // Statistics the status code, especailly for 500, 404
8. statsdClient.increment('status_codes.' + res.statusCode);
9. var timeElapse = new Date() - startTime;
10. if (req.route && req.route.path) {
11. var path = req.route.path;
12. if (Object.prototype.toString.call(path) === '[object RegExp]') {
13. path = path.source;
14. }
15. if (path === "/") {
16. path = "root";
17. }
18. // Statistics the page hit count and time to render the page
19. var key = 'pages.' + req.method.toLowerCase() + '_' + path.replace(/:/g, "").replace(///, "").replace(///g, "_");
20. statsdClient.timing(key, timeElapse);
21. if (res.statusCode === 404) {
22. var key404 = '404.' + req.method.toLowerCase() + '_' + path.replace(/:/g, "").replace(///, "").replace(///g, "_");
23. statsdClient.increment(key404);
24. }
25. }
26. };
27. next();
28.},

上面的代码中一个发送了三个计数器

  • pages.*
  • statusCode.*
  • users.*

比较重要的方法是

1.statsdClient.timing(key, timeElapse);
2.
3.statsdClient.increment(key404);

发送数据是直接调用 statsd-client 包提供的方法。
这个两个方法是记录请求的响应时长和记录 404 状态的次数。

数据发送就搞定了。
接下来在 Graphite 的 dashboard 做几个统计,这里提供接口 api
查看过去一段时间内平均访问次数最高的10个接口:highestAverage(stats.timers.koala.pages.*.count,10)
查看过去一段时间内平均耗时最多的5个接口:highestAverage(stats.timers.koala.pages.*.mean,5)
一天内所有接口的访问次数:sumSeries(summarize(stats.timers.koala.pages.*.count,”1d”))

马克飞象流程图功能体验

马克飞象流程图功能体验

语法

马克飞象提供了流程图功能,所以就试着体验一下。写的时候要这样,过程式的写法,比较乱。

效果图

总结

写着挺累的,没有使用画图工具轻松。而且线的方向是无法控制的,会优先往右偏。
写简单的流程图的时候适用,复杂的还是老老实实用工具画好了截图吧。

好玩的 livereload。

好玩的 livereload。

livereload 工具可以自动监听项目文件的修改事件,配合浏览器插件(websocket),即时刷新浏览器页面,写 css 和 html 的绝佳利息,F5 救星。

Livereload的官网,它支持mac/linux/windows,同时还有chrome/firefox的浏览器插件。它对windows的支持比较差,很容易崩溃,而且是收费的。所以我们只需要用它的浏览器插件就可以了(免费的),然后再找一个免费的替代器换掉服务器端。

我选择的是:python-livereload,它是一个python程序,以命令行方式启动,可以跟livereload的浏览器插件通信,效果不错。注意最好从github中下载源代码安装,通过pip或easy_install安装也行,但是我本机使用 pip 安装会有问题,最后还是偷懒直接用 apt-get 方式安装了。

1.sudo apt-get install python-livereload

Chrome 的插件:
https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

使用方式如下:

1.cd myproject 
2.cd app
3.livereload (执行此命令就开始监听文件变化)
4.
5.然后启用浏览器的livereload插件即可。

参考文档:我的web开发最强组合:Play1+angularjs+bootstrap ++ (idea + livereload)

Babel 6 配置

Babel 6 配置

Babel 6 较之前版本有些变化,几个比较重要的点。

  1. npm package babel 已经不在使用了,分成了下列几个 package

    • babel-cli, 适用于命令行
    • babel-core, 包含了Node API
    • babel-polyfill, which when required, sets you up with a full ES2015-ish environment

    为了避免冲突,最好卸载之前的 package: babel, babel-core 等。
    安装 Babel 6
    $ npm install -g babel-cli

  2. babel 6 加入插件机制,默认不使用任何插件,将会直接输出原文。可以配置插件来翻译指定的特性,当然,Babel 也准备好了预设集合,如支持所有的es6语法的预设集合 es2015,安装此预设集:

    $ npm install babel-preset-es2015

    所有的插件列表:http://babeljs.io/docs/plugins/

安装好 Babel 和相应的插件之后,再做个简单的配置, Babel 提供了多种配置方式,详细的配置方式见文档:http://babeljs.io/docs/usage/options/。这里使用 .babelrc 配置文件的方式。
在项目根目录里添加 .babelrc 文件,内容如下:

{
"plugins": ["es2015"],
"ignore": [
"foo.js",
"bar/**/*.js"
]
}

在项目目录下运行命令:
$ babel script.js

搞定~