【Vue.js设计与实现】第一篇：框架设计概览-阅读笔记（完结）

news2025/2/5 5:00:47

从高层设计的角度去探讨框架需要关注的问题。

参考：速读《Vue.js 设计与实现》 - 掘金 (juejin.cn)

系列目录：

标题博客
第一篇：框架设计概览【Vue.js设计与实现】第一篇：框架设计概览-阅读笔记
第二篇：响应系统【Vue.js设计与实现】第二篇：响应系统-阅读笔记
第三篇：渲染器【Vue.js设计与实现】第三篇：渲染器-阅读笔记
第四篇：组件化【Vue.js设计与实现】第四篇：组件化-阅读笔记
第五篇：编译器【Vue.js设计与实现】第五篇：编译器-阅读笔记
第六篇：服务端渲染【Vue.js设计与实现】第六篇：服务端渲染-阅读笔记

第一篇：框架设计概览

  • 第 1 章 权衡的艺术
  • 第 2 章 框架设计的核心要素
  • 第 3 章 Vue.js 3 的设计思路

文章目录

    • 第一章 权衡的艺术
      • 1.1 命令式和声明式
      • 1.2 性能与可维护性的权衡
      • 1.3 运行时和编译时
    • 第二章：框架设计的核心要素
      • 2.1 `__DEV__`：在开发环境中为用户提供友好的警告信息的同时，不会增加生产环境代码的体积
      • 2.2 ` /*#__PURE__*/`与Tree Shaking
      • 2.3 框架应该输出怎样的构建产物
      • 2.4 错误处理
      • 2.5 良好的TypeScript类型支持
      • 总结
    • 第三章：Vue.js 3 的设计思路
      • 3.1 声明式地描述UI
      • 3.2 初识渲染器
      • 3.3 组件的本质
      • 3.4 模板的工作原理
      • 3.5 Vue.js 是各个模块组成的有机整体
      • 总结

第一章 权衡的艺术

框架的设计，本身就是一种权衡的艺术。

1.1 命令式和声明式

命令式关注过程，声明式关注结果

命令式：

const div=document.querySelector('#app') //获取div
div.innerText='hello world' //设置文本内容
div.addElementListener('click',()=>{alert('OK')}) //绑定事件

声明式：

<div @click="()=>alert('OK')">Hello world</div>

vue的内部是命令式的，而我们使用vue的时候是声明式的。

即，vue封装了命令式的过程，对外暴露出了声明式的结果。

1.2 性能与可维护性的权衡

从性能的角度上看，命令式的性能>声明式的性能。

原因：

命令式的代码通过原生的JS实现，声明式的代码要实现同样功能时，还要再调用相同的命令式代码。
声明式代码的更新性能消耗 = 找出差异的性能消耗+直接修改的性能消耗.
所谓的虚拟 DOM，就是为了最小化找出差异这一步的性能消耗而出现的。

显然命令式的性能更高。此时vue还要对外暴露出声明式的接口，原因是声明式的可维护性，远大于命令式的可维护性

而且，vue在性能优化之下，它并不会比纯命令式的性能差太多。

在前端领域，用JS修改HTML的方式主要有3种：原生JS，innerHTML，虚拟DOM。

心智负担：虚拟DOM < innerHTML< 原生JS
性能：innerHTML < 虚拟DOM < 原生JS
可维护性：原生JS < innerHTML < 虚拟DOM

虚拟DOM的性能并不是最高的，但是vue依然选择虚拟DOM来进行渲染层的构架。

这也是性能与可维护性的权衡。

1.3 运行时和编译时

都是框架设计的一种方式，可单独出现，也可组合使用。

  • 运行时：runtime

利用render函数，把虚拟DOM转化为真实DOM的方式。

  • 编译时：compiler

把template模板中的内容，转化为真实DOM。
注意，存在编译过程，可以分析用户提供的内容。同时，没有运行时理论上性能会更好。

  • 运行时+编译时

过程分两步：

  1. 先把template模板转化成render函数，即编译时
  2. 再利用render函数，把虚拟DOM转化为真实DOM，即运行时

两者的结合，可以：

  • 在编译时：分析用户提供的内容
  • 在运行时，提供足够的灵活性

这也是vue的主要实现方式。

第二章：框架设计的核心要素

2.1 __DEV__：在开发环境中为用户提供友好的警告信息的同时，不会增加生产环境代码的体积

