阅读《Vue.js设计与实现》 -- 01

embedded/2025/2/22 21:30:31/

菜鸟最近闲暇(大的项目没开始,别的项目基本没事了),不知道干啥(刷掘金刷多了,感觉文章都写得差不多,不知道学什么,原因如下:沸点),所以开始看《Vue.js设计与实现》

文章目录

  • 第一章
    • 了解编程范式
      • 注意
      • 问题
    • 性能和可维护性
    • 性能
    • 运行时和编译时

第一章

第一章主要是告诉我们要有全局观,在一个大型框架开始的时候就要确定好正确的方向,方向错了,后面的代码写得再好也只是漂亮的屎山!

如何确定好方向?第一章告诉了我们四个点:

  1. 编程范式选择
  2. 性能与可维护的权衡
  3. 性能
  4. 运行时?编译时?

了解编程范式

编程范式(Programming paradigm)是指一类典型的编程风格,用于解决问题和编写程序!

编程范式是程序员看待程序应该具有的观点,为了满足不同的场景,提高生产力而诞生的。

编程范式是编程语言的一种分类方式,它并不针对某种编程语言。就编程语言而言,一种编程语言也可以适用多种编程范式。

  1. 命令式编程(Imperative Programming) :

    • 通过明确的语句来改变程序状态(几乎所有计算机的硬件工作都是命令式的)
    • 常见语言:C、Java、Python
  2. 面向对象编程(Object-Oriented Programming, OOP) :

    • 基于对象和类的概念,强调封装、继承和多态(分而治之,解决复杂性的技巧)
    • 常见语言:Java、C++、Python
  3. 声明式编程(Declarative Programming) :

    • 描述 “是什么” 而不是 “怎么做”,关注结果而非过程(函数式和逻辑式是其核心的两种范式)
    • 常见语言:SQL、HTML、CSS
  • 3-1. 函数式编程(Functional Programming) :

    • 强调函数的使用,避免状态和可变数据(声明式中的一种)
    • 常见语言:Haskell、Scala、Erlang
  • 3-2. 逻辑编程(Logic Programming) :

    • 基于逻辑推理,使用规则和事实来进行计算(声明式中的一种)
    • 常见语言:Prolog
  1. 事件驱动编程(Event-Driven Programming) :

    • 通过事件和事件处理器来驱动程序的执行
    • 常见应用:JavaScript在浏览器中的使用
  2. 并发编程(Concurrent Programming) :

    • 处理多个任务同时执行,关注同步和通信
    • 常见语言:Go、Erlang

每种编程范式都有其适用的场景和优势,选择合适的范式可以提高程序的可读性、可维护性和效率。

了解编程范式后,菜鸟感觉好像可以理解vue作者了,首先作者只考虑了两种范式:命令式声明式。至于为什么不考虑别的,感觉可能是因为:

  1. js 操作 dom 就是命令式编程
  2. html、css 已经是声明式编程了,如果把 js 操作 dom 也搞成声明式,那么可以统一前端范式
  3. js 的原型链并不适合面向对象编程,es6 的 class 也只是将原型链封装得像 OOP,不是底层转变了
  4. 事件驱动并发编程命令式其实都在 js 中体现了,但是操作 dom 是命令式

以上只是菜鸟脑补,真实原因是:

从范式上来看,视图层框架通常分为命令式和声明式,它们各有优缺点。作为框架设计者,应该对两种范式都有足够的认知,这样才能做出正确的选择,甚至想办法汲取两者的优点并将其捏合。

注意

虽然vue给我们的用法是声明式的,但这是因为vue封装了命令式编程,让我们能用到更好用的声明式编程!

问题

为什么视图层框架一定只能是 命令式声明式?为什么不能是OOP事件驱动编程并发编程

懂的读者可以评论一下!

性能和可维护性

确定好了编程范式只能是 命令式声明式,那这两个谁更好维护呢?

答案显而易见,肯定是声明式

但是:声明式代码的性能不优于命令式代码的性能《Vue.js设计与实现》 给我们举了个例子:

如果要替换掉div中的文字,原生js会这样

div.textContent = 'hello vue3' // 直接修改 --> A

很明显没有比这个性能更好的代码了!声明式的代码,需要先找到到前后的差异并只更新变化的地方(B),但是最终完成这次更新的代码仍然是上面的代码(A)!

所以性能对比:

  • 命令式代码的更新性能消耗 = A
  • 声明式代码的更新性能消耗 = B + A

