# string6

**Repository Path**: zhang_xiangm/string6

## Basic Information

- **Project Name**: string6
- **Description**: string6本质上是一个字符串的拼接工具，6在汉语中是一个很优美的数字，因此作者将其命名为string6。
string6是一个低代码神器，可用来生成各类语言的脚本，也可用于nodejs服务端html渲染引擎（类似于jsp）。
string6提供text_hook和exp_hook两类可扩展的钩子，用于解决特别复杂的问题。
- **Primary Language**: JavaScript
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-03-15
- **Last Updated**: 2023-03-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# string6

### 简介
- string6本质上是一个字符串的拼接工具，6在汉语中是一个很优美的数字，因此作者将其命名为string6。
- string6是一个低代码神器，可用来生成各类语言的脚本，也可用于nodejs服务端html渲染引擎（类似于jsp）。
- string6是纯粹的javascript代码，不需要格外的翻译器和编辑器支持。
- string6足够轻，即使在非编译模式下，核心代码也不到100行。
- string6提供text_hook和exp_hook两类可扩展的钩子，用于解决特别复杂的问题。
- 在使用string6之前，您应该先将es6模板字符串和箭头函数的各种简写形式练习得如火纯青。

### 术语
- 标签函数：改变es6模板字符串默认行为的函数。
- 文本片段：模板字符串中${}之外的内容。
- 表达式片段：模板字符串中用${}扩起来的内容。
- 低阶脚本：要生成的目标脚本，如xml、html、json、sql、javascript、java等。
- 高阶脚本：生成低阶脚本的脚本。
- 插槽函数：在表达式片段中注入的一个带echo参数的箭头函数，插槽函数没有返回值。
- 回写标签：插槽函数的echo参数，该参数是一个标签函数，用于在插槽位置回写低阶脚本。
- hook：用于捕获特殊性质的文本片段或表达式片段，若捕获成功，则用该hook指定的executer函数来翻译文本片段或表达式片段。
- 创建hook：是指创建一个hook逻辑供string6模板使用。
- 使用hook：指编写string6模板时使用创建好的hook逻辑。
  
### 代码规范
1. 回写标签理论上可以是符合js变量规则的任意组合，但最好使用统一的命名echo。
2. 当低阶脚本为类c语言时，高阶脚本应尽一切可能减少大括号和分号。
3. 在高阶脚本中，尽可能的用map来替代for。
4. 插槽函数本质上还是一个函数，因此将其定义在模板之外是可行的，但这样做打乱了模板的阅读顺序，一般不建议这么做，除非他足够复杂。
5. string6的插槽回写逻辑是为了解决复杂低阶脚本问题，如果你的低阶脚本足够简单，你应该充分利用原生的js高阶函数(map、forEach等)直接解决问题。

### hook规范
1. hook分为text_hook和exp_hook，text_hook用来翻译特殊的文本片段，exp_hook用来翻译特殊的表达式片段。
2. 每个hook都是一个json对象，每个hook包含pattern字段和executer字段。
3. pattern字段是一个用来捕获片段的函数，签名如下：(exp:*):bool；若捕获成功，则执行executer函数，并阻断之后的hooks；若捕获失败，则继续捕获之后的hooks。
4. executer字段是片段的翻译函数，签名如下：(exp:*):string;若pattern函数捕获成功，则executer函数会执行，返回值为翻译好的低阶脚本。
5. 编写hook的初衷是为了解决string6模板中大括号和`号泛滥的问题，当低阶脚本为类c语言时，这个问题尤为突出。
6. hook是一种超酷的极限文化，提倡用各种稀奇古怪的想法来使你的模板变得炫酷。
7. 创建hook时，你应该将“设计模式”、“可读性”等扔进垃圾桶，用最纯粹的代码将性能提升到极致，一切都是为了使用hook时的可读写。
8. 匿名函数(包括箭头函数和普通匿名函数)是string6的头等公民，你的hook就不要打匿名函数的主意了。如果你实在有这个打算，那就先把匿名函数包在数组里再去hook吧:)

### 示例
```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>string6测试</title>
  <script src="./string6.js"></script>