有一个常量__DEV__，存在于所有的console.warn中：

if (__DEV__ && !res) {
	warn(
		`Failed to mount app: mount target selector "${container}"
    returned null.`
	);
}

在开发环境中__DEV__永远为true，在生产环境中__DEV__永远为false。永远不会执行的代码成为dead code，不会出现在最终产物中。

2.2 /*#__PURE__*/与Tree Shaking

Tree Shaking：消除那些永远不会被执行的代码。

想要实现Tree Shaking，模块必须是ESM。

Tree Shaking的关键点：副作用。如果一个函数调用会产生副作用，那么就不能将其移除。副作用就是，当调用函数的时候会对外部产生影响，例如修改了全局变量。
举个例子：

如果 obj 对象是一个通过 Proxy 创建的代理对象，那么当我们读取对象属性时，就会触发代理对象的 get 夹子（trap），在 get 夹子中是可能产生副作用的，例如我们在 get 夹子中修改了某个全局变量。而到底会不会产生副作用，只有代码真正运行的时候才能知道，JavaScript 本身是动态语言，因此想要静态地分析哪些代码是 dead code 很有难度

静态地分析 JavaScript 代码很困难，所以像 rollup.js 这类工具都会提供一个机制，让我们能明确地告诉 rollup.js：这段代码没有副作用，可以移除。

import {foo} from './utils'
/*#__PURE__*/ foo()

注释代码/*#__PURE__*/，就是告诉rollup.js，对于foo的调用不会产生副作用，可以Tree-Shaking。

实际上，通常产生副作用的代码都是模块内函数的顶级调用。

foo() // 顶级调用

function bar(){
	foo() // 函数内调用
}

可以看到，对于顶级调用来说，是可能产生副作用的；对于函数内调用来说，只要函数 bar 没有调用，那么 foo 函数的调用自然不会产生副作用。
因此，在 Vue.js 3 的源码中，基本都是在一些顶级调用的函数上使用 /*#__PURE__*/ 注释。此注释也可以应用在语句上。

2.3 框架应该输出怎样的构建产物

用户能够使用 <script> 标签直接引入 ESM 格式的资源，如：

<script type="module" src="/path/to/vue.esm-browser.js">
</script>

ESM格式的资源中，文件会有一个-browser字样。其实对于ESM格式的资源来说，Vue.js还会输出一个vue.esm-bundler.js 文件。这样做的原因是：在寻找资源时，如果package.json中存在module字段，那么会优先使用module字段指向的资源来代替main字段指向的资源。

如Vue.js源码中的packages/vue/package.json：

{
	"main":"index.js",
	"module":"dist/vue.runtime.esm-bundler.js"
}

带有 -bundler 字样的 ESM 资源是给 rollup.js 或 webpack 等打包工具使用的，而带有 -browser 字样的 ESM 资源是直接给 <script type="module"> 使用的

当我们构建提供给打包工具的ESM格式的资源时，不能直接把__DEV__设置为true或false，而是：process.env.NODE_ENV!=='production'。即，当前环境不是生产环境.

如源码：

if (__DEV__)

在带有 -bundler 字样的资源中会变为：

if ((process.env.NODE_ENV !== 'production'))

2.4 错误处理

举个例子，一个模块导出一个方法，参数是一个回调函数：

import utils from 'utils.js'

utils.foo(()=>{
//...
})

如果用户在执行回调函数时出错了，怎么办？有两个方法：让用户自己处理、vue代替用户统一处理错误。

用户自己处理：

utils.foo(()=>{
	try{
		//...
	}catch(e){
		//...
	}
})

会增加用户的负担。不建议。

vue代替用户统一处理错误

将错误处理程序封装为一个函数，如：callWithErrorHanding

export default {
	foo(fn) {
		callWithErrorHanding(fn);
	},
	bar(fn) {
		callWithErrorHanding(fn);
	},
};

function callWithErrorHanding(fn) {
	try {
		fn && fn();
	} catch (e) {
		console.log(e);
	}
}

这样做的好处：为用户提供统一的错误处理接口。

提供 registerErrorHandler函数，用户可以使用它注册错误处理程序，在callWithErrorHanding捕获错误后，把错误传给用户注册的错误处理程序：

export default {
	foo(fn) {
		callWithErrorHanding(fn);
	},
	// 用户可以调用该函数注册统一的错误处理函数
	registerErrorHandler(fn) {
		handleError = fn;
	},
};

