Skip to content

Latest commit

 

History

History
129 lines (79 loc) · 2.41 KB

README.md

File metadata and controls

129 lines (79 loc) · 2.41 KB

tplser

npm version

# Install 
$ npm i --save tplser 

Dev / Build

怎样本地开发以及打包,欢迎 issues 、PR。

# 本地开发
$ npm run dev 
# 打包为 CommonJS 和 UMD 到 dist/ 下
$ npm run dist 

使用方法

工作流程

  1. 利用 tplser.compile 将模版编译为渲染函数
  2. 调用渲染函数,传入渲染参数进行渲染

简单的来说,类似这样:

const render = tplser.compile(
    `why i write tplser ? {{ reason }}`
); 

const result = render({
    reason: 'just for fun'
}); 

console.log(result); 
// => why i write tplser ? just for fun

而将模版变为渲染函数,在 tplser 内部是将 模版 转化成一种 AST,再利用 tplser 内部实现的简单虚拟机去执行这个 AST 求出值(也就是上面的 result)这部分详情可以看我的代码实现 ^_^ 欢迎交流和 pr

表达式渲染

在 tplser 里表达式的使用很常见,比如上面的例子里,{{ reason }} 就是个最基本的表达式了。

{{ reason }}

注意,tplser 表达式不等价于 js 表达式。

表达式函数应用

目前,可以在表达式里调用函数,不过,只支持前缀调用,如:

tplser.compile(`{{ add you me }}`)({
    add(left: number | string, right: number | string) {
        return left + right; 
    }, 
    you: 'john', 
    me: 'eczn'
}); 
// => 'johneczn' 

表达式常量

表达式里可以使用字符串字面量,用 ' 开头来说明即可(不需要闭合,tplser 用空格来隔开各个单词)

{{ add 'john 'eczn }}

条件渲染 if

简单:

{{ if ok }}
    yes, it is
{{ else }}
    no, it isn't
{{ fi }}

循环渲染 get

循环渲染用来遍历数组里的元素。

{{ get (item, idx) >>>> list }}
    序号: {{ idx }}, 内容: {{ item }}
{{ teg }}

tplser 里的作用域

tplser 里,get 和 if 会创建新的作用域,变量查找从内层开始查找,逐层到外,直到全局作用域,如果还是找不到,返回 null。

tplser 的作用域机制类似 js 的词法作用域。

全局作用域(基作用域)

tplser 注入了一些全局方法(如 add)到 tplser 的基作用域里。

详见 Scope/scope-define.ts

License

MIT