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

作者: Mr.Xiong
日期: 2018年1月29日
分类: JS
Tags: Vue.js
阅读量: 3,064

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

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

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

它默默在那里有什么用呢？从逻辑上而言，放到 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，谢谢大家的阅读！祝每天开心~
本站部分文章素材来源于网络，如有侵权请联系立刻删除。
版权声明：本文为博主半原创文章，未经博主允许不得转载。

赞赏

微信赞赏支付宝赞赏

Welcome to

Mr.Xiong

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