function callWithErrorHanding(fn) {
	try {
		fn && fn();
	} catch (e) {
        // 将捕获到的错误传递给用户的错误处理程序
		handleError(e);
	}
}

这时错误处理的能力完全由用户控制，用户既可以选择忽略错误，也可以调用上报程序将错误上报给监控系统。

在Vue.js中，我们也可以注册统一的错误处理函数：

import App from "App.vue";
const app = createApp(app);
app.config.errorHandler = () => {
	// 错误处理程序
};

2.5 良好的TypeScript类型支持

使用TS 编写代码与对TS 类型支持友好是两件事。

举个例子：

function foo(val: any) {
	return val;
}

const res = foo('str')

当我们把鼠标指针悬浮到 res 常量上时，可以看到其类型是 any，而不是string——返回值类型丢失。

在这里插入图片描述
为了达到理想状态，需要做出一些修改：

function foo<T extends any>(val: T):T {
	return val;
}

在这里插入图片描述
由此可见，框架想要做到完善的类型支持，需要付出相当大的努力。

总结

开发体验是衡量一个框架的重要指标之一。大多数情况下“框架”要比开发者更清楚问题出在哪里，因此在框架层面抛出有意义的警告信息是非常必要的。

我们通过预定义 __DEV__ 常量，从而实现仅在开发环境中打印警告信息—— Tree-Shaking 机制。这使得线上代码不会因为警告信息而体积过大。

Tree-Shaking是一种排除 dead code 的机制。一些工具能够识别/*#__PURE__*/ 注释，可以利用此注释来辅助构建工具进行 Tree-Shaking。

对于框架的输出产物，不同类型的产物是为了满足不同的需求。为了让用户能够通过 <script> 标签直接引用并使用，我们需要输出 IIFE 格式的资源，即立即调用的函数表达式。为了让用户能够通过 <script type="module"> 引用并使用，我们需要输出ESM 格式的资源。

需要注意的是，ESM 格式的资源有两种：用于浏览器的 esm-browser.js 和用于打包工具的 esm-bundler.js。它们的区别在于对预定义常量 __DEV__ 的处理，前者直接将 __DEV__ 常量替换为字面量 true 或 false，后者则将 __DEV__ 常量替换为process.env.NODE_ENV !== 'production' 语句。

有时出于灵活性和兼容性的考虑，对于同样的任务，框架提供了两种解决方案，如组合式API/选项式API。不被使用的方案会被 Tree-Shaking 机制排除。

框架的错误处理做得好坏直接决定了用户应用程序的健壮性，同时还决定了用户开发应用时处理错误的心智负担。框架需要为用户提供统一的错误处理接口，这样用户可以通过注册自定义的错误处理函数来处理全部的框架异常。

第三章：Vue.js 3 的设计思路

3.1 声明式地描述UI

Vue.js 3是一个声明式的UI框架。前端页面涉及的东西：

  • DOM 元素：例如是 div 标签还是 a 标签。
  • 属性：如 a 标签的 href 属性，再如 id、class 等通用属性。
  • 事件：如 click、keydown 等。
  • 元素的层级结构：DOM 树的层级结构，既有子节点，又有父节点。

Vue是如何声明式地描述上述内容的：

使用模板来声明式地描述UI

  • 使用与 HTML 标签一致的方式来描述 DOM 元素、属性和层级结构
  • 使用 : 或 v-bind 来描述动态绑定的属性
  • 使用 @ 或 v-on 来描述事件

使用JavaScript 对象来声明式地描述UI

const title = {
	// 标签名称
	tag: "h1",
	// 标签属性
	props: {
		onClick: handler,
	},
	// 子节点
	children: [{ tag: "span" }],
};

对应到Vue模板：

<h1 onClick="handler">
	<span></span>
</h1>

使用 JavaScript 对象描述UI比模板描述更加灵活。如：表示一个标题，根据标题级别的不同，会分别采用 h1~h6 这几个标签，JS对象描述：

let level = 3;
const title = {
	tag: `h${level}`,
};

用模板描述，只能穷举：

<h1 v-if="level === 1"></h1>
<h2 v-else-if="level === 2"></h2>
<h3 v-else-if="level === 3"></h3>
<h4 v-else-if="level === 4"></h4>
<h5 v-else-if="level === 5"></h5>
<h6 v-else-if="level === 6"></h6>

