We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
接着自定义页面系统设计（一）讲，这个章节主要会讲解如何解决下面几个点：
建议先阅读自定义页面系统设计（一）
自定义页面系统设计（一）讲到我们想要实现的是一个功能模块可以重复使用的系统，运营可以选择一个页面模板，然后自由的选择多个功能模块来搭建页面（可视化界面的设计后续会作介绍，这里先不涉及）。
基础页面模板简单来说就是页面的骨架，通常也就是一个index.html。而功能模块可以把它想象成页面的一个组成部分，一个页面由多个模块组成。
index.html
为了方便的创建并使用基础页面模板和功能模块，我们需要先做以下几件准备工作：
页面模板主要有以下两个用途：
我们需要维护一个仓库来统一管理模板，另外，我建议通过分支来管理模板类型，这样模板项目地址不会分散。 capricorn-html-template项目就是我们的模板管理项目，我们将默认模板维护在default分支下，开发人员可以根据实际需要来新增一个模板。
default
. ├── index.html // 主入口 └── package.json // 依赖管理文件
模块初始化模板主要是在开发人员新创建一个功能模块的时候会用到。我们同样需要维护一个仓库来统一管理模块初始化模板，同样还是通过分支来管理。
模块初始化模板
capricorn-module-template仓库就是用来管理模块初始化模板的。我们将默认模板维护在default分支下，开发人员可以根据实际需要来新增一个模板。
. ├── assets // 模块打包地址 ├── template │ ├── index.html // 模板页面 │ └── package.json // 模板依赖 └── src └── app.jsx // 模块主入口
准备好基础页面模板和功能模块模板之后，我们需要一个命令行工具给他们俩更好的赋能。比如快速创建模块、快速搭建页面和发布模块。
在实际应用场景中，我们需要通过页面可视化的搭建页面。本地我们将通过命令行工具来实现页面搭建的任务。后续章节会对可视化作单独介绍。
npm i capricorn-cli -g
capricorn model
我们通过capricorn init出来的项目，只需要npm i安装完依赖之后，npm start就可以启动新模块项目了。 接下来我们就可以随心所欲的进行 coding 了。
capricorn init
npm i
npm start
当功能模块实现完之后，我们可以通过npm run build来进行模块打包，打包后的模块压缩包会生成在assets文件夹下。 在模块打包完之后我们需要执行capricorn release将打包后的脚本推送到npm仓库并且将模块的信息同步到数据库。
npm run build
assets
capricorn release
npm
因为我们这里是本地开发，我们就直接将包推送到npm仓库即可。
一波操作之后，一个带版本的模块就在根目录下生成完毕了。
上面我们介绍，我们只需要capricorn model就可以初始化一个模块项目，那么如果每一个项目都独立打包自己的三方依赖包，那么最终生成的页面体积就会非常的庞大。 出于这个考虑，我们肯定需要做三方依赖抽离，将这些公共的依赖统一在全局管理，提供给所有的功能模块使用。那么将公共依赖放在基础页面模板里就是一个比较好的选择了。
<html> <head> <meta charset="UTF-8" /> <title>capricorn</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <meta name="keywords" content=""> <meta name="description" content=""> <link rel="stylesheet" href="https://capricorn.static.monajs.cn/assets/base.css"> </head> <body> <script crossorigin src="https://capricorn.static.monajs.cn/assets/base.js"></script> <script crossorigin src="https://unpkg.com/react@16.5.2/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16.5.2/umd/react-dom.production.min.js"></script> </body> </html>
这是默认模板里的代码，我们可以看到react.production.min.js和react-dom.production.min.js这两个基础依赖都采用了cdn引用方式，不再通过依赖包的方式注入到项目中，这样可以让所有的功能模块共同使用同一个资源包。
react.production.min.js
react-dom.production.min.js
cdn
自定义页面系统设计（一）中介绍过，我们将模块从页面中抽离出来之后，它们都是独立的个体。我们需要提供一个桥梁去支持模块之间的通信。
import Events from 'mona-events' !window.Capricorn && (window.Capricorn = {}) // 摩羯系统全局消息监听机制，负责模块间通信 window.Capricorn.Events = Events window.Capricorn.events = new Events
mona-events`是一个事件管理的三方依赖包，这里我们通过事件监听与消息派发的机制来促成模块间的通信。
下面来看一个🌰：
// module-a ... window.Capricorn.events.on('module_a_test', (res) => { console.log('接收到消息') console.log(res) // do something }) ...
// module-b ... window.Capricorn.events.emit('module_a_test', { moduleName: 'module-b', message: 'send message!' }) ...
这样module-a就能响应module-b的交互请求了。
module-a
module-b
The text was updated successfully, but these errors were encountered:
No branches or pull requests
接着自定义页面系统设计（一）讲，这个章节主要会讲解如何解决下面几个点：
将页面拆分为页面模板和功能模块
自定义页面系统设计（一）讲到我们想要实现的是一个功能模块可以重复使用的系统，运营可以选择一个页面模板，然后自由的选择多个功能模块来搭建页面（可视化界面的设计后续会作介绍，这里先不涉及）。
基础页面模板简单来说就是页面的骨架，通常也就是一个
index.html。而功能模块可以把它想象成页面的一个组成部分，一个页面由多个模块组成。为了方便的创建并使用基础页面模板和功能模块，我们需要先做以下几件准备工作：
1. 统一管理一个页面模板仓库
页面模板主要有以下两个用途：
我们需要维护一个仓库来统一管理模板，另外，我建议通过分支来管理模板类型，这样模板项目地址不会分散。
capricorn-html-template项目就是我们的模板管理项目，我们将默认模板维护在
default分支下，开发人员可以根据实际需要来新增一个模板。默认模板目录结构
. ├── index.html // 主入口 └── package.json // 依赖管理文件2. 统一管理一个模块初始化模板仓库
模块初始化模板主要是在开发人员新创建一个功能模块的时候会用到。我们同样需要维护一个仓库来统一管理模块初始化模板，同样还是通过分支来管理。capricorn-module-template仓库就是用来管理
模块初始化模板的。我们将默认模板维护在default分支下，开发人员可以根据实际需要来新增一个模板。默认模板目录结构
. ├── assets // 模块打包地址 ├── template │ ├── index.html // 模板页面 │ └── package.json // 模板依赖 └── src └── app.jsx // 模块主入口3. 开发一个命令行工具
准备好基础页面模板和功能模块模板之后，我们需要一个命令行工具给他们俩更好的赋能。比如快速创建模块、快速搭建页面和发布模块。
我们通过
capricorn init出来的项目，只需要npm i安装完依赖之后，npm start就可以启动新模块项目了。接下来我们就可以随心所欲的进行 coding 了。
当功能模块实现完之后，我们可以通过
npm run build来进行模块打包，打包后的模块压缩包会生成在assets文件夹下。在模块打包完之后我们需要执行
capricorn release将打包后的脚本推送到npm仓库并且将模块的信息同步到数据库。一波操作之后，一个带版本的模块就在根目录下生成完毕了。
公共依赖抽离
上面我们介绍，我们只需要
capricorn model就可以初始化一个模块项目，那么如果每一个项目都独立打包自己的三方依赖包，那么最终生成的页面体积就会非常的庞大。出于这个考虑，我们肯定需要做三方依赖抽离，将这些公共的依赖统一在全局管理，提供给所有的功能模块使用。那么将公共依赖放在基础页面模板里就是一个比较好的选择了。
这是默认模板里的代码，我们可以看到
react.production.min.js和react-dom.production.min.js这两个基础依赖都采用了cdn引用方式，不再通过依赖包的方式注入到项目中，这样可以让所有的功能模块共同使用同一个资源包。模块通信
自定义页面系统设计（一）中介绍过，我们将模块从页面中抽离出来之后，它们都是独立的个体。我们需要提供一个桥梁去支持模块之间的通信。
mona-events`是一个事件管理的三方依赖包，这里我们通过事件监听与消息派发的机制来促成模块间的通信。
下面来看一个🌰：
这样
module-a就能响应module-b的交互请求了。The text was updated successfully, but these errors were encountered: