army8735

2005 年前端工程师的职位开始在中国出现，2007 年第一届 D2 前端技术论坛在杭州举行，从此 D2 伴随着中国的前端一起成长，从此越来越多的互联网产品的背后有着职业前端工程师坚定的身影。在 D2 上我们曾交流过某项具体的前端技术，也曾探讨过团队协作的方式，那些美妙的话题都深入到我们频繁敲键盘的指尖。当架构、安全、性能等等在前端的领域扎根的时候，我们自己也在悄然发生质变，而推动这些变化的人和事正是 D2 想告诉你的。

我报名了，不知道何时能审核：

宣传视频：

pchome首页右栏今日进行了调整，最初设计稿效果如图：

可以看到，浮动框出来的样式，如果用以前方式来处理的话，需要拼合几张图片才能做到，而且产生的多余tag亦会让人不爽。基于渐进增强的思想，似乎使用css3来做是最好的办法。

来看个例子：/wp-content/uploads/2009/12/pchome-right.html

在支持css3的浏览器下，浮动框的阴影效果很好的表现了出来；然而不支持css3的浏览器在使用上并没有任何的影响——右侧和下方的阴影消失了——甚至以美学角度来看都无伤大雅。这种效果的代码结构和可维护性都很好，综合考虑下来最为可取，那么css3在是否可以以后的运用中越来越多地出现呢？

至于为何浮动层的矩形边线没有完整封闭，那是因为将其藏在右边列表下面，被列表的背景色给覆盖住造成的假象。

最近onlylady有一个需求，要制作一款自定义flash视频播放器。晕啊，as视频编程我可没有接触过，以前只是拖个组件写个列表，为pchome视频频道页做过，和如今的要求相差太远。没办法，目前能写as的也只有我了，硬着头皮上了。好在今天完成了基础功能，心想总算过来了，哪知最坏的消息过来了……

早上收到美国总部CBS邮件通知，这款播放器初衷是和CBS的全球视频播放器接口相通，由他们提供各种信息资源，我们来播放就够了。orz，产品部在最初就弄错了，可谓相当大的失误。而以我们的技术实力，能不能做到还是个未知数。面对CBSi的密密麻麻的英文文档，我只有傻眼的份……

早上和前段时间刚离职的zol中关村在线同事聊天，还在说些技术和工作上的事。silverlight不知何年何月能够占有比较大的份额，那时不知我会不会去瞅瞅。如果sl也深入的话，一个人的精力恐怕是不够的。广泛和专精，似乎永远都是鱼与熊掌。前端这个领域，不知道我涉及得到底是不是正好呢？

目前做到的程度，视频是我曾经传到土豆上的一段游戏结尾曲《月空下的思念》（幻世录2）：

PS：期间把土豆和优库的视频播放器外壳下来看了下，两者都在100k左右，土豆的稍大一点。比较奇特的是两家风格大相径庭：土豆用了flex和pureMVC；优库完全自己的库，最吃惊的居然还是基于as2的。最终我只能远观了，视频编程方面我并不擅长，也没打算深入过。

PS2：更新了lrc支持。

JAse开源项目缓慢进展中，许多地方和许多算法不断地颠覆、重写，这也是预料当中的。目前来说总体架构是不会变的了：以一个swf文件为基础提供文本框和一些菜单栏的基本功能；语法分析插件以不同语法分发为各自的swf文件，用到的时候才去读取。

当然，所有的语法文件都是面向接口编程的（实现IParser接口即可，这个理念继承自jssc5），这也使得按需加载成为可能。废话不说，来看几张预览图。

开始的选择画面：

第一个被我“强奸”的是js（最熟么），其它的会陆续添上。我默认放了一段Mootools的代码：

拉一拉滚动条，性能还不错，就是有不少bug还没修正：

至于语法编辑器用到的破损、修复、高亮模型，我非常感谢http://www.cppblog.com/megax/archive/2008/07/09/55753.html这篇文章给予的提示，同时也感谢其作者和我互通邮件的帮助。不过Megax所采用的依然是分区正则法，并非DFA状态图分析。而C++的性能远非as3所能匹敌，所以JAse目前仅能做到千行级代码，上万行后就会感觉到卡。

as3的性能瓶颈其实并不是主因，主因是textfield的性能太弱。实际测试中只是在第一次装载大量文本（万行）会卡，在拖动分析的过程中却非常流畅。今天我装了CS4（以前一直用CS3），启用了GPU硬件加速来提高渲染textformat的速度，所以如果不计textfield的拖后腿的话，预计是能达到十万行的量的。如果分析状态的数据结构由数组换成Vector（类似Java的泛型ArrayList，基于性能考虑我决定JAse将基于Flash Player 10），那么百万行级也不是不可能。

所以在JAse基本完成后，如果自定义优化textfield的性能，则是重点。目前思路有点苗头，是否能实现就难说了。另外Text Layout Framework中并未包含什么高效的input组件，本来还想瞅瞅，结果失望而归。

今天尝试为JAse的代码输入框添加tab缩进功能，华丽地失败了。仔细查阅下手册：

指定此对象是否遵循 Tab 键顺序。 如果该对象遵循 Tab 键顺序，值为 true；否则值为 false。 默认情况下，值为 false，但以下情况除外：

• 对于 SimpleButton 对象，值为 true。
• 对于具有 type = “input” 的 TextField 对象，值为 true。
• 对于具有 buttonMode = true 的 Sprite 对象或 MovieClip 对象，值为 true。

原来如此，侦听TextField的按键事件，根本就判断不到是否是tab键，因为默认系统就屏蔽了。这样就无法改写默认响应方法，tab键变成了在按钮之间切换选择状态。

得儿，得罪不起你，去请你的上司吧。直接侦听stage的按键事件，改写其默认行为搞定。唯一有点不友好的地方是聚焦会先出现在按钮上，然后由改写的行为迅速回到输入框上并进行缩进。没办法，也只好这样了。

//全局侦听tag键，改变默认行为
addEventListener(Event.ADDED_TO_STAGE, function() {
	stage.addEventListener(KeyboardEvent.KEY_DOWN, function(event:KeyboardEvent):void {
		if (stage.focus == tf && event.keyCode == Keyboard.TAB) {
			saveInput();
			getSelection();
			//如果鼠标为选择区域，则先保存删除命令链
			if (left != right) {
				saveDelete();
			}
			//增加2个全角空格，增加输入命令链
			commandList.addCommand(new InputCommand(tf, tf.caretIndex, "\u3000\u3000"));
			tf.replaceSelectedText("\u3000\u3000");
			setIndex();
			focus();
		}
	});
	stage.addEventListener(KeyboardEvent.KEY_UP, function(event:KeyboardEvent):void {
		if (event.keyCode == Keyboard.TAB) {
			focus();
		}
	});
});