Home > Web Front-end > JS Tutorial > body text

How to create templates using js

一个新手
Release: 2017-10-01 07:43:37
Original
1451 people have browsed it


js template brief description

Basic description

在开发中如果某块数据需要在多个地方使用(比如一个很长的段落或者是有格式的字符串)那么可以考虑使用简单模板。
因为某块数据在多个地方都要用到,势必需要把这份数据拷贝多次,而这样会造成冗余度过高的问题,且不方便维护。
假如后期需要对这块数据进行修改,那么所有用到的地方都要进行修改比较麻烦,因此建议使用模板来处理。
Copy after login

Related code examples:

    <script type="text/template" class="test">

        听说白雪公主在逃跑 小红帽在担心大灰狼
        听说疯帽喜欢爱丽丝 丑小鸭会变成白天鹅
        听说彼得潘总长不大 杰克他有竖琴和魔法
        听说森林里有糖果屋 灰姑娘丢了心爱的玻璃鞋
        只有睿智的河水知道 白雪是因为贪玩跑出了城堡    
    </script>
    <script>
        //01 获取模板中的内容
        var oScript = document.getElementsByClassName("test")[0];        
        var oString = oScript.innerText;    
    </script>
Copy after login

Use of template framework

1)有的时候模板中的内容结构是相同的,但是具体的细节可能并不一样,这时候需要对模板进行传参处理。
2)使用示例:
001 下载模板框架(github上面搜索模板引擎)
002 在页面中包含必要的js文件:<script src="dist/template-native.js"></script>
003 提供并设置模板:
Copy after login
<script id="demo" type="text/html">
        <h1><%=title%></h1>
        <ul>
            <% for(var i = 0, len = list.length; i < len; i++){ %>
                <li><%=list[i]%></li>
            <% } %>
        </ul>
        </script>
Copy after login
004 调用template方法传递参数并获取模板的内容
Copy after login
    <script>
        var data = {
            title: &#39;基本例子&#39;,
            list: [&#39;文艺1&#39;, &#39;博客2&#39;, &#39;摄影3&#39;, &#39;电影4&#39;, &#39;民谣5&#39;, &#39;旅行6&#39;, &#39;吉他7&#39;]
        };        var html = template(&#39;demo&#39;, data);
        document.body.innerHTML = html;       
    </script>
Copy after login

Use of template framework in Weibo project

 // 001 包含模板引擎文件
        <script src="dist/template-native.js"></script>   // 002 提供并设置模板的内容(注意需要设置id标识)
        <script id="demo" type="text/html">
            <p class="replyContent"><%=content%></p>
            <p class="operation">
                <span class="replyTime"><%=time%></span>
                <span class="handle">
                    <a href="javascript:;" class="top"><%=acc%></a>
                    <a href="javascript:;" class="down_icon"><%=ref%></a>
                    <a href="javascript:;" class="cut">删除</a>
                </span>
            </p>
        </script>  //  003 调用方法并传递参数,获取模板的内容
        var p = $("<p></p>");
        p.addClass("reply");     // 设置每条微博样式
        var temp = template("deno", obj);
        p.html(temp);// 给微博写入内容
Copy after login

The above is the detailed content of How to create templates using js. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template