使用 JavaScript 对象来描述 UI的方式，就是虚拟DOM。

Vue.js组件中手写的渲染函数就是使用虚拟 DOM 来描述 UI 的，如：

import { h } from "vue";
export default {
	render() {
		return h("h1", { onClick: handlder }); // 虚拟DOM
	},
};

这里的h函数返回值是一个对象，其作用是让我们编写虚拟DOM更加轻松。也可以这样写：

export default {
	render() {
		return {
			tag: "h1",
			props: { onClick: handler },
		};
	},
};

h 函数，一个辅助创建虚拟 DOM 的工具函数

3.2 初识渲染器

渲染器的工作原理其实很简单，是使用一些我们熟悉的 DOM 操作 API 来完成渲染工作。

虚拟 DOM：用 JavaScript对象来描述真实的 DOM 结构。
渲染器：把虚拟 DOM 渲染为真实 DOM。

在这里插入图片描述
举个例子，有虚拟DOM如下：

const vnode = {
	tag: "div",
	props: {
		onClick: () => alert("hello"),
	},
	children: "click me",
};
  • tag：标签名称
  • props：一个对象，描述属性、事件等
  • children：标签的子节点

实际上，你完全可以自己设计虚拟 DOM 的结构，例如可以使用tagName 代替 tag，因为它本身就是一个 JavaScript 对象，并没有特殊含义

分析渲染器 renderer 的实现思路

  • 创建元素：vnode.tag 作为标签名
  • 为元素添加属性和事件：遍历 vnode.props 对象，如果 key 以on 字符开头，说明它是一个事件
  • 处理 children：若children 是一个数组，就递归地调用renderer 继续渲染

具体代码如下：

渲染器：

  • vnode：虚拟DOM节点
  • container：真实 DOM 元素，作为挂载点，渲染器会把虚拟 DOM 渲染到该挂载点下
function renderer(vnode, container) {
	// 使用 vnode.tag 作为标签名称创建 DOM 元素
	const el = document.createElement(vnode.tag);

	// 遍历 vnode.props，将属性、事件添加到 DOM 元素
	for (const key in vnode.props) {
        //  on开头的事件名
		if (/^on/.test(key)) {
			el.addEventListener(
				key.substring(2).toLowerCase(),
				vnode.props[key]
			);
		}
	}

	// 处理children
	if (typeof vnode.children === "string") {
        // 文本子节点
		el.appendChild(document.createTextNode(vnode.children));
	} else if (Array.isArray(vnode.children)) {
		// 递归地调用 renderer 函数渲染子节点，使用当前元素 el 作为挂载点
		vnode.children.forEach((child) => renderer(child, el));
	}
    // 将元素添加到挂载点下
	container.appendChild(el);
}

如：

<div id="div"></div>

const div = document.getElementById("div");
renderer(vnode, div);

打开浏览器，会发现渲染出了click me，点击它：

在这里插入图片描述

上述仅仅只是创建节点，渲染器的精髓在更新节点：渲染器只更新修改的部分，而不是重新渲染全部节点。

3.3 组件的本质

虚拟 DOM 除了能够描述真实 DOM 之外，还能够描述组件。组件就是一 组 DOM 元素的封装。

定义一个函数来代表组件，而函数的返回值就代表组件要渲染的内容。
这里tag用来描述组件函数。

const MyComponent = function () {
	return {
		tag: "div",
		props: {
			onClick: () => alert("hello"),
		},
		children: "click me",
	};
};

const vnode = {
	tag: MyComponent,
};

总体代码：

function renderer(vnode, container) {
	// 渲染标签/组件
	if (typeof vnode.tag === "string") {
		mountElement(vnode, container);
	} else if (typeof vnode.tag === "function") {
		mountComponent(vnode, container);
	}
}

function mountElement(vnode, container) {
	// 使用 vnode.tag 作为标签名称创建 DOM 元素
	const el = document.createElement(vnode.tag);

	// 遍历 vnode.props，将属性、事件添加到 DOM 元素
	for (const key in vnode.props) {
		//  on开头的事件名
		if (/^on/.test(key)) {
			el.addEventListener(
				key.substring(2).toLowerCase(),
				vnode.props[key]
			);
		}
	}

	// 处理children
	if (typeof vnode.children === "string") {
		// 文本子节点
		el.appendChild(document.createTextNode(vnode.children));
	} else if (Array.isArray(vnode.children)) {
		// 递归地调用 renderer 函数渲染子节点，使用当前元素 el 作为挂载点
		vnode.children.forEach((child) => renderer(child, el));
	}
	// 将元素添加到挂载点下
	container.appendChild(el);
}

