博客园_每天学习一点点，每天进步一点点

编程：是一门艺术(转)

2012-02-22T06:00:00Z

摘要：Knuth在他的多卷书《计算机编程艺术》中向我们展示了计算机编程的技巧和艺术性，并在其图灵奖演说中论述了计算机编程和艺术的关系。这篇文章受Knuth著作的启发，进一步阐述为什么计算机编程应该是一门艺术并通过代码展示艺术的主要表现形式。

图片来源：accidentally in code

1. 引言

"(program(computers) == *art) ? so : what"
“只有大约5%的程序员能够在编写代码时创造出艺术。其他95%一定是为了取得成功的科学家，不是艺术家。”

谈及“艺术”，人们自然会联想到“美”、“技艺”、“灵感”等词，但很少会把它和“计算机编程”这听起来似乎无趣的词联系在一起。而Donald Knuth，《计算机编程的艺术》多卷书的作者，通过他的著作，成功地展现了计算机编程的艺术。随后他又在图灵奖演说[1]中对计算机编程的艺术做了科学地论述和诠释。他不是第一个这么做的人，但无疑他是最成功的一个。Guido van Rossum，Python的设计者，如是说：

“我同意Knuth对‘艺术’一词的定义（或使用）。对于我来说，它和创造性联系十分紧密，而这对于我的工作非常重要。如果（计算机编程）其中没有艺术，它将没有任何乐趣，而我也不会在30年之后仍然从事它。”

编写优美的程序需要灵感和高超的技巧，就像诗人写诗，画家作画，建筑师构筑，充满了乐趣、挑战和美。优雅的程序会像诗歌一样耐人寻味，像名画那样大开眼界，像教堂一样堂皇华丽。所以，计算机编程也同样是一门艺术，程序员就是创造这种艺术的艺术家。

2. 编程之美

什么样的程序才是美的程序？这个问题似乎没有完整的答案。一个很酷的Demo或一个很炫的视频游戏都能让我们赞叹不已。Doom和Half Life可以说把3D技术推向了极至，这种程序总能给人一种视觉上的美，就像画家手中的美丽油画，只是程序员们的画布在电脑屏幕上，画笔是键盘。Linux也是一种美，一种开放的美，从Unix那里继承来的优雅的设计，强大的可移植性，丰富的工具，这让它看起来像优秀建筑师们设计的一座富丽堂皇的教堂。这些美是显而易见的。还有一种美，隐藏在程序背后，流动于源代码之中。什么又是美的代码呢？可能它们一看上去就很美。这里有一个惊人的宏定义的C代码集合[2]：允许程序建立常量，使它们看上去像是屏幕上的图形！程序的自描述能力大大加强！

#define X )*2+1
#define _ )*2
#define s ((((((((((((((((0
static unsigned short stopwatch[] =
{
s _ _ _ _ _ X X X X X _ _ _ X X _ ,
s _ _ _ X X X X X X X X X _ X X X ,
s _ _ X X X _ _ _ _ _ X X X _ X X ,
s _ X X _ _ _ _ _ _ _ _ _ X X _ _ ,
s _ X X _ _ _ _ _ _ _ _ _ X X _ _ ,
s X X _ _ _ _ _ _ _ _ _ _ _ X X _ ,
s X X _ _ _ _ _ _ _ _ _ _ _ X X _ ,
s X X _ X X X X X _ _ _ _ _ X X _ ,
s X X _ _ _ _ _ X _ _ _ _ _ X X _ ,
s X X _ _ _ _ _ X _ _ _ _ _ X X _ ,
s _ X X _ _ _ _ X _ _ _ _ X X _ _ ,
s _ X X _ _ _ _ X _ _ _ _ X X _ _ ,
s _ _ X X X _ _ _ _ _ X X X _ _ _ ,
s _ _ _ X X X X X X X X X _ _ _ _ ,
s _ _ _ _ _ X X X X X _ _ _ _ _ _ ,
s _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
};

这种只能在Usenet或混乱C代码竞赛中才能见到的代码虽然没有多少实际用处，但它的确能让我们感受到代码 —— 一堆有规则的符号 —— 也能创造出视觉上的美。也可能是程序使用的技巧 —— 算法很美，就像汉诺塔程序，快速排序程序，自然而然地使用递归让它们看起来很紧凑，易读，这当然也是一种美，是只有程序员才能体会到的美。还有一种美，深藏在代码之后，是程序的设计思想之美，一种需要领悟的美。Unix带给我们的不仅是它的强大功能，还有它那深邃的设计哲学[3]：

“小巧就是美的。”（Small is beautiful.）
“让每个程序都擅长做一件事。”（Make each program do one thing well. ）
“一切都是文件。”（Everything is a file.）
“沉默是金。”（Silence is golden.）
“让操作系统内核小而轻巧。”（Make operating system kernels small and lightweight.）

这些思想在Unix设计中不失为黄金法则。这种美将穿越时空，千古流传，让Unix不仅仅是一个优秀的操作系统，而成为一门计算机领域的哲学。

人们都喜欢美的东西，程序员们更是珍视美的程序，我们把那些创造美好程序的人尊称为“黑客”。 Paul Graham认为黑客和画家很相似[4]：

黑客和画家的共同之处是，他们都是创造者。和作曲家，建筑师，作家一样，黑客和画家尝试去做的也是创造好的东西。他们本身并不做研究，但是如果在创造好东西的过程中发现了一些新的技术，那就更好了。

好的画家是艺术家，那么好的程序员——黑客——也是艺术家。这也就不难理解为什么很多Unix内核黑客都留着艺术家式的络腮胡了。

3. 编程之巧

灵巧的程序像含蓄的诗歌，需要仔细领悟，用心去体会，茅塞顿开后方能回味无穷。真乃“会当临绝顶，一览众山小”！同样是求pi，但是只有简单的四行C代码却能打印出pi的前800位的程序定会让我们大开眼界[5]：

int a=10000,b,c=2800,d,e,f[2801],g;
main(){
for(;b-c;)f[b++]=a/5;
for(;d=0,g=c*2;c-=14,printf("%.4d",e+d/a),e=d%a)
for(b=c;d+=f[b]*a,f[b]=d%--g,d/=g--,--b;d*=b);
}

黑客们不会墨守陈规，他们不断地创新，寻找更巧的方法来解决同样的问题。曾经流行编写这样一种程序，它能够打印它自己的全部代码。程序员们努力寻找最短的这种程序。这虽然没多大实际用处，但是充满了挑战性，黑客们把这当作乐趣。看看下面的程序[6]是多么怪异。

char *f="char *f= %c%s%c;main(){printf(f,34,f,34,10);} %c";
main(){printf(f,34,f,34,10);}

计算机编程吸引人的很大一部分在于它需要高超的技巧，也正是这些技巧才使我们看到了美，从中得到了乐趣。而且，我发现，当限制增加时，技巧将会更高，乐趣也会随之增加。来写这样一段程序，让它在屏幕上打印1~1000之间的数字。这对于一个新手来说也是小菜一碟，一个for 循环就搞定。好，我们加一个限制，不许使用任何循环。这时你得动一番脑筋了，不过你还是会想到用递归可以完成。不错，我们再加一个限制，也不许用递归。这可能把你难住了，你可能会认为不可能有这样的程序，那看看下面的程序吧：

#include <stdio.h>
#define A(x) x;x;x;x;x;x;x;x;x;x;
int main (void)
{
int n = 1;
A(A(A(printf ("%d ", n++))));
return 0;
}

既没有用循环，也没有用递归，而是使用了宏！我们常常惊讶于世界各地著名的Warez组织推出的64k的3D动画，那么小的程序，往往有难以想象的效果。它们把64k的限制和汇编的威力运用到了极限，这种技术让人叹为观止。64k似乎并没有限制住其艺术性，反而起了促进作用。并且，当你对系统有足够的了解时，乐趣将会更多。因为你可以使用技巧和系统开玩笑了，欺骗它，作弄它，甚至攻击它。看下面的程序：

void main() {
int x;
x = 0;
x = 1;
printf("%dn",x);
}

想一想，如何才能让程序跳过“x=1;”这一句而在屏幕上打印0？如果你对系统堆栈了解的话，你可能会给出类似下面的程序[7]：

void function(int a, int b, int c) {
char buffer1[5];
char buffer2[10];
int *ret;

ret = buffer1 + 12;
(*ret) += 8;
}

void main() {
int x;

x = 0;
function(1,2,3);
x = 1;
printf("%dn",x);
}

它利用了调用函数时堆栈的变化，改变函数的返回地址，跳过了“x=1;”这一句而直接执行下面的printf！它成功的欺骗了系统！如果把返回地址改成你预先放置的一段代码的首地址，那么你将会劫持系统，让它运行你的那段代码。如果那段代码足够巧，你将能获得系统的完全控制权！这也是缓冲区溢出的基本原理。我想，这种技巧将会让你兴奋不已，丝毫不亚于陶醉在自己诗里的诗人。我们已经看到：巧妙产生美，并与之形成艺术的雏形。

4. 编程之乐

计算机给人的乐趣在于，如果你有什么好的想法，你可以马上实验去得到结果。当然，你可能不会立刻得到正确答案，而必须坐下来，盯着电脑屏幕，苦思冥想求解问题的有效方法，通过不断的尝试去验证你的结果。可以通过找到正确的方法，使问题突然消失，也可以换一个角度，突然灵光闪现：原来是这样！

编程是对创造力的训练，好的程序员不会循规蹈矩，不会使用平庸的方法去解决问题，而是根据自己的见解去寻找更简单的方法，因为他们能看到隐藏在问题背后的实质。然后他们会写出全新而漂亮的程序去验证他们的方法。“不过还是很难说清楚，闭门苦思冥想地要找到解决某个问题的漂亮答案，为什么竟会有如此巨大的魅力。但是，你要是曾经有过找到更好方法的经历，你就会明白，这简直是无以伦比的感觉。”[8]这种感觉能让我们快乐得像一个孩子，乐不知疲。

这种“无以伦比”的感觉，流动在程序员体内，让程序员们为之痴迷，疯狂。而痴迷的程序员从他艺术性的创造中得到了难以言传的乐趣，并让为之上瘾。 Linux之父在他的传记[8]中这样谈及他所体会的编程的乐趣：

编程给人带来最初的兴奋很好解释：那就是通过编程你可以支配一台计算机，你叫计算机做什么，它就做什么，永远准确无误，而且毫无怨言。这本身就很有意思。
它比下棋之类的游戏更有乐趣得多，因为它可以由你自己来制定游戏规则。而你制定什么样的规则，也就会导出与此规则相符合的结果。
在电脑世界中，你就是创世者，你对所发生的一切拥有最终的控制。如果你功力深厚，你可以是上帝——在一个较小的层面上。

无疑，乐在其中，外行人永远体会不到，毕竟“子非鱼安知鱼之乐”。无穷无尽的乐趣让程序员们模糊地体会到了作为艺术家的快乐，并且开始享受他们的工作。

5. 结论

Rob Pike曾悲观地叹息：“那种艺术消失了。”[9]但是，我想当他看到诸如《汇编语言的艺术》和《Unix编程艺术》之类的书时，他也会高兴。这种艺术并没有消失，而且还会流传下去。我们不应该因“为艺术而艺术”而感到不好意思。正如Knuth所言[1]：

“我们已经看到，计算机编程是一门艺术，因为它把积累的知识应用于世界，因为它需要技巧和灵巧，尤其是因为它创造出了美的目标。模糊地意识到自己是一个艺术家的程序员将会享受他所做的工作，而且将会把它做得更好。”

或许，我们应该为了“艺术”的圣杯，举起我们的双刃剑打斗一番。但是，比起剑来，我更喜欢犁头，我本人。

6. 致谢

特别感谢王亚刚老师，他能不厌其烦地阅读此文并给我提出宝贵的意见，没有他的指点我不可能完成这篇论文。

参考文献

[1]DonaldE. Knuth, Programming As An Art, ACM Turing Award lecture,1974.
[2]Peter van der Liden, Expert C Programming,Prentice Hall, 1994.
[3]Mike Gancarz, Linux and the UnixPhilosophy, Digital Press, 2003.
[4]Paul Graham, Hackersand Painters, O'Reilly, 2004.
[5]International Obfuscated CCode Contest, http://www.ioccc.org.
[6]Eric S. Raymond, JargonFile, http://catb.org/jargon/html/index.html.
[7]Aleph One,Smashing The Stack For Fun And Profit,http://insecure.org/stf/smashstack.html.
[8]Linus Torvalds andDavid Diamond, Just for fun, Harper Business, 2001.
[9]RobPike,　SystemsSoftware Research Is Irrelevant,http://herpolhode.com/rob/utah2000.pdf, 2000.

http://kb.cnblogs.com/page/132089/

本文链接

正则表达式30分钟入门教程 (转)

2012-01-19T03:46:00Z

http://www.cnblogs.com/deerchao/archive/2006/08/24/zhengzhe30fengzhongjiaocheng.html

来园子之前写的一篇正则表达式教程，部分翻译自codeproject的The 30 Minute Regex Tutorial。

由于评论里有过长的URL,所以本页排版比较混乱,推荐你到原处查看,看完了如果有问题,再到这里来提出.

一些要说的话：

如果你没有正则表达式的基础，请跟着教程“一步步来”。请不要大概地扫两眼就说看不懂——以这种态度我写成什么样你也看不懂。当我告诉你这是“30分钟入门教程”时，请不要试图在30秒内入门。

事实是，我身边有个才接触电脑，对操作都不是很熟练的人通过自己学习这篇教程，最后都能在文章采集系统中使用正则表达式完成任务。而且，他写的表达式中，还使用了“零宽断言”等“高级”技术。

所以，如果你能具体地说明你的问题，我很愿意帮助你。但是如果你概括地说看不懂，那不是我的问题。
欢迎转载，但请声明作者以及来源。

正则表达式30分钟入门教程

版本：v2.31 (2009-4-11) 作者：deerchao 转载请注明来源

目录
跳过目录
本文目标
如何使用本教程
正则表达式到底是什么东西？
入门
测试正则表达式
元字符
字符转义
重复
字符类
分枝条件
反义
分组
后向引用
零宽断言
负向零宽断言
注释
贪婪与懒惰
处理选项
平衡组/递归匹配
还有些什么东西没提到
联系作者
网上的资源及本文参考文献
更新纪录

本文目标
30分钟内让你明白正则表达式是什么，并对它有一些基本的了解，让你可以在自己的程序或网页里使用它。

如何使用本教程
最重要的是——请给我30分钟，如果你没有使用正则表达式的经验，请不要试图在30秒内入门——除非你是超人 :)
别被下面那些复杂的表达式吓倒，只要跟着我一步一步来，你会发现正则表达式其实并没有你想像中的那么困难。当然，如果你看完了这篇教程之后，发现自己明白了很多，却又几乎什么都记不得，那也是很正常的——我认为，没接触过正则表达式的人在看完这篇教程后，能把提到过的语法记住80%以上的可能性为零。这里只是让你明白基本的原理，以后你还需要多练习，多使用，才能熟练掌握正则表达式。
除了作为入门教程之外，本文还试图成为可以在日常工作中使用的正则表达式语法参考手册。就作者本人的经历来说，这个目标还是完成得不错的——你看，我自己也没能把所有的东西记下来，不是吗？
清除格式文本格式约定：专业术语元字符/语法格式正则表达式正则表达式中的一部分(用于分析) 对其进行匹配的源字符串对正则表达式或其中一部分的说明
隐藏边注本文右边有一些注释，主要是用来提供一些相关信息，或者给没有程序员背景的读者解释一些基本概念，通常可以忽略。

正则表达式到底是什么东西？
字符是计算机软件处理文字时最基本的单位，可能是字母，数字，标点符号，空格，换行符，汉字等等。字符串是0个或更多个字符的序列。文本也就是文字，字符串。说某个字符串匹配某个正则表达式，通常是指这个字符串里有一部分（或几部分分别）能满足表达式给出的条件。
在编写处理字符串的程序或网页时，经常会有查找符合某些复杂规则的字符串的需要。正则表达式就是用于描述这些规则的工具。换句话说，正则表达式就是记录文本规则的代码。
很可能你使用过Windows/Dos下用于文件查找的通配符(wildcard)，也就是和?。如果你想查找某个目录下的所有的Word文档的话，你会搜索.doc。在这里，*会被解释成任意的字符串。和通配符类似，正则表达式也是用来进行文本匹配的工具，只不过比起通配符，它能更精确地描述你的需求——当然，代价就是更复杂——比如你可以编写一个正则表达式，用来查找所有以0开头，后面跟着2-3个数字，然后是一个连字号“-”，最后是7或8位数字的字符串(像010-12345678或0376-7654321)。

