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

Bobril - I - 入门

Tomáš Růt
starIconstarIconstarIconstarIconstarIcon

5.00/5 (13投票s)

2015 年 11 月 8 日

CPOL

6分钟阅读

viewsIcon

59179

downloadIcon

257

对 bobril 框架的简单介绍

 

bobril-logo

引言

在本文中，我们将学习 Bobril 的基础知识，并创建一个带有一个组件的简单应用程序。然后，我们将了解如何通过 npm 简单地设置项目。

背景

Bobril 是一个受 React 和 Mithril 启发的面向组件的框架。它结合了两者的优点。它是一个快速、轻量级的框架，渲染基于虚拟 DOM。主要关注速度和代码生成的简单性。Bobril 比 React 快约 8 倍（参见vdom-benchmark）。

任何页面的内容和行为都可以通过简单地组合 JavaScript 对象来定义。

页面内容渲染基于虚拟 DOM 的比较。应用程序在某个时间点具有某种状态，Bobril 应用程序根据此状态生成虚拟 DOM。虚拟 DOM 是结果 DOM 的对象表示。如果发生某些状态更改事件，并且之前的虚拟 DOM 与当前生成的虚拟 DOM 不同，则真实 DOM 将根据此更改而改变。

Bobril 由 Boris Letocha（GMC 软件技术公司的软件架构师和开发人员）编写。

引言：Boris Letocha，框架的作者

除了尺寸和速度优势之外，Bobril 还具有一些在其他地方找不到的非常有用的功能。例如，在所有浏览器（低至 IE9）中透明模拟 pointer-events:none 或 user-select:none。在所有支持的浏览器（包括 Chrome、IE10、IE11）中透明统一鼠标和触摸事件。另一个功能我称之为“虚拟 CSS”——您可以在 JS 中定义样式，它将在运行时透明地构建最优的 CSS。图像精灵。图像重新着色。与 TypeScript 紧密集成。Bobril-build 在编译时增强您的代码，进行类似于 Rollup 的优化打包。Bobril 移除了一些 React 的限制，例如组件根不需要只有一个元素。直接包含路由器和拖放功能。以及更多更多。

您可以在此处找到更详细的信息和示例。

如何开始

让我们从一个简单的 TypeScript（类型化 JavaScript）示例开始——传统的Hello World。

安装构建系统

最简单的方法是直接使用预备好的构建系统bobril-build，它包含用于构建基于bobril的应用程序、测试、翻译等的优化功能。Bobril-build需要node.js >= 6.*.* 和 npm >=3.*.*。

要安装 Bobril build，请在命令行中输入以下命令

npm i bobril-build -g

我们还建议安装tslint bobril-build插件，它为项目生成tslint.json文件

npm i typescript tslint -g
bb plugins -i bb-tslint-plugin

TSLint 检查您的 TypeScript 代码是否存在可读性、可维护性和功能错误。

现在我们可以开始创建项目了。所以，创建一个文件夹，例如，sample1，在此文件夹中创建一个空文件，index.ts，并在其根目录中输入以下命令

npm init
npm i bobril --save
bb

这些命令将

  1. 将项目初始化为npm包。您可以按 Enter 键回答所有问题。
  2. 安装 Bobril 依赖项
  3. 运行bobril-build

现在bobril-build以交互模式运行，这意味着它会监视您的代码更改，将应用程序构建到内存文件系统，并在地址https://:8080上提供服务。

构建的应用程序已解析所有依赖项，创建了index.html、用于调试的源映射以及您通常在其他框架中必须手动完成的更多内容。

让我们编写代码

为此，我们建议使用安装了tslint和bobril插件的 Visual Studio Code。Bobril-build针对此编辑器进行了优化，并包含其自己的bobril扩展，其中包含代码片段和分析工具。

所以，在编辑器中打开sample1文件夹，将index.ts更改为以下内容

import * as b from 'bobril';

b.init(() => {
    return { tag: 'h1', children: 'Hello World!' };
});

从 Bobril 包导入的b代表bobril世界及其所有可用的基本函数。init函数使用返回虚拟 DOM 的函数初始化应用程序。在示例中，虚拟 DOM 由一个节点表示——IBobrilNode——标签为'h1'，内容为'Hello World'。

是的，就这么简单。除了string之外，children属性还可以分配另一个IBobrilNode或一个IBobrilNode数组，因此我们可以组成整个 DOM 树。