function mountComponent(vnode, container) {
	// 获取虚拟DOM
	const subtree = vnode.tag();
	renderer(subtree, container);
}

实际上，组件不一定得是函数，也可以是对象。对象里有一个render函数，返回一个虚拟DOM。

const MyComponent = {
	render() {
		return {
			tag: "div",
			props: {
				onClick: () => alert("hello"),
			},
			children: "click me",
		};
	},
};

const vnode = {
	tag: MyComponent,
};

function mountComponentObj(vnode, container) {
       const subtree=vnode.tag.render()
       renderer(subtree, container);
   }

function renderer(vnode, container) {
	// 渲染标签/组件
	if (typeof vnode.tag === "string") {
		mountElement(vnode, container);
	} else if (typeof vnode.tag === "function") {
		mountComponent(vnode, container);
	} else if (typeof vnode.tag === "object") {
		mountComponentObj(vnode, container);
	}
}

3.4 模板的工作原理

这里只需要清楚编译器的作用及角色，具体之后会着重讲。

编译器：将模板编译为渲染函数

一个 .vue 文件就是一个组件，以.vue文件举例：

<template>
	<div @click="handler">click me</div>
</template>

<script>
export default {};
</script>

其中 <template> 里的内容就是模板内容，编译器会把模板内容编译成渲染函数并添加到 <script> 标签块的组件对象上，所以最终在浏览器里运行的代码为：

export default {
	render() {
		return h("div", { onClick: handler }, "click me");
	},
};

对于组件来说，它要渲染的内容都是渲染函数产生的，然后渲染器再把渲染函数返回的虚拟 DOM 渲染为真实 DOM。这就是Vue.js 渲染页面的流程。

3.5 Vue.js 是各个模块组成的有机整体

编译器和渲染器可以配合工作。假设有模板如下：

<template>
	<div id="foo" :class="cls"></div>
</template>

这里cls是一个变量，通过v-bind动态绑定到class上。渲染器的作用之一就是寻找并且只更新变化的内容。在这里，编译器能识别出哪些是静态属性，哪些是动态属性，在生成代码的时候完全可以附带这些信息，它生成的虚拟DOM如下：

render() {
	return {
		tag: "div",
		props: {
			id: "foo",
			class: cls,
		},
		patchFlags: 1, // 假设数字 1 代表 class 是动态的
	};
},

这样，渲染器看到patchFlags: 1就知道class是动态的了。

编译器和渲染器之间是存在信息交流的，它们互相配合使得性能进一步提升，而它们之间交流的媒介就是虚拟 DOM 对象

总结

Vue.js 是一个声明式的框架。声明式的好处在于，它直接描述结果，用户不需要关注过程。描述UI：

  • 采用模板的方式（直观）
  • 支持虚拟DOM的方式（灵活）

渲染器的作用：把虚拟 DOM 对象渲染为真实 DOM 元素。工作原理是：递归地遍历虚拟 DOM 对象，并调用原生 DOM API 来完成真实 DOM 的创建。精髓：后续的更新，它会通过 Diff 算法找出变更点，并且只会更新需要更新的内容。

组件的本质：一组虚拟 DOM 元素的封装。它可以是一个返回虚拟 DOM 的函数，也可以是一个对象，但这个对象下必须要有一个函数用来产出组件要渲染的虚拟 DOM。

编译器把Vue.js 的模板编译为渲染函数。 编译器、渲染器都是 Vue.js 的核心组成部分，它们共同构成一个有机的整体，不同模块之间互相配合，进一步提升框架性能。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1427036.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

blender 画笔的衰成曲线Falloff Curve

blender 画笔的衰成曲线Falloff Curve

Blender画笔是用来在雕刻模式或绘画模式下对物体进行修改的工具。画笔有不同的类型和设置&#xff0c;可以影响画笔的效果和外观。你提到的选项是画笔的衰减曲线&#xff08;Falloff Curve&#xff09;的预设&#xff0c;它们决定了画笔的强度如何随着距离中心的距离而变化。 …
阅读更多...
32OLED中断系统＆对射式红外计数＆旋转编码计数

