项目-分页电影列表

效果

模块划分

• 入口 mina.js
• 封面模块 movie
• 列表模块
• api模块
• 静态资源模块

分包

一开始不需要记载全部的模块,一开始只能看到cover模块,movie可以动态加载,

在实际开发中，通常使用 import 命令来导入模块，而使用 import() 函数来动态加载模块。

// main.js
import './cover'; // 静态导入，表示初始就必须要依赖 cover 模块
import('./movie'); // 动态导入，表示运行到此代码时才会去远程加载 movie 

开发流程

• 搭好webpack.config
• 编写模块结构
• 入口文件引入模块
• 编写公共样式 common.less , global.less
• 编写网络请求api
• 编写模块cover
• 编写模块list

api 模块

暴露出一个网络请求函数

编写 cover

描述: cover 是封面模块

组成结构: 背景视频, 背景音乐, 标题 assets资源,导入视频和音乐资源,使用import引用资源路径

• 初始化函数,创建audio , video,元素自动播放,循环播放,appendTo容器
• 添加滚动事件, 滚动超过 1vh 自动暂停

编写list

描述: 电影封面, 分页器.两个子模块 init: list模块网络请求,调用子模块暴露的渲染函数,将请求结果传给子模块的渲染函数

电影封面模块

createMovieTage 接受网络请求返回的data,解析,并生成元素,并替换容器html

分页器

描述: 暴露一个生成分页器的函数, createTag

createPagers

接受三个参数, page,limit,total

1. 设定分页器长度 maxCount = 10
2. 页数 总页数/页容量 = pageNumber
3. 最小页码 当前页-分页器长度/2
4. 最大页码 最小页码+(分页器长度-1)

最小页码,最大页码用来判断,首页,上一页, 下一页,尾页,是否可用

  function createTag(text, status, targetPage) {
    const span = $("<span>").text(text).appendTo($(container));
    const className = styles[status];
    span.addClass(className);

    if (status === "") {
      span.on("click", async function (params) {
        const res = await getMovies(targetPage, limit);
        createMovieTage(res.data.movieList);
        createPagers(targetPage, limit, res.data.movieTotal);
      });
    }
  }
  const pageNumber = Math.ceil(total / limit);
  const maxCount = 10;
  let min = Math.floor(page - maxCount / 2);
  if (min <= 1) {
    min = 1;
  }
  let max = min + maxCount - 1;
  if (max >= pageNumber) {
    max = pageNumber;
  }
  createTag("首页", page === 1 ? "disabled" : "", 1);
  createTag("上一页", page === 1 ? "disabled" : "", page - 1);
  for (let i = min; i <= max; i++) {
    createTag(i, page === i ? "active" : "", i);
  }
  createTag("下一页", page === pageNumber ? "disabled" : "", page + 1);
  createTag("尾页", page === pageNumber ? "disabled" : "", pageNumber);
}