之前使用jQuery的时候模拟过一个豆瓣电影移动端的页面，前两天翻到发现已经忘记差不多了，重新梳理了一遍，做一下过程中的问题及注意点的总结。
demo
分析项目结构
其实结构很简单，三个tab按钮对应三个不同页面的展示，功能简单所以也不需要做分页处理，简单地切换display即可完成。
页面展示
页面展示的重点就在于每个电影项目信息的统一样式展示，我在这里采用创建template，请求获取数据后加以替换后来予以解决。
下滑加载更多
Top250页面的数据较多，为了用户体验对数据获取进行了优化，默认只获取前10条数据，当页面滑到最下时触发判定加载数据：
isToBottom: function($viewport, $content) {
//判断页面自身高度加上滚动距离是否达到容器高度，预留30像素预加载并放置loading动画
return $viewport.height() + $viewport.scrollTop() + 30 > $content.height()
}
项目难点
豆瓣在现在已经关闭了开发者平台并不再提供API供开发使用，但是测试时发现以前的API请求依然可以使用，但若干次请求后会出现403 Forbidden，于是查看network请求信息：
image.png
试着直接在地址栏输入Request URL，可以获取到图片，于是分析是不是跨域的问题，虽然使用了Ajax jsonp来获取数据，但是会不会在服务器端进行了设置，判断访问来源来拒绝访问。
解决方案： 设置<meta name='referrer' content='never'>
