TypeScript前端开发实践：Practico1FrontendLabo项目

健康和谐男哥

于 2024-10-06 16:03:09 发布

阅读量952

点赞数 18

本文链接：https://blog.csdn.net/weixin_36059856/article/details/142740053

版权

本文还有配套的精品资源，点击获取

简介：本项目"Practico1FrontendLabo"的核心技术是TypeScript，一种为前端开发提供类型安全和面向对象编程的JavaScript超集。项目强调大型项目开发中TypeScript的实用性，特别是在预防错误和类型检查方面。参与者Martin Rios和Maximiliano Pintos在2023年3月29日开始实践活动，通过团队合作来学习TypeScript及其相关前端技术。项目结构包括源代码目录、TypeScript配置、依赖管理以及代码打包设置等。开发者将掌握TypeScript基础语法和现代前端开发实践，通过实际操作提升前端技能和团队协作能力。 Practico1FrontendLabo

1. TypeScript在前端开发中的应用

引言

TypeScript作为JavaScript的超集，为前端开发带来了诸多改进，尤其在大型项目和团队协作中，其静态类型系统能够显著提升开发效率和代码质量。本章将探讨TypeScript的基本应用、优势以及它如何帮助前端开发者更好地构建项目。

TypeScript的核心优势

TypeScript的核心优势在于其提供了一种更加严格和明确的类型系统，这有助于在编码阶段就捕捉到许多潜在的错误。与此同时，TypeScript的类型推断机制减少了开发者的手动标注工作，提高了开发效率。

前端开发中的TypeScript实践

在前端开发中，TypeScript的模块化和组件化的能力，使得代码的组织和维护变得更为轻松。结合现代前端框架，如React或Vue，开发者可以利用TypeScript的强类型特性来提高组件代码的健壮性和可维护性。

示例代码

// 示例：一个简单的TypeScript函数，展示了类型注解的使用
function greet(name: string): string {
  return `Hello, ${name}`;
}

// 示例：一个带有类型定义的类
class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

在上述代码中， name 参数和 Person 类的 name 属性都明确指定了类型为 string 。这使得在编译阶段就能对不匹配的类型进行检查，减少运行时错误。

2. 静态类型检查和代码质量保证

2.1 TypeScript的类型系统基础

2.1.1 类型注解和类型推断

在TypeScript中，类型注解和类型推断是确保代码健壮性的两个重要概念。类型注解允许开发者明确地指定变量、函数的参数和返回值的类型。通过这种方式，可以提前捕获可能的错误，避免在运行时发生类型相关的错误。

let age: number = 25;
function greet(name: string): string {
  return "Hello, " + name;
}

在上面的代码示例中，变量 age 和函数 greet 都使用了类型注解。类型注解是一种显式地告诉编译器，我们期望使用的数据类型的机制。

类型推断则是TypeScript编译器根据上下文自动推断变量或表达式的类型的过程。开发者可以省略类型注解，让TypeScript通过类型推断来推导类型。例如：

let message = "Hello, TypeScript!";

在上述代码中，我们没有为变量 message 指定类型，但TypeScript编译器能够推断出这是一个字符串类型。

2.1.2 接口、类和枚举的类型定义

TypeScript中的接口用于定义对象的形状，使得能够描述一个具有哪些属性的对象。接口不是创建实例的，而是被类实现（implements）或者用来约束对象字面量。

interface Person {
  name: string;
  age: number;
}

function printPersonInfo(person: Person) {
  console.log(`Name: ${person.name}, Age: ${person.age}`);
}

printPersonInfo({ name: 'Alice', age: 30 });

类则是创建具有共同属性和方法的对象的蓝图。在TypeScript中，类可以实现接口，并拥有私有、公共以及受保护的成员。

class Employee implements Person {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  introduce(): void {
    console.log(`Hi, I'm ${this.name} and I work here.`);
  }
}

枚举（enum）则是一种为一组数值赋予友好的名字的方式，使得代码更加易于理解。

enum Color {
  Red,
  Green,
  Blue,
}

let c: Color = Color.Green;

2.2 代码质量保证工具使用

2.2.1 Linting工具的作用与配置

Linting工具用于静态分析源代码，检查潜在的错误、风格问题、语法问题等，从而提升代码质量。对于TypeScript项目，ESLint是常用的linting工具，并且它可以配合TypeScript解析器一起使用。

以下是一个基本的ESLint配置文件 .eslintrc.json 的示例：

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  "rules": {
    "@typescript-eslint/no-explicit-any": "off",
    "no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
  }
}

在这个配置文件中，我们指定了TypeScript解析器，声明了插件和扩展规则集，并自定义了一些规则来关闭一些过于严格的默认规则或开启自定义的规则。

2.2.* 单元测试与测试框架选型

单元测试是确保代码质量的关键环节。在TypeScript项目中，常用的单元测试框架有Jest和Mocha。Jest因其内置的许多功能，如异步测试支持、快照测试等，而受到许多开发者的喜爱。

一个基本的Jest测试示例如下：

// math.ts
export function add(a: number, b: number): number {
  return a + b;
}

// math.test.ts
import { add } from './math';

test('adds 1 + 2 to equal 3', () => {
  expect(add(1, 2)).toBe(3);
});

在此示例中，我们定义了一个简单的加法函数，并创建了一个测试用例来测试这个函数。

2.2.3 代码覆盖率分析与改进

代码覆盖率是指在测试过程中实际执行的代码与可执行代码总行数的百分比。它是衡量测试全面性的重要指标。在TypeScript项目中，可以使用Istanbul等工具来收集和报告代码覆盖率数据。

对于配置代码覆盖率分析，通常需要在测试命令中加入覆盖率收集的命令：

"scripts": {
  "test": "jest --coverage",
  "coverage": "jest --coverage --collectCoverageFrom='**/*.{ts,tsx}' --覆盖率阈值"
}

通过这些配置，运行测试后，可以生成一份详细的覆盖率报告，从而分析和改进测试的完整性。

接下来的章节将会深入探讨前端项目的结构和开发文件夹布局的设计原则和策略。

3. 前端项目结构和开发文件夹布局

在现代前端工程化项目中，合理的项目结构和开发文件夹布局对提高开发效率、保证项目质量及后期维护都起着至关重要的作用。前端项目结构设计原则指导我们如何将代码模块化、组件化，并以此构建清晰的目录结构。开发文件夹布局策略则涉及到源代码、资源文件及构建输出的管理，以适应版本控制的需要。本章将深入探讨前端项目结构的设计原则和最佳实践，以及如何在版本控制下布局项目文件夹。

3.1 项目结构设计原则

项目结构的设计是任何前端开发项目的基石。良好的项目结构不仅能够帮助开发者快速定位代码和资源，还能够促进团队协作和项目的长期维护。

3.1.1 模块化和组件化

模块化是将大型软件分解为更小、更易于管理的部分的过程。在前端项目中，模块化通常与组件化相辅相成。组件是具有特定功能和界面的独立模块，它们可以被组合成更复杂的界面。模块化和组件化的优势包括：

重用性： 代码复用是提高开发效率的关键因素之一。
可维护性： 独立的模块或组件使得代码更易于理解、测试和维护。
团队协作： 明确的模块划分有助于团队成员之间的分工合作。

为了实现模块化，通常会采用如下的设计原则：

单一职责原则： 每个模块或组件应该只负责一项任务或功能。
依赖注入： 通过依赖注入可以使得模块间的耦合性降低，更容易被重用。

3.1.2 目录结构的最佳实践

一个清晰的目录结构能够直接反映出项目的组织方式和架构设计。以下是一些常见的最佳实践：

按功能划分目录： 将相关功能的代码放在同一个目录下，例如页面组件、服务、工具函数等。
分离公共资源： 图片、样式表和静态文件等公共资源应该有自己独立的目录。
区分源代码和构建产物： 明确区分源代码目录和构建输出目录，防止构建产物覆盖源代码。

下面是一个示例性的前端项目目录结构布局：

my-app/
├── src/
│   ├── assets/              # 静态资源目录
│   ├── components/          # 公共组件目录
│   ├── pages/               # 页面组件目录
│   ├── services/            # 后端服务调用目录
│   ├── utils/               # 工具函数目录
│   ├── App.vue              # 应用入口文件
│   └── main.ts              # 应用入口脚本
├── dist/                    # 构建输出目录
├── tests/                   # 测试文件目录
└── package.json             # 项目配置文件

