army8735

很高兴能为大家带来JAse的预览版，一款基于as+js的网页语法编辑器。在经历了jssc的静态DFA语法解析高亮的研究和JAte文本编辑器的失败之后，JAse终于能够吸取两者的经验和不足，慢慢地开发至今。开头不多说了，来看预览地址（暂且只有js解析器，其它的都是不存在的；基于Flash Player 10）。

两个都可以：http://jase.googlecode.com/svn/trunk/jase1/bin/index.html；http://army8735.org/wp-content/uploads/jase/

它的下载地址：http://code.google.com/p/jase/downloads/list

它的svn：http://jase.googlecode.com/svn/trunk/jase1/

目前只能支撑千行级代码编辑，总体性能并不是卡在解析器上，而是卡在flash本身的input上。有过经验的人可能感受颇深，何时adobe能提供高性能的textfield？

JAse基本内容分为两块：编辑器提供基础编辑功能、解析器以插件形式提供高亮功能。两者之间通过一个接口连接，也就是说所有的外部解析器必须实现IParser接口，编辑器每次的更改也都是调用接口方法。如此实现了扩展语法的功能，只要实现了接口，你可以开发任意的高亮程序。当然，我自己也写了个AbstractParser基类，可以方便地在其基础之上拓展。

编辑器的undo、redo等功能还未和解析器链接上，因此使用这些button的话可能会造成高亮错误，这并不是程序本身原因。预览版放出只是展示基本输入修改已经ok了。其它将会在后续版本中逐渐开发。

JAse的整体流程是：寻找目标textarea（如果指定id直接获取，否则以document上第一个textarea为目标）=>隐藏textarea，将自己替换掉它的位置=>加载外部解析器（如果指定syntax直接加载，否则出现界面选择）=>编辑内容=>提交内容（如果指定url则使用urlloader，否则将内容放回textarea并寻找父级form提交）。

其间动态破损、修复、显示模型经历过3次算法变更得以成型，斜线动态区分perl正则和除法的算法也经历过2次变更，让我用图来简单说下吧。

在这种情况下，每行代码首先会被解析开始状态（如注释、字符串或者普通），同时渲染标明此行是否被高亮过。这两个状态List是和每行代码一一对应的，增加随之增加，修改随之修改，删除随之删除。而区块List则完全脱离于代码行索引，自成一家。

这样做的好处是分析和显示互相分开，每次编辑器内容被修改时先有破损和修复模型来完成行状态、渲染状态和区块的操作；然后由显示模型取得可视区域再从区块List中取出索引对每块进行高亮。

但坏处也很明显，每次操作对 区块List的改动太大了，前面增加一个字符，会导致所有后面的索引进行修改（自增1），因此很快就被废除，有了第2种想法。

废除区块索引。每次编辑器内容修改，都去计算行状态并且设置涉及行的渲染状态为否以便重新渲染。这个算法对分析阶段来说有了极大的便利，但是在显示阶段却叫苦不迭——在渲染每一行代码的时候，都要根据行状态重新对此行代码进行一遍DFA解析，而这个工作在前面的分析阶段已经做过了（大部分）。同样的功能需要两份代码显得冗余，要合并到一起的话又会变得难以维护，而且多分析一次也显得没有必要。

在经历了一段时间的纠结后，最终还是变更到现在这个样子。

区块List成为二维的，亦和每行对应。然后List中的List保存索引。不过和第1种方式略有不同，之前保存的是绝对索引（字符串的下标），而这里保存的是相对索引（相对于行代码第一个字符而言）。这样每次渲染的时候，只要知道行代码的第一个字符索引，然后遍历这行对应的区块List，相加得出绝对索引即可完成显示。而且每次修改后，后面行的相对索引都无需变更，综合了以上两种方法的优点。

至于斜线的动态区分，最终情况和这类似。静态DFA解析的情况下很容易确定一个斜线的含义究竟是除法还是正则——因为源代码扫猫是从头至尾的。动态情况下因为不确定性，不可能每次修改都从头遍历代码，代价太大了，最好能够从当前行或者前面几行判断出。最初我采用向前回溯的方式，这显得很愚蠢，而且前面行还可能存在单行注释、多行注释等情况干扰（词法分析无需考虑，因为注释空白一开始就被剔除了），基本上行不通。

后来我为每行增加一个布尔值来标明行起始状态如果出现斜线的话它的含义是什么，每次内容修改也会根据解析情况重置它，就和重置行状态和是否被渲染一样。

另外曾经让我非常头疼的一个地方是事件侦听部分。我希望的是每次编辑器内容修改时，所触发的侦听在修改后立刻执行，而as中所有的事件侦听都是在之前执行。这导致使用解析器进行分析显示的时候，实际上代码还根本未发生改变，显然这是个悖论。唯一的做法就是将侦听中模拟事件率先执行，然后通过preventDefault()来取消默认事件发生。这里有个问题，那就是像删除这样的事件（无论del还是backspace或者选区替换）是无法被取消的。所幸的是最终这些难题被一一解决——包括TAB键不能使用，感兴趣的可以查看编辑器源文件来了解是怎么做到的。只关心外部解析器的话不用考虑。

