juicer模板引擎学习

最新推荐文章于 2024-11-05 21:22:15 发布

原创最新推荐文章于 2024-11-05 21:22:15 发布 · 951 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#juicer

HTML 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了juicer模板引擎的使用，包括变量插入、过滤器、条件判断、循环、注释和子模板嵌套等核心功能。通过示例展示了如何在实际开发中应用这些特性，帮助读者更好地理解和掌握juicer。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

juicer

github地址:https://github.com/PaulGuo/Juicer
引入juicer

1.变量${变量名}
这些变量名在后面都需要通过juicer(模板字符串,data)中的data对象进行传值,juicer会将模板和数据进行构建,返回已经完成的HTML字符串,然后通过DOM操作的innerHTML将字符串放入

2.过滤器
在前端接受数据的时候,我们经常会拿到一些无意义但方便存储的字符串,需要将这些无意义的字符串转换为用户可以看明白的字符串,这时候过滤器(管道)就很方便了.juicer的过滤器与vue的用法相同,变量 | 方法名 , 参数2,参数3…
举个栗子
page.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/juicer/0.6.15/juicer-min.js"></script>
</head>
<body>
    <div id="pageA"></div>
    <script>
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange=function(res){
            if(xhr.readyState==4&&xhr.status==200){
                let tpl = res.target.response;
                juicer.register('genderToString',value=>{
                    if(value){
                        switch(value){
                            case 0 : return '女';break;
                            case 1 : return '男';break;
                            case 2 : return '保密';break;
                        }
                    }
                })
                console.log(juicer(tpl,{title:'一个假组件'}));
                document.getElementById('pageA').innerHTML=juicer(tpl,{title:'一个假组件',gender:2});
            }
        }
        xhr.open('get','../html1/tpl.html');
        xhr.send();
    </script>
</body>
</html>

tpl.html

<div>${title}</div>
<div>性别:${gender | genderToString}</div>

在使用过滤器的时候,要注意过滤器的方法都需要注册,即使用juicer.register(‘方法名’,函数),这样juicer才可以在渲染的时候调用这个方法.

3.if-else if-else
条件判断是开发中必不可少的一部分,
语法:

{@if 条件}
	html
{@else if 条件}
	html
{@else}
	html
{@/if}

4.循环,juicer的循环和平常的for和while循环不同,他的管检测是each

{@each 数组 as 元素,下标(下标可以省略)}
{@/each}

5.为循环增加的语法糖

{@each i in range(5,10)}
	${i}
{@/each}
{# 5,6,7,8,9}

6.注释
注释是开发必不可少的内容,方便自己下一次接上思路,也方便以后对代码的维护
{# 注释} 像是包了大括号的mysql注释
7.子模板嵌套
这个是作为菜鸡的我最不能理解的地方,在一个带id的script修改type属性为text/template,然后再通过{@include “#id名” ,data对象的变量名}获得script中写的内容,然后通过juicer(刚刚获取的内容,data对象)进行渲染…总的来讲,我是觉得的很鸡肋,script里面也不能帮我填充tagName啊,这样还不如模板字符串呢,然后最难受的是官方完整栗子里面,做好了所有的子模板嵌套的前置工作,用了个getElementById(‘id名’).innerHTML就拿到东西了,贼难受