QbatyBlog

Mozilla 怪异模式

qbaty — Tue, 13 Jul 2010 07:21:57 +0000

杂项和样式(Miscellaneous & Style)

所有的样式规则都在layout/style/quirk.css
在怪异模式中，CSS类名是不区分大小写的(case insensitive)，而在标准模式中是大小写敏感的(case sensitive)。
当链接进文档的样式表的MINE type是 text/css时候，即便是服务端给出的Content-Type头不是text/css,它也将被当作CSS文件对待。
CSS解析器接受颜色值不以#号开头。
CSS解析器将把没有单位的数学默认为其单位为 px（但除了字号（font-size）因为Netscape Navigator 4以前就是这样解析的）和行高(line-height)和任意有严格意义的属性。
HTML的颜色解析的不同(#号不是必须的，缺少的颜色数值将被填充为不同数值)取决于Gecko 1.9.2。
背景属性(background属性)为一个空的字符串会把背景的URL设为空，只在怪异模式下生效。
系统字体在navquirks mode工作不一样。
HTML(1-7)和CSS（xx-small – xx-large）字体大小计算有轻微的不同（参见bug18136 ）。
在怪异模式下 List bullets 不会继承 List 的字体大小。
:hover 伪类，只作用于链接，图片，和表单控件，除非 CSS选择器包含标签名字，id 或属性。
为检测到支持 document.all

块和行内布局(Block and Inline layout)

[这个怪异出现在近似标准模式]（line height）线高度不是line-height(行高)计算不同参见(bug 5821)和(bug24186)还有一些描述在(bug22274)
存在一系列的怪异在计算图片、表格、对象 (object) 和 applets的百分比高度上。尽管CSS描述百分比高度应该表现为height:auto；当其父元素不具有一个固定高度。参见(bug33443#9)和(bug41656).一些这样的怪异可能有其他的影响参见（bug54119）
HR 元素在浏览器中怪异模式和标准模式处理不同（而且两者都可以说是错误的）。

表格（Tables）

在怪异模式下，middle 和 adsmiddle 可以是表格单元格 align 属性的值。而且表格支持middle,absmiddle,abscenter这些属性值（和center一样）
当文档定义了背景后（图片或是颜色），TD, TH, TR, THEAD, TBODY, and TFOOT 这些元素会具有文档的背景
根据CSS 2.1勘误表，empty-cells 属性在怪异模式下属性是hide ，在严格模式下是show
在怪异模式下，浮动的table元素永远不会被挤到下一行去，如果不是正好处在靠着其他浮动元素同一行的位置时，他将会把页面扩宽
在怪异模式中，HTML4 是故意不去理会 colspan=”0″ and rowspan=”0″ 这些属性。
仅在怪异模式中 hspace & vspace 是被支持的
在怪异模式中,当table元素的边框样式为 inset 或者是 outset,这个边框的颜色是取决于table背景色或是最近的背景不为透明的上级元素
在怪异模式中，有border属性的表格单元格有一像素的最小值。
从Gecko 1.8 开始：在怪异模式下，表格单元格上一个固定的宽度声明重设了nowrap这个属性。如果 nowrap 属性已经存在，那么单元格的宽带将不会小于声明的宽度。
在怪异模式中，基本的表格布局(table layout)将忽视padding
在怪异模式中，在一些情况下表格布局(table layout)处理宽度不一样。

表单（Forms）

按钮(button)和input计算他们的大小不一样。
在标准模式下，按钮（button）元素只在它缺少type属性的时候可以提交。
文本输入inputs(和其他包含文字的表单控件)计算他们的大小不一样。
button 和 input 、select元素的字体计算不一样。
HTML 要求button元素在单选组里总是被选择的，但在怪异模式里不是强制的。

对应到窗口的框架(Frames)

在怪异模式中，frame上的 marginwidth和marginheight 会被传到其包含的body元素上
在框架上声明 0* 会被认为 1*(参见bug40383)
框架上的 scrolling 属性处理不同

HTML解析器（HTML Parser）

在怪异模式中，我们解析HTML 注释和老的浏览器兼容，而不是把”–”当成注释的开始和结束 [这个怪异已经在标准模式中适应。]

翻译自mozilla的文章《Mozilla Quirks Mode Behavior》
关于浏览器模式的选择的可以参见秦歌的文章《用doctype 激活浏览器模式》这篇文章详细的解释了，不同浏览器根据不同DTD声明如何来选择解析模式
IE8和IE9的选择会相对复杂，附录的表很详尽

VI 命令参考

qbaty — Sun, 13 Jun 2010 06:17:42 +0000

命令分类	命令	说明
移动光标	h	将光标左移一格
	l	将光标右移一格。
	k 或 Ctrl+p	光标上移一行
	j 或 Ctrl+n	光标下移一行
	w	将光标移到下一个小字的前面。
	W	将光标移到下一个大字的前面。
	b	将光标移到前一个小字的前面。
	B	将光标移到前一个大字的前面。
	e	将光标移到下一个小字的后面。
	E	将光标移到前一个大字的后面。
	fc	把光标移到同一行的下一个c字符处。
	Fc	把光标移到同一行的前一个c字符处。
	tc	把光标移到同一行的下一个字符 c 的前一格。
	Tc	把光标移到同一行的前一个字符c的后一格。
	number\|	把光标移到第number列上。
	+ 或 Enter	把光标移至下一行第一个非空白字符。
	-	把光标移至上一行第一个非空白字符。
	)	光标移至句尾
	(	光标移至句首
	}	光标移至段落开头
	{	光标移至段落结尾
	nG	光标移至第n行首
	n+	光标下移n行
	n-	光标上移 n行
	n$	光标移至第 n 行尾
	H	把光标移到屏幕最顶端一行。
	M	光标移至屏幕中间行
	L	光标移至屏幕最后行
	0	（注意是数字零）光标移至当前行首
	$	光标移至当前行尾
	space	光标右移一个字符
	Backspace	光标左移一个字符
屏幕翻滚	Ctrl + f	向后滚一页。
	Ctrl + d	向后滚半页。
	Ctrl + b	向前滚一页。
	Ctrl + u	向前滚半页。
	Ctrl + e	屏幕向下滚一行。
	Ctrl + y	屏幕项上滚一行。
	nz	将第n行滚至屏幕顶部，不指定n 时将当前行滚至屏幕顶部。
插入文本	i	在光标前
	I	在当前行首
	a	光标后
	A	在当前行尾
	o	在当前行之下新开一行
	O	在当前行之上新开一行
	r	替换当前字符
	R	替换当前字符及其后的字符，直至按键 ESC
	s	从当前光标位置处开始，以输入的文本替代指定数目的字符
	S	删除指定数目的行，并以所输入文本代替之
	ncw 或 nCW	修改指定数目的字
	nCC	修改指定数目的行
修改	ndw 或 ndW	删除光标处开始及其后的个字 n-1
	do	删至行首
	d$	删至行尾
	ndd	删除当前行及其后行 n-1
	x 或 X	删除一个字符， x 删除光标后的，而 X 删除光标前的
	Ctrl+u	删除输入方式下所输入的文本
	cc 或 S	修改一整行。
	C	改变一行光标位置以后的部分。
	cw	改变光标所在单词。
	dd	删除当前行。
	D	删除光标所在行光标后面的内容。
	dw	删除光标所在的单词。
	J	把下一行内容加到本行行尾。
	rc	把光符所在字符替换成 c .
	R	覆盖本行内容。
	u	恢复上一次的修改。
	~	改变光标所在出字符的大小写。
	.	重复上一个操作。
	<<	把当前行移到左边。
	>>	把当前行移到右边。
搜索 / 替换	/pattern	从光标开始处向文件尾搜索 pattern
	?pattern	从光标开始处向文件首搜索 pattern
	n	在同一方向重复上一次搜索命令
	N	在反方向上重复上一次搜索命令
	s/p1/p2/g	将当前行中所有 p1 均用 p2 替代
	n1,n2s/p1/p2/g	将第 n1 至 n2 行中所有 p1 均用 p2 替代
	g/p1/s//p2/g	将文件中所有 p1 均用 p2 替换
	/pattern/+number	将光标停在包含 pattern 的行后面第 number 行上。
	/pattern/-number	将光标停在包含 pattern 的行前面第 number 行上。
	%	移到匹配的 “ （） ” 或 “{}” 上。
改变屏幕显示	z-	把当前行作为屏幕的最后一行，并重新显示屏幕。
	z.	把当前行作为屏幕的中间一行，并重新显示屏幕。
	Ctrl+l	重新显示屏幕当前内容。
	/pattern/z-	寻找 pattern 的下一个位置，并把所在行设为屏幕的最后一行。
拷贝文本	p	将缓冲区内容取到光标所在行的下面一行。
	P	将缓冲区内容取到光标所在行的上面一行。
	“bd	将文本删除至有名缓冲区 b .
	“bp	张贴有名缓冲区 b 中内容。
	yy	把当前行放入缓冲区。
	Y	把当前行放入缓冲区。
	Yw	把光标所在的单词放入缓冲区
选项设置	all	列出所有选项设置情况
	term	设置终端类型
	ignorance	在搜索中忽略大小写
	list	显示制表位 (Ctrl+I) 和行尾标志（ $)
	number	显示行号
	report	显示由面向行的命令修改过的数目
	terse	显示简短的警告信息
	warn	在转到别的文件时若没保存当前文件则显示 NO write 信息
	nomagic	允许在搜索模式中，使用前面不带 “\” 的特殊字符
	nowrapscan	禁止 vi 在搜索到达文件两端时，又从另一端开始
	mesg	允许 vi 显示其他用户用 write 写到自己终端上的信息
	n1,n2 co n3	将 n1 行到 n2 行之间的内容拷贝到第 n3 行下
	n1,n2 m n3	将 n1 行到 n2 行之间的内容移至到第 n3 行下
	n1,n2 d	将 n1 行到 n2 行之间的内容删除
	x	保存当前文件并退出
	w	回写修改后的文件。
	w filename	当 filename 不存在时，把修改后的文件存为文件 filename , 当文件 filename 存在时，报错。
	!w filename	如果文件 filename 存在时，把修改后的文件保存为文件 filename .
多文件切换	n	开始编辑 vi 激活的文件列表中的下一个文件。
多文件切换	n filenames	指定将被编辑的新的文件列表。
文件间切换	e filename	使用 filename 激活 vi （在 vi 中装入另一个文件 filename ）。
	e!	重新装入当前文件，若当前文件有改动，则丢弃以前的改动。
	e+filename	使用 filename 激活 vi , 并从文件尾部开始编辑。
	e+number filename	使用 filename 激活 vi , 并在第 number 行开始编辑。
	e#	开始编辑另外一个文件。
加入其他文件	r filename	读取 filename 文件，并将其内容加到当前文件后。
	r ! Command	执行 command 文件，并将其输出加到当前文件后。
	n1,n2 w!command	将文件中 n1 行至 n2 行的内容作为 command 的输入并执行之，若不指定 n1 ， n2 ，则表示将整个文件内容作为 command 的输入
其他命令	ctrl+g	取得正在编辑文件的有关信息。
	:sh	启动 sh ，从 sh 中返回可用 exit 或 ctrl+d .
	:! Command	执行命令 command .
	!!	重新执行上次的 :! Command 子命令。
	q	退出 vi
	q!	不保存文件并退出 vi
	ZZ 或 :wq	保存对文件的修改并退出 vi .
寄存器操作	“?nyy	将当前行及其下 n 行的内容保存到寄存器？中，其中 ? 为一个字母， n 为一个数字
	“?nyw	将当前行及其下 n 个字保存到寄存器？中，其中 ? 为一个字母， n 为一个数字
	“?nyl	将当前行及其下 n 个字符保存到寄存器？中，其中 ? 为一个字母， n 为一个数字
	“?p	取出寄存器？中的内容并将其放到光标位置处。这里？可以是一个字母，也可以是一个数字
	ndd	将当前行及其下共 n 行文本删除，并将所删内容放到 1 号删除寄存器中。

	vi filename	打开或新建文件，并将光标置于第一行首
	vi +n filename	打开文件，并将光标置于第 n 行首
	vi + filename	打开文件，并将光标置于最后一行首
	vi +/pattern filename	打开文件，并将光标置于第一个与 pattern 匹配的串处
	vi -r filename	在上次正用 vi 编辑时发生系统崩溃，恢复 filename
	vi filename….filename	打开多个文件，依次进行编辑
	vi -c sub-command	在对指定的文件编辑前，先执行指定的命令 sub-command .
	vi -R	将指定的文件以只读的方式放入编辑器中，这样不会保存对文件的任何修改。
	vi -y number	将编辑窗口的大小设为number行。

居中的文字块

qbaty — Fri, 09 Apr 2010 02:15:56 +0000

最近微博的工作开始多了起来，所以更新blog的速度慢了下来，最近干做关于围裙的项目，碰到有一个地方

上图的文字应该是居中的还是居左的？如果是居左的，假如文字只有1-3个岂不是很难看？

那么如何使的他自适应宽度然后又居中呢？光用CSS能做到吗？
答案是肯定的：

当然文字仍然是
这里无法避免的多套了一层div
结构是这样的


     
     狼
     (2196人)

 li{
        float:left;
        display:inline;
        width:56px;
        padding:3px 2px 5px 4px;
        margin:0 1px 0 2px;
        text-align:center;
        line-height:14px; 
}
.name{
        line-height:15px;
        padding:3px 3px 0; 
        display:inline-block; 
        text-align:left;
}
.name{
        *display:inline;
}
.name a{
        text-align:left;
}

我在li上加了text-aligin:center;
那么li内的行内元素肯定是居中的，现在就是如何让块级元素div有具有行内元素的属性呢？
display:inline-block;
这个能解决标准浏览器的问题，想FF
因为display:inline-block;在IE是不起作用的，所以现在必须让IE6，7支持这个属性
Google下能发现
要解决IE6下inline-block失效的办法，可以在定义元素
.name{display:inline-block} .name{display:inline}
这样可以使得IE6，7起作用
而当块级元素具有行内元素的特征时，我们之需要在其父元素上定义text-align:center;在本元素上定义text-align:left;就能达到以上的效果了
plus:

另外发现inline-block这个属性对于而且只对于IE认为的原生行内元素能起作用的
也就是说,即便是把p或是div设置inline成行内了，inline-block在IE下对他仍然不起作用，因为他们是原生的块级元素
所以只需要把上面的div换成strong,span之类的，不用hack也能使得IE下没问题
但是如果需要使得原生块级元素对inline-block在IE下生效，只能用hack

怿飞的这篇文章详细的解释了inline-block
模拟兼容性的 inline-block 属性

canvas学习笔记（三）

qbaty — Tue, 06 Apr 2010 15:49:25 +0000

现在来看看用canvas来绘制一张已经存在的图片
var canvas = document.getElementById('example2'); var ctx2 = canvas.getContext('2d'); var img = new Image(); img.onload = function(){ canvas.width = img.width; canvas.height = img.height; ctx2.drawImage(img,0,0); } img.src = "img.jpg";
ctx2.drawImage(img,0,0) 是在画布(0,0)的位置上画出img.jpg这张图像，当img没有完全载入的时候，drawImage已经执行会导致后面的脚本全部停止运行，所以给了img一个onload事件来保证drawImage的时候已经完全载入了img。

< !DOCTYPE html>



Untitled Document



向左转像右转

上面是我写的一个canvas旋转图片的例子(只是粗略的实现了功能)

前端与其他岗位的协作

qbaty — Mon, 29 Mar 2010 05:43:28 +0000

本周六在北京腾讯举行的 WEB标准化交流会我整场负责拍照
winter 分享的PPT 和月影说的关于协作，给我印象很深刻，里面有很多观点我很认同。
会上没有发言，我就在这里谈谈我的看法吧：
作为一位前端开发工程师，负责的不仅仅是页面HTML的构建，也不仅仅是页面所需要的js交互,或是页面动态的效果。
在我自己的认识中，我觉得前端开发工程师责任重大，一个项目中，需要参与的流程很多。从一个项目初期的策划，技术的评测就需要前端开发工程师参与，在考虑到用户操作习惯，页面性能，再包括将来的页面维护，升级，修改，可扩展来制定页面部署，页面结构，以及开发模式再到后期的页面优化。

和设计，产品经理来沟通整个的页面，设计风格，用户行为习惯，页面表现方式，交互方式等等.
和产品经理，后台工程师沟通整个页面的功能，交互方式，性能优化，页面部署，进行一些可维护升级扩展的计划。

前端是承上启下的，所以在协作中是非常关键的一环。

现在由团队完成的项目来看，设计可能是思绪比较自由的一方，产品是需求提出方，后台工程师是数据提供方，前端是表现方，所以所有的这些都是通过前端来展现给用户或是和用户互动。在这样的团队协作里，我觉得最重要的实际上是，把目标明确，
这个目标是团队目标，也就是这个团队在做一件什么事情，需要达到什么效果。在一个团队里如果大家方向也就是目标一致，很多协作沟通的问题都会变的很流畅，相互也会更易于理解。每个人都出于一个项目的全局观，来思考，来做事，再加上换位思考，这个team 协作应该会变得很愉快。
在目标明确的项目中，需求的变更仍然不可避免，而这种情况下需求的变更也会变的可以理解。

当然很多公司很难要求每个人都有这种项目的全局观，至少我在ZOL的时候就发现不是人人都有。这个时候可能就会有很多口角，争执，不配合，当然经历过激烈的讨论后，还是可以达到目的的，不过效率和项目满意度都会打些折扣。

我觉得新浪cdc团队在项目协作上，还是相当成熟，这可能更像一种文化
一个项目的策划，在分配到各个人之前，实际都是由team leader们去敲定技术细节，这里会有设计leader,前端leader,重构leader，后端leader 可能还有总监然后可能每个人会分析下项目的可选方法，也会说出自己的想法，定下产品大的框架，以及大的技术方向。包括否决一些不能实现或是实现代价很高回报很低的方案，最终确定一个方案，然后再考虑可能出现的一些问题，讨论，重构需要注意的，前端需要注意的，设计如何和重构配合之类的。这个会完了之后，各个team leader会回来给team开会，把具体的工作，注意事项，包括定下方案的实现可行性，可选方案都会传达。这样一般在重构工程师到手上的活，都是省掉很多不必要的沟通的，认为清晰，明了。
从这点看，相比百度的自下而上的推动文化，新浪有点不一样，新浪更像是由中间来推动。

canvas 学习笔记（二）

qbaty — Thu, 25 Mar 2010 08:04:49 +0000

实现以上图形的代码如下

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d"); //获得getContext的引用
ctx.beginPath();
ctx.arc(150,150,100,0,Math.PI*2,true); //外面的圆
ctx.strokeStyle = "#000"; //设置圆的颜色
ctx.stroke(); //画出这个圆
 
ctx.beginPath(); //开始另一条路径
ctx.lineWidth = 4; 
ctx.moveTo(120,120);
ctx.lineTo(90,120);
ctx.moveTo(180,120);
ctx.lineTo(210,120);
ctx.stroke();
 
ctx.beginPath();
ctx.strokeStyle = "#999";
ctx.lineWidth = 20;
ctx.moveTo(105,122);
ctx.lineTo(105,200);
ctx.moveTo(195,122);
ctx.lineTo(195,200);
ctx.stroke();
 
ctx.beginPath();
ctx.lineWidth = 4;
ctx.strokeStyle = "#000";
ctx.moveTo(120,220);
ctx.bezierCurveTo(130,200,150,240,180,220);
ctx.stroke();

再画一个囧吧

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(10,10,60,70);
ctx.moveTo(30,30);
ctx.lineTo(20,40);
ctx.moveTo(50,30);
ctx.lineTo(60,40);
ctx.rect(30,50,20,20);
ctx.stroke();

canvas 学习笔记（一）

qbaty — Mon, 22 Mar 2010 11:38:38 +0000

canvas元素翻译过来是画布，帆布
最早在苹果浏览器中引进，逐渐普及成HTML5的标准Element 这个元素的具体参见可以看
这里
通过canvas我们可以在浏览器中画出很多不规则或是规则的图形
如何画呢？
在HTML5的标准里看到DOM接口的描述

canvas元素只有2个属性，分别是height和width

toDataURL：
这个方法可以返回一个URL形式的在canvas 画布中的图片数据，这个图片数据是64位编码的。
第一个参数指定他的返回图片格式(e.g. PNG or JPEG)
默认情况下是 image/png 还可以是 image/jpeg，第二个参数如果指定的话，则是生成图片的质量，值在（0-1）之间

getContext：
这个方法可以返回一个包含绘图API的对象，如果contextId不被支持则会返回空，目前常用的是’2d’内容，今后有可能会加入OpenGL ES 为基础的3D 内容。

要想在canvas上画东西，必须通过getContext这个方法获得对context对象的引用

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext(contextId);

方形
当我们获得了context的引用我们就可以开始作画了

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
ctx.translate(10,10);
ctx.fillStyle = "#C00";
ctx.fillRect(0,0,100,100);//填充一个方形

fillRect(x,y,width,height) : Draws a filled rectangle //填充一个方形区域
strokeRect(x,y,width,height) : Draws a rectangular outline //画一个方形区域的轮廓
clearRect(x,y,width,height) : Clears the specified area and makes it fully transparent //清除一个方形区域

canvas 只支持方形，所有的其他形状都是有一条或是多条路径所创建组合的
就是用到是路径的api了

//path API
void beginPath();
void closePath();
void moveTo(in float x, in float y);
void lineTo(in float x, in float y);
void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);
void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);
void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius);
void rect(in float x, in float y, in float w, in float h);
void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise);
void fill();
void stroke();
void clip();
boolean isPointInPath(in float x, in float y);

