TypeScript代码

import template = require('art-template/lib/template-web');

interface TemplateBindConfig {
el: string
data: object
} interface TemplateList {
els: object
template: string
} class TmpBind { el: string template: any data: object renderFn: any // 构造函数
constructor(config:TemplateBindConfig) {
// 绑定的容器id
this.el = config.el; // 注入的数据
this.data = config.data; this.renderFn = null
var nodes=document.querySelector(config.el).children;
var i=nodes.length;
if(i>0){
while(i--){
if(nodes[i].tagName.toLowerCase()=="script" && nodes[i].getAttribute("type")=="text/html"){
// 模版id
this.template = nodes[i].innerHTML;
break;
}
}
} this.render()
} // 渲染模版
render(data?): void {
if (data) {
this.data = data;
}
// 解析模版
if(!this.renderFn){
this.renderFn= template.compile(this.template);
} const source = this.renderFn(this.data);
// 更新容器的值
document.querySelector(this.el).innerHTML = source; } setData(value: any): void {
this.data=value;
this.render();
} // 重新设置模板
setTemplate(value: any): void {
this.template = value;
this.renderFn= template.compile(value);
this.render();
} // 获取数据
getData(): object {
return this.data;
} }

编译后的JavaScript

    var TemplateList = /** @class */ (function () {
function TemplateList() {
}
return TemplateList;
}());
var TmpBind = /** @class */ (function () {
// 构造函数
function TmpBind(config) {
// 绑定的容器id
this.el = config.el;
// 注入的数据
this.data = config.data;
this.template = new Array();
var nodes = document.querySelector(config.el).children;
TmpBind.getTemplates(nodes, this);
this.render();
}
TmpBind.getTemplates = function (nodes, instance) {
var i = nodes.length;
if (i > 0) {
while (i--) {
if (nodes[i].tagName.toLowerCase() == "script" && nodes[i].getAttribute("type") == "text/html") {
// 模版id
var ts = new TemplateList();
ts.el = nodes[i];
ts.template = nodes[i].innerHTML;
ts.renderFn = template.compile(ts.template);
ts.source = ts.renderFn(instance.data);
ts.els = new Array();
instance.template.push(ts);
}
if (nodes[i].children && nodes[i].children.length > 0) {
TmpBind.getTemplates(nodes[i].children, instance);
}
}
}
};
// 渲染模版
TmpBind.prototype.render = function (data) {
this.reset();
if (data) {
this.data = data;
}
for (var i = 0; i < this.template.length; i++) {
var div1 = document.createElement("div");
this.template[i].source = this.template[i].renderFn(this.data);
div1.innerHTML = this.template[i].source;
this.template[i].els = new Array();
while (div1.childNodes.length > 0) {
this.template[i].els.push(div1.childNodes[0]);
this.template[i].el.parentNode.insertBefore(div1.childNodes[0], this.template[i].el);
}
}
document.querySelector(this.el).template = this.template;
};
// 重置
TmpBind.prototype.reset = function () {
var template = document.querySelector(this.el).template;
if (template) {
for (var i = 0; i < template.length; i++) {
if (template[i].els && template[i].els.length > 0) {
var j = template[i].els.length;
while (j--) {
template[i].els[j].parentNode.removeChild(template[i].els[j]);
}
}
}
}
};
// 设置数据
TmpBind.prototype.setData = function (value) {
this.data = value;
this.render();
};
// 获取数据
TmpBind.prototype.getData = function () {
return this.data;
};
return TmpBind;
}());

示例:

<div id="div2">
这是第一个模版......
<script type="text/html">
<p>{{msg}}</p>
<ul>
{{each list as item}}
<li>{{item}}</li>
{{/each}}
</ul>
</script>
二个模版
<script type="text/html"> <ul>
{{each list as item}}
<li>{{item}}</li>
{{/each}}
</ul>
</script>
N个模版
<script type="text/html"> <ul>
{{each list as item}}
<li>{{item}}</li>
{{/each}}
</ul>
</script>
</div>
<script>
var vm = new TmpBind({
el: "#div2",
data: {
msg: "欢迎来到模版绑定的世界",
list: [1, 2, 3, 4, 5, 6, 7, 8, 9]
}
})
// 获取数据
var data = vm.getData();
// 更改数据
data.msg = "欢迎来到模版绑定的世界3333333333"
data.list.push(333) setTimeout(function () {
// 设置数据
vm.setData(data)
}, 3000) </script>

如果这篇文章对您有帮助,您可以打赏我

技术交流QQ群:15129679

 
 

