优雅的给动态添加的 DOM 元素添加监听器

故事的起因是因为有个美女遇到个问题,就是使用 jquery 添加新的元素,但是不能给这个元素绑定上事件。举个例子来说: $(“.btn”).on(‘click’, function(){ $(“#container”).append(‘<button type=”button” class=”btn”>+</button>’); }); 效果就是点击按钮生成一个新按钮。然后,我们也希望新添加的按钮也能绑定上这事件。作为一个 js 小白。我当然不知道怎么实现。所以就很傻逼的想了一个很 low 的办法。就是,在新添加的元素里加上 onclick 然后给他添加事件。如: function addBtn() { $(“#container”).append(‘<button type=”button” class=”btn” onclick=”addBtn()”>+</button>’); } $(“.btn”).on(‘click’, addBtn); 如你所见,非常,不优雅。因为将业务逻辑和展示层的 html 混在了一起。导致了逻辑的复杂。所以这边通过万能的文档,我发现了一个被遗弃的 jquery 方法,live,于是,我把 jquery 版本换成了1.7,然后测试了一发。发现是可以实现的。但是线上的版本是1.9,所以这个被废弃的方法是肯定不能采用的。 所以,办法也挺简单的,就是看 jquery 1.7 的源码,看看这个申请的 live 是如何实现的。源码如下: live: function( types, data, fn ) { jQuery( this.context ).on( types, this.selector, data, fn ); return…

我是如何给 vim 添加 markdown 实时预览功能

一切的一切都是源于同性交友网站:GITHUB,之前,我给自己写了一个简单的 markdown 预览插件,所以就没有去更新了。直到后来,有人找到我,希望能够添加实时预览功能,包括同步的滚动,做成类似于 Mac 下的 Mou 的效果。详细 issue 所以,我这边就闲里抽空把这个功能做了下。 首先就是吐槽下 Python 居然不能管理线程。这个确实挺蛋疼的。不能强行关闭线程。其次,是 VIM 插件开发,资料真的少的可怜。基本上 bing 和 google 到的资料大多都是如何使用别人的插件,而不是如何创造插件。 作为一个在兴趣驱动编码时喜欢造轮子的逗比,我就决定自己写了。 首先就是如何实时的拿到数据,并且不影响 VIM 的正常使用。这很自然的想到了线程和 Ajax。这就意味着,我需要实现一个最简单的 web 服务器,包含静态文件的读取和编辑内容的发送。这个的方案决定确实挺麻烦的。主要有以下几个思路: 直接在 web 服务器实现该功能,静态文件获取和最新编辑内容 生成 tmp.html,然后使用浏览器打开这个tmp.html 通过本地文件加载 js 和 css 然后访问服务器,获取最新数据 很明显,最为一个最优雅的实现方案,第一个绝对是首选。不过,考虑到之前插件的实现原理,通过后者可以最大限度的利用当前代码,同时,服务器端的代码量大幅度降低。所以,思考再三,决定采用第二种方式。虽然丑陋,但是可以最快速度完成该功能。 然后就是服务器的选型。因为是后台进行脚本启动,所以这个的可选余地变得非常大。考虑到我的绝活不是 python, 不是 php。所以一开始是准备使用 java 进行编写的。而且 java 中对线程的支持非常好。同时之前也有过写服务器的经验,但是,作为一个兴趣驱动的项目,我选择了之前编写第一版的 python。 最后就是如何做到同步滚动。这个一开始的思路就是锚点。但是,如何准确的插入锚点,就是一个比较大的问题。因为这个是要进行 markdown 解析的。解析之后的行数不一定对应解析前的行数。主要有如下几个思路: 直接在 markdown 解析库中加入锚点解析 通过特殊字符标定锚点,然后再返回的解析数据中进行替换 记录光标动作,发送状态信息,完全通过前端 js 实现…

PHP 调用 exec 执行中文命令的坑

写在之前 首先,我们的项目中有这么一个需求,就是需要在发送请求时,需要调用 java 写的一个加密库。所以不可避免的会使用到 php 的 exec 方法执行 shell 命令。 一切都很正常,直到,出现了中文。哎。具体的 case 如下: 样例代码: <?php $cmd = ‘java -jar sign-maker.jar mike messi’; exec($cmd, $ret, $out); var_dump($ret); $cmd = ‘java -jar sign-maker.jar 麦克 梅西’; exec($cmd, $ret, $out); var_dump($ret); 其中,sign-maker.jar 就是我们按照第三方的加密协议的一个签名包(虽然也是我写的),执行这段代码,我们可以得到如下的结果: php index.php array(1) { [0]=> string(80) “495cc9e9269265cc0e7d58940367976571a1c4fdb90bf842ee4ba703fb1a554abf0772218e29d3d8” } array(2) { [0]=> string(80) “495cc9e9269265cc0e7d58940367976571a1c4fdb90bf842ee4ba703fb1a554abf0772218e29d3d8” [1]=> string(80) “e442a87d369a1a3c610bb2d18bd38fdad3b52644ab0ef86a21b57a5d0d75cb8dbf0772218e29d3d8″…