圆
让我们用路径来画一个圆

ctx.beginPath();
ctx.moveTo(50,50);
ctx.arc(50,50,40,0,Math.PI*2,true);
ctx.closePath();
ctx.fillStyle = "#C00";
ctx.fill();

二次贝塞尔曲线和三次贝塞尔曲线
需要注意的是二次贝塞尔曲线在1.5版本的 firefox 下会有bug 需要转成三次贝塞尔曲线作图
quadraticCurveTo(cp1x, cp1y, x, y) // BROKEN in Firefox 1.5 bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

bezierCurveTo()这个方法是在画布上画一条贝塞尔曲线，参数 cp1x,cp1y,cp2x,cp2y 的分别表示的是图中的红色的控制点的坐标, x,y 是曲线终点的坐标

关于贝塞尔曲线的知识点这里

用贝塞尔曲线作图

ctx.beginPath();
ctx.moveTo(50,50);
ctx.bezierCurveTo(50,0,100,0,100,50);
ctx.moveTo(100,50);
ctx.bezierCurveTo(100,100,150,100,150,50);
ctx.strokeStyle = "#C00";
ctx.stroke();

给自己09一个总结吧

qbaty — Sun, 28 Feb 2010 04:14:26 +0000

09年年初写的 datagrid（只实现了基本功能）。
09年上半年到北京中关村在线前端开发组，开始写各种各样的js效果和频道页面，焦点图从生硬的切换到圆滑的变换。
期间自己虽然一直坚持写js，但是还是有很多想法没能在代码上实现。
09年下半年参与的yogsoft整个项目的策划，从总结用户需求到写用户，产品需求文档，到自己画产品原型设计图，之间请教过崔凯，ZOL的志东。到完成整个项目的页面，包含部分优化，以及CSS部署，css sprite的合理整合，包括图片优化处理。
其中接触到很多新的东西

