Download - 产品线中的思考
![Page 1: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/1.jpg)
产品线中的思考
Author:raywu
![Page 2: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/2.jpg)
目录
产品线特点
产品线中的思考
一些新东西的尝试
个人的感悟
![Page 3: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/3.jpg)
渊源
大市场
大社区
![Page 4: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/4.jpg)
大社区
商业资讯 商人社区
![Page 5: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/5.jpg)
商人社区
• 论坛• 博客• 百科• 视频• 我的社区
活跃的产品
• 人脉通• 聊天室• 商圈• ……
消逝的产品
![Page 6: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/6.jpg)
猜猜看
论坛作为社区元老产品,有很多分论坛,第一个分论坛是哪一个?
A :管理员论坛 B :创业论坛
C :外贸论坛 D :情感论坛
![Page 7: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/7.jpg)
答案
Dhttp://club.china.alibaba.com/forum/threadList/1_.html情感话题永远是用户的刚性需求啊。。。
![Page 8: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/8.jpg)
一个有趣的现象
关于故障的两个过程:
用户不爽——》电话投诉——》紧急处理——》分摊黑锅
用户不爽——》发帖反馈——》紧急处理——》回帖答复
![Page 9: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/9.jpg)
本身的特点
体系独立
以人和内容为主
每个子产品都有自己的生态圈
以商会友,互动很强
![Page 10: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/10.jpg)
前端开发中一些特殊的地方
子产品间都有独立的体系
子产品中有几套相对固定的风格(前台、个人后台、管理员后台、专题产品等)
后端会参与到后台的 js 开发
前端参与模板开发
![Page 11: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/11.jpg)
目录分布
①css 、 js 都位于对应的 app\hood 目录下
② 每个产品都有对应的目录文件
③ 部分产品有它对应的 admin 文件
![Page 12: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/12.jpg)
目录体系
•产品线级文件
Global
•模块级文件
Module
•页面级文件
Page
![Page 13: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/13.jpg)
疑问
目录体系能很好的帮助我们管理 css 、 js文件,区分它的功能和影响,那么 html呢?
![Page 14: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/14.jpg)
目录体系的延伸
模板层中的概念
Layout :模板中页面布局的框架文件
Control :模板中抽象公用的文件
Screen :模板中实际对应页面的文件
![Page 15: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/15.jpg)
目录体系的延伸
vm≈≈hmtl 片段 + 业务逻辑
![Page 16: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/16.jpg)
回归目录体系
•产品线级文件
layout
•模块级文件
control
•页面级文件
screen
![Page 17: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/17.jpg)
目录体系
三位一体
Css
Javascript
HTML
三位一体
产品级
模块级
页面级
![Page 18: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/18.jpg)
一个例子
![Page 19: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/19.jpg)
实际产品部署
简单、实用
![Page 20: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/20.jpg)
产品级文件
js&css :
baike-mergeyunplan-mergeadmin/baike-merge
VM Layout:
base.vmyun.vmadmin/base.vm
![Page 21: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/21.jpg)
产品级 base.js
![Page 22: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/22.jpg)
页面级
![Page 23: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/23.jpg)
页面级
![Page 24: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/24.jpg)
模块按需调用
![Page 25: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/25.jpg)
模块按需调用
![Page 26: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/26.jpg)
一些微创新
手机版生意经 i.china.alibaba.com
![Page 27: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/27.jpg)
一些微创新
modernizr.js
相关链接:http://www.adobe.com/cn/devnet/dreamweaver/articles/using-modernizr.html
![Page 28: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/28.jpg)
一些微创新
独角兽系统
版本管理系统,使 js 、 css 的缓存提升到一年,提升 2 次访问性能
模板层的按模块开发
……
正在完善中……
![Page 29: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/29.jpg)
未来和展望
……
![Page 30: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/30.jpg)
个人感悟
a) 了解产品就要去了解它的业务、它的历史、它的人
b) 看到老麻烦,一定要下决心重构
c) 一定不能制造新麻烦
d) 一定要做一些微创新
e) 有自己的风格,即使不精彩
f) 你就是业务线的专家
g) 了解后端,了解模板,对前端有不少帮助
![Page 31: 产品线中的思考](https://reader036.vdocuments.mx/reader036/viewer/2022081417/55892dd2d8b42a2c388b464e/html5/thumbnails/31.jpg)
Q&A