实现简单render函数

什么是Virtual Dom

React和Vue2都使用了Virtual Dom技术，Virtual Dom并不是真正意义上的Dom，而是一个轻量级的JavaScript对象，在状态发生变化时，Virtual Dom会进行Diff运算，来更新只需要被替换的DOM，而不是全部重绘。
与DOM操作相比，Virtual Dom是基于JavaScript计算的，所以开销会小很多。

什么是render函数

Render函数通过Element的参数来创建Virtual Dom，结构精简，代码少且清晰，这里使用了一个demo实例来说明

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {margin-left: 50px;background-color: bisque;}</style>
</head>
<body><div></div><script>const elementObj = {tagName: 'div',props: {'class': 'list'},children: [{tagName: 'div', props: {'class': 'list'}, content:"1",children: [{tagName: 'div', props: {'class': 'list'}, content:"一"},{tagName: 'div', props: {'class': 'list'}, content:"二",children: [{tagName: 'div', props: {'class': 'list'}, content:"①"},{tagName: 'div', props: {'class': 'list'}, content:"②"}]}]},{tagName: 'div', props: {'class': 'list'}, content:"2",children: [{tagName: 'div', props: {'class': 'list'}, content:"一"},{tagName: 'div', props: {'class': 'list'}, content:"二"}]}]};document.querySelector('div').appendChild(render(elementObj));//深度遍历function render (elementObj) {//首先生成父元素let el = document.createElement(elementObj.tagName);for(propName in elementObj.props){propValue = elementObj.props[propName];el.setAttribute(propName, propValue);}if (elementObj.content) {console.log(elementObj.content);el.innerText = elementObj.content;}//如果children不为空if (elementObj.children) {elementObj.children.forEach(function(child){el.appendChild(render(child));});}return el;}</script>
</body>
</html>

转载于:https://www.cnblogs.com/HelloJC/p/11208605.html

实现简单render函数相关推荐

render函数和redirect函数的区别+反向解析
render函数和redirect函数的区别+反向解析 1.视图函数:一定是要包含两个对象的(render源码里面有HttpResponse对象) request对象:----->所有的请求 ...
「后端小伙伴来学前端了」Vue脚手架中 render 函数
前言上一篇文章写了:「后端小伙伴来学前端了」分析Vue脚手架结构简单说明了Vue的脚手架结构,但是上篇文章还欠了个小点没有说完,就在这篇文章中补齐.就是所谓的render函数. 一.main.js ...
Vue学习笔记进阶篇——Render函数
本文为转载,原文:Vue学习笔记进阶篇--Render函数基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编 ...
vue render函数
Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数. 比如如下我想要实现如 ...
vue render函数_Vue原理解析（一）：Vue到底是什么？
Vue,现在前端的当红炸子鸡,随着热度指数上升,实在是有必要从源码的角度,对它功能的实现原理一窥究竟.个人觉得看源码主要是看两样东西,从宏观上来说是它的设计思想和实现原理:微观上来说就是编程技巧,也就 ...
vue 循环tabs 标签页组件_Vue render函数实战--实现tabs选项卡组件
用过Element ui库的童鞋肯定知道组件,简单.好用.可以自定义标签页,不知道广大童鞋们在刚开始使用组件的时候有没有想过它是如何实现的?我咋刚开始使用组件的时候就有去想过,也想去实现一个超级简单的 ...
vue中的render函数介绍
render函数是什么简单的说,在 vue 中我们使用模板HTML语法组建页面的,使用 render 函数我们可以用js语言来构建DOM. 因为vue是虚拟DOM,所以在拿到template模板时也 ...
iview使用之怎样通过render函数在table组件表头添加图标及判断多个状态
在实际项目开发中,我们经常会用到各种各样的表格,比如在表格中填加下拉菜单,按钮,图标及可以根据状态显示对应文字等等,因为这段时间一直在做后台管理系统,所以表格用的就比较多,当然UI组件库我用的是ivi ...
【Vue】render函数使用和详解
前言在平时编程时,大部分是通过template来创建html.但是在一些特殊的情况下,使用template方式时,就无法很好的满足需求,在这个时候就需要通过JavaScript 的编程能力来进行操 ...

实现简单render函数

什么是Virtual Dom

什么是render函数

实现简单render函数相关推荐

最新文章

热门文章