32OLED中断系统＆对射式红外计数＆旋转编码计数

目录 一.程序调试方式 二.OLED简介 三. 中断系统 四.代码实现 (1)对射式红外计数 &#xff08;2&#xff09;旋转编码计数 一.程序调试方式 二.OLED简介 stm32引脚上电后&#xff0c;如果不初始化&#xff0c;默认是浮空输入的模式&#xff0c;在这个模式下引脚不会输出电平…
阅读更多...
免费版XShell7下载安装

免费版XShell7下载安装

1.下载地址 家庭/学校免费 - NetSarang Websitehttps://www.xshell.com/zh/free-for-home-school/ 不同时期下载&#xff0c;版本会有不同&#xff0c;实时下载即可。 2.安装 Xshell和Xftp都要安装&#xff0c;点击下一步&#xff0c;直至安装完成。 3.邮箱注册&#xff0c;免…
阅读更多...
Redis核心技术与实战【学习笔记】 - 16.Redis 缓存异常：缓存和数据库不一致

Redis核心技术与实战【学习笔记】 - 16.Redis 缓存异常：缓存和数据库不一致

概述 只要使用 Redis 缓存&#xff0c;就必须面对缓存和数据库的一致性问题。 重要的是&#xff0c;如果数据不一致&#xff0c;那么业务应用从缓存中读取的数据就不是最新数据&#xff0c;这会导致严重的问题。比如说&#xff0c;我们把电商商品的库存信息缓存在 Redis 中&am…
阅读更多...
【网站项目】065健康综合咨询问诊平台

【网站项目】065健康综合咨询问诊平台

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…
阅读更多...
Python入门到精通(七)——Python文件操作

Python入门到精通(七)——Python文件操作

Python文件操作 一、文件的编码 二、文件的读取 1、操作汇总 2、model 常用的三种基础访问模式 三、文件的写入 四、文件的追加 五、综合案例 一、文件的编码 1、什么是编码&#xff1f; 编码就是一种规则集合&#xff0c;记录了内容和二进制间进行相互转换的逻辑。编…
阅读更多...
合约短线高胜率策略-扭转乾坤指标使用说明

合约短线高胜率策略-扭转乾坤指标使用说明

扭转乾坤指标使用说明 行情判断 双绿线 多趋势双红线 空趋势大绿线 小红线 多震荡大红线 小绿线 空震荡 进场条件 趋势行情进场 多趋势 多信号 底金叉 做多空趋势 空信号 顶死叉 做空 震荡行情进场 多震荡 多信号 底金叉 做多多震荡 空信号 顶死叉 做空空…
阅读更多...
带你玩转股票的价值投资，上市公司典型案例分析

带你玩转股票的价值投资，上市公司典型案例分析

一、教程描述 上市企业&#xff0c;一般是新经济的典型代表&#xff0c;它的变化最能折射出新的商业模式及未来的产业机会。无论你是企业管理层、新兴创业者&#xff0c;还是职场精英及在校学生&#xff0c;都可以从上市公司的演变规律中&#xff0c;找到自己的职业晋升路径和…
阅读更多...
LNMP环境搭建动态网站

LNMP环境搭建动态网站

一、环境准备 服务器&#xff1a;openEuler 22.03 Linux IPV4 &#xff1a;192.168.110.144/24 网页服务器&#xff1a;Nginx1.21.0 数据库&#xff1a;MySQL 8.0.36 PHP&#xff1a;8.0.30 1.安装软件 [rootnode3 ~]# yum install php-mysqlnd php php-gd php-fpm php-xml -y…
阅读更多...
运维SRE-02 正则表达式、grep

运维SRE-02 正则表达式、grep

1.特殊符号补充 1.1位置相关的特殊符号 . 当前目录 .. 当前目录的上级目录 ~ 当前用户家目录 / 根目录 cd - 返回上次所在目录1.2熟练掌握 # 注释符号,root命令提示符 | 管道符号.1.3了解其他特殊符号 $ 取值(取出变量的值),普通用户的提示符 ! % ^ & * (){} [] ; ? \…
阅读更多...
git使用以及工作中开发流程

git使用以及工作中开发流程

Git是当前最先进、最主流的分布式版本控制系统&#xff0c;免费、开源。 主要概念&#xff1a; 基本流程&#xff1a; 命令&#xff1a; git commit -a # 省略了add到暂存区的步骤&#xff0c;直接提交工作区的修改内容到版本库&#xff0c;不包括新增的文件。git fetc…
阅读更多...
Python之PySpark简单应用

