FrintJS应用思考
FrintJS应用思考
引言
当你使用FrintJS实现功能时，首先会创建一个应用。
习惯上你创建的第一个应用称作根应用。
由于只能创建一个根应用, FrintJS提供了相关API，可以在根应用中创建和注册多个子应用。
为什么要创建子应用?
所有的应用都会随着时间发展，变得越来越大。
FrintJS中的子应用帮助你將大型应用分解成多个更小的独立应用， 可以按需注册加载甚至渲染。
如果你正在构建大型浏览器应用，想象可以通过每个应用独立的打包文件异步加载，像: app.js, app2.js
分解成更小的子应用，意味着子应用可以独立负责自己的逻辑，长期来说更容易维护。
一旦根应用中的provider分类明确，你甚至可以轻易地將子应用分发给不同团队实现。
示例应用
譬如一个大型项目管理应用，会有这些功能：
-
用户管理
-
待办事项
-
事件管理日历
子应用拆解
如果使用FrintJS构建这类大型应用，你可以分解成下面的子应用:
-
根应用 应用的基础
-
用户 用来处理用户的子应用
-
待办事项 用来处理待办的子应用
-
事件 和日历、事件有关的子应用
每个子应用都会有自己独立的providers集合，应用本身需要的依赖。
其他子应用除非真的需要，一般无需引用。
frint-cli 本身使用FrintJS创建，frint基础命令是根应用，子命令 frint help 和 frint new 都是独立的子应用。
创建和注册子应用
首先创建根应用:
import {createApp} from 'frint';
const RootApp = createApp({
name: 'MyRootApp',
providers: [
{
name: 'foo',
useValue: 'foo value here',
},
],
});
const app = new RootApp();
我们已经完成根应用创建和实例化，可以开始创建子应用:
const TodosApp = createApp({
name: 'Todos',
});
然后注册子应用:
app.registerApp(TodosApp);
现在完成Todos子应用的注册。
可以这样获取Todos应用的实例:
const todosApp = app.getAppInstance('Todos');
自上而下传递provider
你的根应用中可能有许多很重要的provider， 你想要在子应用中直接访问这些provider。
FrintJS允许在根应用中层叠定义Provider。
上例中，根应用只有一个名为foo的provider。
为了让子应用Todos可以直接访问，我们可以稍微更新下根应用定义:
import { createApp } from 'frint';
const RootApp = createApp({
name: 'MyRootApp',
providers: [
{
name: 'foo',
useValue: 'foo value here',
cascade: true,
},
],
});
const app = new RootApp();
启用cascade属性，可以让注册过的子应用都可以访问到foo provider
Todos子应用可以这样访问:
const todosApp = app.getAppInstance('Todos');
todosApp.get('foo'); // 获取foo的值
你可以在官方文档中了解更多。
如何渲染子应用
本文中故意没有涉及渲染话题是因为这里会涉及不同的渲染库React或Vue.js。
顺便说一句FrintJS同时支持React和Vue.js
我强烈建议阅读FrintJS官方文档中的组件和区域相关概念，
文档中以示例代码解释所有概念。
你可以看看这个处理多子应用的应用实例。
我在另外一篇文章中写了使用React.js渲染子应用的话题。
译者注
- 因译者水平有限，如有错误，欢迎指正交流