3.2 开发文件夹布局策略

在大型项目中，文件夹布局策略直接关系到团队成员的开发体验，以及项目代码的可维护性和可扩展性。

3.2.1 源代码、资源和构建输出的管理

一个合理的文件夹布局策略需要考虑如何管理源代码、资源文件和构建输出，以及它们在版本控制系统中的位置。

1. 源代码管理

源代码应该直接存放在项目的根目录下，例如 src 目录。对于大型项目，可以进一步将源代码组织成更小的部分，如模块、组件或页面。为了维护代码的整洁，可以利用代码分割和懒加载等技术，在构建时将代码按需分割。

2. 资源文件管理

资源文件包括静态文件（如图片、CSS、字体文件）和配置文件（如 .json 、 .xml ）。通常，这些文件存放在项目的 assets 目录中。为了确保版本控制系统的高效运行，应该在 .gitignore 中排除构建输出的文件和目录，避免将它们纳入版本控制。

3. 构建输出管理

构建输出包括编译后的JavaScript文件、CSS文件和其他由构建工具生成的资源。这些文件应该存放在 dist 或 build 目录下。在 package.json 中设置合适的 scripts 命令来管理构建流程，例如 build 和 serve 。

3.2.2 版本控制下的文件夹布局考量

在版本控制系统下，例如Git，文件夹布局需要考虑如何高效地管理项目文件的历史版本，以及如何促进团队成员之间的协作。

1. `.gitignore` 的设置

.gitignore 文件定义了不需要版本控制的文件和目录。对于前端项目，通常需要忽略 node_modules 目录、构建输出目录以及本地开发环境配置文件等。

# 忽略node_modules目录
node_modules/

# 忽略构建输出目录
dist/

# 忽略本地配置文件
.env.local

2. 分支策略

一个合理的分支策略能够帮助团队成员高效地协作开发。例如，可以使用 master 分支作为稳定的发布分支， develop 分支作为日常开发分支。同时，使用特性分支（feature branch）来进行新功能的开发，当功能开发完成并通过测试后，再将特性分支合并回 develop 分支。

小结

合理设计前端项目的目录结构和布局，能够为项目带来诸多好处，如代码的可维护性、可扩展性以及团队协作的顺畅性。本章内容介绍的模块化、组件化、资源管理和版本控制策略等都是经过实践验证的高效方法。在下一章节中，我们将深入探讨TypeScript基础语法和ES6+新特性，它们是现代前端开发中不可或缺的技术。

4. TypeScript基础语法和ES6+特性

4.1 TypeScript的高级特性

4.1.1 装饰器和元数据

TypeScript中的装饰器是一种特殊类型的声明，它可以被附加到类声明、方法、访问符、属性或参数上。装饰器使用 @expression 这种形式，其中 expression 必须 evaluate 为一个函数，它会在运行时被调用，被装饰的声明信息作为参数传入。

装饰器的工作原理

装饰器表达式会在运行时当作函数被调用，被装饰的声明信息作为参数传入。装饰器实际上就是一个函数，函数的参数为装饰的目标，这使得我们可以用更灵活的方式来操作类、属性、方法等。需要注意的是，装饰器是实验性的特性，可能会在未来发生改变。

function sealed(constructor: Function) {
    Object.seal(constructor);
    Object.seal(constructor.prototype);
}

@sealed
class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

在上面的代码示例中， sealed 装饰器密封了 Greeter 类及其原型，防止它们被修改。

装饰器的种类

装饰器有几种不同的形式，包括类装饰器、方法装饰器、访问符装饰器、属性装饰器、参数装饰器等。每种装饰器都可以访问到其被装饰目标的相关信息，从而执行不同的操作。

4.1.2 泛型编程的应用

泛型是允许在定义函数和类的时候不预先指定具体的类型，而在使用的时候再指定类型的一种特性。泛型提供了复用代码、保证类型安全、减少类型断言的好处。

泛型的基本概念