php 的 OOP
.htaccess 配置，重定向。
UCD 以用户为中心的设计
ssh-tunnel 在ZOL时候的远程登陆就一直是这种方式。
svn ZOL的前端并没有用到这个，当然1组和2组的开发是在用的，比起这个我和youyee比较喜欢dropbox。
翻墙平民级别的是用洋葱头和无界，高级一些的是用vpn 和 ssh代理。
bug 无尽的bug,开始能找出一些不是太明显的bug了，速度有待提高。
sl 和 HTML5 CSS3 大概了解了下，感觉还是很不错的
回过头看看发现，其实09年我还真没做什么值得骄傲的东西出来，youyee至少还跟进了他writing的版本，amry也不停跟进他的jssc
想到这些很是惭愧，把这些东西写出来，自己看到时也算是一个自勉。
今年应该要低调许多了，参与的社交活动或是会议也会少一半左右，时间都交给代码和书本吧。

如何访问作为命名空间的函数内部变量(译)

qbaty — Tue, 26 Jan 2010 07:39:57 +0000

原文标题：《Functions as Namespaces, and How to Peek Inside》
原文地址：http://www.davidflanagan.com/2009/11/functions-as-na.html

把函数做为命名空间已经是当今javascript编程里非常普遍的了。如果你把你的代码包含在一个函数里，那么你的代码里包含的变量和函数对于包含函数是本地的，或者说是局部的，这样则不会扰乱全局作用域。