利用art.template模仿VUE 一次渲染多个模版的更多相关文章

  1. 利用art.template模仿VUE

    首先先看一下Typescript代码: import template = require('art-template/lib/template-web'); interface TemplateBi ...

  2. 利用 vue-cli 构建一个 Vue 项目

    一.项目初始构建 现在如果要构建一个 Vue 的项目,最方便的方式,莫过于使用官方的 vue-cli . 首先,咱们先来全局安装 vue-cli ,打开命令行工具,输入以下命令: $ npm inst ...

  3. vue + element 动态渲染、移除表单并添加验证

    博客地址:https://ainyi.com/66 又接到新需求了吧~~ 背景 在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加.移除表单,更加个性化的效果. 常见于填写个人信息.附加内 ...

  4. Vue(服务端渲染)

    一.前言 1.服务端渲染图解                                                 2.简介服务端渲染                             ...

  5. vue服务端渲染添加缓存

    缓存 虽然 Vue 的服务器端渲染(SSR)相当快速,但是由于创建组件实例和虚拟 DOM 节点的开销,无法与纯基于字符串拼接(pure string-based)的模板的性能相当.在 SSR 性能至关 ...

  6. [vue] vue服务端渲染nuxt.js

    初始化 使用脚手架工具 create-nuxt-app 快速创建 npx create-nuxt-app <项目名> npx create-nuxt-app 执行一些选择 在集成的服务器端 ...

  7. webpack4+koa2+vue 实现服务器端渲染(详解)

    _ 阅读目录 一:什么是服务器端渲染?什么是客户端渲染?他们的优缺点? 二:了解 vue-server-renderer 的作用及基本语法. 三:与服务器集成 四:服务器渲染搭建 4.1 为每个请求创 ...

  8. vue服务端渲染之nuxtjs

    前言 本篇主要针对nuxtjs中的一些重要概念整理和代码实现! 在学习vue服务端渲染之前,先搞清楚几个概念: 什么是客户端渲染(CSR) 什么是服务端渲染(SSR) CSR和SSR有什么异同 客户端 ...

  9. art template前端模板引擎

    偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...

随机推荐

  1. 复盘一篇讲sklearn库学习文章(上)

    认识 sklearn 官网地址: https://scikit-learn.gor/stable/ 从2007年发布以来, scikit-learn已成为重要的Python机器学习库, 简称sklea ...

  2. 大数据之kafka-02.搞定kafka专业术语

    02.搞定kafka专业术语 在kafka的世界中有很多概念和术语是需要我们提前理解并且熟练掌握的,下面来盘点一下. 之前我们提到过,kafka属于分布式的消息引擎系统,主要功能是提供一套完善的消息发 ...

  3. Mybatis环境搭建:自学随笔

    环境:IDEA  MySQL 1.建立maven工程,导入坐标:编辑pom.xml,建立mybatis约束. 在https://mybatis.org/mybatis-3/zh/getting-sta ...

  4. Java入门(二)——泛型

    如果你写过前端,可能会经常写一下关于变量类型的判断,比如:typeof fn === 'function'之类的代码.因为JavaScript作为一门弱类型语言,类型的判断往往需要开发人员自己去检查. ...

  5. Codeforces B. Too Easy Problems

    题目描述: time limit per test 2 seconds memory limit per test 256 megabytes input standard input output ...

  6. Kotlin协程作用域与构建器详解

    在上次我们是通过了这种方式来创建了一个协程: 接着再来看另一种创建协程的方式: 下面用它来实现上一次程序一样的效果,先来回顾一下上一次程序的代码: 好,下面改用runBlocking的方式: 运行一下 ...

  7. python笔记42-http请求命令行工具(httpie)

    前言 通常我们需要快速的测试某个接口通不通,一般linux上用curl去发http请求,但是这个命令行工具语法有点复杂了,不够直观. python有一个给人类使用的requests库,非常的简单方便. ...

  8. 转载:ubuntu系统启动顺序,常见系统服务说明

    Ubuntu运行级别Linux 系统任何时候都运行在一个指定的运行级上,并且不同的运行级的程序和服务都不同,所要完成的工作和要达到的目的都不同,系统可以在这些运行级之间进行切换,以完成不同的工作. 运 ...

  9. oracle取随机数,取固定行数的数

    首先建一张测试表: create table DIM_IA_TEST5 ( NAME ), OTHERNAME ), NUM NUMBER, TIMES NUMBER ) 然后插入数据,现在的表数据为 ...

  10. 深入理解JVM内存分配和常量池

    一.虚拟机的构成 虚拟结主要由运行时数据区.执行引擎.类加载器三者构成: 而我们所说的JVM内存模型指的就是运行时数据区,下面具体分析一下运行时数据区: 二.运行时数据区组成和各个区域的作用 我们看到 ...