# wrapper.js

**Repository Path**: zhang_xiangm/wrapper.js

## Basic Information

- **Project Name**: wrapper.js
- **Description**: 超级简单的html模板引擎，完全符合html规范，没有对原生html和javascript做任何破坏和改造。在具备强大功能的同时，还html一个干干净净的面貌。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-25
- **Last Updated**: 2024-01-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# wrapper.js

#### 介绍
wrapper是一个超级简单的html模板引擎，完全符合html规范，没有对原生html和javascript做任何破坏和改造。在具备强大功能的同时，还html一个干干净净的面貌。

#### 注释风格

```
<table id="table1">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <!--# for(let item of this){ #-->
        <tr>
            <td>${item.id}</td>
            <td>${item.name}</td>
            <td>${item.sex===0?"女":"男"}</td>
        </tr>
        <!--#}#-->
    </tbody>
</table>
<script>
    let model = [
        {id:1,name:"张向明",sex:1},
        {id:2,name:"蒋海艳",sex:0}
    ];
    document.querySelector("#table1")._wrap(model,true);
</script>
```


#### 属性风格
```
<table id="table2">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <tr wrapper="for(let item of this){render();}">
            <td>${item.id}</td>
            <td>${item.name}</td>
            <td>${item.sex===0?"女":"男"}</td>
        </tr>
    </tbody>
</table>
<script>
    let model = [
        {id:1,name:"张向明",sex:1},
        {id:2,name:"蒋海艳",sex:0}
    ];
    document.querySelector("#table2")._wrap(model,true);
</script>
```
#### 混合风格
```
<table id="table3">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <!--#for(let item of this){#-->
        <tr>
            <td>${item.id}</td>
            <td>${item.name}</td>
            <td wrapper="if(item.sex===0){render();}">女</td>
            <td wrapper="else{render();}">男</td>
        </tr>
        <!--#}#-->
    </tbody>
</table>
<script>
    let model = [
        {id:1,name:"张向明",sex:1},
        {id:2,name:"蒋海艳",sex:0}
    ];
    document.querySelector("#table3")._wrap(model,true);
</script>
```
#### 注意事项

1.  注释代码片段：用html注释中间加一对##号括起来的代码称为注释代码片段，如：`<!--# your javascript code#-->`
2.  属性代码片段：每一个html标签的wrapper属性中的代码称为属性代码片段，如`<lable wrapper="for(let item of this){render()}"></label>`
3.  表达式：用${}括起来的代码称为表达式，其完全遵守es6的模板字符串语法
4.  注释代码片段、属性代码片段、表达式中的this指向_wrap方法的第一个参数model
5.  属性代码片段中的render()是一个假方法，实际作用是一个占位符，表示将在此处渲染其所在的标签

#### 语法糖
1. 推荐的风格是注释风格，这种风格逻辑最为严谨，最符合html标准。
2. 以下是使用语法糖，从简到繁的预编译过程，请仔细体会。

```
<div wapper="for(let item of this)">${item.name}</div>
```
```
<div wapper="for(let item of this){}">${item.name}</div>
```
```
<div wapper="for(let item of this){render();}">${item.name}</div>
```
```
<!--#for(let item of this){#-->
    <div>${item.name}</div>
<!--#}#-->
```