var value = (function() {  // Wrapper function creates a local scope or namespace
    // your code goes here
    return value;  // Export a value from the namespace
})());  // Invoke the wrapper function to run your code

例如，现在假设你刚刚用XMLHttpRequest获得了一段字符串形式的javascript代码。你打算去执行这下代码，你可能会想要在一个命名空间里去执行这段代码，这样执行代码的过程中就不会产生全局的变量或是函数。
这很简单，只要在执行前把这段代码包含进一个函数里。在这个情况下，构造函数Function() 比起eval() 更加得心应手。

var code = ....;  // A string of JS code to evaluate
var f = new Function(code);   // Wrap it in a function
f();    // And run the function

这样做的一个问题是，函数创造出了一个密封的作用域，我们无法知道里面的值。
下面有一个我刚刚发现的方法。(我肯定肯定还有其他人也想到这种方法，但是我没有看到过任何其他地方出现，或是描述过这样的方法)在你包含你的代码前加上这一句：
return function(s) { return eval(s); };
现在，当你调用这个函数的时候，他将返回一个匿名函数。返回的函数在命名空间的作用域里执行了一个字符串。
所以你可以用他来探入命名空间，并且输出你想要的任何值！
如果你的代码字符串定义了一个你想用的构造函数名为Set()，你可以在一个命名空间里运行这些代码，然后像这样
从命名空间里提取