入门
学习正则表达式的最好方法是从例子开始，理解例子之后再自己对例子进行修改，实验。下面给出了不少简单的例子，并对它们作了详细的说明。
假设你在一篇英文小说里查找hi，你可以使用正则表达式hi。
这几乎是最简单的正则表达式了，它可以精确匹配这样的字符串：由两个字符组成，前一个字符是h,后一个是i。通常，处理正则表达式的工具会提供一个忽略大小写的选项，如果选中了这个选项，它可以匹配hi,HI,Hi,hI这四种情况中的任意一种。
不幸的是，很多单词里包含hi这两个连续的字符，比如him,history,high等等。用hi来查找的话，这里边的hi也会被找出来。如果要精确地查找hi这个单词的话，我们应该使用\bhi\b。
\b是正则表达式规定的一个特殊代码（好吧，某些人叫它元字符，metacharacter），代表着单词的开头或结尾，也就是单词的分界处。虽然通常英文的单词是由空格，标点符号或者换行来分隔的，但是\b并不匹配这些单词分隔字符中的任何一个，它只匹配一个位置。
如果需要更精确的说法，\b匹配这样的位置：它的前一个字符和后一个字符不全是(一个是,一个不是或不存在)\w。
假如你要找的是hi后面不远处跟着一个Lucy，你应该用\bhi\b.\bLucy\b。
这里，.是另一个元字符，匹配除了换行符以外的任意字符。同样是元字符，不过它代表的不是字符，也不是位置，而是数量——它指定前边的内容可以连续重复使用任意次以使整个表达式得到匹配。因此，.连在一起就意味着任意数量的不包含换行的字符。现在\bhi\b.*\bLucy\b的意思就很明显了：先是一个单词hi,然后是任意个任意字符(但不能是换行)，最后是Lucy这个单词。
换行符就是'\n',ASCII编码为10(十六进制0x0A)的字符。
如果同时使用其它元字符，我们就能构造出功能更强大的正则表达式。比如下面这个例子：
0\d\d-\d\d\d\d\d\d\d\d匹配这样的字符串：以0开头，然后是两个数字，然后是一个连字号“-”，最后是8个数字(也就是中国的电话号码。当然，这个例子只能匹配区号为3位的情形)。
这里的\d是个新的元字符，匹配一位数字(0，或1，或2，或……)。-不是元字符，只匹配它本身——连字符(或者减号，或者中横线，或者随你怎么称呼它)。
为了避免那么多烦人的重复，我们也可以这样写这个表达式：0\d{2}-\d{8}。这里\d后面的{2}({8})的意思是前面\d必须连续重复匹配2次(8次)。

测试正则表达式
其它可用的测试工具:
RegexBuddy
Javascript正则表达式在线测试工具
如果你不觉得正则表达式很难读写的话，要么你是一个天才，要么，你不是地球人。正则表达式的语法很令人头疼，即使对经常使用它的人来说也是如此。由于难于读写，容易出错，所以找一种工具对正则表达式进行测试是很有必要的。
不同的环境下正则表达式的一些细节是不相同的，本教程介绍的是微软 .Net Framework 4.0 下正则表达式的行为，所以，我向你推荐我编写的.Net下的工具正则表达式测试器。请参考该页面的说明来安装和运行该软件。
下面是Regex Tester运行时的截图：

元字符
现在你已经知道几个很有用的元字符了，如\b,.,，还有\d.正则表达式里还有更多的元字符，比如\s匹配任意的空白符，包括空格，制表符(Tab)，换行符，中文全角空格等。\w匹配字母或数字或下划线或汉字等。
对中文/汉字的特殊处理是由.Net提供的正则表达式引擎支持的，其它环境下的具体情况请查看相关文档。
下面来看看更多的例子：
\ba\w\b匹配以字母a开头的单词——先是某个单词开始处(\b)，然后是字母a,然后是任意数量的字母或数字(\w)，最后是单词结束处(\b)。
好吧，现在我们说说正则表达式里的单词是什么意思吧：就是不少于一个的连续的\w。不错，这与学习英文时要背的成千上万个同名的东西的确关系不大 :)
\d+匹配1个或更多连续的数字。这里的+是和类似的元字符，不同的是*匹配重复任意次(可能是0次)，而+则匹配重复1次或更多次。
\b\w{6}\b 匹配刚好6个字符的单词。
表1.常用的元字符
代码说明
. 匹配除换行符以外的任意字符
\w 匹配字母或数字或下划线或汉字
\s 匹配任意的空白符
\d 匹配数字
\b 匹配单词的开始或结束
^ 匹配字符串的开始
$ 匹配字符串的结束
正则表达式引擎通常会提供一个“测试指定的字符串是否匹配一个正则表达式”的方法，如JavaScript里的RegExp.test()方法或.NET里的Regex.IsMatch()方法。这里的匹配是指是字符串里有没有符合表达式规则的部分。如果不使用^和$的话，对于\d{5,12}而言，使用这样的方法就只能保证字符串里包含5到12连续位数字，而不是整个字符串就是5到12位数字。
元字符^（和数字6在同一个键位上的符号）和$都匹配一个位置，这和\b有点类似。^匹配你要用来查找的字符串的开头，$匹配结尾。这两个代码在验证输入的内容时非常有用，比如一个网站如果要求你填写的QQ号必须为5位到12位数字时，可以使用：^\d{5,12}$。
这里的{5,12}和前面介绍过的{2}是类似的，只不过{2}匹配只能不多不少重复2次，{5,12}则是重复的次数不能少于5次，不能多于12次，否则都不匹配。
因为使用了^和$，所以输入的整个字符串都要用来和\d{5,12}来匹配，也就是说整个输入必须是5到12个数字，因此如果输入的QQ号能匹配这个正则表达式的话，那就符合要求了。
和忽略大小写的选项类似，有些正则表达式处理工具还有一个处理多行的选项。如果选中了这个选项，^和$的意义就变成了匹配行的开始处和结束处。

表1.常用的元字符
代码	说明
.	匹配除换行符以外的任意字符
\w	匹配字母或数字或下划线或汉字
\s	匹配任意的空白符
\d	匹配数字
\b	匹配单词的开始或结束
^	匹配字符串的开始
$	匹配字符串的结束

字符转义
如果你想查找元字符本身的话，比如你查找.,或者,就出现了问题：你没办法指定它们，因为它们会被解释成别的意思。这时你就得使用\来取消这些字符的特殊意义。因此，你应该使用\.和\。当然，要查找\本身，你也得用\\.
例如：unibetter\.com匹配unibetter.com，C:\\Windows匹配C:\Windows。

重复
你已经看过了前面的,+,{2},{5,12}这几个匹配重复的方式了。下面是正则表达式中所有的限定符(指定数量的代码，例如,{5,12}等)：
表2.常用的限定符
代码/语法说明
* 重复零次或更多次
+ 重复一次或更多次
? 重复零次或一次
{n} 重复n次
{n,} 重复n次或更多次
{n,m} 重复n到m次
下面是一些使用重复的例子：
Windows\d+匹配Windows后面跟1个或更多数字
^\w+匹配一行的第一个单词(或整个字符串的第一个单词，具体匹配哪个意思得看选项设置)

表2.常用的限定符
代码/语法	说明
*	重复零次或更多次
+	重复一次或更多次
?	重复零次或一次
{n}	重复n次
{n,}	重复n次或更多次
{n,m}	重复n到m次

字符类
要想查找数字，字母或数字，空白是很简单的，因为已经有了对应这些字符集合的元字符，但是如果你想匹配没有预定义元字符的字符集合(比如元音字母a,e,i,o,u),应该怎么办？
很简单，你只需要在方括号里列出它们就行了，像[aeiou]就匹配任何一个英文元音字母，[.?!]匹配标点符号(.或?或!)。
我们也可以轻松地指定一个字符范围，像[0-9]代表的含意与\d就是完全一致的：一位数字；同理[a-z0-9A-Z_]也完全等同于\w（如果只考虑英文的话）。
下面是一个更复杂的表达式：\(?0\d{2}[) -]?\d{8}。
“(”和“)”也是元字符，后面的分组节里会提到，所以在这里需要使用转义。
这个表达式可以匹配几种格式的电话号码，像(010)88886666，或022-22334455，或02912345678等。我们对它进行一些分析吧：首先是一个转义字符\(,它能出现0次或1次(?),然后是一个0，后面跟着2个数字(\d{2})，然后是)或-或空格中的一个，它出现1次或不出现(?)，最后是8个数字(\d{8})。

