【OpenHarmony】鸿蒙开发之Jmustache

简介

jmustache 是mustache模板系统的零依赖实现，通过使用散列或对象中提供的值来扩展模板中的标签。

效果展示

下载安装

bash 复制代码

ohpm install mustache 
ohpm install @types/mustache --save-dev //import mustache 的时候语法报错.其原因是mustache包内不含类型声明,需要 @types/mustache 下载这个包的声明文件,从而解决语法的报错.

使用说明

解析方式主要使用Mustache.render方法

data：以下大部分示例使用下方代码块数据，如有额外数据会单独列出

css 复制代码

    name: "cai",
    msg: {
      sex: "male",
      age: "66",
      hobby: "reading"
    },
    focus: "<span>sleep<span>",
    subject: [" Ch ", " En ", " Math ", " physics "],
    moreInfo: []

变量

基本的标签类型是一个简单的变量。{{name}}标签呈现name当前上下文中键的值。如果没有这样的键，则不会渲染任何内容。

默认情况下，所有变量都是 HTML 转义的。如果要呈现未转义的 HTML，请使用三重胡须：{{{name}}}。您还可以使用&取消转义变量。

如果您想全局更改 HTML 转义行为（例如，更改为模板非 HTML 格式），您可以覆盖 Mustache 的转义函数。例如，要禁用所有转义：Mustache.escape = function(text) {return text;};.

如果您{{name}} 不希望被解释为 mustache 标记，而是希望{{name}}在输出中完全显示，则必须更改然后恢复默认分隔符。有关详细信息，请参阅自定义分隔符部分。

输入：

vbnet 复制代码

NAME:{{name}}
EMPTY:{{nothing}}
{{focus}}
{{{focus}}}
{{&focus}}

输出：

xml 复制代码

NAME:cai
EMPTY:
&lt;span&gt;sleep&lt;span&gt;
<span>sleep<span>
<span>sleep<span>

对象属性

.可以用于访问对象属性

输入：

css 复制代码

SEX:{{msg.sex}};AGE:{{msg.age}}

输出：

css 复制代码

SEX:male;AGE:66

块

块根据当前上下文中键的值呈现文本块零次或多次。

一个块以#开头，以\结尾。也就是说，{{#subject}}开始一个subject部分，同时{{/subject}}结束它。两个标签之间的文本称为该部分的"块"。

该部分的行为由键的值决定。

如果subject键不存在，或存在且值为null, undefined, false, 0, 或NaN, 或为空字符串或空列表，则不会渲染块。

输入：

css 复制代码

{{#msg}}SEX:{{sex}};AGE:{{age}};HOBBY:{{hobby}}{{/msg}}
MOREINFO:{{#moreInfo}}cannot display{{/moreInfo}}

输出：

css 复制代码

SEX:male;AGE:66;HOBBY:reading
MOREINFO:

非空列表

如果persons键存在且不是null, undefined, 或false, 并且不是空列表，则该块将被渲染一次或多次。

当值是一个列表时，该块为列表中的每个项目呈现一次。每次迭代时，块的上下文都设置为列表中的当前项。通过这种方式，可以遍历集合。

data:

json 复制代码

"persons": [
    { "name": "CAI" },
    { "name": "LIU" },
    { "name": "ZHOU" }
  ]

输入：

bash 复制代码

{{#persons}}
{{name}}
{{/persons}}

输出：

objectivec 复制代码

CAI
LIU
ZHOU

枚举

.可以遍历字符串数组

输入

arduino 复制代码

{{#subject}}{{.}}{{/subject}}

输出

javascript 复制代码

 Ch  En  Math  physics

DD一下： `欢迎大家关注工粽号<程序猿百晓生>，可以了解到以下知识点。`

erlang 复制代码

`欢迎大家关注工粽号<程序猿百晓生>，可以了解到以下知识点学习。`
1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题（含参考答案） 
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......

函数

解析的数据不仅可以为值，也可以是一个函数

data:

kotlin 复制代码

fun: function () {
    return 2 + 4;
 }

输入：

kotlin 复制代码

FUN:{{fun}}

输出

makefile 复制代码

FUN:6

if else

{{^section}}与{{#section}}相反。仅当该部分的标记的值为null, undefined, false, falsy或空列表时，才会呈现倒置部分的块。

输入：

css 复制代码

EMPTY-ARR:{{#moreInfo}}empty-arr{{/moreInfo}}\nARRAY: {{#subject}}arr {{/subject}}\n

输出：

makefile 复制代码

EMPTY-ARR:
ARRAY:arr arr arr arr

else

输入：

bash 复制代码

EMPTY-ARR:{{^moreInfo}}empty-arr{{/moreInfo}}\nARRAY: {{^subject}}arr {{/subject}}\n

输出：

ruby 复制代码

EMPTY-ARR:empty-arr
ARRAY:

注释

以 ! 开头会被忽略

输入：

yaml 复制代码

{{!name}}.

输出：

erlang 复制代码

模块

>可以表示一个模块，把复杂的模板可以拆出多个简单的模块来便于使用

额外data:

yaml 复制代码

template: "{{#msg}}SEX:{{sex}};AGE:{{age}};HOBBY:{{hobby}}{{/msg}}"

输入：

css 复制代码

NAME:{{name}}\nINFO:\n{{>template}}

输出：

makefile 复制代码

NAME:cai
INFO:
SEX:male;AGE:66;HOBBY:reading

自定义分隔符

可以通过修改Mustache的tags来自定义分隔符，也可以在解析时直接使用

输入

css 复制代码

Mustache.render(NAME:{{name}}\nNAME:<%name%>\n, this.data, {}, ['<%', '%>'])

输出：

makefile 复制代码

NAME:{{name}}
NAME:cai

预解析和缓存模板

默认情况下，当 mustache 解析模板时，它会将解析保存在缓存中。下次它看到相同的模板时，它会跳过解析步骤并更快地呈现模板。如果您愿意，可以使用Mustache.parse.

接口说明

解析模板Mustache.render()
预解析:Mustache.parse
清除默认编写器中的所有缓存模板：mustache.clearCache()

目录结构

lua 复制代码

|---- Jmustache  
|     |---- entry  # 示例代码文件夹
|     |---- Jmustache  # Jmustache库文件夹
|           |---- index.ets  # 对外接口
|           |---- src
|                 |---- ets
|                       │---- components
|                             |---- mustache.ets # 用于解析模板
|     |---- README.md  # 安装使用方法                    
|     |---- README_zh.md  # 安装使用方法

【OpenHarmony】鸿蒙开发之Jmustache

简介

效果展示

下载安装

使用说明

变量

对象属性

块

非空列表

枚举

DD一下： 欢迎大家关注工粽号<程序猿百晓生>，可以了解到以下知识点。

函数

if else

注释

模块

自定义分隔符

预解析和缓存模板

接口说明

目录结构

DD一下： `欢迎大家关注工粽号<程序猿百晓生>，可以了解到以下知识点。`