var code = readFile("Set.js");  // A string of JS code to evaluate
// Define and invoke a wrapper function with special suffix code.
// The return value is a namespace evaluator function and we treat
// it as a namespace object.
var setns = new Function(code + "return function(s) { return eval(s); };")(); 
var Set = setns("Set");  // Import the Set function from the namespace.
var s = new Set();  // Use the class we just imported

如果你有3个想从命名空间里提取出来

// Extract an object containing 3 values from the namespace
var sets = setns('{Set:"Set", BitSet:"BitSet", MultiSet:"MultiSet"}');
var bs = new sets.BitSet();

我已经定义了一个namespace()函数用来载入代码和自动生成这类命名空间。

/*
 * Load modules of code by enveloping them in a function and executing
 * the function: then they don't pollute the global namespace (unless they
 * assign to undeclared variables, but ES5 strict mode will prevent that.)
 * The wrapper function we create returns an evaluator function that 
 * evals a string inside the namespace. This evaluator function is the
 * return value of namespace() and provides read access to the symbols 
 * defined inside the namespace.
 */
function namespace(url) {
    if (!namespace.cache) namespace.cache = {};  // First call only
    if (!namespace.cache.hasOwnProperty(url)) {  // Only load urls once
        var code = gettext(url);           // Read code from url
        var f = new Function(code +        // Wrap code, add a return value
                             "return function(s) { return eval(s); };");
        namespace.cache[url] = f.call({}); // Invoke wrapper, cache evaluator
    }
    return namespace.cache[url];  // Return cached evaluator for this namespace
}
 