分枝条件
不幸的是，刚才那个表达式也能匹配010)12345678或(022-87654321这样的“不正确”的格式。要解决这个问题，我们需要用到分枝条件。正则表达式里的分枝条件指的是有几种规则，如果满足其中任意一种规则都应该当成匹配，具体方法是用|把不同的规则分隔开。听不明白？没关系，看例子：
0\d{2}-\d{8}|0\d{3}-\d{7}这个表达式能匹配两种以连字号分隔的电话号码：一种是三位区号，8位本地号(如010-12345678)，一种是4位区号，7位本地号(0376-2233445)。
$0\d{2}$[- ]?\d{8}|0\d{2}[- ]?\d{8}这个表达式匹配3位区号的电话号码，其中区号可以用小括号括起来，也可以不用，区号与本地号间可以用连字号或空格间隔，也可以没有间隔。你可以试试用分枝条件把这个表达式扩展成也支持4位区号的。
\d{5}-\d{4}|\d{5}这个表达式用于匹配美国的邮政编码。美国邮编的规则是5位数字，或者用连字号间隔的9位数字。之所以要给出这个例子是因为它能说明一个问题：使用分枝条件时，要注意各个条件的顺序。如果你把它改成\d{5}|\d{5}-\d{4}的话，那么就只会匹配5位的邮编(以及9位邮编的前5位)。原因是匹配分枝条件时，将会从左到右地测试每个条件，如果满足了某个分枝的话，就不会去再管其它的条件了。

分组
我们已经提到了怎么重复单个字符（直接在字符后面加上限定符就行了）；但如果想要重复多个字符又该怎么办？你可以用小括号来指定子表达式(也叫做分组)，然后你就可以指定这个子表达式的重复次数了，你也可以对子表达式进行其它一些操作(后面会有介绍)。
(\d{1,3}\.){3}\d{1,3}是一个简单的IP地址匹配表达式。要理解这个表达式，请按下列顺序分析它：\d{1,3}匹配1到3位的数字，(\d{1,3}\.){3}匹配三位数字加上一个英文句号(这个整体也就是这个分组)重复3次，最后再加上一个一到三位的数字(\d{1,3})。
IP地址中每个数字都不能大于255，大家千万不要被《24》第三季的编剧给忽悠了……
不幸的是，它也将匹配256.300.888.999这种不可能存在的IP地址。如果能使用算术比较的话，或许能简单地解决这个问题，但是正则表达式中并不提供关于数学的任何功能，所以只能使用冗长的分组，选择，字符类来描述一个正确的IP地址：((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)。
理解这个表达式的关键是理解2[0-4]\d|25[0-5]|[01]?\d\d?，这里我就不细说了，你自己应该能分析得出来它的意义。

反义
有时需要查找不属于某个能简单定义的字符类的字符。比如想查找除了数字以外，其它任意字符都行的情况，这时需要用到反义：
表3.常用的反义代码
代码/语法说明
\W 匹配任意不是字母，数字，下划线，汉字的字符
\S 匹配任意不是空白符的字符
\D 匹配任意非数字的字符
\B 匹配不是单词开头或结束的位置
[^x] 匹配除了x以外的任意字符
[^aeiou] 匹配除了aeiou这几个字母以外的任意字符
例子：\S+匹配不包含空白符的字符串。
<a[^>]+>匹配用尖括号括起来的以a开头的字符串。

表3.常用的反义代码
代码/语法	说明
\W	匹配任意不是字母，数字，下划线，汉字的字符
\S	匹配任意不是空白符的字符
\D	匹配任意非数字的字符
\B	匹配不是单词开头或结束的位置
[^x]	匹配除了x以外的任意字符
[^aeiou]	匹配除了aeiou这几个字母以外的任意字符

后向引用
使用小括号指定一个子表达式后，匹配这个子表达式的文本(也就是此分组捕获的内容)可以在表达式或其它程序中作进一步的处理。默认情况下，每个分组会自动拥有一个组号，规则是：从左向右，以分组的左括号为标志，第一个出现的分组的组号为1，第二个为2，以此类推。
呃……其实,组号分配还不像我刚说得那么简单：
分组0对应整个正则表达式
实际上组号分配过程是要从左向右扫描两遍的：第一遍只给未命名组分配，第二遍只给命名组分配－－因此所有命名组的组号都大于未命名的组号
你可以使用(?:exp)这样的语法来剥夺一个分组对组号分配的参与权．
后向引用用于重复搜索前面某个分组匹配的文本。例如，\1代表分组1匹配的文本。难以理解？请看示例：
\b(\w+)\b\s+\1\b可以用来匹配重复的单词，像go go, 或者kitty kitty。这个表达式首先是一个单词，也就是单词开始处和结束处之间的多于一个的字母或数字(\b(\w+)\b)，这个单词会被捕获到编号为1的分组中，然后是1个或几个空白符(\s+)，最后是分组1中捕获的内容（也就是前面匹配的那个单词）(\1)。
你也可以自己指定子表达式的组名。要指定一个子表达式的组名，请使用这样的语法：(?<Word>\w+)(或者把尖括号换成'也行：(?'Word'\w+)),这样就把\w+的组名指定为Word了。要反向引用这个分组捕获的内容，你可以使用\k<Word>,所以上一个例子也可以写成这样：\b(?<Word>\w+)\b\s+\k<Word>\b。
使用小括号的时候，还有很多特定用途的语法。下面列出了最常用的一些：
表4.常用分组语法
分类代码/语法说明
捕获 (exp) 匹配exp,并捕获文本到自动命名的组里
(?<name>exp) 匹配exp,并捕获文本到名称为name的组里，也可以写成(?'name'exp)
(?:exp) 匹配exp,不捕获匹配的文本，也不给此分组分配组号
零宽断言 (?=exp) 匹配exp前面的位置
(?<=exp) 匹配exp后面的位置
(?!exp) 匹配后面跟的不是exp的位置
(?<!exp) 匹配前面不是exp的位置
注释 (?#comment) 这种类型的分组不对正则表达式的处理产生任何影响，用于提供注释让人阅读
我们已经讨论了前两种语法。第三个(?:exp)不会改变正则表达式的处理方式，只是这样的组匹配的内容不会像前两种那样被捕获到某个组里面，也不会拥有组号。“我为什么会想要这样做？”——好问题，你觉得为什么呢？

表4.常用分组语法
分类	代码/语法	说明
捕获	(exp)	匹配exp,并捕获文本到自动命名的组里
(?<name>exp)	匹配exp,并捕获文本到名称为name的组里，也可以写成(?'name'exp)
(?:exp)	匹配exp,不捕获匹配的文本，也不给此分组分配组号
零宽断言	(?=exp)	匹配exp前面的位置
(?<=exp)	匹配exp后面的位置
(?!exp)	匹配后面跟的不是exp的位置
(?<!exp)	匹配前面不是exp的位置
注释	(?#comment)	这种类型的分组不对正则表达式的处理产生任何影响，用于提供注释让人阅读

零宽断言
地球人，是不是觉得这些术语名称太复杂，太难记了？我也有同感。知道有这么一种东西就行了，它叫什么，随它去吧！人若无名，便可专心练剑；物若无名，便可随意取舍……
接下来的四个用于查找在某些内容(但并不包括这些内容)之前或之后的东西，也就是说它们像\b,^,$那样用于指定一个位置，这个位置应该满足一定的条件(即断言)，因此它们也被称为零宽断言。最好还是拿例子来说明吧：
断言用来声明一个应该为真的事实。正则表达式中只有当断言为真时才会继续进行匹配。
(?=exp)也叫零宽度正预测先行断言，它断言自身出现的位置的后面能匹配表达式exp。比如\b\w+(?=ing\b)，匹配以ing结尾的单词的前面部分(除了ing以外的部分)，如查找I'm singing while you're dancing.时，它会匹配sing和danc。
(?<=exp)也叫零宽度正回顾后发断言，它断言自身出现的位置的前面能匹配表达式exp。比如(?<=\bre)\w+\b会匹配以re开头的单词的后半部分(除了re以外的部分)，例如在查找reading a book时，它匹配ading。
假如你想要给一个很长的数字中每三位间加一个逗号(当然是从右边加起了)，你可以这样查找需要在前面和里面添加逗号的部分：((?<=\d)\d{3})+\b，用它对1234567890进行查找时结果是234567890。
下面这个例子同时使用了这两种断言：(?<=\s)\d+(?=\s)匹配以空白符间隔的数字(再次强调，不包括这些空白符)。

负向零宽断言
前面我们提到过怎么查找不是某个字符或不在某个字符类里的字符的方法(反义)。但是如果我们只是想要确保某个字符没有出现，但并不想去匹配它时怎么办？例如，如果我们想查找这样的单词--它里面出现了字母q,但是q后面跟的不是字母u,我们可以尝试这样：
\b\wq[^u]\w\b匹配包含后面不是字母u的字母q的单词。但是如果多做测试(或者你思维足够敏锐，直接就观察出来了)，你会发现，如果q出现在单词的结尾的话，像Iraq,Benq，这个表达式就会出错。这是因为[^u]总要匹配一个字符，所以如果q是单词的最后一个字符的话，后面的[^u]将会匹配q后面的单词分隔符(可能是空格，或者是句号或其它的什么)，后面的\w\b将会匹配下一个单词，于是\b\wq[^u]\w\b就能匹配整个Iraq fighting。负向零宽断言能解决这样的问题，因为它只匹配一个位置，并不消费任何字符。现在，我们可以这样来解决这个问题：\b\wq(?!u)\w\b。
零宽度负预测先行断言(?!exp)，断言此位置的后面不能匹配表达式exp。例如：\d{3}(?!\d)匹配三位数字，而且这三位数字的后面不能是数字；\b((?!abc)\w)+\b匹配不包含连续字符串abc的单词。
同理，我们可以用(?<!exp),零宽度负回顾后发断言来断言此位置的前面不能匹配表达式exp：(?<![a-z])\d{7}匹配前面不是小写字母的七位数字。
请详细分析表达式(?<=<(\w+)>).(?=<\/\1>)，这个表达式最能表现零宽断言的真正用途。
一个更复杂的例子：(?<=<(\w+)>).(?=<\/\1>)匹配不包含属性的简单HTML标签内里的内容。(?<=<(\w+)>)指定了这样的前缀：被尖括号括起来的单词(比如可能是<b>)，然后是.(任意的字符串),最后是一个后缀(?=<\/\1>)。注意后缀里的\/，它用到了前面提过的字符转义；\1则是一个反向引用，引用的正是捕获的第一组，前面的(\w+)匹配的内容，这样如果前缀实际上是<b>的话，后缀就是</b>了。整个表达式匹配的是<b>和</b>之间的内容(再次提醒，不包括前缀和后缀本身)。

注释
小括号的另一种用途是通过语法(?#comment)来包含注释。例如：2[0-4]\d(?#200-249)|25[0-5](?#250-255)|[01]?\d\d?(?#0-199)。
要包含注释的话，最好是启用“忽略模式里的空白符”选项，这样在编写表达式时能任意的添加空格，Tab，换行，而实际使用时这些都将被忽略。启用这个选项后，在#后面到这一行结束的所有文本都将被当成注释忽略掉。例如，我们可以前面的一个表达式写成这样：
(?<= # 断言要匹配的文本的前缀
<(\w+)> # 查找尖括号括起来的字母或数字(即HTML/XML标签)
) # 前缀结束
.* # 匹配任意文本
(?= # 断言要匹配的文本的后缀
<\/\1> # 查找尖括号括起来的内容：前面是一个"/"，后面是先前捕获的标签
) # 后缀结束

贪婪与懒惰
当正则表达式中包含能接受重复的限定符时，通常的行为是（在使整个表达式能得到匹配的前提下）匹配尽可能多的字符。以这个表达式为例：a.b，它将会匹配最长的以a开始，以b结束的字符串。如果用它来搜索aabab的话，它会匹配整个字符串aabab。这被称为贪婪匹配。
有时，我们更需要懒惰匹配，也就是匹配尽可能少的字符。前面给出的限定符都可以被转化为懒惰匹配模式，只要在它后面加上一个问号?。这样.?就意味着匹配任意数量的重复，但是在能使整个匹配成功的前提下使用最少的重复。现在看看懒惰版的例子吧：
a.?b匹配最短的，以a开始，以b结束的字符串。如果把它应用于aabab的话，它会匹配aab（第一到第三个字符）和ab（第四到第五个字符）。
为什么第一个匹配是aab（第一到第三个字符）而不是ab（第二到第三个字符）？简单地说，因为正则表达式有另一条规则，比懒惰／贪婪规则的优先级更高：最先开始的匹配拥有最高的优先权——The match that begins earliest wins。
表5.懒惰限定符
代码/语法说明
? 重复任意次，但尽可能少重复
+? 重复1次或更多次，但尽可能少重复
?? 重复0次或1次，但尽可能少重复
{n,m}? 重复n到m次，但尽可能少重复
{n,}? 重复n次以上，但尽可能少重复

表5.懒惰限定符
代码/语法	说明
*?	重复任意次，但尽可能少重复
+?	重复1次或更多次，但尽可能少重复
??	重复0次或1次，但尽可能少重复
{n,m}?	重复n到m次，但尽可能少重复
{n,}?	重复n次以上，但尽可能少重复

处理选项
在C#中，你可以使用Regex(String, RegexOptions)构造函数来设置正则表达式的处理选项。如：Regex regex = new Regex(@"\ba\w{6}\b", RegexOptions.IgnoreCase);
上面介绍了几个选项如忽略大小写，处理多行等，这些选项能用来改变处理正则表达式的方式。下面是.Net中常用的正则表达式选项：
表6.常用的处理选项
名称说明
IgnoreCase(忽略大小写) 匹配时不区分大小写。
Multiline(多行模式) 更改^和$的含义，使它们分别在任意一行的行首和行尾匹配，而不仅仅在整个字符串的开头和结尾匹配。(在此模式下,$的精确含意是:匹配\n之前的位置以及字符串结束前的位置.)
Singleline(单行模式) 更改.的含义，使它与每一个字符匹配（包括换行符\n）。
IgnorePatternWhitespace(忽略空白) 忽略表达式中的非转义空白并启用由#标记的注释。
ExplicitCapture(显式捕获) 仅捕获已被显式命名的组。
一个经常被问到的问题是：是不是只能同时使用多行模式和单行模式中的一种？答案是：不是。这两个选项之间没有任何关系，除了它们的名字比较相似（以至于让人感到疑惑）以外。

表6.常用的处理选项
名称	说明
IgnoreCase(忽略大小写)	匹配时不区分大小写。
Multiline(多行模式)	更改^和$的含义，使它们分别在任意一行的行首和行尾匹配，而不仅仅在整个字符串的开头和结尾匹配。(在此模式下,$的精确含意是:匹配\n之前的位置以及字符串结束前的位置.)
Singleline(单行模式)	更改.的含义，使它与每一个字符匹配（包括换行符\n）。
IgnorePatternWhitespace(忽略空白)	忽略表达式中的非转义空白并启用由#标记的注释。
ExplicitCapture(显式捕获)	仅捕获已被显式命名的组。

平衡组/递归匹配
这里介绍的平衡组语法是由.Net Framework支持的；其它语言／库不一定支持这种功能，或者支持此功能但需要使用不同的语法。
有时我们需要匹配像( 100 * ( 50 + 15 ) )这样的可嵌套的层次性结构，这时简单地使用$.+$则只会匹配到最左边的左括号和最右边的右括号之间的内容(这里我们讨论的是贪婪模式，懒惰模式也有下面的问题)。假如原来的字符串里的左括号和右括号出现的次数不相等，比如( 5 / ( 3 + 2 ) ) )，那我们的匹配结果里两者的个数也不会相等。有没有办法在这样的字符串里匹配到最长的，配对的括号之间的内容呢？
为了避免(和\(把你的大脑彻底搞糊涂，我们还是用尖括号代替圆括号吧。现在我们的问题变成了如何把xx <aa <bbb> <bbb> aa> yy这样的字符串里，最长的配对的尖括号内的内容捕获出来？
这里需要用到以下的语法构造：
(?'group') 把捕获的内容命名为group,并压入堆栈(Stack)
(?'-group')从堆栈上弹出最后压入堆栈的名为group的捕获内容，如果堆栈本来为空，则本分组的匹配失败
(?(group)yes|no)如果堆栈上存在以名为group的捕获内容的话，继续匹配yes部分的表达式，否则继续匹配no部分
(?!) 零宽负向先行断言，由于没有后缀表达式，试图匹配总是失败
如果你不是一个程序员（或者你自称程序员但是不知道堆栈是什么东西），你就这样理解上面的三种语法吧：第一个就是在黑板上写一个"group"，第二个就是从黑板上擦掉一个"group"，第三个就是看黑板上写的还有没有"group"，如果有就继续匹配yes部分，否则就匹配no部分。
我们需要做的是每碰到了左括号，就在压入一个"Open",每碰到一个右括号，就弹出一个，到了最后就看看堆栈是否为空－－如果不为空那就证明左括号比右括号多，那匹配就应该失败。正则表达式引擎会进行回溯(放弃最前面或最后面的一些字符)，尽量使整个表达式得到匹配。
< #最外层的左括号
[^<>]* #最外层的左括号后面的不是括号的内容
(
(
(?'Open'<) #碰到了左括号，在黑板上写一个"Open"
[^<>]* #匹配左括号后面的不是括号的内容
)+
(
(?'-Open'>) #碰到了右括号，擦掉一个"Open"
[^<>]* #匹配右括号后面不是括号的内容
)+
)*
(?(Open)(?!)) #在遇到最外层的右括号前面，判断黑板上还有没有没擦掉的"Open"；如果还有，则匹配失败

> #最外层的右括号
平衡组的一个最常见的应用就是匹配HTML,下面这个例子可以匹配嵌套的<div>标签：<div[^>]>[^<>](((?'Open'<div[^>]>)[^<>])+((?'-Open'</div>)[^<>])+)(?(Open)(?!))</div>.

还有些什么东西没提到
上边已经描述了构造正则表达式的大量元素，但是还有很多没有提到的东西。下面是一些未提到的元素的列表，包含语法和简单的说明。你可以在网上找到更详细的参考资料来学习它们--当你需要用到它们的时候。如果你安装了MSDN Library,你也可以在里面找到.net下正则表达式详细的文档。
这里的介绍很简略，如果你需要更详细的信息，而又没有在电脑上安装MSDN Library,可以查看关于正则表达式语言元素的MSDN在线文档。
表7.尚未详细讨论的语法
代码/语法说明
\a 报警字符(打印它的效果是电脑嘀一声)
\b 通常是单词分界位置，但如果在字符类里使用代表退格
\t 制表符，Tab
\r 回车
\v 竖向制表符
\f 换页符
\n 换行符
\e Escape
\0nn ASCII代码中八进制代码为nn的字符
\xnn ASCII代码中十六进制代码为nn的字符
\unnnn Unicode代码中十六进制代码为nnnn的字符
\cN ASCII控制字符。比如\cC代表Ctrl+C
\A 字符串开头(类似^，但不受处理多行选项的影响)
\Z 字符串结尾或行尾(不受处理多行选项的影响)
\z 字符串结尾(类似$，但不受处理多行选项的影响)
\G 当前搜索的开头
\p{name} Unicode中命名为name的字符类，例如\p{IsGreek}
(?>exp) 贪婪子表达式
(?<x>-<y>exp) 平衡组
(?im-nsx:exp) 在子表达式exp中改变处理选项
(?im-nsx) 为表达式后面的部分改变处理选项
(?(exp)yes|no) 把exp当作零宽正向先行断言，如果在这个位置能匹配，使用yes作为此组的表达式；否则使用no
(?(exp)yes) 同上，只是使用空表达式作为no
(?(name)yes|no) 如果命名为name的组捕获到了内容，使用yes作为表达式；否则使用no
(?(name)yes) 同上，只是使用空表达式作为no

表7.尚未详细讨论的语法
代码/语法	说明
\a	报警字符(打印它的效果是电脑嘀一声)
\b	通常是单词分界位置，但如果在字符类里使用代表退格
\t	制表符，Tab
\r	回车
\v	竖向制表符
\f	换页符
\n	换行符
\e	Escape
\0nn	ASCII代码中八进制代码为nn的字符
\xnn	ASCII代码中十六进制代码为nn的字符
\unnnn	Unicode代码中十六进制代码为nnnn的字符
\cN	ASCII控制字符。比如\cC代表Ctrl+C
\A	字符串开头(类似^，但不受处理多行选项的影响)
\Z	字符串结尾或行尾(不受处理多行选项的影响)
\z	字符串结尾(类似$，但不受处理多行选项的影响)
\G	当前搜索的开头
\p{name}	Unicode中命名为name的字符类，例如\p{IsGreek}
(?>exp)	贪婪子表达式
(?<x>-<y>exp)	平衡组
(?im-nsx:exp)	在子表达式exp中改变处理选项
(?im-nsx)	为表达式后面的部分改变处理选项
(?(exp)yes\|no)	把exp当作零宽正向先行断言，如果在这个位置能匹配，使用yes作为此组的表达式；否则使用no
(?(exp)yes)	同上，只是使用空表达式作为no
(?(name)yes\|no)	如果命名为name的组捕获到了内容，使用yes作为表达式；否则使用no
(?(name)yes)	同上，只是使用空表达式作为no

联系作者
好吧,我承认,我骗了你,读到这里你肯定花了不止30分钟.相信我,这是我的错,而不是因为你太笨.我之所以说"30分钟",是为了让你有信心,有耐心继续下去.既然你看到了这里,那证明我的阴谋成功了.被忽悠的感觉很爽吧？
要投诉我,或者觉得我其实可以忽悠得更高明,或者有任何其它问题,欢迎来我的博客让我知道.

网上的资源及本文参考文献
微软的正则表达式教程
System.Text.RegularExpressions.Regex类(MSDN)
专业的正则表达式教学网站(英文)
关于.Net下的平衡组的详细讨论（英文）
Mastering Regular Expressions (Second Edition)

更新纪录
2006-3-27 第一版
2006-10-12 第二版
修正了几个细节上的错误和不准确的地方
增加了对处理中文时的一些说明
更改了几个术语的翻译（采用了MSDN的翻译方式）
增加了平衡组的介绍
放弃了对The Regulator的介绍，改用Regex Tester
2007-3-12 V2.1
修正了几个小的错误
增加了对处理选项(RegexOptions)的介绍
2007-5-28 V2.2
重新组织了对零宽断言的介绍
删除了几个不太合适的示例，添加了几个实用的示例
其它一些微小的更改
2007-8-3 V2.21
修改了几处文字错误
修改/添加了对$,\b的精确说明
承认了作者是个骗子
给RegexTester添加了Singleline选项的相关功能
2008-4-13 v2.3
调整了部分章节的次序
修改了页面布局，删除了专门的参考节
针对读者的反馈，调整了部分内容
2009-4-11 v2.31
修改了几处文字错误
添加了一些注释说明
调整了一些措词
2011-8-17 v2.32
更改了工具介绍，换用自行开发的正则表达式测试器
本文链接

2011年终总结

2011-12-31T07:19:00Z

2011年快要过去了，这一年对我来说是平凡又不平凡的一年，说平凡是因为2011如我生命的前26个年头一样，势不可挡地将要过去了，说不平凡是因为在2011年经历了工作，住所，身体与心灵的各种变动和变化的我，仍然自信快乐地活着，实在是需要太多的恩典才能发生的事，而此刻，心里有太多的感恩，感恩自己所拥有的一切。

在这一年，工作的变动让我有了一次内心的反思，身体上和内心的痛苦则让我对自己的处事方式有了一次深刻的窥探，我看清楚了内心的“小我”，我是如何处心积虑的在喂养它，即使已经身心疲惫。恐惧、贪婪和权力欲望是导致我们生活痛苦的常见情绪。对情绪的直接体验让我看到自己负面情绪的产生原因，对自己的不满意和对外界的身份认同更让我陷得更深。觉察是需要练习的，觉醒更是需要恩典才能发生，感谢神，感谢我生活中遇到的一切，我很满足地处在当下的这一刻，永恒的美将由我来展现，创造经由我来显化。祝福所有人，祝福一切！愿我们都能心想事成！

在爱和光中

小王子

本文链接

(转)javascritp对fckeditor编辑器操作

2011-12-28T07:14:00Z

http://www.cnblogs.com/xiaopeng84/archive/2010/08/03/1790911.html

javascript调用方式：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<script type="text/javascript" src="FCKeditor/fckeditor.js"></script>

<textarea name="content" cols="80" rows="4">
</textarea>
<script type="text/javascript">
var FCKeditor = new FCKeditor("content");
FCKeditor.BasePath = "FCKeditor/";
oFCKeditor.Height = 400;
oFCKeditor.ToolbarSet = "Default";
oFCKeditor.ReplaceTextarea();
</script>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

如果想要使用从数据库读来的文本数据或者是后台来自文件的txt/html文本数据。
只要在
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<textarea name="content" cols="80" rows="4">
</textarea>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

中加入自己的显示内容的formbean对应字段即可
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<textarea name="content" cols="80" rows="4">
    <c:out value="${contentData}" />
</textarea>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

这样内容就会被显示在FCKeditor编辑框中了，点击提交按钮以后就可以在后台的相应java action中得到content参数中的内容就是页面上FCKeditor中的内容数据了。可以在struts/jsf中使用。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

由于给FCKeditor瘦身，所以常会报缺少对象支持等错误，只要在FCKeditor/editor/lang中加上相应的js语言文件即可。如果加载页面失败（FCKeditor未定义）还有一个可能就是引用FCKeditor/fckeditor.js文件路径不对！

关于FCKeditor瘦身要点如下：
1.将FCKeditor目录下及子目录下所有以"_"下划线开头的文件夹删除
2.FCKeditor根目录下只保留fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml，其余全部删除
3.将editor/filemanager/upload目录下文件及文件夹清空
4.将/editor/filemanager/browser/default/connectors/下的所有文件删除
5.还可以将editor/skins目录下的皮肤文件删除，只留下default一套皮肤（如果你不需要换皮肤的话
6.还可以将editor/lang目录下文件删除，只保留en.js, fcklanguagemanager.js, zh-cn.js, zh.js文件
7.如果你是使用javascript来调用加载FCKeditor，那么就不需要在web.xml中配置fckeditor的tag文件。
8.还有一个问题刚开始使用FCKeditor的人常会遇到就怎么控制它的toolbar的大小和元素排列，其实很简单。
在fckconfig.js中用这样的标签[]来划分每行的元素的多少，这样就可以控制toolbar的长短和大小了，具体示例参看：fckconfig.js中的toolbarset["Default"]

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

用fckconfig.js中的一些选项来控制toolbarset中控件的功能，实现功能裁剪：
1)：取消超链接中的浏览服务器和上传功能，方法如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FCKConfig.LinkBrowser = true;
FCKConfig.LinkUpload = true;
改为：
FCKConfig.LinkBrowser = false;
FCKConfig.LinkUpload = false;
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

2)：取消图片链接中的浏览服务器和上传功能，方法如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FCKConfig.ImageUpload = true;
FCKConfig.ImageBrowser = true;
改为：
FCKConfig.ImageUpload = false;
FCKConfig.ImageBrowser = false;
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

3)：Dlg Button中取消高级功能，方法如下：
FCKConfig.LinkDlgHideAdvanced = false ;
FCKConfig.ImageDlgHideAdvanced = false ;
改为：
FCKConfig.ImageDlgHideAdvanced = true ;
FCKConfig.LinkDlgHideTarget = true ;
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

下一篇介绍FCKeditor的上传和浏览服务器功能，以及如何在里面实现动态

超连接，转发到servlet经过filter以后去调用服务器的action

如何实现对应用户浏览自己的图片的列表实现！

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

FCKeditor集成java servlet可以实现文件的上传和服务器端列表读取功能FCKeditor自己提供了两个servlet来分别实现上传文件功能，和读取服务器端文件列表功能，这两个servlet分别为：
com.fredck.FCKeditor.connector.ConnectorServlet（读取文件列表）
com.fredck.FCKeditor.uploader.SimpleUploaderServlet（实现文件上传）

1.浏览服务器端文件列表
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
web.xml文件中，比如：ConnectorServlet中的配置选项：
<init-param>
    <param-name>baseDir</param-name>
    <param-value>/UserFiles/</param-value>
</init-param>

意思是在浏览服务器上的baseDir配置指定里面的所有文件及其目录结构列表。
如果你的baseDir没有配置，Connector将会自动创建一个默认的文件夹
UserFiles，对应的ConnectorServlet中init()方法中代码如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
baseDir = getInitParameter("baseDir");
if (baseDir == null)
baseDir = "/UserFiles/";

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
还想说一下的是，FCKeditor的client调用server的servlet方法采用的是Ajax思想来实现。当你点击浏览服务器(browser server)的时候就会触发一个异步的javascript + xmlhttp的调用响应，后台的servlet会去完成你要请求的事件，然后数据以xml方式返回给client来解析。很明显，你要实现去数据库或者其他的文件系统请求列表，你只要修改
ConnectorServlet中两个私有方法：getFolders 和 getFiles
让它去你指定的地方得到文件列表即可，这样你的文件可以放在任何你指定目录下。多说一句，很多人都想知道个人blog系统中怎么实现上传文件以后对应用户浏览自己的列表的，我的做法很简单，建立你用户名的文件夹，你上传只能上传到你的目录夹，浏览可以通过程序指定浏览对应用户下的文件夹即可，这个时候你要修改Connectorservlet中的路径即可！
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

2.超连接重定位问题
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FCKeditor可以插入超连接，实现对文件的预览功能，只要我们稍微改变我们可以使FCKeditor编辑器支持对任意文件系统下的任意文件的客户端浏览和下载保存！FCKeditor本来提供的是相对URL超链接，只要我们修改ConnectorServlet中传递给客户端的地址的时候，把它改写成绝对URL然后再通过我们自己的filter的servlet实现重定向去一个下载/浏览文件的struts的action方法就可以实现在客户端对超连接文件的下载和浏览！说一下具体做法吧：

1)：修改ConnectorServlet传递给客户端javascript的路径，代码如下：
String currentUrl = "http://" + request.getserver +request.getServerPort + request.getContextPath + resourcePath;

以上代码请在ConnectorServlet的doGet()里面拼装！在调用CreateCommonXml()私有方法的时候参数传入：
myEl.setAttribute("path",currentPath);
myEl.setAttribute("url",currentUrl);

提醒一下resourcePath为在web.xml配置文件中ConnectorServlet中的一个初始化参数配置，等一下利用filter实现对超连接的重定位就提取URL中的这个配置参数来判断，配置如下
<init-param>
    <param-name>resourcePath</param-name>
    <param-value>/fileSystem/</param-value>
</init-param>

2)：建立你的filter servlet，实现对URL的截获，对符合要求的URL进行重定位到你的对应action中去即可
3)：实现你的对应action来实现文件的上传和下载功能即可！
4)：扩展功能－实现对URL的加密，对连接的URL中加上一串字符，最后几位作为算法校验，对不符合要求的URL连接,filter将会拒绝重定位到指定action。此外利用自己写的扩展类还可以实现对超连接的文件类型进行限制，比如你只能超连接JPG|GIF|DOC|TXT|HTML等几种后缀名的文件，对其他文件即使你指定超连接也让你浏览和下载，这些都可以在web.xml中通过修改对应servlet的配置文件的初始化参数实现。