现在在浏览器中查看https://:8080地址。您可以看到您的第一个用 Bobril 编写的应用程序！

Components

Bobril是一个专注于组件和虚拟 DOM 组合的框架，我们可以定义易于使用的组件。让我们准备一个button组件。

添加一个新文件button.ts，内容如下

import * as b from 'bobril';

export interface IButtonData {
    title: string;
    onClick?: () => void;
}

interface IButtonCtx extends b.IBobrilCtx {
    data: IButtonData;
}

export const button = b.createComponent<IButtonData>({
    render(ctx: IButtonCtx, me: b.IBobrilNode) {
        me.tag = 'button';
        me.children = ctx.data.title;
    },
    onClick(ctx: IButtonCtx): boolean {
        if (ctx.data.onClick) {
            ctx.data.onClick();
        }

        return true;
    }
});

export default button;

b.createComponent函数接受一个定义组件在其生命周期中行为的对象。此生命周期定义函数，如init、render、postRender等，由接口IBobrilComponent定义。每个函数的描述可以在bobril的index.ts文件中的注释中找到。我们的按钮使用render和onClick函数，它们接受ctx（上下文）作为第一个参数。

上下文是特定组件实例当前状态的存储，例如，对于每个特定的button——虚拟 DOM 中的特定节点。

上下文interface IButtonCtx扩展了IBobrilCtx，具有预定义的成员data，该成员由bobril在虚拟 DOM 树渲染中自动分配。它准备好与自己的IButtonData接口定义一起使用。

此data成员旨在用作组件的输入信息。它可以定义组件应该如何显示和行为。因此，示例中的按钮具有从外部定义的title和onClick回调。

数据onClick回调在onClick生命周期函数中调用，该函数再次由IBobrilComponent接口定义。

现在button组件已准备好在index.ts中使用，因此我们可以将其更改为以下内容

import * as b from 'bobril';
import { button } from './button';

b.init(() => {
    return [
        { tag: 'h1', children: 'Hello World!' },
        button({ title: 'Click Me!', onClick: () => alert('Yeah! I was clicked!') })
    ];
});

自动重新编译后，您可以打开此页面，看看bobril是如何工作的。

也可以使用带别名的经典导入方式

import * as btn from './button';

让它活起来

如果我们需要进行一些操作（例如，作为对某些后端事件的反应），更改状态并告知bobril需要重新渲染虚拟 DOM，我们可以简单地调用b.invalidate()函数，并且bobril会重新调用提供给b.init函数的函数。为了尝试它，我们可以简单地更改代码

import * as b from 'bobril';
import { button } from './button';

let counter = 0;

b.init(() => {
    setTimeout(() => { counter++; b.invalidate(); }, 1000);

    return [
        { tag: 'h1', children: 'Hello World!' },
        button({ title: 'Click Me!', onClick: () => alert('Yeah! I was clicked!') }),
        { tag: 'p', children: counter.toString() }
    ];
});

它添加了一个新元素，计数器每 1000 毫秒增加一次。如果您需要在某个组件内部调用b.invalidate，请将其与ctx作为参数一起使用，即b.invalidate(ctx)。它将只执行特定组件的渲染。

Bobril包含许多其他非常有用的函数，例如styleDef，用于将样式定义为对象并准备好通过style函数使用。其他有用的函数是routes和route，用于定义应用程序中页面之间的路由等。

注释

要构建、压缩和打包您的应用程序到dist文件夹，只需输入以下命令

bb b

有关bobril和bobril-build的更多信息，请访问以下 GitHub 页面

历史

  • 2017-07-30：修订 (bobril-build@0.71.0, bobril@7.3.2, TS 2.4.2)
  • 2017-01-02：修订 (bobril-build@0.59.2, bobril@5.2.1)
  • 2016-11-04：修订 (bobril-build@0.50.1, bobril@4.49.0)
  • 2016-05-26：更改为仅使用 bobril-build 系统 (bobril-build@0.36.2, bobril@4.41.0)
  • 2015-12-16：更改为基于 bobril-build 的 simpleApp
  • 2015-11-22：添加了 VS Code 任务配置
  • 2015-11-17：添加了 vdom-benchmark 链接
  • 2015-11-08：版本 4.8.2 更新 - 添加了助手
  • 2015-10-28：文章基于版本 4.4.0 创建
© . All rights reserved.