/* Return the text of the specified url, script element or file */
function gettext(url) {
    if (typeof XMLHttpRequest !== "undefined") { // Running in a browser
        if (url.charAt(0) == '#') {              // URL names a script tag
            var tag = document.getElementById(url.substring(1));
            if (!tag || tag.tagName != "SCRIPT")
                throw new Error("Unknown script " + url);
            if (tag.src) return gettext(tag.src);// If it has a src attribute
            else return tag.text;                // Otherwise use script content
        }
        else {                                   // Load file with Ajax
            var req = new XMLHttpRequest();
            req.open("GET", url, false);         // Asynchronous get
            req.send(null);
            return req.responseText;             // Error handling?
        }
    }
    else if (typeof readFile == "function") return readFile(url);  // Rhino
    else if (typeof snarf == "function") return snarf(url); // Spidermonkey
    else if (typeof read == "function") return read(url);   // V8
    else throw new Error("No mechanism to load module text");
}

你还可以找到这些函数在namespace.js里，我写了一个简单的demo,它并没有做什么有趣的事情，只是alert了一下256。
但如果你看看代码，你会发现他加载和为4个代码块生成了命名空间。
如果你是一个Python程序员你也许会想，这个技术可能可以用来补充python式的 “从A接向B” 类型模板系统，我一直在考虑和从事这类事情(但不准备共享代码)。
缺点，当然它没有办法去枚举并且进入所有你命名空间里定义的字符，所以我们无法模仿python的接口