3.页面javascript修改
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
浏览服务器的功能对应的html/javascript相关的文件为：browser.html和frmresourcelist.html对应你想传递的信息你可以append在文件名的字符串后面，在GetFileRowHtml()的javascript函数中实现对文件名的截取，这样client只会显示文件名，而你可以得到文件的数据库唯一标识，任何你想要的信息你都可以通过修改ConnectorServlet中的私有方法getFiles()来实现，只要修改页面frmresurcelist.html中的GetFileRowHtml()中传入变量fileName即可。你还可以在点击选中文件的时候实现一个你自己的Ajax调用，一切取决你的项目需要！

4.我不是一个javascript高手，其实如果我对javascript了解多一些也许对客户端的代码修改以后做出更眩的功能。可以更好的完成对FCKeditor裁剪。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

5.注意点
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
无论怎么修改别人的东西，请一定尊重开源精神！
很多人配置好了FCKeditor的上传功能以后常会遇到xmlhttp request 404 error,后面是一串路径，其实就是你的servlet-mapping中的路径不对，你只要把xmlhttp request errot 404 后面跟的路径，copy到你的web.xml中对应红色文字的位置，如下：
<servlet-mapping>
    <servlet-name>Connector</servlet-name>
    <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
</servlet-mapping>

别忘了SimpleUploader的servlet－mapping也要做同样的修改！

还有一个错误就是http 500错误，这个可能是你的URL请求不对，应该和FCKeditor没关系的!

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

fckconfig.js总配置文件，可用记录本打开，修改后将文件存为utf-8 编码格式。找到：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FCKConfig.TabSpaces = 0;
改为：
FCKConfig.TabSpaces = 1;

即在编辑器域内可以使用Tab键。

如果你的编辑器还用在网站前台的话，比如说用于留言本或是日记回复时，那就不得不考虑安全了，
在前台千万不要使用Default的toolbar，要么自定义一下功能，要么就用系统已经定义好的Basic，
也就是基本的toolbar，找到：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FCKConfig.ToolbarSets["Basic"] = ['Bold','Italic','-','OrderedList','UnorderedList','-',/*'Link',*/'Unlink','-','Style','FontSize','TextColor','BGColor','-','Smiley','SpecialChar','Replace','Preview'];

这是改过的Basic，把图像功能去掉，把添加链接功能去掉，因为图像和链接和flash和图像按钮添加功能都能让前台页直接访问和上传文件， fckeditor还支持编辑域内的鼠标右键功能。

FCKConfig.ContextMenu = ['Generic',/*'Link',*/'Anchor',/*'Image',*/'Flash','Select','Textarea','Checkbox','Radio','TextField','HiddenField', /*'ImageButton',*/'Button','BulletedList','NumberedList','TableCell','Table','Form'];

这也是改过的把鼠标右键的"链接、图像，FLASH，图像按钮"功能都去掉。

找到：
FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana';

加上几种我们常用的字体

FCKConfig.FontNames = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana';

添加文件 /TestFCKeditor/test.jsp:
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<%@ page language="java" import="com.fredck.FCKeditor.*" %>
<%@ taglib uri="/TestFCKeditor" prefix="FCK" %>
<script type="text/javascript" src="/TestFCKeditor/FCKeditor/fckeditor.js"></script>

