Frontity 核心概念介绍

在前一篇文章中初步介绍了什么是 Frontity，以及Frontity所涉及的技术、应用模式、主要优点等内容。本篇文章将进一步介绍Frontity的几个核心概念，包括如程序包（Package）、状态（State）、操作（Actions）、库（Libraries）等，通过理解这些核心概念可以深入了解 Frontity 的内部工作流程。

Frontity 是一个基于 React 的运行在 Node.js 上面向 Word Press 的前端框架，其所有的应用程序都是以包（Package）的形式存在的，包管理工具使用 npm。下面来看一下 Frontity 应用程序的目录结构：

这个目录结构当在创建 Frontity 应用的时候会自动生成，用下面的命令：

$npx frontity create my-frontity-project

该命令除了生成目录结构外，还会把 Frontity 的核心包以及一些非核心包自动放到相应的目录下，还会把缺省的主题（mars-theme）放到 packages 目录下。没有自动加载的包可以通过下面的命令安装：

$npm install package-name

目录 node_modules 和 packages 都是用来存放各种包（包的程序代码及配置等）的地方，不同的是 node_modules 目录中的内容是不可修改的，上面提到的 Frontity 核心包、非核心包以及通过 npm 安装的包都存放在这里。而 packages 目录中存放的包是可以修改的，一般是自己应用程序的代码及配置，或者是从 node_modules 目录中移动到 packages 目录下的包，这也是修改 node_modules 中的包的方式。

配置文件 packages.json 就是 node.js 项目的包配置文件，主要目的是配置包的相关信息以及该包对各种其它包的依赖关系。当创建 Frontity 应用的时候，Frontity 的一些基本包会加到依赖关系的配置中。

配置文件 frontity.setting.js 是用来存放 Frontity 应用配置的，包括如应用名称网站链接，使用的主题及其初始配置数据，数据源（WordPress）的位置及相关配置，应用所使用的包及其配置等。

第二个 Frontity 重要的概念就是状态（State），这个状态值由 frontity.setting.js 和包中的状态数据合并而成，以 Javascript 对象的方式存放。Frontity 在服务器端把状态数据合并后，会以 JSON 的方式发给客户端的浏览器，发送之前还会调用异步函数beforeSSR，这样每个包可以根据需要来修改状态数据。经过服务器端的渲染后生成的HTML页面和相应的状态数据发给客户端的浏览器。

客户端的浏览器接收到HTML页面和状态数据后，会显示页面，当页面的 Javascript 代码运行时，Frontity 会建立和加载状态数据，然后进行 React 的客户端渲染，应用的客户端代码可以根据需求来修改页面中的部分元素。详细流程可参考官网的指南。所有的状态数据可以在浏览器的控制台中查看，非常方便进行调试。

> frontity.state