初次翻译，如有错误欢迎指出，请多见谅！
例外 army对这个有更详细些的解释
请看如何访问作为命名空间的函数内部变量

ISD FLASH TEAM 今天正式官方宣布成立了！

qbaty — Fri, 22 Jan 2010 03:02:07 +0000

ISD flashteam

javascript 给DOM绑定事件方法的3种写法

qbaty — Tue, 05 Jan 2010 09:48:25 +0000

今天Youyee发给我一段代码，是关于给DOM绑定事件的三种方法，让我说出三种方法的不同
我想了一会，愣是没说个明白。Youyee解释过后就明白，在这里做些笔记

var Event = {};
//方法一 runtime
Event.addEventListener = function(obj, eventType, listener){
	if(typeof window.addEventListener === 'function') {//DOM2接口
		el.addEventListener(type, fn, false);
	} else if(typeof document.attachEvent === 'function') {//IE
		el.attachEvent('on' + type, fn);
	} else {//DOM0接口
		el['on' + type] = fn;
	}
};

//方法二 initialize
if(typeof window.addEventListener === 'function') {//DOM2接口
	Event.addEventListener = function(el, type, fn) {
		el.addEventListener(type, fn, false);
	};
} else if(typeof document.attachEvent === 'function') {//IE
	Event.addEventListener = function(el, type, fn) {
		el.attachEvent('on' + type, fn);
	};
} else {//DOM0接口
	Event.addEventListener = function(el, type, fn) {
		el['on' + type] = fn;
	};
}

第一种方法，还记得是很早之前写的，第一个datagrid或是排序table，就是用了这个绑定方法。不足之处在于只要用到这个函数就需要对DOM判断一遍，开始判断一遍是不是更好呢？

第二个方法，则是初始化的，判断了一次DOM，然后也使得Event.addEventListener指向了正确的方法，缺点就是不管用不用到这个函数，都被初始化了

