@54696d654a6f6c74/html-injector 中文文档教程

Question

What is html-injector?

一个轻量级库，允许创建可重用的 HTML 模板。

Who is this for?

• Those that want JSX without the bloat.
• Those that hate seeing a triple digit dependcy list when isntalling a package.
• Those that need an HTML generator that's lightweight and extensible.

Installation

npm

npm install 54696d654a6f6c74/html-injector

Usage

使用此库的推荐方法是让 JS 文件包含充当 HTML 的 const 值。 然后在处理前端的 JS 文件中导入必要的变量并将它们注入 DOM。

Gettings started

Importing the library into your templates.js file:

const { Tag } = require('@54696d654a6f6c74/html-injector')

Creating a basic template:

const template = 
new Tag("div", [
  new Tag("h1", "Hello world!")
]);

Extracting HTML from the template:

console.log(template.stringify)

Controlling attributes:

导入Attribute模块：

const { Tag, Attribute } = require('@54696d654a6f6c74/html-injector')

将属性添加到模板：

const template = 
new Tag("div", [
  new Tag("h1", "Hello world!", [new Attribute("id", "main-header")])
    ], 
[
new Attribute("class", "container"),
new Attribute("id", "main-page-container")]
);

请注意，属性必须包含在列表[]中。

Injecting to the DOM

导入Injector模块：

const injector = require("@54696d654a6f6c74/html-injector").Injector;

将template注入目标ID为“jolt”

injector.bindHTML(template, "jolt");

的元素注意：绑定函数可用于模板列表或具有相同的目标列表length 作为模板列表。

Examples

Nesting

const inner = 
new Tag("div", [
    new Tag("h2", "Nesting", [new Attribute("id", "test")]),
    new Tag("h3", "example"),
    new Tag("h4", "works!!!")
]

const outer = 
new Tag("div" , [
    new Tag("h1", "Poop"),
    inner
]);

Incremented indexing

let counter = 0;
test_template = 
new Tag("div", [
    new Tag("button", "Option 1", [new Attribute("onclick", `select(${counter++})`)]),
    new Tag("button", "Option 2", [new Attribute("onclick" , `select(${counter++})`)])
]);

Alternate version

允许甚至通过引用将函数绑定到 onclick。 在使用 js 模块时很有用。

function select()
{
  console.log(this.value);
}

let counter = 0;
test_template = 
new Tag("div", [
    new Tag("button", "Option 1", [
        new Attribute("onclick", select),
        new Attribute("value", counter++)
    ]),
    new Tag("button", "Option 2", [
        new Attribute("onclick", select),
        new Attribute("value", counter++)
    ])
])