冰山一角

l2tp vpn搭建总结(linode ubuntu)

berg — Sun, 20 Jun 2010 21:17:43 +0800

前段时间开始，公司的vpn开始不太好用了，因此我也逐步感觉到墙的力量。

恰好@Zealot有一个linode的vps，之前他搭了一个pptp的vpn，但是联通3g又不能使用pptp vpn，于是尝试自己捣鼓一个l2tp的vpn，断断续续尝试了几次，终于在今天成功了。

参考了很多网上的文章，发现网上的文章都没有涵盖到我碰到的种种问题，因此在这里针对我的案例，写一篇总结性的文章。

首先，按照apple4us的文章，安装一系列软件，写配置：

sudo aptitude install openswan

vim /etc/ipsec.conf

config setup
    nat_traversal=yes
    virtual_private=%v4:10.0.0.0/8,%v4:192.168.0.0/16,%v4:172.16.0.0/12
    oe=off
    protostack=netkey

conn L2TP-PSK-NAT
    rightsubnet=vhost:%priv
    also=L2TP-PSK-noNAT

conn L2TP-PSK-noNAT
    authby=secret
    pfs=no
    auto=add
    keyingtries=3
    rekey=no
    ikelifetime=8h
    keylife=1h
    type=transport
    left=222.222.222.222
    leftprotoport=17/1701
    right=%any
    rightprotoport=17/%any

注意，ipsec.conf对格式要求很严格，缩进一定要有。

vim /etc/ipsec.secrets

222.222.222.222 %any: PSK “fan1qiang”

这里的psk要解释一下，这个是你在连接l2tp vpn时，需要填写的secret。
此外，别忘记把222.222.222.222替换成你自己服务器的ip（一共两处）。继续：