</head>
<body >
  <div id="htmlContent" ></div>
  <textarea id="scriptContent"></textarea>
  <script type="text/javascript">
    function string6Text(){

      //准备一份数据，整个模板都是用这份数据来驱动的
      let data = [
        {
          id: 1,
          name: "张向明",
          sex: 1
        },
        {
          id: 2,
          name: "蒋海艳",
          sex: 0
        }
      ];

      //起笔一个string6模板，后面一大段都是这个模板的内容
      let html = string6` 
    <style>
      html,body{
        width: 100%;
        height: 100%;
        margin: 0px;
        padding:0px;
      }
      body{
        display:flex;
        align-items: stretch;
      }
      #htmlContent{
        width: 50%;
      }
      #scriptContent{
        width: 50%;
        background-color:#000;
        color:#fff;
      }
    </style>  

    <!-- 中规中矩 -->
    <ul>
    ${
      (echo) => {
        for (let item of data) {
          echo`
      <li id="${item.id}">${item.name}</li>`
        }
      }
    }
    </ul>

    <!-- 
      如果你不喜欢箭头函数和echo,
      可以用匿名的非箭头函数,函数中的this也是一个回写标签,和echo是同样的作用。
    -->
    <ul>
    ${
      function() {
        for (let item of data) {
          this`
      <li id="${item.id}">${item.name}</li>`
        }
      }
    }
    </ul>

    <!-- 
      高阶脚本中尽量减少大括号,下面的例子中for代码块只有一个语句,因此可以省略大括号。
      这在普通js代码中不是很好的风格,但在string6中大力提倡。
    -->
    <ul>
    ${
      echo => {
      for (let item of data)
        echo`
      <li id="${item.id}">${item.name}</li>`
      }
    }
    </ul>

    <!-- 高阶脚本中尽量用无污染的map来替代循环 -->
    <ul>
    ${
      echo => 
        data.map(item =>echo`
      <li id="${item.id}">${item.name}</li>`)
    }
    </ul>

    <!-- 
      箭头函数是用来解决较复杂问题的,
      如果问题比较简单则直接用字符串,注意下面这个例子的join函数是神来之笔。
    -->
    <ul>
    ${
      data.map(item =>`
      <li id="${item.id}">${item.name}</li>`).join("")
    }
    </ul>

    <!--
      echo本质上是一个函数,某些场景中用括号来调用更简单粗暴
    -->
    <ul>
      ${
        echo=>{
          for(let item of data){
            echo(`
      <li>${item.name}</li>`);
          }
        }
      }
    </ul>

    <!-- 以下演示的是if-hook -->
    <ul>
    ${
    echo =>
      data.map(item =>
        echo`
      <li id="${item.id}">
        ${[/if-hook/, item.sex, { 0: "女", 1: "男" }]}
      </li>
      `)
    }
    </ul>

    <!-- 以下演示brackets-hook -->
    <pre>
      let json = [
      ${
        (echo)=>{
          for(let i=0;i<data.length;i++){
            let item = data[i]
            echo`
        <brackets-hook>
          id:${item.id},
          name:"${item.name}",
          sex:${item.sex}
        </brackets-hook>`
            if(i<data.length-1) echo`,`
          }
        }
      }
      ];
    </pre>

    <!-- 生成sql的示例 -->
    <pre>
      ${
        echo=>{
          for(let item of data)
            echo
            `
      INSERT INTO users (id,name,sex) VALUES (${item.id},'${item.name}',${item.sex});`
        }
      }
    </pre>
      `;
      return html;
    }
    let html = string6Text();
    console.log(html);
    document.querySelector("#htmlContent").innerHTML=html;
    document.querySelector("#scriptContent").innerHTML=html;
  </script>
</body>
</html>
```