Python之PySpark简单应用

文章目录 一、介绍1.准备工作2. 创建SparkSession对象&#xff1a;3. 读取数据&#xff1a;4. 数据处理与分析&#xff1a;5. 停止SparkSession&#xff1a; 二、示例1.读取解析csv数据2.解析计算序列数据map\flatmap 三、问题总结1.代码问题2.配置问题 一、介绍 PySpark是Apa…
阅读更多...
【Linux-常用命令】Linux 常用命令大全

【Linux-常用命令】Linux 常用命令大全

【Linux-常用命令】Linux 常用命令大全 1&#xff09;文件管理1.1.目录操作1.2.vim 操作1.3.打包压缩相关命令1.4.Linux 管道1.5.Linux 远程拷贝命令1.6.查看文件目录大小 2&#xff09;文件权限管理2.1.三种基本权限2.2.更改权限 3&#xff09;运行程序3.1.命令行运行3.2.后台…
阅读更多...
睿尔曼超轻量仿人机械臂—外置按钮盒使用说明

睿尔曼超轻量仿人机械臂—外置按钮盒使用说明

睿尔曼RM系列机械臂的控制方式有很多种&#xff0c;包括&#xff1a;示教器、JSON、API等。在此为大家介绍外置按钮盒的使用方法。 按钮盒接线安装 按钮盒外观如下图所示&#xff0c;有&#xff1a;急停、暂停、开始、继续。四个功能按钮。用户可通过这四个按钮来实现对机械臂运…
阅读更多...
FileGDB文件地理数据库的大小和名称限制

FileGDB文件地理数据库的大小和名称限制

FileGDB文件地理数据库的大小和名称限制 官方链接 文件地理数据库的大小和名称限制如下&#xff1a; 文件地理数据库的大小 - 无限制 表或要素类大小 - 1 TB&#xff08;默认值&#xff09;、4 GB 或 256 TB&#xff08;带关键字&#xff09; 要素类和表的数量 - 2,147,483,6…
阅读更多...
公共用例库计划--个人版（六）典型Bug页面设计与开发

公共用例库计划--个人版（六）典型Bug页面设计与开发

1、任务概述 本次计划的核心任务是开发一个&#xff0c;个人版的公共用例库&#xff0c;旨在将各系统和各类测试场景下的通用、基础以及关键功能的测试用例进行系统性地归纳整理&#xff0c;并以提高用例的复用率为目标&#xff0c;力求最大限度地减少重复劳动&#xff0c;提升…
阅读更多...
数据结构-内部排序

数据结构-内部排序

简介 排序&#xff08;Sorting&#xff09;&#xff1a;将一个数据元素&#xff08;或记录&#xff09;的任意序列&#xff0c;重新排列成一个按关键字有序的序列 排序算法分为内部排序和外部排序 内部排序&#xff1a;在排序期间数据对象全部存放在内存的排序 外部排序&am…
阅读更多...
【c++】取地址及const取地址操作符重载

【c++】取地址及const取地址操作符重载

1.const成员 将const修饰的“成员函数”称之为const成员函数&#xff0c;const修饰类成员函数&#xff0c;实际修饰该成员函数隐含的this指针&#xff0c;表明在该成员函数中不能对类的任何成员进行修改 我们来看看下面的代码 class Date { public:Date(int year, int month,…
阅读更多...
2024年美赛数学建模C题思路分析 - 网球的动量

2024年美赛数学建模C题思路分析 - 网球的动量

# 1 赛题 问题C&#xff1a;网球的动量 在2023年温布尔登绅士队的决赛中&#xff0c;20岁的西班牙新星卡洛斯阿尔卡拉兹击败了36岁的诺瓦克德约科维奇。这是德约科维奇自2013年以来首次在温布尔登公开赛失利&#xff0c;并结束了他在大满贯赛事中历史上最伟大的球员之一的非凡…
阅读更多...
2024年美赛数学建模思路 - 案例：退火算法

2024年美赛数学建模思路 - 案例：退火算法

文章目录 1 退火算法原理1.1 物理背景1.2 背后的数学模型 2 退火算法实现2.1 算法流程2.2算法实现 建模资料 ## 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 退火算法原理 1.1 物理背景 在热力学上&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023