我的艳遇——给网易163免费邮宽衣解带(2)

<!----><!----><!---->

项目初期，成员意见不一，同事坚持从头开始，从美工开始设计界面原型，一切遵从正常项目流程。我却不以为然—— 该系统功能不少、用户体验要求如此之高，项目人员配备只有 2 个，项目期限也只有 2 个月，如果按照往常的项目流程，肯定是不可能完成的，就算日赶月赶，功能出来了，用户体验肯定也无法满足用户要求。

那天下班，我心情沉重了。我打开 163 免费邮，认真的把每个功能都体验一下，其实我早已是 163 邮箱的忠实用户，这次它的升级带来的用户体验，确实是前所未有的满足。在如此不错的用户体验面前，我更加下定决心它是个不可能完成的任务，于是，我起了邪念——“ 抄袭” 。后来的项目成果就是我当初坚持的这个想法的最佳验证！以下我就和大家来分享一下这个山寨过程。

• 盗取html 和css ，塑造原型界面

笔者登录 163 邮箱进入首页，点击收件箱，按 Ctrl+S 另存为该页面到本地。进入存储文件夹可以看到一级目录里有 main.jsp.htm ，点击它并不能看到任何界面，别急，先进入 main.jsp_files 文件夹，可以看到 index_v3.htm 和 servdata.htm 。值得一提的是， 163 页面用了不少的 frameset/iframe ， main.jsp.htm 就是用 frameset 将 index_v3.htm 和 servdata.htm 框进来的。是的，主角登场了， 163 就是用这 2 个页面来向我们展示这良好的用户体验。进入 index_v3_data 文件夹，我们迎来了 css 主角 —— globle.css 和 163_blue_s.css, js 主角 —— engine.js 、 mainmodule.js 、 address.js 等。分别建立 images 、 styles 和 scripts 文件夹，提取其中的image ，css 和js ，并对其中的index_v3.htm 进行稍微改造（如路径、编码等修改），我们就可以在本地看到163 的原型界面了（不出意外，应该会报MM 未定义，哦，MM?! ）。这样，很简单的，我们完成了第一盗用—— 界面原型。

经过技术调研，虽然可以从163 得到启示，但163 的强大而又复杂的业务功能并不都是我们所需要的。要只取所需，从中拨开云月，才能见星星。面对“ 另存为” 而来的众多而又混乱的xhtml 、css 、js 代码，如何从这些素材抽取以塑造我们的最初用户需求原型，看似简单，其实不然。面临最直接的一个问题： 80 多个文件中，到底哪几个文件才是我们需要的？对这些文件进行大概的浏览和阅读，从大量的素材中攫取有用信息，从页面推测后台业务逻辑等，不断推测和不断尝试的耐心显得特别重要。

• 排版面目全非的js ，让阅读成为可能

不费吹灰之力，界面原型出来了，但是这个原型远远不能满足我们的客户要求 —— 非但存在 js 错误，而且，客户需求是至少可以进行简单的点击反应。是的，这 2 个问题都直接和 js 相关，如今摆在我们面前就只有 2 条路走了：第一，自己写 js ，理想的状况是模仿163 的js ，这样带来的好处是代码是自己写的，可维护性是情理之中，但是难度有二：效果必须和 163 一样，这也是客户需求之一；另外就是一定得是 js 高手，非高手绝非短期可以写得出；第二条路，采用其原版的js，尝试让下载的 js 运行起来,为己所用，然后再针对业务不同进行修改。出于各方面条件考虑，笔者决定走第 2 条路，尝试着阅读其 js 。打开她的 js 一看，全部挤在一行，甚至有的会出现乱码。这是 js 被混淆过的迹象 —— 排版混乱、小写为首的方法名全部重新取名，加上 js 中含有复杂的业务逻辑，完全无法阅读，更谈不上维护和调试了。

无论如何，对 js 排版绝对是第一个要解决的问题，尝试过借助 MyEclipse 等 IDE 对其进行排版， mainmodule.js 和 address.js 可以顺利被排版，但是原本的中文全部被转换成乱码。至于 engine.js ，由于其内容过长、存在语法错误（混淆的原因）等问题，使得 MyEclipse 的 Ctrl+Shift+F 快捷键只能对其其中语法正确部分排版（但依然存在乱码问题），至此笔者试着利用 Firefox 寻得其 url ，对 engine.js 重新下载（之前是另存为的保存方式），再次使用 MyEclipse 重新排版，语法错误迎刃而解，但是编码问题依然无法解决。至此笔者一度失望，心想第一中文邮箱，怎么可能轻易让你得到其原 js 呢，那其品牌启不可轻松被拷贝？！差点放弃。问题既然出在 MyEclipse ，心想是不是其默认的 js 编辑器不过强大？于是尝试安装了 js 插件。 JsEclipse 和 spket 是 Eclipse 的 2 个著名 js 插件，都用过，效果很不错，笔者这里选择了 spket 。果不其然， mainmodule.js 和 address.js 排版和乱码问题都被解决了，这是一大进步，笔者看到了希望。但是 engine.js 仍然无法被顺利排版，在 spket 面前它显得异常镇定，一动也不动。最后笔者决定用最苦也是最辛苦的方法 — — 借助IDE 的diff 功能，寻得乱码之行，一处处比较过去，再将其拷贝。经过耐心与细心比较，终于把乱码问题解决。

如此一来，似乎页面可以加载得比以前齐全，尽管还存在js 错误，也是情有可原，毕竟没有后台初始化数据。但是根据报错地方注释一些js ，页面开始不存在js 报错，有些按钮甚至有点击反应，这样，笔者看到了选择第2条路的希望。
      因篇幅有点长，续(3)，看到这里了，说明很有耐心，继续吧：）

评论

2 楼 yangwencan2002 2009-03-28  

dd2086 写道

强悍无比！

1 楼 dd2086 2009-03-28  

强悍无比！