泛型可以应用于函数、接口和类中。泛型类型参数 T 、 U 、 V 等表示占位符类型，直到我们使用泛型类型时才会被具体化。

function identity<T>(arg: T): T {
    return arg;
}

let output = identity<string>("myString");

在上面的例子中，函数 identity 是一个泛型函数，它接受一个类型为 T 的参数，并返回相同类型的参数。

泛型的高级使用

泛型类型可以与接口、类等一起使用，实现高度的抽象和复用。泛型约束、泛型默认值和多个类型参数的使用，可以使得泛型的表达更加丰富和强大。

interface Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);
    return arg;
}

let myStr = loggingIdentity("hello");

在本例中， loggingIdentity 函数接受任何包含 length 属性的类型 T ，限制了泛型参数的范围。

4.2 ES6+ 新特性与TypeScript的结合

4.2.1 箭头函数和类的扩展

ES6引入了箭头函数和类的扩展，TypeScript对此进行了完整的支持，使得书写更简洁、语义更明确的代码成为可能。

箭头函数

箭头函数提供了一种更加简洁的函数书写方式。箭头函数表达式的语法比传统的函数表达式更短，这使得编写函数变得更简单。

let myFunction = (arg1, arg2) => {
    return arg1 + arg2;
};

在该例子中， myFunction 是一个接受两个参数的箭头函数。

类的扩展

ES6的类语法在TypeScript中得到了完整的实现，包括继承、访问修饰符、getters/setters等特性，使得面向对象编程在TypeScript中变得非常直观和强大。

class Animal {
    name!: string;
    constructor(theName: string) {
        this.name = theName;
    }
    move的距离 = 0;
    move() {
        console.log(`${this.name} moved`);
        this.distance += 1;
    }
}

class Dog extends Animal {
    constructor(name: string) {
        super(name);
    }
    bark() {
        console.log('Woof!');
    }
}

这个代码示例定义了一个 Animal 基类和一个继承自 Animal 的 Dog 子类。

4.2.2 模块系统和异步编程的改进

随着JavaScript的模块化和异步编程需求的增加，TypeScript引入了ES6+提供的 import 和 export 语句以及 async/await 语法，极大提升了代码的组织性和可读性。

模块系统

模块化是ES6的重要特性之一，它使得开发者可以将代码分割为可复用的模块，并通过 import 和 export 语法来导入或导出模块中的值。

// someModule.ts
export function someFunction() { /* ... */ }

// anotherModule.ts
import { someFunction } from "./someModule";

异步编程的改进

async/await 语法在TypeScript中的使用，简化了异步操作的处理。 async 函数总是返回一个 Promise，而 await 用于等待一个 Promise 解决。

async function getAsyncData() {
    let response = await fetch("***");
    let data = await response.json();
    console.log(data);
}

这段代码展示了如何使用 async 和 await 来处理一个异步的HTTP请求。

通过结合ES6+的特性，TypeScript为前端开发提供了更为丰富和强大的工具集。开发者可以利用装饰器、泛型编程以及ES6+的改进特性来提高代码的复用性、清晰度和可维护性。

5. Webpack配置和代码打包

Webpack是现代JavaScript应用程序不可或缺的静态模块打包器。它通过一个简单的配置文件将各种资源视为模块，并进行打包，最终生成浏览器可以使用的静态资源。在本章中，我们将详细介绍Webpack的基本工作原理，并深入探讨如何进行高级配置和优化。

5.1 Webpack基础和工作原理

5.1.1 打包工具的必要性和优势

在现代前端开发中，项目通常包含大量的JavaScript文件、CSS样式、图片资源等。如果没有一个高效的资源管理和打包机制，开发者需要手动处理这些资源的引入顺序和依赖关系，这不仅繁琐，而且容易出错。Webpack的出现解决了这一问题，它将所有的资源都视为模块，通过一个依赖图（dependency graph）来管理它们。

Webpack的优势在于其高度的可配置性和强大的社区支持。它不仅能够处理JavaScript文件，还可以打包CSS、图片、字体等多种类型的资源。此外，Webpack的loader和plugin机制让它能够支持丰富的转换和优化任务。

5.1.2 Webpack核心概念解析

Webpack的核心概念包括入口（entry）、出口（output）、loader和plugin。