<%
三种方法调用FCKeditor
1.FCKeditor自定义标签 (必须加头文件 <%@ taglib uri="/TestFCKeditor" prefix="FCK" %> )
2.script脚本语言调用 (必须引用脚本文件 <script type="text/javascript" src="/TestFCKeditor/FCKeditor/fckeditor.js"></script> )
3.FCKeditor API 调用 (必须加头文件 <%@ page language="java" import="com.fredck.FCKeditor.*" %>
%>

<%
<form action="show.jsp" method="post" target="_blank">
<FCK:editor id="content" basePath="/TestFCKeditor/FCKeditor/" width="700" height="500" skinPath="/TestFCKeditor/FCKeditor/editor/skins/silver/" toolbarSet = "Default">;
        内容
</FCK:editor>
<input type="submit" value="Submit">
</form>

<form action="show.jsp" method="post" target="_blank">
<table border="0" width="700">
      <tr>
        <td>
        <textarea id="content" name="content" style="WIDTH: 100%; HEIGHT: 400px">input</textarea>
        <script type="text/javascript">
              var FCKeditor = new FCKeditor('content')
              oFCKeditor.BasePath = "/TestFCKeditor/FCKeditor/" ;
              oFCKeditor.Height = 400;
              oFCKeditor.ToolbarSet = "Default" ;
              oFCKeditor.ReplaceTextarea();
        </script>
        <input type="submit" value="Submit">
        </td>
      </tr>
    </table>-
</form>

<%
<form action="show.jsp" method="post" target="_blank">
FCKeditor oFCKeditor ;
oFCKeditor = new FCKeditor( request, "content" ) ;
oFCKeditor.setBasePath( "/TestFCKeditor/FCKeditor/" ) ;
oFCKeditor.setValue( "input" );
out.println( oFCKeditor.create() ) ;
<br>
<input type="submit" value="Submit">
</form>
%>

添加文件/TestFCKeditor/show.jsp
<%
String content = request.getParameter("content");
out.print(content);
%>

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

1、适时打开编辑器
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
很多时候，我们在打开页面的时候不需要直接打开编辑器，而在用到的时候才打开，这样一来有很好的用户体验，另一方面可以消除FCK在加载时对页面打开速度的影响，点击"Open Editor"按钮后才打开编辑器界面。
实现原理：
使用JAVASCRIPT版的FCK，在页面加载时（未打开FCK），创建一个隐藏的TextArea域，这个TextArea 的name和ID要和创建的FCK实例名称一致，然后点击"Open Editor"按钮时，通过调用一段函数，使用FCK的ReplaceTextarea()方法来创建FCKeditor，代码如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<script type="text/javascript">
<!–
function showFCK(){
  var FCKeditor = new FCKeditor( 'fbContent' ) ;
  oFCKeditor.BasePath = '/FCKeditor/' ;
  oFCKeditor.ToolbarSet = 'Basic' ;
  oFCKeditor.Width = '100%' ;
  oFCKeditor.Height = '200' ;
  oFCKeditor.ReplaceTextarea() ;
}

</script>
<textarea name="fbContent" id="fbContent"></textarea>

2、使用FCKeditor 的 API
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FCKeditor编辑器，提供了非常丰富的API，用于给End User实现很多想要定制的功能，比如最基本的数据验证，如何在提交的时候用JS判断当前编辑器区域内是否有内容，FCK的API提供了GetLength()方法；

再比如如何通过脚本向FCK里插入内容，使用InsertHTML()等；

还有，在用户定制功能时，中间步骤可能要执行FCK的一些内嵌哦作，那就用ExecuteCommand()方法。

详细的API列表，请查看FCKeditor的Wiki。而常用的API，请查看FCK压缩包里的_samples/html/sample08.html。此处就不贴代码了。

3、外联编辑条（多个编辑域共用一个编辑条）
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
这个功能是2.3版本才开始提供的，以前版本的FCKeditor要在同一个页面里用多个编辑器的话，得一个个创建，现在有了这个外联功能，就不用那么麻烦了，只需要把工具条放在一个适当的位置，后面就可以无限制的创建编辑域了。

要实现这种功能呢，需要先在页面中定义一个工具条的容器：<div id="xToolbar"></div>，然后再根据这个容器的id属性进行设置。

JAVASCRIPT实现代码：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<div id="xToolbar"></div>
FCKeditor 1:
<script type="text/javascript">
<!–
    // Automatically calculates the editor base path based on the _samples directory.
    // This is usefull only for these samples. A real application should use something like this:
    // oFCKeditor.BasePath = '/fckeditor/'; // '/fckeditor/' is the default value.
    var sBasePath = document.location.pathname.substring(0,document.location.pathname.lastIndexOf('_samples'));

    var FCKeditor = new FCKeditor( 'FCKeditor_1' );
    oFCKeditor.BasePath = sBasePath;
    oFCKeditor.Height = 100;
    oFCKeditor.Config[ 'ToolbarLocation' ] = 'Out:parent(xToolbar)';
    oFCKeditor.Value = 'This is some <strong>sample text</strong>. You are using FCKeditor.';
    oFCKeditor.Create();
//–>
</script>
<br />

FCKeditor 2:
<script type="text/javascript">
<!–
    FCKeditor = new FCKeditor( 'FCKeditor_2' );
    oFCKeditor.BasePath = sBasePath;
    oFCKeditor.Height = 100;
    oFCKeditor.Config[ 'ToolbarLocation' ] = 'Out:parent(xToolbar)';
    oFCKeditor.Value = 'This is some <strong>sample text</strong>. You are using FCKeditor.';
    oFCKeditor.Create();
//–>
</script>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
此部分的详细DEMO请参照_samples/html/sample11.html，_samples/html/sample11_frame.html

4、文件管理功能、文件上传的权限问题
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
一直以来FCKeditor的文件管理部分的安全是个值得注意，但很多人没注意到的地方，虽然FCKeditor在各个Release版本中一直存在的一个功能就是对上传文件类型进行过滤，但是她没考虑过另一个问题：到底允许谁能上传？到底谁能浏览服务器文件？

之前刚开始用FCKeditor时，我就出现过这个问题，还好NetRube（FCKeditor中文化以及FCKeditor ASP版上传程序的作者）及时提醒了我，做法是去修改FCK上传程序，在里面进行权限判断，并且再在fckconfig.js里把相应的一些功能去掉。但随之FCK版本的不断升级，每升一次都要去改一次配置程序fckconfig.js，我发觉厌烦了，就没什么办法能更好的控制这种配置么？事实上，是有的。

在fckconfig.js里面，有关于是否打开上传和浏览服务器的设置，在创建FCKeditor时，通过程序来判断是否创建有上传浏览功能的编辑器。首先，我先在fckconfig.js里面把所有的上传和浏览设置全设为false，接着我使用的代码如下：

JAVASCRIPT版本：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<script type="text/javascript">
    var FCKeditor = new FCKeditor( 'fbContent' );
    <% if power = powercode then %>
    oFCKeditor.Config['LinkBrowser'] = true;
    oFCKeditor.Config['ImageBrowser'] = true;
    oFCKeditor.Config['FlashBrowser'] = true;
    oFCKeditor.Config['LinkUpload'] = true;
    oFCKeditor.Config['ImageUpload'] = true;
    oFCKeditor.Config['FlashUpload'] = true;
    <% end if %>
    oFCKeditor.ToolbarSet = 'Basic';
    oFCKeditor.Width = '100%';
    oFCKeditor.Height = '200';
    oFCKeditor.Value = '';
    oFCKeditor.Create();
</script>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

在按钮旁边加文字
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
打开 editor/js/ 两个js文件
fckeditorcode_gecko.js
fckeditorcode_ie.js

第一个是支持非ie浏览器的
第二个文件是支持ie浏览器的

搜索 FCKToolbarButton，可以看到许多类似这样的语句：
case 'Save':B = new FCKToolbarButton('Save', FCKLang.Save, null, null, true, null, 3); break;

'Save'是按钮英文名字
FCKToolbarButton 的四个参数分别是：
按钮命令名称，按钮标签文字，按钮工具提示，按钮样式，按钮是否在源代码模式可见，按钮下拉菜单其中将第4项参数设置为 FCK_TOOLBARITEM_ICONTEXT 即可使按钮旁边出现文字，注意没有引号。
例如：
case 'Preview':B = new FCKToolbarButton('Preview', FCKLang.Preview, null, FCK_TOOLBARITEM_ICONTEXT, true, null, 5);
这样我们就可以将我们经常用的3种模式源代码、预览、全屏编辑按钮都加上文字了。

解释fck样式的工作原理
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
fck的样式设置涉及到了两个文件，一个是你定义好的样式表文件.css，另一个是告诉fck样式表如何使用的xml文件，两个文件确一不可。
css文件的位置是不做要求的，但是需要你在应用的编辑器的页面上插入样式表文件的链接。这样才能显示出来样式。
fckstyles.xml 在与editor目录同级的目录下。该文件定义了那些样式可以使用在那些标签里面。

这就是fck自带的样式xml定义：
<?xml version="1.0" encoding="utf-8" ?>
<Styles>
  <Style name="Image on Left" element="img">
    <Attribute name="style" value="padding: 5px; margin-right: 5px" />
    <Attribute name="border" value="2" />
    <Attribute name="align" value="left" />
  </Style>
  <Style name="Image on Right" element="img">
    <Attribute name="style" value="padding: 5px; margin-left: 5px" />
    <Attribute name="border" value="2" />
    <Attribute name="align" value="right" />
  </Style>
  <Style name="Custom Bold" element="span">
    <Attribute name="style" value="font-weight: bold;" />
  </Style>
  <Style name="Custom Italic" element="em" />
  <Style name="Title" element="span">
    <Attribute name="class" value="Title" />
  </Style>
  <Style name="Code" element="span">
    <Attribute name="class" value="Code" />
  </Style>
  <Style name="Title H3" element="h3" />
  <Style name="Custom Ruler" element="hr">
    <Attribute name="size" value="1" />
    <Attribute name="color" value="#ff0000" />
  </Style>
</Styles>

每一个<style>将来会生成一个样式的菜单项。name名称就是显示在菜单里的文字；element定义了该样式可以应用在那种html标签上，<Attribute>的 name 指定了将会修改标签的哪个属性来应用样式，value则是修改成的值。
看这个：
<Style name="Title" element="span">
  <Attribute name="class" value="Title" />
</Style>

如果你在fck选定了文字 "经典论坛 > 前台制作与脚本专栏 > FCKeditor 实战技巧 - 1 > 编辑帖子" 应用该样式则原来文字就会变成<span class="Title">经典论坛 > 前台制作与脚本专栏 > FCKeditor 实战技巧 - 1 > 编辑帖子</span>

注意：如果编辑器呈整页编辑状态，那么整页里面也需要插入样式表链接才能显示出来样式。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

FCKeditor Javascript API（翻译整理）
原文地址：http://wiki.fckeditor.net/Developer%27s_Guide/Javascript_API
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FCK 编辑器加载后，将会注册一个全局的 FCKeditorAPI 对象。

FCKeditorAPI 对象在页面加载期间是无效的，直到页面加载完成。如果需要交互式地知道 FCK 编辑器已经加载完成，可使用"FCKeditor_OnComplete"函数。
<script type="text/javascript">
function FCKeditor_OnComplete(editorInstance) {
  FCKeditorAPI.GetInstance('FCKeditor1').Commands.GetCommand('FitWindow').Execute();
}
</script>

在当前页获得 FCK 编辑器实例：
var Editor = FCKeditorAPI.GetInstance('InstanceName');

从 FCK 编辑器的弹出窗口中获得 FCK 编辑器实例：
var Editor = window.parent.InnerDialogLoaded().FCK;

从框架页面的子框架中获得其它子框架的 FCK 编辑器实例：
var Editor = window.FrameName.FCKeditorAPI.GetInstance('InstanceName');

从页面弹出窗口中获得父窗口的 FCK 编辑器实例：
var Editor = opener.FCKeditorAPI.GetInstance('InstanceName');

获得 FCK 编辑器的内容：
oEditor.GetXHTML(formatted); // formatted 为：true|false，表示是否按HTML格式取出
也可用：
oEditor.GetXHTML();

设置 FCK 编辑器的内容：
oEditor.SetHTML("content", false); // 第二个参数为：true|false，是否以所见即所得方式设置其内容。此方法常用于"设置初始值"或"表单重置"哦作。

插入内容到 FCK 编辑器：
oEditor.InsertHtml("html"); // "html"为HTML文本

检查 FCK 编辑器内容是否发生变化：
oEditor.IsDirty();

在 FCK 编辑器之外调用 FCK 编辑器工具条命令：
命令列表如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
DocProps, Templates, Link, Unlink, Anchor, BulletedList, NumberedList, About, Find, Replace, Image, Flash, SpecialChar, Smiley, Table, TableProp, TableCellProp, UniversalKey, Style, FontName, FontSize, FontFormat, Source, Preview, Save, NewPage, PageBreak, TextColor, BGColor, PasteText, PasteWord, TableInsertRow, TableDeleteRows, TableInsertColumn, TableDeleteColumns, TableInsertCell, TableDeleteCells, TableMergeCells, TableSplitCell, TableDelete, Form, Checkbox, Radio, TextField, Textarea, HiddenField, Button, Select, ImageButton, SpellCheck, FitWindow, Undo, Redo
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
使用方法如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
oEditor.Commands.GetCommand('FitWindow').Execute();

本文链接

C#导出Excel的示例

2011-12-09T07:50:00Z

概要：

excel导出在C#代码中应用己经很广泛了，我这里就做些总结，供自己和读者学习用。

Excel知识点。
一、添加引用和命名空间
添加Microsoft.Office.Interop.Excel引用，它的默认路径是C:\Program Files\Microsoft Visual Studio 9.0\Visual Studio Tools for Office\PIA\Office12\Microsoft.Office.Interop.Excel.dll
代码中添加引用using Microsoft.Office.Interop.Excel;
二、Excel类的简单介绍
此命名空间下关于Excel类的结构分别为：
ApplicationClass - 就是我们的excel应用程序。
Workbook - 就是我们平常见的一个个excel文件，经常是使用Workbooks类对其进行操作。
Worksheet - 就是excel文件中的一个个sheet页。
Worksheet.Cells[row, column] - 就是某行某列的单元格，注意这里的下标row和column都是从1开始的，跟我平常用的数组或集合的下标有所不同。
知道了上述基本知识后，利用此类来操作excel就清晰了很多。
三、Excel的操作
任何操作Excel的动作首先肯定是用excel应用程序，首先要new一个ApplicationClass 实例，并在最后将此实例释放。

ApplicationClass xlsApp = new ApplicationClass(); // 1. 创建Excel应用程序对象的一个实例，相当于我们从开始菜单打开Excel应用程序。 
if (xlsApp == null) 
{ 
//对此实例进行验证，如果为null则表示运行此代码的机器可能未安装Excel 
}

1. 打开现有的Excel文件

Workbook workbook = xlsApp.Workbooks.Open(excelFilePath, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing); 
Worksheet mySheet = workbook.Sheets[1] as Worksheet; //第一个sheet页 
mySheet.Name = "testsheet"; //这里修改sheet名称

2.复制sheet页

1	`mySheet.Copy(Type.Missing, workbook.Sheets[1]);` `//复制mySheet成一个新的sheet页，复制完后的名称是mySheet页名称后加一个(2)，这里就是testsheet(2)，复制完后，Worksheet的数量增加一个`

注意这里Copy方法的两个参数，指是的复制出来新的sheet页是在指定sheet页的前面还是后面，上面的例子就是指复制的sheet页在第一个sheet页的后面。
3.删除sheet页

1 2	`xlsApp.DisplayAlerts =` `false;` `//如果想删除某个sheet页，首先要将此项设为fasle。` `(xlsApp.ActiveWorkbook.Sheets[1]` `as` `Worksheet).Delete();`

4.选中sheet页

1	`(xlsApp.ActiveWorkbook.Sheets[1]` `as` `Worksheet).Select(Type.Missing);` `//选中某个sheet页`

5.另存excel文件

1 2	`workbook.Saved =` `true;` `workbook.SaveCopyAs(filepath);`

6.释放excel资源

workbook.Close(true, Type.Missing, Type.Missing); 
workbook = null; 
xlsApp.Quit(); 
xlsApp = null;

一般的我们传入一个DataTable生成Excel代码

/// <summary> 
///  
/// </summary> 
/// <param name="dt"></param> 
protected void ExportExcel(DataTable dt) 
{ 
    if (dt == null||dt.Rows.Count==0) return; 
    Microsoft.Office.Interop.Excel.Application xlApp = new Microsoft.Office.Interop.Excel.Application(); 
 
    if (xlApp == null) 
    { 
        return; 
    } 
    System.Globalization.CultureInfo CurrentCI = System.Threading.Thread.CurrentThread.CurrentCulture; 
    System.Threading.Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo("en-US"); 
    Microsoft.Office.Interop.Excel.Workbooks workbooks = xlApp.Workbooks; 
    Microsoft.Office.Interop.Excel.Workbook workbook = workbooks.Add(Microsoft.Office.Interop.Excel.XlWBATemplate.xlWBATWorksheet); 
    Microsoft.Office.Interop.Excel.Worksheet worksheet = (Microsoft.Office.Interop.Excel.Worksheet)workbook.Worksheets[1]; 
    Microsoft.Office.Interop.Excel.Range range; 
    long totalCount = dt.Rows.Count; 
    long rowRead = 0; 
    float percent = 0; 
    for (int i = 0; i < dt.Columns.Count; i++) 
    { 
        worksheet.Cells[1, i + 1] = dt.Columns[i].ColumnName; 
        range = (Microsoft.Office.Interop.Excel.Range)worksheet.Cells[1, i + 1]; 
        range.Interior.ColorIndex = 15; 
        range.Font.Bold = true; 
    } 
    for (int r = 0; r < dt.Rows.Count; r++) 
    { 
        for (int i = 0; i < dt.Columns.Count; i++) 
        { 
            worksheet.Cells[r + 2, i + 1] = dt.Rows[r][i].ToString(); 
        } 
        rowRead++; 
        percent = ((float)(100 * rowRead)) / totalCount; 
    } 
    xlApp.Visible = true; 
}

如果要在excel中插入图片，我们需要把代码加入一行即可，如下所示

protected void ExportExcel(DataTable dt) 
{ 
    if (dt == null || dt.Rows.Count == 0) return; 
    Microsoft.Office.Interop.Excel.Application xlApp = new Microsoft.Office.Interop.Excel.Application(); 
 
    if (xlApp == null) 
    { 
        return; 
    } 
    System.Globalization.CultureInfo CurrentCI = System.Threading.Thread.CurrentThread.CurrentCulture; 
    System.Threading.Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo("en-US"); 
    Microsoft.Office.Interop.Excel.Workbooks workbooks = xlApp.Workbooks; 
    Microsoft.Office.Interop.Excel.Workbook workbook = workbooks.Add(Microsoft.Office.Interop.Excel.XlWBATemplate.xlWBATWorksheet); 
    Microsoft.Office.Interop.Excel.Worksheet worksheet = (Microsoft.Office.Interop.Excel.Worksheet)workbook.Worksheets[1]; 
    Microsoft.Office.Interop.Excel.Range range; 
    long totalCount = dt.Rows.Count; 
    long rowRead = 0; 
    float percent = 0; 
    for (int i = 0; i < dt.Columns.Count; i++) 
    { 
        worksheet.Cells[1, i + 1] = dt.Columns[i].ColumnName; 
        range = (Microsoft.Office.Interop.Excel.Range)worksheet.Cells[1, i + 1]; 
        range.Interior.ColorIndex = 15; 
    } 
    for (int r = 0; r < dt.Rows.Count; r++) 
    { 
        for (int i = 0; i < dt.Columns.Count; i++) 
        { 
            try
            { 
                worksheet.Cells[r + 2, i + 1] = dt.Rows[r][i].ToString(); 
            } 
            catch
            { 
                worksheet.Cells[r + 2, i + 1] = dt.Rows[r][i].ToString().Replace("=", ""); 
            } 
        } 
        rowRead++; 
        percent = ((float)(100 * rowRead)) / totalCount; 
    } 
      
    worksheet.Shapes.AddPicture("C:\\Users\\spring\\Desktop\\1.gif", Microsoft.Office.Core.MsoTriState.msoFalse, Microsoft.Office.Core.MsoTriState.msoCTrue, 100, 200, 200, 300); 
    worksheet.Shapes.AddTextEffect(Microsoft.Office.Core.MsoPresetTextEffect.msoTextEffect1, "123456", "Red", 15, Microsoft.Office.Core.MsoTriState.msoFalse, Microsoft.Office.Core.MsoTriState.msoTrue, 150, 200); 
    xlApp.Visible = true; 
}

我们调用如下:

public void GenerateExcel() 
{ 
    DataTable dt = new DataTable(); 
    dt.Columns.Add("Name", typeof(string)); 
    dt.Columns.Add("Age", typeof(string)); 
    DataRow dr = dt.NewRow(); 
    dr["Name"] = "spring"; 
    dr["Age"] = "20"; 
    dt.Rows.Add(dr); 
    dt.AcceptChanges(); 
    ExportExcel(dt); 
}

运行结果如下所示:

其中如下代码的作用是

1	`worksheet.Shapes.AddPicture("C:\\Users\\spring\\Desktop\\1.gif", Microsoft.Office.Core.MsoTriState.msoFalse, Microsoft.Office.Core.MsoTriState.msoCTrue, 100, 200, 200, 300);`

在Excel的指定位置加入图片

1	`worksheet.Shapes.AddTextEffect(Microsoft.Office.Core.MsoPresetTextEffect.msoTextEffect1,` `"123456",` `"Red", 15, Microsoft.Office.Core.MsoTriState.msoFalse, Microsoft.Office.Core.MsoTriState.msoTrue, 150, 200);`

在Excel的指定位置加入文本框，和里面的内容.

我们可以这样来设计一个ExcelBase的基类:

先创建一个ExcelBE.cs：

public class ExcelBE 
 { 
     private int _row = 0; 
     private int _col = 0; 
     private string _text = string.Empty; 
     private string _startCell = string.Empty; 
     private string _endCell = string.Empty; 
     private string _interiorColor = string.Empty; 
     private bool _isMerge = false; 
     private int _size = 0; 
     private string _fontColor = string.Empty; 
     private string _format = string.Empty; 
 
     public ExcelBE(int row, int col, string text, string startCell, string endCell, string interiorColor, bool isMerge, int size, string fontColor, string format) 
     { 
         _row = row; 
         _col = col; 
         _text = text; 
         _startCell = startCell; 
         _endCell = endCell; 
         _interiorColor = interiorColor; 
         _isMerge = isMerge; 
         _size = size; 
         _fontColor = fontColor; 
         _format = format; 
     } 
 
     public ExcelBE() 
     { } 
 
     public int Row 
     { 
         get { return _row; } 
         set { _row = value; } 
     } 
 
     public int Col 
     { 
         get { return _col; } 
         set { _col = value; } 
     } 
 
     public string Text 
     { 
         get { return _text; } 
         set { _text = value; } 
     } 
 
     public string StartCell 
     { 
         get { return _startCell; } 
         set { _startCell = value; } 
     } 
 
     public string EndCell 
     { 
         get { return _endCell; } 
         set { _endCell = value; } 
     } 
 
     public string InteriorColor 
     { 
         get { return _interiorColor; } 
         set { _interiorColor = value; } 
     } 
 
     public bool IsMerge 
     { 
         get { return _isMerge; } 
         set { _isMerge = value; } 
     } 
 
     public int Size 
     { 
         get { return _size; } 
         set { _size = value; } 
     } 
 
     public string FontColor 
     { 
         get { return _fontColor; } 
         set { _fontColor = value; } 
     } 
 
     public string Formart 
     { 
         get { return _format; } 
         set { _format = value; } 
     } 
 
 }

接下来创建ExcelBase.cs:

public class ExcelBase 
{ 
    private Microsoft.Office.Interop.Excel.Application app = null; 
    private Microsoft.Office.Interop.Excel.Workbook workbook = null; 
    private Microsoft.Office.Interop.Excel.Worksheet worksheet = null; 
    private Microsoft.Office.Interop.Excel.Range workSheet_range = null; 
 
    public ExcelBase() 
    { 
        createDoc(); 
    } 
 
    public void createDoc() 
    { 
        try
        { 
            app = new Microsoft.Office.Interop.Excel.Application(); 
            app.Visible = true; 
            workbook = app.Workbooks.Add(1); 
            worksheet = (Microsoft.Office.Interop.Excel.Worksheet)workbook.Sheets[1]; 
        } 
        catch (Exception e) 
        { 
            Console.Write("Error"); 
        } 
        finally
        { 
        } 
    } 
 
    public void InsertData(ExcelBE be) 
    { 
        worksheet.Cells[be.Row, be.Col] = be.Text; 
        workSheet_range = worksheet.get_Range(be.StartCell, be.EndCell); 
        workSheet_range.MergeCells = be.IsMerge; 
        workSheet_range.Interior.Color = GetColorValue(be.InteriorColor); 
        workSheet_range.Borders.Color = System.Drawing.Color.Black.ToArgb(); 
        workSheet_range.ColumnWidth = be.Size; 
        workSheet_range.Font.Color = string.IsNullOrEmpty(be.FontColor) ? System.Drawing.Color.White.ToArgb() : System.Drawing.Color.Black.ToArgb(); 
        workSheet_range.NumberFormat = be.Formart; 
    } 
 
    private int GetColorValue(string interiorColor) 
    { 
        switch (interiorColor) 
        { 
            case "YELLOW": 
                return System.Drawing.Color.Yellow.ToArgb(); 
            case "GRAY": 
                return System.Drawing.Color.Gray.ToArgb(); 
            case "GAINSBORO": 
                return System.Drawing.Color.Gainsboro.ToArgb(); 
            case "Turquoise": 
                return System.Drawing.Color.Turquoise.ToArgb(); 
            case "PeachPuff": 
                return System.Drawing.Color.PeachPuff.ToArgb(); 
 
            default: 
                return System.Drawing.Color.White.ToArgb(); 
        } 
    } 
}

调用的代码如下:

private void btnRun_Click(object sender, EventArgs e) 
{ 
    ExcelBase excel = new ExcelBase(); 
    //creates the main header 
    ExcelBE be = null; 
    be = new ExcelBE (5, 2, "Total of Products", "B5", "D5", "YELLOW", true, 10, "n",null); 
    excel.InsertData(be); 
    //creates subheaders 
    be = new ExcelBE (6, 2, "Sold Product", "B6", "B6", "GRAY", true, 10, "",null); 
    excel.InsertData(be); 
    be=new ExcelBE(6, 3, "", "C6", "C6", "GRAY", true, 10, "",null); 
    excel.InsertData(be); 
    be=new ExcelBE (6, 4, "Initial Total", "D6", "D6", "GRAY", true, 10, "",null); 
    excel.InsertData(be); 
    //add Data to cells 
    be=new ExcelBE (7, 2, "114287", "B7", "B7",null,false,10,"", "#,##0"); 
    excel.InsertData(be); 
    be=new ExcelBE (7, 3, "", "C7", "C7", null,false,10,"",null); 
    excel.InsertData(be); 
    be = new ExcelBE(7, 4, "129121", "D7", "D7", null, false, 10, "", "#,##0"); 
    excel.InsertData(be); 
    //add percentage row 
    be = new ExcelBE(8, 2, "", "B8", "B8", null, false, 10, "", ""); 
    excel.InsertData(be); 
    be = new ExcelBE(8, 3, "=B7/D7", "C8", "C8", null, false, 10, "", "0.0%"); 
    excel.InsertData(be); 
    be = new ExcelBE(8, 4, "", "D8", "D8", null, false, 10, "", ""); 
    excel.InsertData(be); 
    //add empty divider 
    be = new ExcelBE(9, 2, "", "B9", "D9", "GAINSBORO", true, 10, "",null); 
    excel.InsertData(be);    
 
}

结果如下图所示：

作者：spring yang

出处：http://www.cnblogs.com/springyangwc/

本文链接

(转)jquery调WCF

2011-10-27T08:33:00Z

在项目中用过一些WCF的技术
这篇文章是对以前用过的一点东西的一个梳理

一,webconfig的配置
除了一般的配置外,与WCF相关的配置如下

<system.serviceModel>
    <behaviors>
      <endpointBehaviors>
        <behavior name="AllenBehavior">
          <enableWebScript />
        </behavior>
      </endpointBehaviors>
    </behaviors>
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true" />
    <services>
      <service name="jqueryWCF.WCFservice">
        <endpoint address="" behaviorConfiguration="AllenBehavior"  binding="webHttpBinding" contract="jqueryWCF.WCFservice" />
      </service>
    </services>
  </system.serviceModel>

其中<service>节点中的name属性,是实现了服务契约的类型名,类型名必须是完整的,要包括名称空间
<endpoint>节点的address属性为空,说明使用基地址.
behaviorConfiguration属性与behavior节点的name属性相匹配
binding属性说明WCF服务使用什么协议,这里是HTTP协议
contract属性是描述契约的接口名称,也必须是完整的.如果没有接口直接写实现契约的类型名也可以(我这里就是这样).

<behavior>节点的信息是描述WCF服务端的一些特性,行为的

<behavior name="AllenBehavior"> name属性与前面说的behaviorConfiguration属性一致
<enableWebScript />节点使我们的WCF支持ajax

<serviceHostingEnvironment aspNetCompatibilityEnabled="true" />
与后端的AspNetCompatibilityRequirements配合使用

二:页面中的js代码
这段JS是写在JQUERY框架下面的

其中
$.ajax(.....)是框架提供的一个调用ajax的方法,兼容目前大多数浏览器

url: '/WCFservice.svc/InsertRow'
这里是WCF的地址+方法名

contentType: 'text/json',

这是以JSON的方式POST数据,当然也可以用XML的方式(要配合WCF后端的定义)

data: '{"id":'+id+',"title":"'+title+'","content":"'+content+'"}',

数据必须按照InsertRow方法的签名传递(这里稍有不慎就出错了,而且js的调试比较难搞)

success: function(msg) {}

成功后的回调函数,msg参数是一个object类型的,要eval()一下才能得到里面的数据

三:后端WCF代码

using System;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;

namespace jqueryWCF
{
    [ServiceContract(Namespace = "")]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class WCFservice
    {
        [OperationContract]
        [WebInvoke(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.WrappedRequest)]
        public string InsertRow(int id,string title,string content)
        {
            return string.Format("您输入的标题是：{0}\n\n您输入的内容是：{1}\n\n此文章的id是：{2}",title,content,id.ToString());
        }
    }
}

系统要引用System.ServiceModel.Web的DLL默认是不引用的

ServiceContract属性把此类型公开在WCF服务中

AspNetCompatibilityRequirements属性确保端点使用了WEBHTTP绑定模型
与webconfig中的<serviceHostingEnvironment aspNetCompatibilityEnabled="true" />配合使用

OperationContract属性把方法公开在WCF服务中

RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json
说明传递近来的数据都是JSON形式的,只有两种形式,一个是JSON,一个是XML.
(我觉得JSON更"对象"一点,XML更"数据"一点)

BodyStyle = WebMessageBodyStyle.WrappedRequest

是把参数包装一下
这样可以传递多个参数进来,

我猜返回值之所以是一个javascript的对象(json流得来的对象)也是因为这里

项目示例:点此下载

http://www.cnblogs.com/liulun/articles/1425382.html#1661515 注：评论更精彩

http://www.cnblogs.com/cokkiy/archive/2009/10/22/jscallwcf.html

http://www.cnblogs.com/dudu/archive/2011/01/19/1939094.html

本文链接

JavaScript的单线程性质以及定时器的工作原理

2011-10-27T04:55:00Z

最近在写JavaScript时遇到一些问题，就是当JavaScript多事件连续触发，JavaScript的单线程引擎是如何控制的。找了一些资料，觉得很有用，在此分享一下。 
虽然不是原创，但是觉得此文章对JavaScript程序员非常有用。翻译的不是十分精确，但希望对大家有用。
原文：John Resig   http://ejohn.org/blog/how-javascript-timers-work/
How JavaScript Timers Work
从基础的层面来讲，理解JavaScript的定时器是如何工作的是非常重要的。计时器的执行常常和我们的直观想象不同，那是因为JavaScript引擎是单线程的。我们先来认识一下下面三个函数是如何控制计时器的。
var id = setTimeout(fn, delay); - 初始化一个计时器，然后在指定的时间间隔后执行。该函数返回一个唯一的标志ID（Number类型），我们可以使用它来取消计时器。
var id = setInterval(fn, delay); - 和setTimeout有些类似，但它是连续调用一个函数（时间间隔是delay参数）直到它被取消。
clearInterval(id);, clearTimeout(id); - 使用计时器ID（setTimeout 和 setInterval的返回值）来取消计时器回调的发生
为了理解计时器的内在执行原理，有一个重要的概念需要加以探讨：计时器的延迟(delay)是无法得到保障的。由于所有JavaScript代码是在一个线程里执行的，所有异步事件（例如，鼠标点击和计时器）只有拥有执行机会时才会执行。用一个很好的图表加以说明：
 

(点击查看大图) 
在这个图表中有许多信息需要理解，如果完全理解了它们，你会对JavaScript引擎如何实现异步事件有一个很好的认识。这是一个一维的图标：垂直方向表示时间，蓝色的区块表示JavaScript代码执行块。例如第一个JavaScript代码执行块需要大约18ms，鼠标点击所触发的代码执行块需要11ms，等等。
由于JavaScript引擎同一时间只执行一条代码（这是由于JavaScript单线程的性质），所以每一个JavaScript代码执行块会“阻塞”其它异步事件的执行。这就意味着当一个异步事件发生（例如，鼠标点击，计时器被触发，或者Ajax异步请求）后，这些事件的回调函数将排在执行队列的最后等待执行（实际上，排队的方式根据浏览器的不同而不同，所以这里只是一个简化）；
从第一个JavaScript执行块开始研究，在第一个执行块中两个计时器被初始化：一个10ms的setTimeout()和一个10ms的setInterval()。依据何时何地计时器被初始化(计时器初始化完毕后就会开始计时)，计时器实际上会在第一个代码块执行完毕前被触发。但是，计时器上绑定的函数不会立即执行（不被立即执行的原因是JavaScript是单线程的）。实际上，被延迟的函数将依次排在执行队列的最后，等待下一次恰当的时间再执行。
此外，在第一个JavaScript执行块中我们看到了一个“鼠标点击”事件发生了。一个JavaScript回调函数绑定在这个异步事件上了（我们从来不知道用户什么时候执行这个（点击）事件，因此认为它是异步的），这个函数不会被立即执行，和上面的计时器一样，它将排在执行队列的最后，等待下一次恰当的时候执行。
当第一个JavaScript执行块执行完毕后，浏览器会立即问一个问题：哪个函数（语句）在等待被执行？在这时，一个“鼠标点击事件处理函数”和一个“计时器回调函数”都在等待执行。浏览器会选择一个（实际上选择了“鼠标点击事件的处理函数”，因为由图可知它是先进队的）立即执行。而“计时器回调函数”将等待下次适合的时间执行。
注意，当“鼠标点击事件处理函数”执行的时候，setInterval的回调函数第一次被触发了。和setTimeout的回调函数一样，它将排到执行队列的最后等待执行。但是，一定要注意这一点：当setInterval回调函数第二次被触发时（此时setTimeout函数仍在执行）setTimeout的第一次触发将被抛弃掉。当一个很长的代码块在执行时，可能把所有的setInterval回调函数都排在执行队列的后面，代码块执行完之后，结果便会是一大串的setInterval回调函数等待执行，并且这些函数之间没有间隔，直到全部完成。所以，浏览器倾向于的当没有更多interval的处理函数在排队时再将下一个处理函数排到队尾(这是由于间隔的问题)。
我们能够发现，当第三个setInterval回调函数被触发时，之前的setInterval回调函数仍在执行。这就说明了一个很重要的事实：setInterval不会考虑当前正在执行什么，而把所有的堵塞的函数排到队列尾部。这意味着两次setInterval回调函数之间的时间间隔会被牺牲掉（缩减）。
最后，当第二个setInterval回调函数执行完毕后，我们可以看到没有任何程序等待JavaScript引擎执行了。这就意味着浏览器现在在等待一个新的异步事件的发生。在50ms时一个新的setInterval回调函数再次被触发，这时，没有任何的执行块阻塞它的执行了。所以它会立刻被执行。
让我们用一个例子来阐明setTimeout和setInterval之间的区别：
  setTimeout(function(){
    /* Some long block of code... */
    setTimeout(arguments.callee, 10);
  }, 10);
  
  setInterval(function(){
    /* Some long block of code... */
  }, 10);
 
这两句代码乍一看没什么差别，但是它们是不同的。setTimeout回调函数的执行和上一次执行之间的间隔至少有10ms（可能会更多，但不会少于10ms），而setInterval的回调函数将尝试每隔10ms执行一次，不论上次是否执行完毕。
在这里我们学到了很多知识，总结一下：
JavaScript引擎是单线程的，强制所有的异步事件排队等待执行
setTimeout 和 setInterval 在执行异步代码的时候有着根本的不同
如果一个计时器被阻塞而不能立即执行，它将延迟执行直到下一次可能执行的时间点才被执行（比期望的时间间隔要长些）
如果setInterval回调函数的执行时间将足够长（比指定的时间间隔长），它们将连续执行并且彼此之间没有时间间隔。
上述这些知识点都是非常重要的。了解了JavaScript引擎是如何工作的，尤其是大量的异步事件（连续）发生时，才能为构建高级应用程序打好基础。
http://www.phpweblog.net/rainman/archive/2009/01/05/6267.html

本文链接

深入理解JavaScript定时机制

2011-10-27T03:33:00Z

本文地址: http://www.laruence.com/2009/09/23/1089.html
转载文章

转帖地址:http://www.9demo.com/archives/341

容易欺骗别人感情的JavaScript定时器

JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如

setTimeout(function() {
alert('你好!');
}, 0);
setInterval(callbackFunction, 100);

认为setTimeout中的问候方法会立即被执行,因为这并不是凭空而说,而是JavaScript API文档明确定义第二个参数意义为隔多少毫秒后,回调方法就会被执行. 这里设成0毫秒,理所当然就立即被执行了.
同理对setInterval的callbackFunction方法每间隔100毫秒就立即被执行深信不疑!

但随着JavaScript应用开发经验不断的增加和丰富,有一天你发现了一段怪异的代码而百思不得其解:

div.onclick = function(){
setTimeout(function() {
document.getElementById('inputField').focus();
}, 0);
};

既然是0毫秒后执行,那么还用setTimeout干什么, 此刻, 坚定的信念已开始动摇.

直到最后某一天 , 你不小心写了一段糟糕的代码:

setTimeout(function() {
while (true) {
}
}, 100);
setTimeout(function() {
alert('你好!');
}, 200);
setInterval(callbackFunction, 200);

第一行代码进入了死循环,但不久你就会发现,第二,第三行并不是预料中的事情,alert问候未见出现,callbacKFunction也杳无音讯!

这时你彻底迷惘了,这种情景是难以接受的,因为改变长久以来既定的认知去接受新思想的过程是痛苦的,但情事实摆在眼前,对JavaScript真理的探求并不会因为痛苦而停止,下面让我们来展开JavaScript线程和定时器探索之旅!

拔开云雾见月明

出现上面所有误区的最主要一个原因是:潜意识中认为,JavaScript引擎有多个线程在执行,JavaScript的定时器回调函数是异步执行的.

而事实上的,JavaScript使用了障眼法,在多数时候骗过了我们的眼睛,这里背光得澄清一个事实:

JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序.

JavaScript引擎用单线程运行也是有意义的,单线程不必理会线程同步这些复杂的问题,问题得到简化.

那么单线程的JavaScript引擎是怎么配合浏览器内核处理这些定时器和响应浏览器事件的呢?
下面结合浏览器内核处理方式简单说明.

浏览器内核实现允许多个线程异步执行,这些线程在内核制控下相互配合以保持同步.假如某一浏览器内核的实现至少有三个常驻线程:javascript引擎线程,界面渲染线程,浏览器事件触发线程,除些以外,也有一些执行完就终止的线程,如Http请求线程,这些异步线程都会产生不同的异步事件,下面通过一个图来阐明单线程的JavaScript引擎与另外那些线程是怎样互动通信的.虽然每个浏览器内核实现细节不同,但这其中的调用原理都是大同小异.

Js线程图示

由图可看出,浏览器中的JavaScript引擎是基于事件驱动的,这里的事件可看作是浏览器派给它的各种任务,这些任务可以源自JavaScript引擎当前执行的代码块,如调用setTimeout添加一个任务,也可来自浏览器内核的其它线程,如界面元素鼠标点击事件,定时触发器时间到达通知,异步请求状态变更通知等.从代码角度看来任务实体就是各种回调函数,JavaScript引擎一直等待着任务队列中任务的到来.由于单线程关系,这些任务得进行排队,一个接着一个被引擎处理.

上图t1-t2..tn表示不同的时间点,tn下面对应的小方块代表该时间点的任务,假设现在是t1时刻,引擎运行在t1对应的任务方块代码内,在这个时间点内,我们来描述一下浏览器内核其它线程的状态.

t1时刻:

GUI渲染线程:

该线程负责渲染浏览器界面HTML元素,当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行.本文虽然重点解释JavaScript定时机制,但这时有必要说说渲染线程,因为该线程与JavaScript引擎线程是互斥的,这容易理解,因为JavaScript脚本是可操纵DOM元素,在修改这些元素属性同时渲染界面,那么渲染线程前后获得的元素数据就可能不一致了.

在JavaScript引擎运行脚本期间,浏览器渲染线程都是处于挂起状态的,也就是说被”冻结”了.

所以,在脚本中执行对界面进行更新操作,如添加结点,删除结点或改变结点的外观等更新并不会立即体现出来,这些操作将保存在一个队列中,待JavaScript引擎空闲时才有机会渲染出来.

GUI事件触发线程:

JavaScript脚本的执行不影响html元素事件的触发,在t1时间段内,首先是用户点击了一个鼠标键,点击被浏览器事件触发线程捕捉后形成一个鼠标点击事件,由图可知,对于JavaScript引擎线程来说,这事件是由其它线程异步传到任务队列尾的,由于引擎正在处理t1时的任务,这个鼠标点击事件正在等待处理.

定时触发线程:

注意这里的浏览器模型定时计数器并不是由JavaScript引擎计数的,因为JavaScript引擎是单线程的,如果处于阻塞线程状态就计不了时,它必须依赖外部来计时并触发定时,所以队列中的定时事件也是异步事件.

由图可知,在这t1的时间段内,继鼠标点击事件触发后,先前已设置的setTimeout定时也到达了,此刻对JavaScript引擎来说,定时触发线程产生了一个异步定时事件并放到任务队列中, 该事件被排到点击事件回调之后,等待处理.
同理, 还是在t1时间段内,接下来某个setInterval定时器也被添加了,由于是间隔定时,在t1段内连续被触发了两次,这两个事件被排到队尾等待处理.

可见,假如时间段t1非常长,远大于setInterval的定时间隔,那么定时触发线程就会源源不断的产生异步定时事件并放到任务队列尾而不管它们是否已被处理,但一旦t1和最先的定时事件前面的任务已处理完,这些排列中的定时事件就依次不间断的被执行,这是因为,对于JavaScript引擎来说,在处理队列中的各任务处理方式都是一样的,只是处理的次序不同而已.

t1过后,也就是说当前处理的任务已返回,JavaScript引擎会检查任务队列,发现当前队列非空,就取出t2下面对应的任务执行,其它时间依此类推,由此看来:

如果队列非空,引擎就从队列头取出一个任务,直到该任务处理完,即返回后引擎接着运行下一个任务,在任务没返回前队列中的其它任务是没法被执行的.

相信您现在已经很清楚JavaScript是否可多线程,也了解理解JavaScript定时器运行机制了,下面我们来对一些案例进行分析:

案例1:setTimeout与setInterval

setTimeout(function() {
/* 代码块... */
setTimeout(arguments.callee, 10);
}, 10);

setInterval(function(){
/*代码块... */
}, 10);

这两段代码看一起效果一样,其实非也,第一段中回调函数内的setTimeout是JavaScript引擎执行后再设置新的setTimeout定时, 假定上一个回调处理完到下一个回调开始处理为一个时间间隔,理论两个setTimeout回调执行时间间隔>=10ms .第二段自setInterval设置定时后,定时触发线程就会源源不断的每隔十秒产生异步定时事件并放到任务队列尾,理论上两个setInterval回调执行时间间隔<=10.

案例2:ajax异步请求是否真的异步?

很多同学朋友搞不清楚,既然说JavaScript是单线程运行的,那么XMLHttpRequest在连接后是否真的异步?
其实请求确实是异步的,不过这请求是由浏览器新开一个线程请求(参见上图),当请求的状态变更时,如果先前已设置回调,这异步线程就产生状态变更事件放到JavaScript引擎的处理队列中等待处理,当任务被处理时,JavaScript引擎始终是单线程运行回调函数,具体点即还是单线程运行onreadystatechange所设置的函数.

本文链接

JavaScript异步编程的Promise模式

2011-10-27T02:54:00Z

异步模式在web编程中变得越来越重要，对于web主流语言Javscript来说，这种模式实现起来不是很利索，为此，许多Javascript库（比如 jQuery和Dojo）添加了一种称为promise的抽象（有时也称之为deferred）。通过这些库，开发人员能够在实际编程中使用 promise模式。IE官方博客最近发表了一篇文章，详细讲述了如何使用XMLHttpRequest2来实践promise模式。我们来了解一下相关的概念和应用。

考虑这样一个例子，某网页存在异步操作（通过XMLHttpRequest2或者 Web Workers）。随着Web 2.0技术的深入，浏览器端承受了越来越多的计算压力，所以“并发”具有积极的意义。对于开发人员来说，既要保持页面与用户的交互不受影响，又要协调页面与异步任务的关系，这种非线性执行的编程要求存在适应的困难。先抛开页面交互不谈，我们能够想到对于异步调用需要处理两种结果——成功操作和失败处理。在成功的调用后，我们可能需要把返回的结果用在另一个Ajax请求中，这就会出现“函数连环套”的情况（在笔者的另一篇文章《NodeJS的异步编程风格》中有详细的解释）。这种情况会造成编程的复杂性。看看下面的代码示例（基于XMLHttpRequest2）：

上面的代码其功能是获取Twitter中hashtag为IE10和IE9的内容并在页面中显示出来。这种嵌套的回调函数难以理解，开发人员需要仔细分析哪些代码用于应用的业务逻辑，而哪些代码处理异步函数调用的，代码结构支离破碎。错误处理也分解了，我们需要在各个地方检测错误的发生并作出相应的处理。

为了降低异步编程的复杂性，开发人员一直寻找简便的方法来处理异步操作。其中一种处理模式称为promise，它代表了一种可能会长时间运行而且不一定必须完整的操作的结果。这种模式不会阻塞和等待长时间的操作完成，而是返回一个代表了承诺的（promised）结果的对象。

考虑这样一个例子，页面代码需要访问第三方的API，网络延迟可能会造成响应时间较长，在这种情况下，采用异步编程不会影响整个页面与用户的交互。promise模式通常会实现一种称为then的方法，用来注册状态变化时对应的回调函数。比如下面的代码示例：

searchTwitter(term).then(filterResults).then(displayResults);

promise模式在任何时刻都处于以下三种状态之一：未完成（unfulfilled）、已完成（resolved）和拒绝（rejected）。以CommonJS Promise/A 标准为例，promise对象上的then方法负责添加针对已完成和拒绝状态下的处理函数。then方法会返回另一个promise对象，以便于形成promise管道，这种返回promise对象的方式能够支持开发人员把异步操作串联起来，如then(resolvedHandler, rejectedHandler); 。resolvedHandler 回调函数在promise对象进入完成状态时会触发，并传递结果；rejectedHandler函数会在拒绝状态下调用。

有了promise模式，我们可以重新实现上面的Twitter示例。为了更好的理解实现方法，我们尝试着从零开始构建一个promise模式的框架。首先需要一些对象来存储promise。

var Promise = function () {
/* initialize promise */
};

接下来，定义then方法，接受两个参数用于处理完成和拒绝状态。

Promise.prototype.then = function (onResolved, onRejected) {
/* invoke handlers based upon state transition */
};

同时还需要两个方法来执行理从未完成到已完成和从未完成到拒绝的状态转变。

Promise.prototype.resolve = function (value) {
/* move from unfulfilled to resolved */
};

Promise.prototype.reject = function (error) {
/* move from unfulfilled to rejected */
};

现在搭建了一个promise的架子，我们可以继续上面的示例，假设只获取IE10的内容。创建一个方法来发送Ajax请求并将其封装在promise中。这个promise对象分别在xhr.onload和xhr.onerror中指定了完成和拒绝状态的转变过程，请注意searchTwitter函数返回的正是promise对象。然后，在loadTweets中，使用then方法设置完成和拒绝状态对应的回调函数。

到目前为止，我们可以把promise模式应用于单个Ajax请求，似乎还体现不出promise的优势来。下面来看看多个Ajax请求的并发协作。此时，我们需要另一个方法when来存储准备调用的promise对象。一旦某个promise从未完成状态转化为完成或者拒绝状态，then方法里对应的处理函数就会被调用。when方法在需要等待所有操作都完成的时候至关重要。

Promise.when = function () {
/* handle promises arguments and queue each */
};

以刚才获取IE10和IE9两块内容的场景为例，我们可以这样来写代码：

var container, promise1, promise2;
container = document.getElementById('container');
promise1 = searchTwitter('#IE10');
promise2 = searchTwitter('#IE9');
Promise.when(promise1, promise2).then(function (data1, data2) {

    /* Reshuffle due to date */
    var totalResults = concatResults(data1.results, data2.results);
    totalResults.forEach(function (tweet) {
        var el = document.createElement('li');
        el.innerText = tweet.text;
        container.appendChild(el);
    });
}, handleError);

分析上面的代码可知，when函数会等待两个promise对象的状态发生变化再做具体的处理。在实际的Promise库中，when函数有很多变种，比如 when.some()、when.all()、when.any()等，读者从函数名字中大概能猜出几分意思来，详细的说明可以参考CommonJS的一个promise实现when.js。

除了CommonJS，其他主流的Javascript框架如jQuery、Dojo等都存在自己的promise实现。开发人员应该好好利用这种模式来降低异步编程的复杂性。我们选取Dojo为例，看一看它的实现有什么异同。

Dojo框架里实现promise模式的对象是Deferred，该对象也有then函数用于处理完成和拒绝状态并支持串联，同时还有resolve和reject，功能如之前所述。下面的代码完成了Twitter的场景：

不仅如此，类似dojo.xhrGet方法返回的即是dojo.Deferred对象，所以无须自己包装promise模式。

var deferred = dojo.xhrGet({
    url: "search.json",
    handleAs: "json"
});

deferred.then(function (data) {
    /* handle results */
}, function (error) {
    /* handle error */
});

除此之外，Dojo还引入了dojo.DeferredList,支持开发人员同时处理多个dojo.Deferred对象，这其实就是上面所提到的when方法的另一种表现形式。

dojo.require("dojo.DeferredList");
dojo.ready(function () {
    var container, def1, def2, defs;
    container = dojo.byId('container');
    def1 = searchTwitter('#IE10');
    def2 = searchTwitter('#IE9');

    defs = new dojo.DeferredList([def1, def2]);

    defs.then(function (data) {
        // Handle exceptions
        if (!results[0][0] || !results[1][0]) {
            dojo.create("li", {
                innerHTML: 'an error occurred'
            }, container);
            return;
        }
        var totalResults = concatResults(data[0][1].results, data[1][1].results);

        totalResults.forEach(function (tweet) {
            dojo.create("li", {
                innerHTML: tweet.text
            }, container);
        });
    });
});

上面的代码比较清楚，不再详述。

说到这里，读者可能已经对promise模式有了一个比较完整的了解，异步编程会变得越来越重要，在这种情况下，我们需要找到办法来降低复杂度，promise模式就是一个很好的例子，它的风格比较人性化，而且主流的JS框架提供了自己的实现。所以在编程实践中，开发人员应该尝试这种便捷的编程技巧。需要注意的是，promise模式的使用需要恰当地设置promise对象，在对应的事件中调用状态转换函数，并且在最后返回promise对象。

技术社区对异步编程的关注也在升温，国内社区也发出了自己的声音。资深技术专家老赵就发布了一套开源的异步开发辅助库Jscex，它的设计很巧妙，抛弃了回调函数的编程方式，采用一种“线性编码、异步执行”的思想，感兴趣的读者可以查看这里。

不仅仅是前端的JS库，如今火热的NodeJS平台也出现了许多第三方的promise模块，具体的清单可以访问这里。

注：本文中的所有代码示例均来自于IE官方博客。

崔康是InfoQ中文站的翻译主编，从事企业级Web应用的相关工作，关注性能优化、Web技术、浏览器等领域。

转自：http://www.infoq.com/cn/news/2011/09/js-promise

本文链接

程序员技术练级攻略

2011-10-26T09:04:00Z

　伯乐人才网6月9日发表了《写给即将入行的程序员的一封信》，翻译自《An open letter to those who want to start programming》，我的朋友（他在本站的id是Mailper）告诉我，他希望在酷壳上看到一篇更具操作性的文章。因为他也是喜欢编程和技术的家伙，于是，我让他把他的一些学习Python和Web编程的一些点滴总结一下。于是他给我发来了一些他的心得和经历，我在把他的心得做了不多的增改，并根据我的经历增加了“进阶”一节。这是一篇由新手和我这个老家伙根据我们的经历完成的文章。

我的这个朋友把这篇文章取名叫Build Your Programming Technical Skills，我实在不知道用中文怎么翻译，但我在写的过程中，我觉得这很像一个打网游做任务升级的一个过程，所以取名叫“技术练级攻略”，题目有点大，呵呵，这个标题纯粹是为了好玩。这里仅仅是在分享Mailper和我个人的学习经历。（注：省去了我作为一个初学者曾经学习过的一些技术(今天明显过时了)，如：Delphi/Power builder，也省去了我学过的一些我觉得没意思的技术Lotus Notes/ActiveX/COM/ADO/ATL/.NET ……）

前言

你是否觉得自己从学校毕业的时候只做过小玩具一样的程序？走入职场后哪怕没有什么经验也可以把以下这些课外练习走一遍（朋友的抱怨：学校课程总是从理论出发，作业项目都看不出有什么实际作用，不如从工作中的需求出发）

建议：

不要乱买书，不要乱追新技术新名词，基础的东西经过很长时间积累而且还会在未来至少10年通用。
回顾一下历史，看看历史上时间线上技术的发展，你才能明白明天会是什么样。
一定要动手，例子不管多么简单，建议至少自己手敲一遍看看是否理解了里头的细枝末节。
一定要学会思考，思考为什么要这样，而不是那样。还要举一反三地思考。

注：你也许会很奇怪为什么下面的东西很偏Unix/Linux，这是因为我觉得Windows下的编程可能会在未来很没有前途，原因如下：

现在的用户界面几乎被两个东西主宰了，1）Web，2）移动设备iOS或Android。Windows的图形界面不吃香了。
越来越多的企业在用成本低性能高的Linux和各种开源技术来构架其系统，Windows的成本太高了。
微软的东西变得太快了，很不持久，他们完全是在玩弄程序员。详情参见《Windows编程革命史》

所以，我个人认为以后的趋势是前端是Web+移动，后端是Linux+开源。开发这边基本上没Windows什么事。

启蒙入门

1、学习一门脚本语言，例如Python/Ruby

可以让你摆脱对底层语言的恐惧感，脚本语言可以让你很快开发出能用得上的小程序。实践项目:

处理文本文件，或者csv(关键词 python csv， python open, python sys)读一个本地文件，逐行处理（例如word count，或者处理log）
遍历本地文件系统(sys, os, path)，例如写一个程序统计一个目录下所有文件大小并按各种条件排序并保存结果
跟数据库打交道(python sqlite)，写一个小脚本统计数据库里条目数量
学会用各种print之类简单粗暴的方式进行调试
学会用Google (phrase, domain, use reader to follow tech blogs)

为什么要学脚本语言，因为他们实在是太方便了，很多时候我们需要写点小工具或是脚本来帮我们解决问题，你就会发现正规的编程语言太难用了。

2、用熟一种程序员的编辑器(不是IDE)和一些基本工具

Vim / Emacs / Notepad++，学会如何配置代码补全，外观，外部命令等。
Source Insight (或 ctag)

使用这些东西不是为了Cool，而是这些编辑器在查看、修改代码/配置文章/日志会更快更有效率。

3、熟悉Unix/Linux Shell和常见的命令行

如果你用windows，至少学会用虚拟机里的linux，vmware player是免费的，装个Ubuntu吧
一定要少用少用图形界面。
学会使用man来查看帮助
文件系统结构和基本操作 ls/chmod/chown/rm/find/ln/cat/mount/mkdir/tar/gzip …
学会使用一些文本操作命令 sed/awk/grep/tail/less/more …
学会使用一些管理命令 ps/top/lsof/netstat/kill/tcpdump/iptables/dd…
了解/etc目录下的各种配置文章，学会查看/var/log下的系统日志，以及/proc下的系统运行信息
了解正则表达式，使用正则表达式来查找文件。

对于程序员来说Unix/Linux比Windows简单多了。（参看我四年前CSDN的博文《其实Unix很简单》）学会使用Unix/Linux你会发现图形界面在某些时候实在是太难用了，相当地相当地降低工作效率。

4、学习Web基础（HTML/CSS/JS)+服务器端技术(LAMP)

