本文作者:DurkBlue

关于 js渲染模板的简单调用推荐

DurkBlue 2023-06-10 665 抢沙发
关于 js渲染模板的简单调用摘要: 一、简单示例<script type="text/html" id="javascript_template"&g...

一、简单示例


<script type="text/html" id="javascript_template">
  <div onclick="_dom()">
    <ul id="wrap">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
  </div>
</script>

1.在页面渲染的时候,浏览器不会读取script标签中的html代码,又不在页面上显示

2.外面不能获取到里面的div节点

       在使用时,要在script标签上加个ID可以供我们找到它,即然做模版用,且里面的html代码不会被渲染读取,则需在外面再新建一个div来当容器,装下这些html代码,

       即我们可以通过 
                             var _html=document.getElementById('javascript_template').innerHTML;

                             document.getElementsByTagName('div')[0].innerHTML=_html;

      然后我们模版里的htmll代码就可以运行在页面中了;

如果遇到html代码加入外部div后,获取不到节点的情况,可以在外部写个函数,然后在html内部用行内调用 onclick="_dom()"

function _dom() {  document.getElementById('wrap') ;}

二、json应用

模板代码



<script id="commentTemplate" type="text/html">
        <li>
            <div class="photo">
                图片<a href="#"> <img src="[UserImg]" /></a>
            </div>
            <p>
                姓名<a href="#">[UserName]:</a>时间<span class="time">[CreateDate]</span>
            </p>
            <div class="clear"></div>
        </li>
    </script>



脚本代码

<html>
<head>
<title>标题</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
    <div id="comment_ul_2"></div>
    <input type="button" id="addFun" value="click me" />
    <script id="commentTemplate" type="text/html">
        <li>
            <div class="photo">
                图片<a href="#"> <img src="[UserImg]" /></a>
            </div>
            <p>
                姓名<a href="#">[UserName]:</a>时间<span class="time">[CreateDate]</span>
            </p>
            <div class="clear"></div>
        </li>
    </script>
   
    <script type="text/javascript">
        var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');//i g m是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。
        $("#addFun").click(function() {
            var html = document.getElementById("commentTemplate").innerHTML;
            var source = html.replace(reg, function(node, key) {
                return {
                    'UserImg' : 'https://qqshop.aiwentec.com/attachment/images/1/2023/06/oDhD54sGZ4GLsU2PZfSlEFufrg24cT.jpg',
                    'UserName' : '张',
                    'CreateDate' : '2011-1-1'
                }[key];
            });
            $("#comment_ul_2").append(source);
        });
     
    </script>
</body>
</html>



当你单击按钮时,可以把commentTemplate的内容追到comment_ul_2里,

而其中有一个replace,在替换时可以接受一个json字符串,然后根据json的key来对比js模块里的key,进行赋值!


此篇文章由DurkBlue发布,转载一下需要注明来处
文章投稿或转载声明

来源:DurkBlue版权归原作者所有,转载请保留出处。本站文章发布于 2023-06-10
温馨提示:文章内容系作者个人观点,不代表DurkBlue博客对其观点赞同或支持。

赞(0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论取消回复

快捷回复:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog

评论列表 (暂无评论,665人围观)参与讨论

还没有评论,来说两句吧...