for each in /proc/sys/net/ipv4/conf/*
do
echo 0 > $each/accept_redirects
echo 0 > $each/send_redirects
done

然后检查ipsec是否ok了

sudo ipsec verify

下面是我最终的结果：

Version check and ipsec on-path [OK]
Linux Openswan U2.4.12/K2.6.18.8-linode22 (netkey)
Checking for IPsec support in kernel [OK]
NETKEY detected, testing for disabled ICMP send_redirects [OK]
NETKEY detected, testing for disabled ICMP accept_redirects [OK]
Checking for RSA private key (/etc/ipsec.secrets) [DISABLED]
ipsec showhostkey: no default key in “/etc/ipsec.secrets”
Checking that pluto is running [OK]
Two or more interfaces found, checking IP forwarding [OK]
Checking NAT and MASQUERADEing
Checking for ‘ip’ command [OK]
Checking for ‘iptables’ command [OK]
Opportunistic Encryption Support [DISABLED]

其中需要注意两项：Checking for RSA private key和Opportunistic Encryption Support，第一项其实你大可不必管他，disable或者ok都行。如果你实在要解决，可以：

ipsec newhostkey –file /root/tmpkey
cat /root/tmpkey >> /etc/ipsec.secrets
rm /root/tmpkey

第二项DISABLED是正常状态。

出了问题不要被这两项迷惑，不是他们导致的。

接下来启动：

sudo /etc/init.d/ipsec restart

如果出现错误，按照他指出的行数自己看看。接下来是l2tpd。

sudo aptitude install xl2tpd

vim /etc/xl2tpd/xl2tpd.conf

[global]
ipsec saref = yes

[lns default]
ip range = 10.1.2.2-10.1.2.255
local ip = 10.1.2.1
;require chap = yes
refuse chap = yes
refuse pap = yes
require authentication = yes
ppp debug = yes
pppoptfile = /etc/ppp/options.xl2tpd
length bit = yes

然后安装、配置ppp：

sudo aptitude install ppp

vim /etc/ppp/options.xl2tpd

require-mschap-v2
ms-dns 208.67.222.222
ms-dns 208.67.220.220
asyncmap 0
auth
crtscts
lock
hide-password
modem
debug
name l2tpd
proxyarp
lcp-echo-interval 30
lcp-echo-failure 4

添加一个vpn用户：

vim /etc/ppp/chap-secrets

test l2tpd testpassword *

启动l2tpd：

sudo /etc/init.d/xl2tpd restart

设置iptables转发：

iptables –table nat –append POSTROUTING –jump MASQUERADE
echo 1 > /proc/sys/net/ipv4/ip_forward

修改包转发设置

for each in /proc/sys/net/ipv4/conf/*
do
echo 0 > $each/accept_redirects
echo 0 > $each/send_redirects
done

vi /etc/sysctl.conf
修改 net.ipv4.ip_forward = 1
sysctl –p

好了，如果一切顺利，你的l2tp应该装好了，尝试用iphone或者android连接一下。如果还有问题，请继续。

第一个问题是执行sudo /etc/init.d/xl2tpd restart时，无法看到执行状态，因此很多时候其实服务没有起来。你可以用ps aux | grep l2tp确认一下，如果发现的确没有这个进程，请使用

xl2tpd -D

开启debug模式启动。

如果你碰见了一些很莫名其妙的配置文件错误提示，比如：

parse_config: line 13: data ‘n parameters:’ occurs with no context

而实际上你这一行并没有错误，请检查一下/etc/xl2tpd/xl2tpd.conf 里面是不是有一行很长的注释，把这些注释分成多行或者删除。

第二个问题，如果你启动了xl2tpd，但是一连接iphone就提示“l2tp-vpn server did not respond”，或者android提示”challenge failed”，那请看看你的openswan 是不是 2.6.22或2.4.12：

dpkg -l | grep openswan

如果是，请重新编译安装：

sudo aptitude install libgmp3-dev gawk flex bison
wget http://www.openswan.org/download/openswan-2.6.24.tar.gz
tar xf openswan-2.6.24.tar.gz
cd openswan-2.6.24
make programs
sudo make install

如果你还有其他问题，欢迎在下面留言，我会尝试帮你解决。

参考文章：
https://apple4.us/2010/05/setting-up-l2tp-vpn-on-debian-ubuntu.html
http://b.gkp.cc/posts/setup-ipsec-l2tp-on-centos-55.html
http://suoluo.org/2010/04/4/ （上面三篇文章是全面介绍安装过程的）
http://lists.openswan.org/pipermail/users/2006-November/011029.html （介绍如何fix Checking for RSA private key）
http://lifegoo.pluskid.org/?p=65 （指出xl2tpd.conf的注释问题）

iphone上的网游：we rule

berg — Fri, 16 Apr 2010 11:19:12 +0800

最近一直在玩we rule，一个iphone上的网络游戏，app store中可以免费下载。

基本介绍

简单的说，这是一个让玩家建设和发展自己的王国，同时能和其他玩家进行互动的网游。

一开始的时候，玩家只有一个城堡和一点金钱，游戏有一个简单的任务系统，引导玩家开始建造农田，通过生产农作物赚钱、发展，建设民居获取税收，建设矿山等来生产物品获得收益。

王国是有等级的，可以通过建造店铺或者生产物品来获得经验值，然后升级。级别越高，王国能建造的东西越多，不但包括更多农作物，更多可以给王国带来收入的店铺，还包括各种装饰物，如树木、河流、雕像等等。

玩家可以按照自己的设想，打造属于自己的王国，比如我围着城堡建了一圈护城河，护城河内部有一些民居，护城河左边是农田，右边是很多裁缝店。

操作时间设定

不管是生产，还是建造，都是需要时间的。比如农作物，最短的是小麦，45秒就可以成熟，而也有成熟时间长达1天的豆子。因此玩家可以灵活按照自己的时间安排来种作物，因为不及时收获的农作物是会腐烂在农田里面的，这样就没有任何收入了。

时间设定是这样的小型网游最基本的要素，这样玩家的一次游戏过程不会太长，不容易厌烦，同时有一个时间限定后，玩家心理上不由自主的会想着这件事情，到时间回来看看。

巧妙的玩家共赢

稍微升几级，玩家将可以建造矿山、裁缝店这样的设施，这些东西本身是可以赚钱的，但是速度很慢，让收益最大化的方法是和其他好友进行交易，这样双方都能得到更大的利益：

某玩家的王国中有一个空闲的的店铺，他的follower就能在这里下订单，订单能给店铺的所有者一定的金币和经验，同时，下订单的玩家能得到店铺的产出物，他能用这些产出物“愉悦自己的子民”或者“建设城市”，也能得到一些经验值和金币。

因此，互相交易是一个只赚不亏的事情！相比开心农场的“偷菜”而言，这一招要高明的多了，玩家不会因为自己的店被人占用而有半点损失，他们会很乐意地添加好友，在论坛和blog上宣传自己。因为好友越多，自己王国里面的店铺的空闲率越低，收益也就越大。

看看一个订单完成的流程：

A玩家来到B玩家王国中，下订单
B玩家接受订单
若干小时后，物品生产完毕
B玩家将物品交给A玩家（如果订单完毕一段时间后，B玩家仍然没有进行此操作，这个订单将失效。）

很明显的可以看到，订单的完成需要两个玩家操作三次，这样也就增加了游戏的黏性，玩家会不时的上来看看，家里是否有新的订单，是否有物品已经生产完毕。

下面的图可以看到，我的裁缝店有一些订单已经生产完毕，还有一些新来的订单。

这时候，可能你想到了，我加很多很多好友，然后到他们家里去下订单，我就可以很快的升级了。但是其实we rule有个限制，如果一个玩家在外面下的订单过多，那他自己王国里的店铺将不能接受其他人的订单。让自己王国里的店铺空着显然不是什么好事，因此玩家在下订单的时候就会尽可能选择一些性价比高的店铺。

我的ID是 cnberg，如果你也玩这个游戏，欢迎加我为好友哦。

一些问题

最大的问题是游戏速度太慢，不排除有网络连接的因素，但是如果能减少一些不必要的loading或者能压缩传输数据，游戏体验将更流畅。很多时候我需要等上好几分钟才能进入游戏，甚至就直接放弃了。游戏稳定性也存在一些问题，经常出现服务器无法连接或者数据混乱的bug。

其次，游戏到25级以后就没有任何盼头了，因为那个时候将无法升级，没有更多建筑物可供建造。而事实上，我达到20级以后，就觉得游戏性大大降低了。

此外，在游戏的设定上也有一些问题，比如说税收在游戏中的作用太小，一个民居只能每三小时提供4个金币。

总结

现在iphone上类似spymaster和开心农场类的网络游戏激增。在移动设备上进行这类操作简单的游戏实在很方便，用户不需要一直打开游戏，因为服务器的消息能及时被用户收到（push服务或者后台进程），而且由于设备一直在身边，玩家也可以随时掏出设备玩几分钟，不像PC游戏需要开机、上网等一系列麻烦的操作，同时还能和手机特性结合达到PC上无法实现的效果，如重力感应操作，基于位置的玩法等等。

摩根斯坦利最近发布的报告称2015手机互联网将超过桌面，手机上的游戏一定也会在最近飞速发展，颠覆传统的游戏方式。

opera下的onload、onunload事件无法正确处理？

berg — Tue, 13 Apr 2010 11:24:22 +0800

今天，QA在测试JS框架的时候发现了一个问题：opera下不能绑定onunload事件，最新的opera 10.51也不行。

网上的解释千奇百怪，有说opera不支持unload事件的，有说使用beforeunload事件代替unload事件，还有的人说把通过js修改opera的history.navigationMode为’compatible’后就能正常支持这个事件了。

而按照我的测试，不管是按照window.unload绑定还是用addEventListener绑定的事件都无法在刷新、前进、后退，页面关闭，浏览器关闭时被执行。beforeunload事件表现相同。正在我怀疑opera彻底不支持unload事件时，恰好找到了bytes.com上的这篇文章。上面说的很清楚：

There is no solution because according to Opera developers and users this is not a bug. Opera maintains the runstate of scripts, so it’s as if we never left the page when we return back to it. According to Opera, onload should only fire when loading the page for the first time and onunload should fire when unloading the page completely, not when just leaving the page by pressing the back, forward or refresh button. Refresh is considered to be a reload, not an unload.

大意是说，opera开发人员和用户不认为这是一个bug，因此没有解决方案。opera会维护脚本的运行状态，因此当用户回到某页面的时候，页面会和离开的状态相同。onload只会在第一次打开页面的时候触发，而onunload只会在这个页面完全被unload时触发。而在用户使用后退，前进，刷新按钮重新打开这个页面时不会被触发。刷新是reload，而不是unload。

上面解释了unload为何不会被触发的原因。

继续测试，发现点击页面上的链接时，onunload事件会被正常触发。在加载一个其他页面的时候，这个页面会被unload掉（可以明显的看到进度条在加载），而使用前进后退切换页面时，在瞬间就被加载完毕，页面这是从内存中取得的。

最后，找到了opera官网上的这篇文章，上面有一段解释了opera对Fast history navigation的处理方法，对理解opera出现这样的结果也有帮助。

后来和CatChen讨论时，他提到了firefox有onpageshow和onpagehide事件，在firefox中可以用这个来专门处理前进后退的事件。

我找到了MDC上面关于firefox页面缓存的介绍，里面有关于onpageshow和onpagehide事件的解释，可惜这对事件不是DOM2标准定义的事件。在现代浏览器都逐渐开始做页面前进后退加速，保存表单和JS执行状态的时候，有这样一对事件对Web开发人员来说是很必要的。

博客迁移到nginx

berg — Fri, 02 Apr 2010 00:10:56 +0800

Nginx是一个高性能的HTTP服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 Nginx 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的。nginx采用epoll模型来进行网络IO，效率比apache的select模型高出很多。

一年前，服务器就使用Nginx做为最前端的webserver，主要是用来做静态文件的缓存，而php还是通过apache在运行。有文为证。

打算在近期逐步脱离apache，完全使用nginx，上周末参照张宴的文章搭建好了环境。

今天花了一点时间，把整个撞击思想博客的后端改成了Nginx+php-fpm，过程还算顺利。配置文件参考了wordpress mu论坛中的这篇帖子。

By the way，最近一周使用tornado+mongodb开发了部门内部的一个小系统，感觉好极了，一路编码很顺畅，学习成本也很低。而由于NOSQL的存在，数据库也可以很方便的应对变化。

嗯，我手里有多了几把锤子。

傲游、世界之窗下的getBoundingClientRect问题

berg — Fri, 12 Mar 2010 02:28:31 +0800

问题

今天，同事爆料suggeestion在傲游、世界之窗下，使用滚轮缩放后，suggestion的框和input不能对齐，会出现类似下面的效果（示意图）：

页面是quirk模式，如果换用standard模式，就不会有问题。

追踪

追查发现，发现计算input位置一个库函数得到的结果不准确。对比yui和jquery的代码后，发现处理逻辑完全一致：如果是IE系列，直接使用getBoundingClientRect得到元素的top和left，之后再看是否为qurik模式，决定是否要减去两个像素。

问题就很明确了，是getBoundingClientRect()返回值与实际值不一致。此外，发现一个现象，如果放大屏幕，那结果偏小，缩小屏幕，结果偏大。于是尝试使用getBoundingClientRect()的返回值除以放大比率，果然这样就匹配了。

解决

首先，建议页面全部使用standard模式。

由于不知道如何使用傲游或者世界之窗的方法来直接获得缩放比率，同时担心在不同的IE外壳下会有兼容性问题，于是写了下面这个函数，很trick，实在不行的时候可以考虑用用：

function getIEShellZoomRate (){ var div = document.createElement("DIV"); div.style.position = "absolute"; div.style.top = "100px"; document.body.appendChild(div); var divBox = (div.getBoundingClientRect()).top; if(!browser.isStrict){ //fix 2px in IE while in quirksmode divBox -= 2; } document.body.removeChild(div); return parseFloat(divBox/100); }

其他

初步判断，原因应该是getBoundingClientRect()返回值是真实肉眼看到的像素值，而如果把这个像素值设置到元素的top和left属性后，实际值会随着缩放效果放大或缩小，造成两者不一致。

此外，在傲游中，页面加载完毕后，需要闪烁一下才能到缩放后的效果，傲游可能是在获得IE的渲染结果以后，再自行放大，如果使用了standard模式，重新绘制的区域是没有缩放效果的。

IE外壳的确方便了最终用户使用浏览器，但是也无形中让用户更依赖一个本来就很破旧的浏览器，不愿意升级到浏览器的更新版本。

珍爱生命，远离IE；拒绝毒品，抵抗浏览器外壳。

添加第一个功能按钮 – 在线编辑器(3)

berg — Tue, 29 Dec 2009 21:49:53 +0800

在实现了在网页中插入一个可编辑区域以后，用户已经可以在这个区域中操作富文本内容。但是做为一个真正的编辑器是要有工具栏的，用户能通过工具栏上的按钮方便的对选中的文本进行操作。本文将介绍如何添加编辑器功能按钮。

加粗按钮

首先，我们在页面中添加工具条的HTML代码：

<div id="editor_toolbar">
    <input id="editor_toolbar_bold" type="button" value="B"
style="font-weight:bold;" onclick="editorInstance.bold()" />
</div>

工具条中包含一个按钮，在按钮被按下时，调用editorInstance的bold()方法。期望的结果是：在编辑框内，选中的区域将被加粗。

加粗操作

接下来需要实现加粗功能，在此之前，需要对execCommand()有一定了解

execCommand

execCommand浏览器自带的一个接口，通过它，我们可以对document、selection、或者一个给定的range进行操作。如加粗、斜体等。

语法：

bSuccess = object.execCommand(sCommand [, bUserInterface] [, vValue])
 
sCommand
    String，指定需要执行的命令，如Bold
 
bUserInterface
    Boolean，可选，决定是否显示用户界面，如弹出一个提示框让用户输入，默认为false。
 
vValue
    Variant，可选，一个字符串、数字、或者其他需要assign的值

一般来说，第二个参数会传入false，因为编辑器本身会接管用户界面，第三个参数按照实际需要传入。这样就可以实现对选区的加粗：

document.execCommand("Bold", false, false);

代码实现

只需调用浏览器的execCommand方法，选区就被加粗了。

editor.Editor.prototype.bold = function(){
    this.document.execCommand("Bold",false,false);
};

简单极了！但是总觉得少了什么？是的，没有状态反射。不论用户选中的是否一段加粗的文本，按钮只有一个状态，用户无法感知当前选中文本的状态。

状态反射

添加状态反射的思路是：在选区发生变化的时候，编辑器核心派发一个事件，在此事件发生时判断此时选区的状态，根据状态设置按钮样式。

为何不由编辑器核心直接设置按钮样式呢？这是因为通过事件通讯能最大程度的降低模块和核心之间的耦合，也是模块可插拔的基础。

监听选区变化

造成选区发生变化的根源是鼠标点击或者键盘击键。因此，通过监听onkeydown和onmouseup事件就可以较粗略的得知选区变化。其实，此处将成为编辑器复杂后的第一个性能瓶颈，具体优化办法今后将具体描述。

事件机制

在本示例中，我实现了一个很简单的事件机制，外部模块通过 addEventListener 方法绑定方法到指定的事件，编辑器可以通过 dispatchEvent 方法派发指定的事件。具体代码见文末示例，不再赘述。

queryCommandState

在获得选区变化信息，并且能成功派发事件后，就需要使用浏览器提供的queryCommandState方法来获知选区状态了。

语法：

bDone = object.queryCommandState(sCmdID)

其中的sCmdID是命令标识符，和execCommand接受的第一个参数是相同的。

于是，只需使用：

editor.document.queryCommandState("Bold");

就可以获得当前选区是否处于加粗状态了。

好了，加粗按钮到此就完成了，大家可以看看示例，只在上次示例的基础上新增了60行代码。

浏览器差异

最后不得不提的是浏览器差异。

execCommand和queryCommandState各个浏览器支持的程度相去甚远，ppk大神有一个execCommand浏览器支持程度的详细表格：execCommand Compatibility。正是由于这些浏览器的差异，可能会造成一些在A浏览器下编辑好的内容，在B浏览器下无法修改，或者状态无法反射。

因此，一些成熟的编辑器都会重写这些命令和查询方法，以达到浏览器之间表现一致的目的。做的最好的当属ckeditor

小结

本文完成了加粗按钮，一个按钮一般包括两个部分，设置选区状态，反射选区状态。可以使用浏览器的接口 execCommand 和 queryCommandState 来简单实现。

通过前几篇文章，大家应该对编辑器的基本知识有了一定了解了，下一篇文章开始，我将和大家一起分析编辑器的需求，首先会从功能层面开始。本文是在线编辑器系列文章的第三篇，在这个系列文章中，我会逐步深入和大家分享编辑器开发过程中的奥妙和各种奇怪的问题。如果你对我的文章感兴趣，欢迎订阅我的博客及时收到更新。

得到一个可编辑区域 – 在线编辑器(2)

berg — Fri, 25 Dec 2009 17:57:44 +0800

让一个区域可编辑是实现编辑器最基础的内容之一。

在应用场景中，编辑器的初始状态，要么是从一个空的编辑器（新建文档），要么是从一个已经有内容的编辑器（编辑文档），因此设计这样一个接口：

var editorInstance = editor.create(document.getElementById("editor_source"));
document.getElementById("editor_wrapper").innerHTML = editorInstance.render();

对应的HTML：

<div id="editor_source">
    <h2>在线编辑器</h2>
</div>
<div id="editor_wrapper">
</div>

调用者创建编辑器，然后将编辑器放在自己希望的位置上，这样的实现对调用者的限制最小，而create方法内部，可以通过实例化一个Editor类来实现多例。此时，页面的加载流程是：

调用render()方法返回编辑器的html代码
将html代码插入指定位置
让编辑器的iframe可编辑

render()方法很简单，返回一段拼接好的HTML字符串，供用户插入到任何需要的地方。唯一要做的是在返回之前调用checkIframeAvailable()方法.

checkIframeAvailable()使用setTimeout轮询iframe是否被用户加入到dom中，一旦被加入，通过makeEditable()方法令其中的iframe进入编辑状态。

makeEditable()中，需要对IE和非IE进行分别处理，在IE通过

document.body.contentEditable = true

进入编辑状态，其他w3c标准兼容的浏览器则是

document.designMode = "on"

进入编辑状态之后，还有一些其他的事情要做，为了在firefox和webkit浏览器下和IE通过execCommand()产生的代码尽量一样，需要设置styleWithCSS或者useCSS两个command的值为false。另外，在firefox 2下，在创建iframe后，无法立即读取editor.document.body，需要使用setTimeout在下一个时间片读取。

这样，通过寥寥几十行代码，一个最基础的编辑器框就完成了，请看最终示例。你可以从外面粘贴一些带有格式的文本进入编辑器看看效果。

本文是在线编辑器系列文章的第二篇，在这个系列文章中，我会逐步深入和大家分享编辑器开发过程中的奥妙和各种奇怪的问题。下一篇文章将介绍如何给编辑器添加按钮操作，如果你对我的文章感兴趣，欢迎从页面右边订阅我的博客及时收到更新。

历史、现状和目标 – 在线编辑器(1)

berg — Wed, 23 Dec 2009 08:10:07 +0800

关于本系列文章

计划暂时是这样，首先介绍一些历史、知识背景，然后详细分析现状和需求，开始设计一个可扩展，低耦合的编辑器，最后针对一些难点问题进行单个分析。

历史、现状

起初，世界上的浏览器本没有编辑器功能。到了IE4.0 (1997年)，微软提供了document.selection，利用这个对象，前端开发人员可以让一个iframe进入编辑状态，里面可以输入富文本内容，并且能通过程序添加复杂的编辑操作。那个时候还没有W3C的相关规范，这个selection对象以及两种选区类型（textRange和controlRange）都是微软自己实现的。

三年后，有了W3C的相关规范(2000年)，这个规范和IE的实现完全不同，firefox等一干浏览器陆续根据规范实现了自己的selection和Range对象。

前端工程师的悲剧就这样酿成了，有两套截然不同的方式来处理选区(selection)，不仅仅如此，对execCommand()方法的支持也大相径庭，一个相同的命令在不同的浏览器下执行会出现不同的效果。最要命的，浏览器还经常会有一些诡异的问题，比如在某些时候对选区的不当操作会导致IE直接崩溃等。

但是在线编辑器的使用场景相当广泛：写blog、论坛发帖、淘宝卖东西、在线聊天等应用场景都需要使用编辑器，他们对编辑器的要求各不相同。编辑器已经成为了一个基础件，几乎所有的互联网公司都需要用到。

后来出现了一些开源编辑器，比较出名的有：ckeditor（原来叫fckeditor）， tinymce，eWebEditor等，最近，淘宝也开源了他们的kissy编辑器（功能尚不完善）。但是开源编辑器都各有不足，ckeditor足够强大，重写了浏览器的所有操作。但是模块之间的耦合性很高（3.0有所改善，但仍然不够），体积过于庞大，其他的一些编辑器则要么bug太多，功能不全，要么不方便二次开发。另外，一些对编辑器要求很高的服务，像zoho、Google docs等等，都带有一个很强大的编辑器。

目标

一个优秀的编辑器，首先要尽量解决浏览器之间的差异，在不同的浏览器下表现一致。

另外，为了让编辑器在各种不同环境下适应不同的需求，尤其是二次开发的需求，这个编辑器还应该是“通用”、“可扩展”、“低耦合”的。

具体的设计思路在后面我会专门撰文说明，首先的这几篇文章，是让一些没有接触过编辑器开发的童鞋了解一些基础知识。

本文是在线编辑器系列文章的第一篇，在这个系列文章中，我会逐步深入和大家分享编辑器开发过程中的奥妙和各种奇怪的问题。下一篇文章将介绍如何拥有一个可编辑区域，如果你对我的文章感兴趣，欢迎从页面右边订阅我的博客及时收到更新。

善用分布式版本管理系统管理个人代码

berg — Sun, 13 Dec 2009 23:03:37 +0800

大多数人都知道或者善用多种版本管理系统，传统集中式版本管理系统有CVS、SVN等，后来，出现了一些分布式管理系统，如GIT、mercurial等。几乎所有有开发工作的公司，都会选择一个版本管理系统，并且制定一些规范来管理代码，道理很简单，使用版本管理系统能在多人开发，跟进bug，追查问题方面减少很多管理和沟通的成本。

但是，我觉得个人的代码，包括一些软件配置文件，完全可以使用分布式版本管理系统来管理，可以让我们减轻很多麻烦。

使用传统的集中式版本控制软件来管理，好处如下：

不用担心因为无意的错误修改，删除而丢失过去的代码
可以随时查看历史情况，你就不用为“xx功能、yy修改到底是什么时候加进来的，为什么要加”这类事情而挠破头皮了
可以进行分支开发，比如说一个功能你不是很确定能否实现，拉一个分支开发就是了

更进一步，使用分布式的版本控制还有如下好处：

在本地就有版本仓库，你可以在任何时候进行ci和roolback，无需联网
超级快速的分支切换
方便的和他人（其他机器）共享代码，一个push，或者pull，就能快速的同步修改

下面我举几个例子来让大家感受一下善用分布式版本管理的好处。

保证多台机器上的配置文件统一

我们有很多很多配置文件，尤其是linux下。vim配置，apache站点设置，桌面的配置，pidgin的账号设置等等。
但是如果有多台计算机，如果两台机器上配置不统一，用起来不顺手，更可能会带来麻烦，我们需要找到这些配置文件，并且拷贝一份最新的到当前机器，但是如果两边都有修改，就可能会丢失修改，或者需要手动merge。
过去可能用人使用过rsync来同步文件，能解决部分问题，但是如果使用分布式版本管理系统，在每台机器上都有一个独立的代码仓库，用这来管理配置文件再方便不过了！

首先，我们现在一台拥有最新版本配置文件的机器上初始化一个版本库

cd ~/
hg init
hg add .vimrc .screenrc .fvwm #添加所有你关注的配置文件

然后，一旦有新机器需要使用这个配置，clone一份即可

cd ~/
hg clone ssh://berg@lastPC://home/berg/
hg up

如果在任何一台机器上有修改，只需要ci到当前机器，并且到其他机器上pull这份修改。

hg ci
ssh berg@anotherPC://home/berg/

我们不需要关心代码的合并，也不需要关心配置文件的具体名称和位置（在linux下面，所有的配置都是隐藏文件），一切细节都交给mercurial来管理。

使用中心服务器

分布式管理原则上是没有一个强制的中心服务器，但是如果我们在管理的规则中加上中心服务器，在某些时候就能避免一些尴尬的发生。

举一个例子，假设我有三个开发环境，一台在公司，一台在家里，还有一台服务器。在公司时，我家里的机器是离线的，在家里则反过来。于是我白天在公司开发完毕后，想在家里获得最新的版本，最简单的办法就是在服务器上架设一个中心版本库，下班时，push代码到服务器上，回家就可以直接pull了。

使用中心服务器可以避免在需要开发时，发现最新版本所在计算机不在身边，并且处于离线状态的尴尬。

灵活的分支开发

不要以为分支功能在小项目中就毫无用处，有的时候，善用分支可以减少很多麻烦。而集中的版本控制系统处理分支很麻烦，让人避退三舍，可是到了分布式版本控制这里，分支变得很简单，看看下面的例子。

我在开发一个项目时，遇到了一个较大的修改，涉及面较广。
如果直接在主干上开发，如果在开发过程中发现了bug，或者其他临时插入的想法，我有两种选择：

直接在线上修改，或者重新clone一份到本地的其他目录进行开发
把“projectA”这个项目做为一个分支在本地开发

两种好处的优劣是很明显的，第一种，我要么需要冒线上修改的风险，要么需要在本地配置另外一套环境；而第二种，我只需要在碰到其他问题的时候，将分支切换回去就好了。下面是命令示例：

首先，将本地仓库的当前branch设置成项目A的名称：projectA

hg branch projectA

我进行projectA分支的开发，如果在开发的过程中，我需要切换到原来的分支：

hg ci -m "projectA commit"
 
hg up default #切换到主干

开发完毕后提交并且push到线上：

hg ci -m "modified something"
 
hg push

接下来我又能迅速的切换回原来开发到原来开发到一半的uploadify分支

hg up projectA

分布式版本管理的好处一下就体现出来了，我可以在本地迅速的切换分支，分支建立的成本也很低。这样能让我们更灵活的应对需求

小结

好了，本文就写到这里。小结一下，使用分布式版本管理系统管理个人mini项目、软件配置文件，能给开发和管理带来很大的便利，使用中心版本仓库能避免机器离线导致无法获取最新代码的问题，善用分支能让开发者更灵活的应对需求。

看了本文后，是否你对分布式管理系统也充满了兴趣呢？或者你有一些更好的实践？欢迎在下面留言共同探讨。

在javascript编程中灵活使用try-catch

berg — Sat, 05 Dec 2009 20:40:31 +0800

上周，在分享家的qq交流群里，经常有人向我反馈不能下载东西。于是直接联系了一个用户，发现他的浏览器报出pageTracker对象不存在错误。

问题很显然了，由于我在下载链接的onmousedown事件中添加了Event统计，如果用户的Google Analytics代码没有加载成功（显然是万恶的教育网造成的），那么就会报出这样错误。

请看原来的代码片段：

function analytics(category, action, label, value){
 
    pageTracker._trackEvent(category, action, label, value);
 
}

修改一下，加上try-catch屏蔽这个错误：

function analytics(category, action, label, value){
 
    try{
 
        pageTracker._trackEvent(category, action, label, value);
 
    }catch(e){}
 
}

用try-catch来屏蔽浏览器错误是一个Javascript编程中很常用的一个技巧，灵活使用可以给开发者减少很多麻烦，下面再举一例。

最近，我在开发一个通用的所见即所得编辑器。某些时候，程序需要记录住当前状态的节点，给后续程序处理。但麻烦来了，用户如果持续的在进行编辑动作，在程序后续处理时，节点可能已经不在DOM树中了。

在IE下，如果你调用一个不存在的文本节点(nodeType == 3)的任何属性或者方法，浏览器直接报错。根本找不到能判断这个节点是否存于DOM树中的方法。于是有了如下代码：

try{
 
    if(ele.ownerDocument != editor.document)
        return false;
}catch(e){
    return false;
}

上面的代码很好懂，首先判断这个节点是不是在编辑器中，如果不是，返回false；如果在过程中出现了错误，也返回false。

关于try-catch的故事就说到这里，最后要提醒大家，try-cacth会影响javascript的性功能，因此不应该在追求性能的环境中使用，尤其是一些基础方法或者会被多次调用的方法中。
下一篇文章，我将使用一个更好的办法来解决文首提到的Google Analytics报错的问题。欢迎你订阅我的博客，在第一时间获得更新。