65.9K
CodeProject 正在变化。 阅读更多。
Home

Bobril - 集成到另一个 Web 应用程序

Tomáš Sychra
emptyStarIconemptyStarIconemptyStarIconemptyStarIconemptyStarIcon

0/5 (0投票)

2017年5月2日

CPOL

4分钟阅读

viewsIcon

6017

Bobril 的灵感来自 ReactJS 和 Mithril。Bobril 速度很快。因此，如果您想加快应用程序的关键部分速度，Bobril 是一个不错的选择。

您喜欢 Bobril 框架，但您的 Web 应用程序是用另一个框架开发的吗？别灰心！有解决方法。

目录

动机

Bobril 的灵感来自 ReactJS 和 Mithril。Bobril 速度很快。因此，如果您想加快应用程序的关键部分速度，Bobril 是一个不错的选择。如果 Bobril 看起来与您的应用程序不兼容，请不要担心，Bobril 工作所需的一切只是一个作为容器的单个 DOM 元素（例如div）。仅此而已。

在继续阅读之前，请自行回答以下问题

  • 您想提高应用程序关键部分的速度吗？
  • 您想以易于阅读和直接的方式实现您的应用程序吗？
  • 您想使用基于组件的框架吗？

如果答案是YES，则继续阅读...

集成的基本理论

我们将使用bobril-build工具从 TypeScript 编译。您可以在此处找到有关bobril-build的更多信息。

也可以在此处阅读有用的信息 here。

Bobril 在您的 Web 应用程序中需要什么

  • 容器（例如div元素）
  • 全局 JavaScript 变量（namespace）- Bobril 和您的应用程序可以通过此全局变量相互通信

集成的重要方法是：b.init和b.addRoot

  • b.init 方法必须在 Web 应用程序中只调用一次，但必须恰好调用一次。如果您不调用它，Bobril 将不会呈现任何内容（您也可以将渲染元素设置为b.init的第二个参数）
  • b.addRoot 确保 Bobril 将自身呈现到yourDivReference元素（请参见下面的代码示例）
b.addRoot(() => {
    return [
        b.styledDiv("Hello world")
    ];
, yourDivReference};

Bobril 组件集成的必要步骤

您的 Bobril 组件可能位于 NPM 注册表中。您可以通过 npm 或 yarn 包管理器下载它们。您想要使用的所有组件都定义在package.json中。在典型的 Bobril 应用程序中，您可以直接导入它们并立即使用。但是如何将这些组件与您的应用程序连接起来呢？

您不能直接在您的应用程序中使用 Bobril 组件。

准备用于集成的 Bobril 组件

文件的命名约定由您决定。

创建 Bobril 组件的包装器

  • 您可以将包装器想象成一个“小型 Bobril 应用程序”
  • 这是集成所必需的。
  • 对于 Bobril “Component1”，创建一个包装器组件“WrapperComponent1”
  • 示例：您想要集成名为“Component1”的组件（该组件在项目之间共享，并以纯 bobril 实现）。您必须创建组件“WrapperComponent1”。此包装器（小型应用程序）将确保您的应用程序和 bobril 之间的桥梁。

提示：如果您想创建组件的组合（例如，在 bobril 中实现的全新页面），您可以为整个页面创建一个包装器。

组件WrapperComponent1的示例，用于组件Component1

  • 包装器组件的名称：WrapperComponent1
  • 包装器组件的文件名：wrapper-component1.ts
import * as b from 'bobril';
import * as Component1 from 'component1

export function createComponent1(settings: IComponent1Config): IComponent1Api {
    b.addRoot(
        () => {
            return [
                Component1.create({
                    name: setings.name,
                    color: setting.color
                })
            ]
        },
        settings.parentElement // It is reference to element, you create in you app
    );

    return {
        // expose some API to external system
    };
}

在您的项目中定义公共命名空间 – 通过全局 JavaScript 变量

在下面的示例中，namespace称为bobril_integration，但名称由您决定。

  • 通过此全局变量，将实现集成

创建一个集成项目

  • 经典 Bobril 项目
  • 一个简单的项目，它只会将所有必要的 bobril 组件编译成一个捆绑文件，并通过bobril_integration命名空间变量公开这些组件。

集成项目的 Package.json 示例

  • 请参阅“dependencies”部分。它定义了公开的 Bobril 组件。您将看到这些组件将通过bobril_integration命名空间变量可用。
{
  "name": "bundle-project",
  "version": "0.0.1",
  "dependencies": {
    "wrapper-component1": "1.x.x",
    "wrapper-component2": "*",
    "wrapper-component3": "0.x.x"
  },
  "main": "src/app.ts",
  "bobril": {
    "example": "examples",
    "head": "<script>window.bobril_integration = {};</script>",
    "prefixStyleDefs": "bobril-"
  }
}

如您所见，集成项目中有一个重要的文件。

集成项目的主文件 - App.ts

  • 文件名由您决定，但建议使用app.ts
  • 不要忘记在package.json中将"main": "src/app.ts"编辑为app.ts的正确路径
import * as b from 'bobril';
import { createComponent1 } from 'wrapper—component1';
import { createComponent2 } from 'wrapper-component2';
import { createComponent3 } from 'wrapper-component3';

// Call there b.init only once, so in components wrapper, you dont have to call it again
b.init(()=> []);

// global exports for External App
declare var bobril_integration: any;

//bobril_bundle namespace
bobril_integration.bobril_bundle = bobril_integration.bobril_bundle || {};

// create component "export"
bobril_integration.bobril_bundle.component1 = createComponent1;

// create component "export"
bobril_integration.bobril_bundle.component2 = createComponent2;

// create component "export"
bobril_integration.bobril_bundle.component3 = createComponent3;

此文件准确定义了组件将如何公开到外部系统。

示例：bobril_integration.bobril_bundle.component1 = createComponent1;

集成项目的编译

在根目录中执行bb b命令，然后将生成包含所有必要图像的a.js和a.png精灵。将此源代码复制到您的项目中。

您应该已将所有组件捆绑到捆绑文件中，并将图像捆绑到精灵文件中。

在您的应用程序中实现的示例

将 bundle.js 注入到您的项目中

  • 插入到index.html中
  • 它必须位于文件的顶部
    <script type="text/javascript" src="externalResources/a.js"></script>

Bobril 组件的使用

  • 在您的框架中创建一个div容器
    var containerForBobril = $("<div/>")
  • 调用bobril_integration.bobril_bundle.component({...})
    var bobwaiComponentAPI = bobril_integration.bobril_bundle.component1({
   name: "Name",
   color: "#00FF00",
   parentElement: containerForBobril
});

完整示例

var containerForBobril = $("<div/>")
$("body").append(containerForBobril)

var bobwaiComponentAPI = bobril_integration.bobril_bundle.component1({
   name: "Name",
   color: "#00FF00",
   parentElement: containerForBobril
});
© . All rights reserved.