一层的渲染

将下面的模板中的mustache语法使用给定数据渲染.
模板如下

<div id="root"><div><div><p>{{name}} - {{message}}</p></div></div><p>{{name}}</p><p>{{msg}}</p>
</div>

数据如下

const data = {name: '一个新name',message: '一个消息',msg: '哈哈哈'
}

思路

首先使用document.querySelector方法获取DOM结构
然后得到其所有的子元素,通过节点类型(node.nodeType)来判断其是文本节点还是元素节点
如果是文本节点,则使用正则表达式来判断,文本值中是否有mustache语法.
如果有则用data中的数据去替换它

知识点

使用正则表达式来判断是否含有{{}}, 若有解析出其中的值.使用data中的值替换

const mustache = /\{\{(.+?)\}\}/g;  // 这个正则规则匹配`{{}}`,其中(.+?)代表任意的字符
// 获取文本节点的值, 假设是 `<p>{{ name }}</p>`
let txt = textNode.nodeValue
txt = txt.replace(mustache, function(_, g){return data[g.trim()]   // data = {name: '一个新name'}
})

实现

const mustache = /\{\{(.+?)\}\}/g;
let tmpNode = document.quertSelector('#root')
let data = {name: '一个新name',message: '一个消息',msg: '哈哈哈'
}
function compiler(template, data) {let childNodes = template.childNodesfor(let i = 0 , len = childNodes.length; i < len ; i++){let nodeType = childNodes[i].nodeTypeif(type == 3 ){// 文本节点let txt = childNodes[i].nodeValue;// 得到替换后的文本txt = txt.replace(mustache, function(_, g){return data[g.trim()]})// 将替换后的文本放到DOM中childNodes[i].nodeValue = txt} else if(type == 1) {compiler(childNodes[i], data)}}
}

深层次的渲染

上面的函数只能替换简单对象,而不能替换引用类型的对象
即: a.name之类的就无法替换
需要使用对象深层次遍历的方法
根据路径得到对象中的值

function getValueByPath(obj, path){let res = obj,currProp,props = path.split('.')while((currProp = props.shift())){if(!res[currProp]){return undefined} else {res = res[currProp]}}return res
}
function compiler(template, data){// 其他位置和上述一样// 仅改写文本节点中的...if(type == 3){// 文本节点let txt = childNodes[i].nodeValue// 得到替换后的文本txt = txt.replace(mustache, function(_, g){return getValueByPath(data, g.trim())})childNodes[i].nodeValue = txt}...
}

javascript --- vue中简单的模板渲染相关推荐

spring mvc 渲染html,在Spring MVC中使用Thymeleaf模板渲染Web视图
Thymeleaf模板是原生的,不依赖于标签库.它能在接受原始HTML的地方进行编辑和渲染.由于没有与Servlet规范耦合,因此Thymeleaf模板能够进入JSP所无法涉及的领域如果想要在Spr ...
vue中简单的小插曲
我们现在来学习一下vue中一些简单的小东西: 首先我们必须要引入vue.js文件哦! 1.有关文本框里的checkbox js代码: new Vue({el:"#app",data ...
Vue 中强制组件重新渲染的正确方法
作者:Michael Thiessen 译者:前端小智来源:hackernoon 有时候,依赖 Vue 响应方式来更新数据是不够的,相反,我们需要手动重新渲染组件来更新数据.或者,我们可能只想抛开当 ...
vue中父子组件先后渲染_vue父子组件钩子函数的执行顺序
加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount-& ...
vue中手写动态渲染左右滚动菜单栏点击居左以及设置scrollLeft属性设置无效的原因解决
vue中可能会碰到无法使用框架的问题,此时需要手写左右滚动的滑动菜单栏,并且头部或者底部还有对应的标题点击定位.此时应该怎么做呢? (1)下面看结构: <div class="cour ...
vue中父子组件先后渲染_vue父子组件传值（子传父，非父子组件传值）
1. 子组件向父组件传值子组件: <template><div>子组件:<span>{{childValue}}</span><!-- 定义一个 ...
vue中父子组件先后渲染_Vue中父子组件执行的先后顺序
前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...
VUE中简单封装二次确认组件
如何快速封装简单二次确认组件? 一.首先在src文件夹内的components文件中创建一个secn-conf.vue 二 .在secn-conf.vue页面中将弹出层.提示消息等样式写好三 .在p ...
vue中父子组件先后渲染_VUE如何实现子父组件、父子组件、兄弟组件传值
父子组件传值: 父组件定义: 代码示例子父组件传值: 父组件方法定义: 子组件执行父组件方法定义: methods: { closeOrOpenLeftMenu() { if (this.isLef ...

javascript --- vue中简单的模板渲染

一层的渲染

深层次的渲染

javascript --- vue中简单的模板渲染相关推荐

最新文章

热门文章