BH - HTML介绍

BH - HTML是一种JavaScript库，为前端UI组件提供快速、灵活、独立的HTML/CSS构建工具箱。

主要功能

• 支持Web组件化
• 避免使用类似ng-directive的标签
• 支持自定义标签和属性
• 使用CSS样式
• 纯Javascript
• 最小化的初始化、运行和渲染时间
• 分离其他框架和库

使用方法

在HTML中引入BH - HTML库

<script src="path/to/bh.js"></script>

定义一个新组件：

window.bh.add('my-component', function(bh){
    bh.match('my-component', function(ctx, json) {
        ctx.tag('div');
        ctx.content(json.content);
    });
});

使用该组件：

<my-component content="Hello World!"></my-component>

以上代码将渲染出以下HTML：

<div>Hello World!</div>

自定义标签和属性

BH - HTML允许您为您的组件定义自定义标签和属性。例如：

bh.match('my-component[data-text]', function(ctx, json) {
    ctx.tag('div');
    ctx.content(json.text);
    ctx.attr('data-text', json.text);
});

这将在以下标签中引入data-text属性，例如：

<my-component data-text="Hello World!" text="Hello World!"></my-component>

CSS样式

BH - HTML支持在组件模块中使用CSS样式。例如：

window.bh.add('my-component', function(bh) {
    bh.match('my-component', function(ctx) {
        ctx.tag('div');
        ctx.content(ctx.content() + ' - This is my custom component!');
        ctx.cls('my-component');
    });

    bh.match('my-component.my-component', function(ctx) {
        ctx.mixCss({
            'background-color': '#F7F7F7',
            'border': '1px solid #DFDFDF',
            'padding': '10px'
        });
    });
});

准确地传达自定义样式。

结尾语

BH - HTML是一种非常有用的库，可以帮助前端开发人员快速构建可自定义的UI组件。BH-HTML构建高度模块化和重用模块，使开发更加轻松和高效。