入口(entry) ：告诉Webpack从哪个文件开始构建其依赖图。默认情况下，入口点是 ./src/index.js 。
出口(output) ：告诉Webpack在哪里输出它创建的打包文件。默认输出路径是 ./dist/main.js 。
loader ：由于Webpack只理解JavaScript，所以需要loader来处理其他类型的文件并将它们转换成有效的模块，以便Webpack能够打包它们。例如， style-loader 和 css-loader 可以用来处理CSS文件。
plugin ：loader用于转换特定类型的模块，而插件则可以用于执行范围更广的任务，比如打包优化、资源管理和环境变量注入等。例如， HtmlWebpackPlugin 可以帮助管理HTML文件。

5.2 高级配置和优化

5.2.1 代码分割与懒加载

代码分割是Webpack最重要的优化功能之一。它允许我们将代码分割成多个块，这些块可以按需加载，而不是一次性加载所有代码。这样可以显著减少首次加载时的代码体积，加快页面的加载时间。

懒加载是代码分割的一种应用方式，它允许你在实际需要的时候才加载模块。例如，你可以将一个巨大的库（如lodash）分割成更小的块，并在实际使用到它们的时候才进行加载。

下面是一个使用动态导入（import()语法）实现懒加载的示例代码：

// 懒加载lodash的某个函数
document.getElementById('clickMeBtn').addEventListener('click', () => {
  import('lodash/lodash')
    .then((_) => {
      // 按需使用lodash中的函数
      console.log(_.join(['Hello', 'Webpack'], '-'));
    })
    .catch((error) => {
      console.error('Lazy loading failed!', error);
    });
});

5.2.2 Tree Shaking 和 Scope Hoisting

Tree Shaking 是一个术语，通常用于描述移除JavaScript上下文中的未引用代码（dead-code）的行为。Webpack通过 --optimize-minimize 标记和 UglifyJsPlugin 可以实现这一功能。

Scope Hoisting 是另一种优化技术，它通过分析模块之间的依赖关系，把模块合并到一个作用域中，这样可以减少函数声明，同时减少代码体积和运行时成本。在Webpack 4及以上版本，这一功能是默认开启的。

// webpack.config.js
module.exports = {
  // ...
  optimization: {
    minimize: true,
    concatenateModules: true,
  },
};

通过这些高级配置和优化手段，Webpack可以显著提升最终输出的代码质量和性能。在本章中，我们详细介绍了Webpack的基础和高级特性。接下来，我们将探索如何使用版本控制工具Git进行项目协作与文档编写。

6. 版本控制和项目文档编写

6.1 版本控制工具Git的使用

6.1.1 Git的基本命令和工作流程

Git 是目前广泛使用的版本控制系统，它允许开发者追踪代码变更、分支开发和合并更改。作为开发者，理解Git的基本命令和工作流程对于高效协作至关重要。

首先，初始化一个新的 Git 仓库很简单，只需在项目的根目录下执行：

git init

此命令会创建一个 .git 目录，里面保存所有的版本控制信息。

接着，开发者通常会添加远程仓库地址，以便能够将本地更改推送至远程仓库，以及从远程仓库拉取最新的代码：

git remote add origin [remote repository URL]

在编码过程中， git add 命令用于将变更的文件添加到暂存区：

git add .

暂存后，开发者需要提交更改到本地仓库，每提交一次，就记录下了一个版本：

git commit -m "Your commit message here"

完成提交后，可以通过以下命令将代码推送到远程仓库的主分支：

git push -u origin main

如果需要从远程仓库获取最新的代码变更，可以使用：

git pull

在团队协作中，分支管理是避免冲突和组织工作流的有效方式。开发者可以创建新分支来开发新功能：

git checkout -b feature-branch

合并分支以完成功能开发：

git checkout main
git merge feature-branch

在处理复杂功能时，开发者可能会多次提交，此时可以使用 git rebase 以保持整洁的提交历史：

git rebase -i HEAD~n

其中 n 是你想要回溯到的提交次数。

6.1.2 分支管理和合并策略

