示例说明

特殊标签用法

1. <js> 标签

   • 在 HTML 中插入并执行 JavaScript 代码，并将结果插入到 HTML 中。
   • 示例:

     <js>
     console.log('Hello World!');
     </js>

2. <dom> 标签

   • 在 JavaScript 中插入 DOM 节点，并返回该节点。
   • 类似于 JSX 的语法。
   • 示例:

     <js>
     const element = <dom>
     <div>Hello World!</div>
     </dom>;
     document.body.appendChild(element);
     </js>

3. $$(filePath, params) 函数

   • 导入任意文件或模板。
   • filePath 支持相对路径。
   • 示例:

     <js>
     const component = $$( "./component.html", { data: 'example' });
     document.body.appendChild(component);
     </js>

示例文件 abc.html

<div className="nav-links">
    <js> $$(\"../../component/DocsListNavLink.html\", {})</js>
    <js> $$( \"../../component/Page.html\", {pageIndex, pageSize, totalSize, pageUrlCb})</js>
</div>
<div>
    <js>
        list.map((x,index)=>{
            return <dom>
                <p>
                    <span style="color: #ccc">
                        <js> x.id</js> 、
                    </span>
                    <js> x.title</js>
                    <span style="color: #ccc">（<js> x.name</js> - <js> index </js> ）</span>
                </p>
            </dom>
        })
    </js>
</div>

渲染脚本

const {render} = require("afu-dom-render");
render("abc.html",{ list:[ {id:10, title:'你好',groupId: 10 } ] });