Welcome to

Mr.Xiong

Home / JS / Script标签中type为【text/x-template】是个啥?

Script标签中type为【text/x-template】是个啥?

  • 作者:
  • 日期:
  • 分类: JS
  • Tags:
  • 阅读量: 2,032

写过些前端代码的都会碰到【需要使用 Js 字符串拼接 Html 元素然后 Append 到页面 DOM 树上】的情况,一般的写法都是使用 + 号以字符串的形式拼接,如果是短点的还好,如果很长很长的话就会拼接到令人崩溃啦。

比如:需要使用弹出框的时候手动使用字符串拼接起来各种数据,再渲染出来(这种写法太恶心了,简直没有职业道德…)。

因为上面的这种写法太恶心人了,但是在前端渲染数据又是一个刚需,咋整呢?想一个办法,将 Js 和 Html 分离开来。

<script type=”text/x-template”> 就是在一定程度上解决这种问题的,放在 type=”text/x-template” 中的内容将不会被浏览器解析,不被执行,不被显示,它只是默默地举根隐身草站在那里。

它默默在那里有什么用呢?从逻辑上而言,放到 text/x-template 中的内容不是给浏览器解析的,是用来在页面加载完成后再获取到它,对其进行渲染。这个渲染的过程通常是使用各种模板引擎来完成的。

script 标签如果不写 type 属性,浏览器会默认为 text/javascript。如果写了不同的类型,浏览器就不会再按照解析 Js 的规则去解析了,发现是不识别的类型可能就会忽略它。

比如说有一个叫做 foo-template-engineer 的模板引擎,它约定了凡是 type 为 text/foo-template 的script标签中存放的都是模板文件,浏览器在加载网页的时候检查到了 <script type=”text/foo-template”> 发现自己不能识别,于是就忽略掉它和其中的内容,等到浏览器渲染到模板引擎的 Js 代码的时候,Js 模板引擎获取到这个标签中的内容,然后使用数据对其进行渲染输出到页面上。

总结

1. script 不写 type 默认是 text/javascript ,如果写了不被识别的 type 将被浏览器忽略。

2. script 的 type 为各种 template 的时候,可能就是使用了模板引擎。

Vue.Js案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>helloVue</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="box">
    <xwy-news></xwy-news>
</div>
<script type="text/x-template" id="ha">
    <!--注意:标签中必须得有个父级-->
    <div>
        <h1>Hi~ Mr.Xiong</h1>
    </div>
</script>
<script>
    //子组件
    var xwyNews = {
        //定义模板
        template: '#ha',
    };

    //根组件
    var app = new Vue({
        el: '#box',
        //定义局部组件
        components: {
            xwyNews,
        }
    })
</script>
</body>
</html>

以上代码浏览器显示如下:

此案例很好的印证了一句话【 text/x-template 中的内容不是给浏览器解析的,而是用来在页面加载完成后再获取到它对其进行渲染,这个渲染的过程通常是使用各种模板引擎来完成的。】~

Finally,谢谢大家的阅读!祝每天开心~
本站部分文章素材来源于网络,如有侵权请联系立刻删除。
版权声明:本文为博主半原创文章,未经博主允许不得转载。

赞赏

微信赞赏支付宝赞赏

发表评论

邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

雄心勃勃但谦卑温逊!

>> <<