阿德的小窝

简介和背景什么是 WebAssembly？WebAssembly 是一种新的编码方式，可以在现代的网络浏览器中运行 － 它是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，并为诸如 C / C ++等语言提供一个编译目标，以便它们可以在 Web 上运行。它也被设计为可以与 JavaScript 共存，允许两者一起工作。 Wasm 与 JavaScript 的比较 Webassembly Javascript 它是由W3C、Mozilla、微软、谷歌和苹果开发的。 而它是由Netscape开发的。 Webassembly允许在浏览器上执行用c或c++编写的应用程序，它提供了一个虚拟机，在Javascript的环境中运行。 而它不是为支持本地应用程序而设计的，但它不是为面向基础设施而设计的，以同意其对象。 在网络浏览器中，它的加载时间较快，因为它只需要加载已经编译好的文件。 而加载JavaScript则比webassembly慢，因为浏览器需要加载所有叙述性的”.js “文件。 webassembly的代码执行比Javascript快(3 ...

开篇在前端开发中，样式表（CSS）扮演着至关重要的角色，它定义了网页的外观和布局。然而，管理庞大的 CSS 代码库往往变得复杂而困难。为了解决这个问题，一种被称为 “CSS 原子化” 的技术应运而生。CSS 原子化通过将样式拆分为独立的、可复用的类名，提供了一种高度可定制且易于维护的方式来构建网页样式。本文将深入探讨 CSS 原子化的概念，并展示如何利用它提高前端开发效率。 什么是 CSS 原子化（Atomic CSS）？CSS 原子化是一种将样式拆分成小块、原子级别的类名，并通过组合这些类名来构建网页样式的方法。每个类名只包含一个样式属性及其对应的值。通过在 HTML 元素上添加这些类名，可以实现对样式的精确控制。 代码示例：假设我们有一个简单的按钮组件，需要定制其颜色、边框和边距。传统的方法是为每个样式属性创建一个类名，然后将它们应用于按钮元素。使用 CSS 原子化，我们可以将每个样式属性拆分为独立的类名，并根据需要组合它们。下面是一个示例： 123<button class="btn bg-blue border-red p-2">Click me ...

看完了reactive的代码后， 在看来看ref就会发现根本不是一个量级，在看源代码以前，我以为就是把非引用的数据，报一层对象直接调用reactive的，但是却不是这个样子。下面来看一下代码吧； 入口文件1234567/** * @info 入参就一个数据或者可以不传数据*/export function ref(value?: unknown) { return createRef(value, false)} 可以看出，只是调用createRef,传入当前值和一个false，这个false是做什么的呢？继续看 createRef都在代码里了 1234567891011121314// 老规矩判断有没有内部的标记来判断是不是已经是ref了export function isRef(r: any): r is Ref { return !!(r && r.__v_isRef === true)}// 刚刚boolean是 shallow,代表是不是只监听最外层数据变化function createRef(rawValue: u ...

effect 为 reactive 的核心功能实现，它接收数据变化后的执行函数，官方称为副作用函数 ReactiveEffect 称为副作用对象 effect我个人认为不可以直接单独说，它与另外一个类息息相关，你中有我，我中有你，它就是-dep 首先我们先看下他们的关系 ReactiveEffect 和 Dep关系与类型定义代码是他们的TS类型定义代码 123456789101112131415161718192021222324252627282930313233// 首先看Dep的定义// 它是一个Set,内部元素是 ReactiveEffect 类型，同时还有w和n两个属性// & 表示类型合并export type Dep = Set<ReactiveEffect> & TrackedMarkers/** * wasTracked and newTracked maintain the status for several levels of effect * tracking recursion. One bit per level is used ...

从上一篇文字中，已经知道主要的reactive处理响应式通过apiproxy来实现，但是具体后续的逻辑是在proxy的各个钩子函数上实现，这篇主要看baseHandlers.ts文件，它主要是处理数据类型是Object和Array的数据。一切都在代码中，开工。 在阅读reactive.ts时，已经知道不同的API调用createReactiveObject函数时传入不同的Handlers,这里先看一下不同的Handlers的具体代码，在查看公共代码 mutableHandlers12345678export const mutableHandlers: ProxyHandler<object> = { get, set, deleteProperty, has, ownKeys} mutableHandlers最普通，它直接调用公共实现的各个方法，下面具体看下每个方法的实现 deleteProperty123456789101112function deleteProperty(target: object, key: string | sy ...

vue 响应主要实现逻辑的代码在文件夹packages/reactivity中代码文件包含如下： 1234567891011121314.├── baseHandlers.ts├── collectionHandlers.ts├── computed.ts├── deferredComputed.ts├── dep.ts├── effect.ts├── effectScope.ts├── index.ts // 导出所有API的文件├── operations.ts├── reactive.ts├── ref.ts└── warning.ts 整体流程图： 图片来源地址：Vue3 One Piece 这篇将看一下reactive.ts内部实现了哪些方法 reactiveVue3中响应数据核心是 reactive ， reactive 中的实现是由 proxy 加 effect 组合，先来看一下 reactive 方法的定义 123456789101112131415161718192021222324252627282930313233343536373839404142434445 ...

vue createApp的使用：123456789const HelloVueApp = { data() { return { message: 'Hello Vue!' } }}Vue.createApp(HelloVueApp).mount('#app') createApp 做了哪些工作 调用 ensureRenderer函数，创建基本实例和初始化基础的组件数据 重写了mount函数，寻找并挂载到指定的DOM元素上 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354const createApp = ((...args) => { // 重点看下 ensureRenderer const app = ensureRenderer().createApp(...args) if (_ ...

uni-app 是什么uni-app是一套可以适用多端的开源框架，一套代码可以同时生成ios，Android，H5，微信小程序，支付宝小程序，百度小程序等。 uni-app 优势/劣势优点 一套代码多端复用 uni-app使用H5技术开发，学习成本低 缺点 由于适应多端。某些兼容性问题无法快速定位解决 创建项目命令行 搭建NODEJS环境 全局安装vue-cli 使用vue-cli 创建项目 123vue create -p dcloudio/uni-preset-vue my-project 选择对应的模版 HBuilderX可视化操作 HBuilderX 更加的简洁，但是无法实现自动化打包。 编码uni-app的代码风格和API默认是向微信小程序对齐。默认实现了所有的微信小程序支持的API 编码HTML标签不可以使用，向微信小程序看起。向下面几个例子： div => view span => text img => image 布局方式 只推荐使用flex布局。 比如nvue、快应用只支持flex布局 ...

Docker 是什么 容器化技术 沙箱环境 开源 虚拟机 它是 dotCloud 公司内部的项目，在 2013 年 3 月进行了开源。开源后受到了大家的喜爱，以及在开源社区的帮助下，快速迭代完善。目前来说已经是比较主流的工程化技术同时 dotCloud 公司看到它这么火，在 2013 年年底公司改名为 docker 实现的基本原理是技术 linux 内部的容器化技术，对进程进行封装隔离，属于操作系统层面的虚拟化技术。由于隔离的进程独立于宿主和其它的隔离的进程，因此也称其为容器。 Docker 它的优势传统虚拟机技术是虚拟出一套硬件后，在其上运行一个完整操作系统，在该系统上再运行所需应用进程；而容器内的应用进程直接运行于宿主的内核，容器内没有自己的内核，而且也没有进行硬件虚拟。因此容器要比传统虚拟机更为轻便。 更高效的利用系统资源由于容器不需要进行硬件虚拟以及运行完整操作系统等额外开销，Docker 对系统资源的利用率更高。无论是应用执行速度、内存损耗或者文件存储速度，都要比传统虚拟机技术更高效。因此，相比虚拟机技术，一个相同配置的主机，往往可以运行更多数量的应用。 更快速的启动时 ...