//方法三 lazy mode
Event.addEventListener = function(obj, eventType, listener){
	if (!Event.addEventListener)
	{
		if(typeof window.addEventListener === 'function') {//DOM2接口
			Event.addEventListener = function(el, type, fn) {
				el.addEventListener(type, fn, false);
			};
		} else if(typeof document.attachEvent === 'function') {//IE
			Event.addEventListener = function(el, type, fn) {
				el.attachEvent('on' + type, fn);
			};
		} else {//DOM0接口
			Event.addEventListener = function(el, type, fn) {
				el['on' + type] = fn;
			};
		}
	}
	Event.addEventListener(obj, eventType, listener);
}

这第三个方法正好补足了这点，所以被称做lazy mode,在不使用这个函数的情况下，就不会被初始化，也就减少了初始化的判断
最后检讨下自己：最近一段时间代码写的太少了，应该多写些。

web标准的推动

qbaty — Thu, 24 Dec 2009 02:28:09 +0000

WebRebuild 的一年一年的壮大，从深圳到北京，明年有可能是上海，重构的运动正在进行着，影响着每一位互联网开发者。
第四届 D2 的成功举办，Webrebuild今年北京Google交流会，前端在业界的声音越来越大，前端技术越来越被重视。
Google，W3C，baidu，tencent，各大公司也越来越重视“Web标准”。
这一切都开始慢慢的变的像一种革命，一种反对非标准浏览器妨碍互联网应用的发展的革命。这种革命的推动，发展以至成功带来的是开发者的春天，也是互联网用户体验一个新的世界。

但是也有不少公司不理解Web标准，他们对Web的认识停留在比较原始，甚至有点落后的状况上。他们可能每天想着如何快速的把产品，网页做出来就OK了，不去考虑所谓的标准，什么是标准，标准能换来直接的利益么？

其实，也许标准不能说直接的换来钱，但是能节省很多钱，从成本角度上，你用更少的成本换来的等同的价值，你实际盈利更多了。那为什么说从成本角度上，Web标准可以给你带来成本上的减少呢？

从人力成本来说你可能需要更专业的前端开发工程师，而开发成本却大大的减少了，硬件成本也可能由于更优化的结构，更优的行为处理，而减少你所需要耗掉的带宽。

这些点点滴滴不容易察觉的好处，正是目前很多公司或是开发者忽视掉的。

Web标准的推广普及给我们带来是一个更加Open，更加美好的的一个互联网时代。

当我们将不再因QA报上来的大堆非标准浏览器下的诡异bug而痛苦不堪，或是不在需要小心翼翼，惟恐触碰了非标准浏览的匪夷所思的解析方式或是盒子模型的时候，每一位互联网用户将面对HTML5和CSS3也许还有javascript 2.0来的RIA漫天飞舞。
当然革命尚未成功，同志仍需努力！~

链接

Webrebuild 圆满成功

qbaty — Wed, 16 Dec 2009 02:38:56 +0000

整个会议还是相当成功的，举办完整次会议，受到各方的好评也给了Webrebuild.org的很大的信心
无论是 Google还是W3C都包括对这次的交流会十分满意

关于Webrebuild的报道也出现在W3C.org的首页和W3C中国的首页
http://www.w3.org/Consortium/Offices/#dec15 和 W3C主页

从米饭的《网站重构 who am i 》提出的单手定则

到彪叔的一专多长和他独具一格的重构哲学

再到克军的分层语义化模版实践都提出一个并行的开发流程以及底层模块重用特例单独编写，还提出了前端的MVC

都对我启发很大

会议后大家聚餐，更是畅聊到晚上12点，才尽兴而归

下面是此次活动的合照：

会后合影

Webrebuild合影

全部照片 Flickr

更多详情请看 Webrebuild.org

Webrebuild 北京站

qbaty — Mon, 07 Dec 2009 11:31:00 +0000

北京第一届Webrebuild的这周六就要举行了，从来没有参加过类似的活动。所以心里还是很期待的，再加上是由Google赞助的场地，也能去Google里参观参观。在北京半年多，每次都是特意走到这栋下，大概有三次，每次到心情都不一样。这次也可以走进Google看看，那些Geeks的工作环境。

能去参加交流会主要还是感谢建斌，当我得知webrebuild北京站这边的组织者是他的时候，我热心的希望能够帮上些什么，进入组织以后，看到他们的辛勤忙碌，还是觉得自己帮不上什么。

这次Webrebuild是北京第一次，应该是令北京很多热爱前端开发技术的同学兴奋的一件事情，只可惜场地有限只能容纳100人左右，好在还有plan B，应该会比较热闹。总之先在这里先预祝交流会圆满成功吧…