但是vue为了方便我们后续维护项目,所以选择牺牲了部分性能来替代,框架设计者要做的就是:在保持可维护性的同时让性能损失最小化!

而且这是最简单的修改,但是并不是所有操作都这样简单,要是都是这样简单的操作也不用上框架了。

性能

我们更多时候是会对界面进行大量的刷新,如果用命令式编程,那么我们要写的东西很多,且由于要刷新的东西很多,那么肯定是难以写出最优代码(保证界面只刷新一次的那种代码),就算能写出来也会很难维护且耗费了很多大脑

这里读者就自己看《Vue.js设计与实现》了(不然整个搞出来,这本书作者要举报我了,手动狗头),反正最后的结果就是:

在这里插入图片描述

vue既减少了用户的心智负担,还能更加利于用户后续维护!

运行时和编译时

这个菜鸟理解的就是,如果一个框架能直接运行,它让你按照它的要求写的东西,那么它就是运行时的框架!如果你想要按照自己的想法写(更自由,但是其实也有限制),那么这个时候框架就要编译你的代码转换成它要求你写的东西,那么其就是编译时+运行时框架!如果它能直接把你按照自己想法写的东西,编译成原生的代码(你想运行的地方可以直接运行),不需要支持任何运行时的东西,那么就是编译时框架!

很显然vue是:编译时+运行时框架!


http://www.ppmy.cn/embedded/164104.html

相关文章

【转】“小前台,大中台”战略—以阿里云中台设计为例

前言: 当一位设计师拿到中台设计业务的时候,会想什么?别人会怎么评价中台的设计呢?“你这系统才几百人用,有啥价值啊?”“都是内部人员使用,能用就行了,没必要那么极致”“中后台系统人数这么少,你做像人家官网那样做数据统计有什么意义吗?”“你的设计出去讲,观众都…

Pycharm安装教程超详细图文教程,超详细Pycharm安装保姆级教程

文章目录 前言一、环境搭建1. 下载 PyCharm2. 下载 Python3. 安装 Python4. pycharm安装教程 总结 前言 在 Python 编程的广阔天地里,拥有一款强大且称手的集成开发环境(IDE)至关重要。PyCharm 作为 JetBrains 公司推出的一款专业 Python ID…

手机功耗BugReport字段含义介绍

BugReport一般用来分析功耗问题,例如休眠待机,后台待机,游戏,视频,相机场景等 BugReport字段含义介绍 BugReport字段 含义 备注 Reboot 设备的重启事件 CPU running CPU运行状态,休眠 或者 唤醒 只有…

科技赋能体育:Xsens MVN Analyze如何重塑运动训练新纪元

在哈尔滨亚洲冬季运动会备战期间,各国代表队都在积极使用新技术帮助运动员提升成绩。Xsens MVN Analyze运动分析系统以其高精度的数据采集与快速生成分析报告等特点,正在悄然改变着传统运动训练的模式,为运动员成绩提升开辟了新的路径。 一、…

EXCEL解决IF函数“您已为此函数输入太多个参数”的报错

IF函数的基本结构是IF(条件, 值为真时的结果, 值为假时的结果),所以标准的IF函数最多只能有三个参数。当用户输入的参数超过三个时,Excel就会报这个错误。比如多个IF语句叠加,但可能在嵌套的过程中没有正确关闭每个IF函数的括号,导…

【Ubuntu】GPU显存被占用,但显示没有使用GPU的进程

文章目录 一、问题描述二、解决方案2.1 寻找问题进程2.2 尝试杀死相关进程2.3 投放核弹,一键全杀2.4 再次查看GPU使用情况 参考资料 一、问题描述 今天使用服务器的时候发现gpu被占了很多内存,但是使用 nvidia-smi 命令并没有发现占这么多显存的进程&am…

Kubernetes 使用 Kube-Prometheus 构建指标监控 +飞书告警

1 介绍 Prometheus Operator 为 Kubernetes 提供了对 Prometheus 机器相关监控组件的本地部署和管理方案,该项目的目的是为了简化和自动化基于 Prometheus 的监控栈配置,主要包括以下几个功能: Kubernetes 自定义资源:使用 Kube…

NVIDIA 的 Blackwell 架构:解析 B100、B200 和 GB200

随着人工智能和机器学习领域继续以惊人的速度发展,NVIDIA 的最新创新——Blackwell 架构,将以无与伦比的并行计算能力重新定义AI和HPC。 NVIDIA 展示了一系列新技术,有望以前所未有的方式加速 AI 训练和推理。他们推出了 Blackwell GPU、GB2…