原生js封装模板引擎template和测试

最新推荐文章于 2024-09-01 07:02:23 发布

技术成长ing

最新推荐文章于 2024-09-01 07:02:23 发布

阅读量1.2k

点赞数

分类专栏： html+css+js 文章标签：原生js封装模板引擎模板引擎模板引擎template 原生js封装template

本文链接：https://blog.csdn.net/jackson23333/article/details/81875317

版权

html+css+js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

/*
   模板引擎封装template
         实现原理:
               通过id获取模板中的内容(注:内容为字符串)
               调用方式:
                     找到字符串中特殊的符号.如:标签里的{{name}}用正则表达式替换
                     使用对象对应的属性进行替换
               返回字符串
   @param id:传入的模板id.如<script id="template"></script>传入template
   @param:obj:传入的对象数据.如:data={name:'哈哈',age:34}
*/

代码如下：

使用模板引擎:

<!DOCTYPE html>
<html>
        <head>
                 <title>jquery-ajax</title>
                 <meta charset="UTF-8" />
                 <style></style>
        </head>
        <body>
                  <h1>模板引擎</h2>
                  <div></div>
                  
                  <script id="template" type="text/html">
                        <ul>
                             <li>{{name}}</li>
                             <li>{{age}}</li>
                        </ul>
                  </script>


                  <script src="./template.js"></script>
                  <script>
                       var data={
                             name:'哈哈',
                             age:34
                       }
                       var str = document.querySelector('#template').innerHTML;
                       console.log('数据替换前');
                       console.log(str);
                       var result = myTemplate('template',data);
                       console.log('数据替换后');
                       document.querySelector('div').innerHTML = result;
                  </script>
        </body>
</html>