1. 产品线中的思考
Author:raywu

2. 目录
产品线特点
产品线中的思考
一些新东西的尝试
个人的感悟

3. 渊源
大社
区
大市场

4. 大社区
商业资讯 商人社区

5. 商人社区
活跃的产品
• 论坛
• 博客
• 百科
• 视频
• 我的社区
消逝的产品
• 人脉通
• 聊天室
• 商圈
• ……

6. 猜猜看
论坛作为社区元老产品，有很多分论坛，第一个分论坛是
哪一个？
A：管理员论坛 B：创业论坛
C：外贸论坛 D：情感论坛

7. 答案
D
http://club.china.alibaba.com/forum/threadList/1_.html
情感话题永远是用户的刚性需求啊。。。

8. 一个有趣的现象
关于故障的两个过程：
用户不爽——》电话投诉——》紧急处理——》分摊黑锅
用户不爽——》发帖反馈——》紧急处理——》回帖答复

9. 本身的特点
体系独立
以人和内容为主
每个子产品都有自己的生态圈
以商会友，互动很强

10. 前端开发中一些特殊的地方
子产品间都有独立的体系
子产品中有几套相对固定的风格（前台、个人后台、管
理员后台、专题产品等）
后端会参与到后台的js开发
前端参与模板开发

11. 目录分布
①css、js都位于对应的apphood目录下
②每个产品都有对应的目录文件
③部分产品有它对应的admin文件

12. 目录体系
Global • 产品线级文件
Module • 模块级文件
Page • 页面级文件

13. 疑问
目录体系能很好的帮助我们管理css、js文
件，区分它的功能和影响，那么html呢？

14. 目录体系的延伸
模板层中的概念
Layout：模板中页面布局的框架文件
Control：模板中抽象公用的文件
Screen：模板中实际对应页面的文件

15. 目录体系的延伸
vm≈≈hmtl片段+业务逻辑

16. 回归目录体系
layout • 产品线级文件
control • 模块级文件
screen • 页面级文件

17. 目录体系
Javascript 模块级
Css HTML 产品级 页面级
三位 三位
一体 一体

18. 一个例子

19. 实际产品部署
简单、实用

20. 产品级文件
js&css：
baike-merge
yunplan-merge
admin/baike-merge
VM Layout:
base.vm
yun.vm
admin/base.vm

21. 产品级base.js

22. 页面级

23. 页面级

24. 模块按需调用

25. 模块按需调用

26. 一些微创新
手机版生意经
i.china.alibaba.com

27. 一些微创新
modernizr.js
相关链接：
http://www.adobe.com/cn/devnet/dreamweaver/articles/using-
modernizr.html

28. 一些微创新
独角兽系统
版本管理系统，使js、css的缓存提升到一年，提升2次访问性能
模板层的按模块开发
……
正在完善中……

29. 未来和展望
……

30. 个人感悟
a) 了解产品就要去了解它的业务、它的历史、它的人
b) 看到老麻烦，一定要下决心重构
c) 一定不能制造新麻烦
d) 一定要做一些微创新
e) 有自己的风格，即使不精彩
f) 你就是业务线的专家
g) 了解后端，了解模板，对前端有不少帮助

31. Q&A