首页 > 其他分享 >关于JS框架的一点想法

关于JS框架的一点想法

时间:2024-11-12 09:32:02浏览次数:1  
标签:obj 框架 想法 JS html 浏览器 绘制 children

读了几页《vue.js设计与实现》,记录几点想法:

1.Html是根本

2.无论哪个框架,不管是运行时框架,还是编译时框架,最终都要通过标签“绘制”页面

3.这个“绘制的过程”就是渲染,渲染由浏览器完成。

4.静态网站的渲染是最快的,没有所谓的“编译”环节消耗。

5.为啥搞这么多新技术出来呢?一是直接写每个页面太繁琐,系统稍大一点几乎就不可能完成任务。二是浏览器能力越来越强,有了硬件上的基础。

6.上面说了,不管是那种框架,最终目标都是转为html代码。一般来说,源码有如下两种:

(1)字符串;(2)json格式。(3)可能还有其它格式
比如,这段代码:

<div><span>世界你好!</span></div>

A:最基本的逻辑:放在标准的html文档里,自动就执行(“绘制”或者说渲染)。

B:字符串转换:

let txt = '世界你好!';
let html = "<div><span>"+txt+"</span></html>";
document.body.appendChild(html); 

 经过字符串拼接和appendChild两个步骤,才到了A的阶段——浏览器可直接绘制的阶段。

C:JSON转换

const obj = {
    tag: 'div',
    children: [
       {tag:'span',children:'世界你好!'}
    ]      
}

这种json数据又如何转为可被浏览器直接识别并绘制的html代码呢?

只能用JavaScript来辅助实现了。

function Render(obj,root){
	const el = document.createElement(obj.tag);
	
	if(typeof obj.children === 'string'){
		const text = document.createTextNode(obj.children);
		el.appendChild(text);
	}else if(obj.children){
		obj.children.forEach((child)=>Render(child,el));
	}
	
	root.appendChild(el);
}

  通过调用

Render(obj,document.body)

  才能到达A的阶段——浏览器可直接绘制的阶段。

7.如果页面很少,那么用A的方法最简单效率最高。

8.如果稍微负责一点的,用B的方法也不错,不费脑子好理解,符合直觉(过程性框架的优势)

9.页面比较多,而且页面元素复杂,那么,还是用C比较好,只要按照规则写好代码,转换(编译)的事情由框架代劳,不用去费那个脑子。

10.正常情况下,后两种效率差不多。但是,当涉及到局部绘制(局部渲染)的时候,效率就差多了。

标签:obj,框架,想法,JS,html,浏览器,绘制,children
From: https://www.cnblogs.com/cblx/p/18541113

相关文章

  • [经典] 前端js将文件流导出为csv/excel文件
    前端将文件流导出为csv/excel文件有两种方式:1.后端直接返回文件连接:前端正常请求,后端返回一个静态文件链接,直接使用:window.location.href=url简单,但是缺点是耗资源,后端需要把数据转化为excel存起来,并且直接暴露连接。2.后台返回二进制流:前台请求后台接口拿到二进制流转......
  • 基于nodejs+vue智慧医院信息管理系统[开题+源码+程序+论文]计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于医院信息管理系统的研究,现有研究主要以传统的医院管理信息化为主,侧重于单一功能模块的优化,如单独的挂号系统或者病历管理系统等。专门针对整合多种......
  • 基于nodejs+vue智慧迎新系统[开题+源码+程序+论文]计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于迎新系统的研究,现有研究多集中在系统的基本功能构建与流程优化方面,如学生信息管理、简单的流程自动化等,专门针对涵盖多部门(招生部、教务部、财务部......
  • 基于nodejs+vue智慧幼教服务系统[开题+源码+程序+论文]计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于智慧幼教服务系统的研究,现有研究主要以幼儿教育的数字化管理为主,如部分研究聚焦于单一功能模块,像考勤系统或者课程资源数字化等方面的探索。专门针......
  • Qt构建与解析Json示例
    本文以B站UP主“明王讲QT”的【QT开发专题-天气预报】中的章节内容作为学习Qt中构建、解析Json的参考方法。1、Json文本{"info":{"asian":true,"captical":"beijing","founded":1949},"name":"China&qu......
  • System.Text.Json官方文档(链接)
    下面的微软官方文档中介绍了,如何使用System.Text.Json来序列化和反序列化JSON:JSONserializationanddeserialization其中这里讲解了如何避免循环引用序列化:HowtopreservereferencesandhandleorignorecircularreferencesinSystem.Text.Json其中下面的章节还介绍了......
  • 【开源免费】基于SpringBoot+Vue.JS美发门店管理系统(JAVA毕业设计)
    博主说明:本文项目编号T069,文末自助获取源码\color{red}{T069,文末自助获......
  • 【开源免费】基于SpringBoot+Vue.JS课程答疑系统(JAVA毕业设计)
    博主说明:本文项目编号T070,文末自助获取源码\color{red}{T070,文末自助获......
  • 【原创】基于 face-api.js 的HTML,PHP人脸识别系统实现
    声明:本程序仅仅只是实现了PHP、HTML页面拉取手机/电脑摄像头,进行实时拍照获取人脸,可根据你的开发需求进行进一步的实现所需功能。使用截图电脑我没装摄像头,所以就是能调取提示,其他不演示了手机端如图技术栈前端:HTML5,JavaScript人脸识别:face-api.js视频流处......
  • 实现Reactor反应堆模型:框架搭建
    实现Reactor反应堆模型:框架搭建Reactor模型是一种常用于处理大量并发I/O操作的设计模式,特别适用于服务器端的网络编程。该模型通过事件驱动的方式,将I/O操作的处理与具体的业务逻辑分离,从而提高系统的并发处理能力和响应速度。本文将详细介绍如何搭建一个Reactor反应堆模型......