<script type="text/html"></script> js模版使用

简介: 一、简单示例 1 2 3 4 1.在页面渲染的时候,浏览器不会读取script标签中的html代码,又不在页面上显示 2.

一、简单示例

<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>

脚本代码

<div id="comment_ul_2">
    </div>
    <input type="button" id="addFun" value="click me" />
    <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': '1', 'UserName': 'zhang', 'CreateDate': '2011-1-1'}[key]; });
            $("#comment_ul_2").append(source);
        });

        var zzl = "name:[name]";
        zzl = zzl.replace(reg, function (node, key) { return { 'name': '占占'}[key]; });
        alert(zzl);

    </script>

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

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

 

来自:

http://www.cnblogs.com/MrZouJian/p/5614581.html

http://www.cnblogs.com/lori/archive/2012/08/31/2665802.html

相关文章
|
6月前
|
JavaScript IDE 前端开发
使用 Node.js 实现的模版代码生成器
使用 Node.js 实现的模版代码生成器
|
JavaScript 前端开发 开发者
Vue | Vue.js 基础 模版语法(一)
Vue | Vue.js 基础 模版语法(一)
|
JavaScript 算法 索引
Vue | Vue.js基础 模版语法(三)
Vue | Vue.js基础 模版语法(三)
|
JavaScript 前端开发 小程序
Vue | Vue.js 基础 模版语法(二)
Vue | Vue.js 基础 模版语法(二)
|
JavaScript 前端开发 程序员
|
移动开发 前端开发 JavaScript
【前端每日一问001】HTML中script标签应该写在哪个位置
【前端每日一问001】HTML中script标签应该写在哪个位置
522 0
|
JavaScript
JS文件通过Node运行和HTML文件的script标签运行不一致的原因
JS文件通过Node运行和HTML文件的script标签运行不一致的原因
183 0
JS文件通过Node运行和HTML文件的script标签运行不一致的原因
|
JavaScript 前端开发 Go