在现代软件开发中，分支管理策略是提高项目管理效率和确保代码质量的关键。主要的分支管理策略有：功能分支策略（Feature Branch Workflow）、Git流（Gitflow Workflow）以及主分支策略（Mainline Development）。

功能分支策略是最简单的分支管理策略，所有的新功能开发都在独立的分支上进行，完成后合并到主分支。这种方法适用于小型项目或团队成员较少的场景。

Git流是一种更为复杂但广为接受的管理策略，它定义了固定的分支模型： main 分支、 develop 分支、以及 feature 、 release 和 hotfix 分支。每种类型的分支都有明确的职责：

main 分支用于存放随时可部署到生产环境的代码。
develop 分支作为开发的主分支，包含最新的开发进度。
feature 分支用于开发新的功能。
release 分支用于准备即将发布的产品版本。
hotfix 分支用于紧急修复生产环境中的严重错误。

主分支策略主要适用于大型组织，其中 main 分支是唯一的长期分支，所有代码更改都通过代码审查和集成测试后才能合并。

在合并策略方面，开发者需要了解几种常见的合并类型：快进（Fast-forward）、非快进（Non-fast-forward）和 Squash 合并。快进合并是最简单的，只有当分支直接基于目标分支最新提交时才会发生。非快进合并涉及合并提交，保持了完整的开发历史。Squash 合并则是将多个提交压缩成一个单一提交，这有助于保持项目历史的简洁性，但会丢失详细的提交信息。

了解并根据项目的具体情况选择合适的分支管理和合并策略，可以帮助团队高效地进行版本控制，并减少合并冲突的可能性。

6.2 项目文档的重要性与编写方法

6.2.1 API文档和README的自动化生成

项目文档是沟通开发者和软件用户的重要桥梁。良好的文档可以简化开发流程、减少沟通成本，并提供给用户清晰的指导。在编写项目文档时，自动化生成是一个有效减轻开发者负担的方法。

对于API文档，许多现代框架和库支持通过注释自动生成文档，例如使用JSDoc注释JavaScript代码或使用Swagger描述REST API。JSDoc注释可以被工具如 jsdoc 解析，生成清晰的文档页面。以下是一个JSDoc注释的例子：

/**
 * Adds two numbers and returns the result.
 * @param {number} x - The first number to add.
 * @param {number} y - The second number to add.
 * @returns {number} The sum of the two numbers.
 */
function add(x, y) {
    return x + y;
}

对于README文件，可以在项目的根目录中添加一个Markdown文件，其中包含项目介绍、安装指南、使用说明和开发指南。Markdown文件可以被GitHub自动渲染为美观的网页。此外，可以利用一些自动生成工具，比如 readme-md-generator ，自动填充README模板。

对于更为复杂的项目，可以采用如 typedoc 这样的工具，自动生成TypeScript项目的API文档。这些工具通常支持Markdown或HTML输出，方便进一步的自定义和发布。

6.2.2 代码注释和文档的规范要求

编写清晰、一致的代码注释和文档是确保项目可持续性的重要组成部分。遵循以下规范可以提高文档的质量：

明确性 ：注释应该准确描述代码的行为和目的，避免模糊或误导性语言。
简洁性 ：注释应当简洁，直接切中要点，避免冗长和不必要的信息。
一致性 ：全项目使用统一的注释风格和语法，例如JSDoc或TypeScript类型注解。
定期更新 ：随着代码的变更，注释和文档也需要同步更新，保持其有效性。

在编写代码注释时，应优先注释复杂或不明显的代码段，并解释其背后的逻辑。例如：

// Iterate over each item in the list
list.forEach(item => {
    // Do something with each item
    process(item);
});

此外，对于公共API和库函数，提供详细的参数说明和返回值描述是必要的：

/**
 * Get the name of an item.
 * @param {number} id - The id of the item to retrieve.
 * @returns {string} The name of the item.
 */
function getItemName(id: number): string {
    // Implementation...
}

最后，代码注释和文档是项目的重要组成部分，应该定期审查和更新，以保持其相关性和准确性。通过强化这些实践，可以显著提高项目的可维护性、可读性和可扩展性。

以上内容提供了关于Git的使用和项目文档编写的深入见解，旨在指导开发者们如何高效地利用版本控制工具和编写高质量的项目文档。