试用过程中有任何问题、反馈或者建议请不吝提出。在beta版完成之后，也会出系列文章来详细介绍JAse的所有技术，就像jssc一样。

严格意义上来说这并不是我第一次带项目，第一次尝试Project Manager是不久前的Only Lady相册。不过那次是在产品设计早已完成的基础上自主进行的，仅由我和永赞两个人快速完成，需要协调和把握的东西很少。完成后想要出的前后端配合方式ppt也一直没来得及去弄～

这次则不一样，我不仅负责前端开发，还是带项目的，同时还涉及到部分产品经理的职责，可谓一次性扮演了3个角色，2个PM（Project + Product）。看过别人博客那么相关文章，这回也轮到我来喷一喷了，结合下实际情况，总结几点吧：

1.产品和项目

说实话，当产品和项目同时落到你头上的时候，你能够决策的地方就非常多了。省去产品和项目之间的沟通是件好事，在规模不大的情况下还能够承受，但一旦规模增长，它只会让你力不从心。因为人的时间和精力是有限的，所负责的东西越多，就要越抽象。潘潘前端时间就在会议上说过类似的情况：作为产品经理不仅需要做到本职工作，诸多大小琐碎事务都必须亲自动手，最后导致的结果就是把自己累死，手下可以利用的资源却一直空闲。这是个恶性的循环，会将导致自己越来越忙，而其它人一直赋闲。

我研究心理学也不少日子了，武志红老师曾经在《宽容自己，才能宽以待人》中举过关于诸葛亮的例子：

作为中国历史上的文人典范，诸葛亮也是“严于律己”的代表。治国上，他是“鞠躬尽瘁，死而后已”，同时，他似乎也做到了“宽以待人”，你很少会找到他没有道理地苛责别人。他杀马谡，废李严，设计斩魏延，仿佛都合情合理，都是依法办事，或是形势所迫。

然而，在我看来，他这些做法的内在逻辑一样是“严以待人”。这个逻辑也体现在他的“鞠躬尽瘁”上，蜀国大大小小的事件，他都要过手，意识上，他说是要对得起刘备的看重，但潜意识上，这里面有很深地对别人的不信任，他对人才的要求太高，这种高标准最终导致，因为缺乏锻炼机会，蜀国优秀的文臣武将越来越少。

这是过于“严于律己”的一个必然结果，诸葛亮对自己苛刻的同时，最终也苛刻地对待别人，尽管从大面上看，他并没有做错什么，但整体上，这形成了一种苛刻的气氛，令他和蜀国很难锻炼人才。

信任下属，重用下属，用人不疑。让别人参与进来，让专业人员作出专业决策，不仅能带动整个团队氛围，也能让所有人有归属感。

2.倾诉

由于项目时间紧张，似乎人人都有危机感。在第一天时，设计和开发人员就不停地向我抱怨、倾诉，诉说各种各样的不满。说实话，第一次接受这么多的牢骚真得让我很紧张。但是转念一想，这也说明了信任我。当其它人向我倾诉时是件好事，怕得是没人说出心里话。一旦所有人开始支持并理解你的时候，一切就事半功倍了。

在整个过程中我希望自己是个服务者，而不是高高在上的管理者。随着项目的进展，所有人都变得非常主动，终于感觉这次PM没白当。：）

3.攻人之过勿太严，要思其堪受；教人以善勿过高，当使其可从。

这是我最喜欢的名言之一。别人有错，职责时的方式该如何？不应过严，要考虑他的心理承受能力；引导别人，该怎样去衡量标准？不应过高，要考虑他的实际改善能力。我相信能做到这两点，就能至少赢得下属的尊重和信任了。

4.初期定位

初期的产品定位和策划不明确，是件很恐怖的事情。假如时间再紧，就更雪上加霜了。这次项目就有这个特点，中间进行修改使得很多人都不爽。细节的完善并不会影响到人的情绪，大方向的调整会给人一种“我白做了那么多”的感觉。这是要极力避免的现象。

5.交流工具

我想任何企业都有内部的交流工具，比如MSN、RTX什么的。但我感觉，除非很简单明了的事情，否则一切都不如当面叙说来得好！面对面的谈话所传达的信息非常多，也利于理解和加深双方的熟悉感。前端时间豆浆和我在改一个小东西时就因为误解邮件中的一句极简单的话造成许多无谓的错误和重复工作，如果最初当面花1分钟说清楚的话，一切就简单多了。

6.懂技术的产品经理

PM懂技术是优势，因为能更好地把握产品和理解开发进度。但是技术出身的PM也具备一般程序员的弱项——主观意识强、交谈口才欠缺等。世界上果然没有十全十美的东西。

暂时写这些，后续想到补充。

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支持。