未来必然是Web的世界，学习Web基础的最佳网站是W3School。

学习HTML基本语法
学习CSS如何选中HTML元素并应用一些基本样式（关键词：box model）
学会用 Firefox + Firebug 或 Chrome 查看你觉得很炫的网页结构，并动态修改。
学习使用Javascript操纵HTML元件。理解DOM和动态网页（http://oreilly.com/catalog/9780596527402)网上有免费的章节，足够用了。或参看 DOM 。
学会用 Firefox + Firebug 或 Chrome 调试 Javascript 代码（设置断点，查看变量，性能，控制台等）
在一台机器上配置Apache或Nginx
学习PHP，让后台PHP和前台HTML进行数据交互，对服务器相应浏览器请求形成初步认识。实现一个表单提交和反显的功能。
把PHP连接本地或者远程数据库 MySQL（MySQL 和 SQL现学现用够了）
跟完一个名校的网络编程课程（例如：http://www.stanford.edu/~ouster/cgi-bin/cs142-fall10/index.php )不要觉得需要多于一学期时间，大学生是全职一学期选3-5门课，你业余时间一定可以跟上
学习一个Javascript库（例如jQuery或ExtJS）+ Ajax(异步读入一个服务器端图片或者数据库内容）+ JSON数据格式。
HTTP: The Definite Guide 读完前4章你就明白你每天上网用浏览器的时候发生的事情了(proxy, gateway, browsers)
做个小网站（例如：一个小的留言板，支持用户登录，Cookie/Session，增、删、改、查，上传图片附件，分页显示）
买个域名，租个空间，做个自己的网站。

进阶加深

1、 C语言和操作系统调用

重新学C语言，理解指针和内存模型，用C语言实现一下各种经典的算法和数据结构。推荐《计算机程序设计艺术》、《算法导论》和《编程珠玑》。
学习（麻省理工免费课程）计算机科学和编程导论
学习（麻省理工免费课程）C语言内存管理
学习Unix/Linux系统调用（Unix高级环境编程），了解系统层面的东西。
- 用这些系统知识操作一下文件系统，用户（实现一个可以拷贝目录树的小程序）
- 用fork/wait/waitpid写一个多进程的程序，用pthread写一个多线程带同步或互斥的程序。多进程多进程购票的程序。
- 用signal/kill/raise/alarm/pause/sigprocmask实现一个多进程间的信号量通信的程序。
- 学会使用gcc和gdb来编程和调试程序（参看我的《用gdb调试程序》）
- 学会使用makefile来编译程序。（参看我的《跟我一起写makefile》）
- IPC和Socket的东西可以放到高级中来实践。
学习Windows SDK编程（Windows 程序设计，）
- 写一个窗口，了解WinMain/WinProcedure，以及Windows的消息机制。
- 写一些程序来操作Windows SDK中的资源文件或是各种图形控件，以及作图的编程。
- 学习如何使用MSDN查看相关的SDK函数，各种WM_消息以及一些例程。
- 这本书中有很多例程，在实践中请不要照抄，试着自己写一个自己的例程。
- 不用太多于精通这些东西，因为GUI正在被Web取代，主要是了解一下Windows 图形界面的编程。

2、学习Java

Java 的学习主要是看经典的Core Java 《Java 核心技术编程》和《Java编程思想》（有两卷，我仅链了第一卷，足够了，因为Java的图形界面了解就可以了）
学习JDK，学会查阅Java API Doc http://download.oracle.com/javase/6/docs/api/
了解一下Java这种虚拟机语言和C和Python语言在编译和执行上的差别。从C、Java、Python思考一下“跨平台”这种技术。
学会使用IDE Eclipse，使用 Eclipse 编译，调试和开发Java程序。
建一个Tomcat的网站，尝试一下JSP/Servlet/JDBC/MySQL的Web开发。把前面所说的那个PHP的小项目试着用JSP和Servlet实现一下。

3、Web的安全与架构

学习HTML5，网上有很多很多教程，以前酷壳也介绍过很多，我在这里就不罗列了。
学习Web开发的安全问题（参考新浪微博被攻击的这个事，以及Ruby的这篇文章）
学习HTTP Server的rewrite机制，Nginx的反向代理机制，fast-cgi（如：PHP-FPM）
学习Web的静态页面缓存技术。
学习Web的异步工作流处理，数据Cache，数据分区，负载均衡，水平扩展的构架。
实践任务：
- 使用HTML5的 canvas 制作一些Web动画。
- 尝试在前面开发过的那个Web应用中进行SQL注入，JS注入，以及XSS攻击。
- 把前面开发过的那个Web应用改成构造在Nginx + PHP-FPM + 静态页面缓存的网站。

4、一些开发工具

学会使用SVN或Git来管理程序版本。
学会使用JUnit来对Java进行单元测试。
学习C语言和Java语言的 coding standard 或 coding guideline。（我N年前写过一篇关C语言非常简单的文章——《编程修养》，这样的东西你可以上网查一下，一大堆）。
推荐阅读《代码大全》《重构》《代码整洁之道》

高级深入

1、C++ / Java 和面向对象

我个人以为学好C++，Java也就是举手之劳。但是C++的学习曲线相当的陡。不过，我觉得C++是最需要学好的语言了。参看两篇趣文“C++学习信心图”和“21天学好C++”

学习（麻省理工免费课程）C++面向对象编程
读我的“如何学好C++”中所推荐的那些书至少两遍以上（如果你对C++的理解能够深入到像我所写的《C++虚函数表解析》或是《C++对象内存存局（上）（下）》，或是《C/C++返回内部静态成员的陷阱》那就非常不错了）
然后反思为什么C++要干成这样，Java则不是？你一定要学会对比C++和Java的不同。比如，Java中的初始化，垃圾回收，接口，异常，虚函数，等等。
实践任务：
- 用C++实现一个BigInt，支持128位的整形的加减乘除的操作。
- 用C++封装一个数据结构的容量，比如hash table。
- 用C++封装并实现一个智能指针（一定要使用模板）。
《设计模式》必需一读，两遍以上，思考一下，这23个模式的应用场景。主要是两点：1）钟爱组合而不是继承，2）钟爱接口而不是实现。（也推荐《深入浅出设计模式》）
实践任务：
- 使用工厂模式实现一个内存池。
- 使用策略模式制做一个类其可以把文本文件进行左对齐，右对齐和中对齐。
- 使用命令模式实现一个命令行计算器，并支持undo和redo。
- 使用修饰模式实现一个酒店的房间价格订价策略——旺季，服务，VIP、旅行团、等影响价格的因素。
学习STL的用法和其设计概念 -容器，算法，迭代器，函数子。如果可能，请读一下其源码。
实践任务：尝试使用面向对象、STL，设计模式、和WindowsSDK图形编程的各种技能
- 做一个贪吃蛇或是俄罗斯方块的游戏。支持不同的级别和难度。
- 做一个文件浏览器，可以浏览目录下的文件，并可以对不同的文件有不同的操作，文本文件可以打开编辑，执行文件则执行之，mp3或avi文件可以播放，图片文件可以展示图片。
学习C++的一些类库的设计，如： MFC（看看候捷老师的《深入浅出MFC》），Boost, ACE, CPPUnit，STL （STL可能会太难了，但是如果你能了解其中的设计模式和设计那就太好了，如果你能深入到我写的《STL string类的写时拷贝技术》那就非常不错了，ACE需要很强在的系统知识，参见后面的“加强对系统的了解”）
Java是真正的面向对象的语言，Java的设计模式多得不能再多，也是用来学习面向对象的设计模式的最佳语言了（参看Java中的设计模式）。
推荐阅读《Effective Java》 and 《Java解惑》
学习Java的框架，Java的框架也是多，如Spring, Hibernate，Struts 等等，主要是学习Java的设计，如IoC等。
Java的技术也是烂多，重点学习J2EE架构以及JMS， RMI,等消息传递和远程调用的技术。
学习使用Java做Web Service （官方教程在这里）
实践任务： 尝试在Spring或Hibernate框架下构建一个有网络的Web Service的远程调用程序，并可以在两个Service中通过JMS传递消息。

C++和Java都不是能在短时间内能学好的，C++玩是的深，Java玩的是广，我建议两者选一个。我个人的学习经历是：

深究C++（我深究C/C++了十来年了）
学习Java的各种设计模式。

2、加强系统了解

重要阅读下面的几本书：

《Unix编程艺术》了解Unix系统领域中的设计和开发哲学、思想文化体系、原则与经验。你一定会有一种醍醐灌顶的感觉。
《Unix网络编程卷1，套接字》这是一本看完你就明白网络编程的书。重要注意TCP、UDP，以及多路复用的系统调用select/poll/epoll的差别。
《TCP/IP详解卷1:协议》- 这是一本看完后你就可以当网络黑客的书。了解以太网的的运作原理，了解TCP/IP的协议，运作原理以及如何TCP的调优。
实践任务：
- 理解什么是阻塞（同步IO），非阻塞（异步IO），多路复用（select, poll, epoll）的IO技术。
- 写一个网络聊天程序，有聊天服务器和多个聊天客户端（服务端用UDP对部分或所有的的聊天客户端进Multicast或Broadcast）。
- 写一个简易的HTTP服务器。
《Unix网络编程卷2，进程间通信》信号量，管道，共享内存，消息等各种IPC……这些技术好像有点老掉牙了，不过还是值得了解。
实践任务：
- 主要实践各种IPC进程序通信的方法。
- 尝试写一个管道程序，父子进程通过管道交换数据。
- 尝试写一个共享内存的程序，两个进程通过共享内存交换一个C的结构体数组。
学习《Windows核心编程》一书。把CreateProcess，Windows线程、线程调度、线程同步（Event, 信号量，互斥量）、异步I/O，内存管理，DLL，这几大块搞精通。
实践任务：使用CreateProcess启动一个记事本或IE，并监控该程序的运行。把前面写过的那个简易的HTTP服务用线程池实现一下。写一个DLL的钩子程序监控指定窗口的关闭事件，或是记录某个窗口的按键。
有了多线程、多进程通信，TCP/IP，套接字，C++和设计模式的基本，你可以研究一下ACE了。使用ACE重写上述的聊天程序和HTTP服务器（带线程池）
实践任务：通过以上的所有知识，尝试
- 写一个服务端给客户端传大文件，要求把100M的带宽用到80%以上。（注意，磁盘I/O和网络I/O可能会很有问题，想一想怎么解决，另外，请注意网络传输最大单元MTU）
- 了解BT下载的工作原理，用多进程的方式模拟BT下载的原理。

3、系统架构

负载均衡。HASH式的，纯动态式的。（可以到Google学术里搜一些关于负载均衡的文章读读）
多层分布式系统–客户端服务结点层、计算结点层、数据cache层，数据层。J2EE是经典的多层结构。
CDN系统 – 就近访问，内容边缘化。
P2P式系统，研究一下BT和电驴的算法。比如：DHT算法。
服务器备份，双机备份系统（Live-Standby和Live-Live系统），两台机器如何通过心跳监测对方？集群主结点备份。
虚拟化技术，使用这个技术，可以把操作系统当应用程序一下切换或重新配置和部署。
学习Thrift，二进制的高性能的通讯中间件，支持数据(对象)序列化和多种类型的RPC服务。
学习Hadoop。Hadoop框架中最核心的设计就是：MapReduce和HDFS。MapReduce的思想是由Google的一篇论文所提及而被广为流传的，简单的一句话解释MapReduce就是“任务的分解与结果的汇总”。HDFS是Hadoop分布式文件系统（Hadoop Distributed File System）的缩写，为分布式计算存储提供了底层支持。
了解NoSQL数据库（有人说可能是一个过渡炒作的技术），不过因为超大规模以及高并发的纯动态型网站日渐成为主流，而SNS类网站在数据存取过程中有着实时性等刚性需求，这使得目前NoSQL数据库慢慢成了人们所关注的焦点，并大有成为取代关系型数据库而成为未来主流数据存储模式的趋势。当前NoSQL数据库很多，大部分都是开源的，其中比较知名的有：MemcacheDB、Redis、Tokyo Cabinet(升级版为Kyoto Cabinet)、Flare、MongoDB、CouchDB、Cassandra、Voldemort等。

写了那么多，回顾一下，觉得自己相当的有成就感。希望大家不要吓着，我自己这十来年也在不断地学习，今天我也在学习中，人生本来就是一个不断学习和练级的过程。不过，一定有漏的，也有不对的，还希望大家补充和更正。（我会根据大家的反馈随时更新此文）欢迎大家通过我的微博（@左耳朵耗子）和twitter（@haoel）和我交流。

原文：http://kb.cnblogs.com/page/108911/

本文链接

博客园_每天学习一点点，每天进步一点点

编程：是一门艺术(转)

正则表达式30分钟入门教程 (转)

本文目标30分钟内让你明白正则表达式是什么，并对它有一些基本的了解，让你可以在自己的程序或网页里使用它。

网上的资源及本文参考文献微软的正则表达式教程System.Text.RegularExpressions.Regex类(MSDN)专业的正则表达式教学网站(英文)关于.Net下的平衡组的详细讨论（英文）Mastering Regular Expressions (Second Edition)

2011年终总结

(转)javascritp对fckeditor编辑器操作

C#导出Excel的示例

(转)jquery调WCF

JavaScript的单线程性质以及定时器的工作原理

深入理解JavaScript定时机制

JavaScript异步编程的Promise模式

程序员技术练级攻略

本文目标
30分钟内让你明白正则表达式是什么，并对它有一些基本的了解，让你可以在自己的程序或网页里使用它。

网上的资源及本文参考文献
微软的正则表达式教程
System.Text.RegularExpressions.Regex类(MSDN)
专业的正则表达式教学网站(英文)
关于.Net下的平衡组的详细讨论（英文）
Mastering Regular Expressions (Second Edition)