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渲染子应用的话题。

译者注

原文链接

• 因译者水平有限，如有错误，欢迎指正交流