【校招VIP 前端】电影详情模块的开发文档设计实战

VIP的服务不一样的校招，大家好，我是校招VIP的大拿老师，校招本质上就是一次考试，把项目和考点准备好，通过笔试面试就能拿到offer。上节课，我们看了一下推电影项目电影详情模块的产品原型图，一直在强调这是一个商用项目，开发同学一定要懂产品逻辑，你的开发做的时间越长，就越资深。

今天呢，我们来进行第二节课，前端的开发文档设计

一说到写文档，大家就觉得不敢下手，这是很多学生的通病。就是觉得这个格式，不知道如何动手。每个公司都有自己的文档格式，我们写文档是一个精简版，把你觉得需要去写出来的重点写明白，一方面是自己开发过程中不会出问题，第二个事情呢是为了方便后面的开发。

这个图是我们上节课过的产品原型，大家可以去公众号下载。现在公司里面很少有直接用word来进行开发，因为我们最后是要提供下载的，所以我们我们就以这种模式来做。上面会有简单的一个名称，这个我们直接就复制下来，然后基本对话会贴一下原型图或者是链接等。

我们就来看一下几个重点。

首先我们分第一个东西，我们就要通用，再扫排版。比较通用的就基本信息吧，因为这个页面倒没有什么通用的东西，这叫基本电影的基本信息。那第二个模块是我们叫演职员，演职员也可以不分得这么细，不同人有不同的做事方式。上影的推荐叫三推，最后就是观看渠道。

然后看基本信息。首先特权他说两行，这两行没什么特别好写的，但是我们注意几个事，第一点一定先标题两行，后面的这个上映时间不要这个流出来。电影时间是多长，这个我觉得一般也不用讲喜剧和大陆，因为后端会把它对应成一个ID，我们前端需要写死他。

电影类型和电影地区，后台文档会给出一个对应的枚举值，项目内要固定，这个大家知道为什么有同学问会变动，那这个变动会很低频，他不是动态的，如果是在数据库里面的话，那你就不能写死。

电影评分，这个要求要有小数。然后呢，比较麻烦是这个观影渠道，观看渠道这种方式叫一级展示，如果是第三方平台，他不会写爱奇艺的。

在项目里的难点是锚点。 锚点跳到页面下方的观看渠道模块，这个地方的问题是怎么跳。这个不是在开发中才去担心的问题，最好是在做之前就定下来。有些难题，有同学说很简单，直接做一个这个HTML跳转。ID跳转实际上是发生跳转了，页面多了一层，等你发现点后退时，他还是在当前页面，但它加载了一个新的页面调用。

第二就我们的使用高度。使用高度值去重新定位展示，高度值的变量，指定跳转位置，那这个肯定是我们最终要选择的这种方式。但是这有个问题，你会发现往下跳的时候，如果给个固定的地址，那实际上这个地方还有展开收起功能，它的距离可能会变。就等于是要重新去计算到上面的距离，要去实时计算。

面试官的第一个问题，亮点为什么不行，后面的HTML5的那些问题肯定会问上去。做前端同学都会碰到的问题，面试官问什么，甚至他后面怎么追问，你都是有把握的。

再看演职员。它比较简单的左右滑动，这里面有第二个难度的话就是tab跟下面的滚动。因为它是个锚点，锚点tap与页面对应位置滚动的双向绑定，所以实现是一个难点。然后看展开收起啊，这是原型图的UI，上面会说这个展开收起必须放在这个位置上，怎么能够展开正好放在这，而且不压字呢。

那么这个时候有可能计算的话，你会把它盖住，把它往前改也可以啊，这是一种方案。但是商用的话要求严格，是可以用JS来实现，也可以用纯CS来实现。是各自选择，但CS3可以实现最优化的结果。因为JS的变动是没法控制的，为了保证展开的时候定位准确性和兼容性，那么CS3可以实现。

虽然就一个页面，但是有三个大的功能，有的同学说太简单了，但你做和不做，要求高和不高，实际上都是很多同学最后搞不定的一个原因。

今天的课程就到这里。