@cpfe/js2html
v1.0.1
Published
通过js配置来生成Document字符串
Downloads
5
Readme
使用
const {
createElement,
generateDocument,
generateElement,
generateAttrsText,
convertCssom,
getCssText,
voidHtmlTags
} = require('@cpfe/js2html');createElement
const { createElement } = require('@cpfe/js2html');
createElement({ tagName: 'div' }); // <div></div>
createElement({ tagName: 'div', text: 'text' }); // <div>text</div>
createElement({ tagName: 'div', attrs: { id: 1, name: 2 } }); // <div id="1" name="2"></div>
createElement({ tagName: 'div', text: 'text', attrs: { id: 1, name: 2 } }); // <div id="1" name="2">text</div>
createElement({ tagName: 'div', attrs: { id: 1, name: 2 }, children: [{ tagName: 'h1' }] }); // <div id="1" name="2"><h1></h1></div>
createElement({ tagName: 'div', attrs: { id: 1, name: 2 }, children: [{ tagName: 'h1', text: 'text' }] }); // <div id="1" name="2"><h1>text</h1></div>
createElement({
tagName: 'div',
attrs: { id: 1, name: 2 },
children: [
{ tagName: 'h1', text: 'text' },
{
tagName: 'img',
attrs: {
src: '1.png',
alt: '图片'
}
}
]
}); // <div id="1" name="2"><h1>text</h1><img src="1.png" alt="图片"></div>generateDocument
const { generateDocument } = require('@cpfe/js2html');
const docText = generateDocument({
title: 'bala',
meta: [
{
charset: 'utf-8'
},
{
name: 'viewport',
content: 'width=device-width, initial-scale=1'
}
],
link: {
'shortcut icon': '/static/favicon.ico',
'dns-prefetch': 'bala'
},
headScript: [
{
src: 'bala.js',
crossorigin: 'anonymous'
}
],
style: [
'static/a.css',
{
text: 'body {margin: 0;}'
}
],
bodyAttrs: {
class: 'body-development'
},
bodyHtml: ['<div id="app"></div>'],
script: [
{
src: 'https://code.jquery.com/jquery-3.3.1.min.js'
},
{
src: 'bala.js',
crossorigin: 'anonymous'
},
{
text: 'console.log("123")'
}
]
});
console.log(docText);输出
<!DOCTYPE html>
<html>
<head>
<title>bala</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="static/a.css" />
<style>
body {
margin: 0;
}
</style>
<script src="bala.js" crossorigin="anonymous"></script>
</head>
<body class="body-development">
<div id="app"></div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="bala.js" crossorigin="anonymous"></script>
<script>
console.log('123');
</script>
</body>
</html>documentConfig
// documentConfig
{
title: 'bala',
meta: [
{
charset: 'utf-8'
},
{
name: 'viewport',
content: 'width=device-width, initial-scale=1'
}
],
link: {
'shortcut icon': '/static/favicon.ico',
'dns-prefetch': 'bala'
},
headScript: [
{
src: 'bala.js',
crossorigin: 'anonymous'
}
],
style: [
'static/a.css',
{
text: 'body {margin: 0;}'
}
],
bodyAttrs: {
class: 'body-development'
},
bodyHtml: [
'<div id="app"></div>'
],
script: [
'https://code.jquery.com/jquery-3.3.1.min.js',
{
src: 'bala.js',
crossorigin: 'anonymous'
},
{
text: 'console.log("123")'
}
]
}generateTable
const { generateTable } = require('@cpfe/js2html');
generateTable((columns = []), (data = []));