BookReader 开源项目教程

2026-01-16 09:33:53作者：宣海椒Queenly

1. 项目目录结构及介绍

.
├── BookReader                # 主应用目录
│   ├── config.js             # 配置文件
│   ├── index.html            # 入口HTML文件
│   └── main.js               # 主JS文件，应用入口
└── package.json              # 项目依赖管理文件

在BookReader目录下，我们有核心的应用代码：

config.js包含了应用程序的配置参数。
index.html是项目的基础HTML模板，用于加载JavaScript应用。
main.js是应用程序的主要入口点，它初始化并运行BookReader。

package.json文件列出了项目依赖的npm包，用于管理和构建工具。

2. 项目的启动文件介绍

`index.html`

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>BookReader</title>
    <script src="main.js"></script>
</head>
<body>
    <!-- 书本容器 -->
    <div id="book-reader"></div>
</body>
</html>

index.html是应用的起点，它引入了main.js。页面中有一个ID为book-reader的元素，BookReader会在这个容器内渲染图书阅读界面。

`main.js`

import Config from './config.js';

// 初始化BookReader
const bookReader = new BookReader(document.getElementById('book-reader'), Config);
bookReader.init();

main.js导入了config.js配置文件，并创建了一个新的BookReader实例。它在book-reader元素上初始化阅读器并开始运行。

3. 项目的配置文件介绍

`config.js`

export default {
    booksPath: 'books/',       // 图书资源路径
    defaultBook: 'default.json', // 默认打开的图书数据文件
    pageSize: 800,             // 每页宽度（像素）
    pageHeight: 1000,          // 每页高度（像素）
    // 更多配置...
};