Ella2016-CSDN博客

原创前端打包工具

它采用静态分析的方式，实现了更高效的代码打包，生成的输出文件更小、更快。Parcel 是一个零配置的前端打包工具，它可以自动处理项目中的各种文件类型，包括 JavaScript、CSS、HTML、图片等。Parcel 具有快速的打包速度和简单易用的特点，对于小型项目或初学者来说是一个很好的选择。在现代前端开发中，打包工具是必不可少的工具之一。本文将介绍几个常见的前端打包工具，帮助你了解它们的优势和适用场景，以便选择适合你的项目的利器。以上是几个常见的前端打包工具的介绍，每个工具都有其独特的优点和适用场景。

2023-05-29 09:53:00 2173 1

原创包管理工器 npm、Yarn和pnpm

决于你的项目需求和个人喜好。通过包管理器，开发人员可以轻松地解决依赖关系，确保项目的依赖项能够正确地安装和配置。依赖项的持久化: 包管理器会在项目中维护一个清晰的依赖项清单。这样，当其他开发人员加入项目或在不同的开发环境中进行工作时，他们可以轻松地安装所需的依赖项，并保持一致的开发环境。依赖解析和安装: 包管理器负责解析项目的依赖关系，并自动安装所需的软件包。它会检查依赖项的版本要求，解决冲突，并确保每个依赖项都正确地安装到项目中。npm、Yarn和pnpm都是流行的包管理器，用于在项目中管理依赖项。

2023-05-23 16:07:57 206 1

原创 vue的组件复用：Mixins HOC Renderless

当我们使用 Vue 开发应用程序时，组件是构建用户界面的核心部分。在开发过程中，我们经常会遇到需要在多个组件之间共享逻辑或功能的情况。为了避免重复编写相似的代码，并实现组件的复用，Vue 提供了几种常用的组件复用技术，包括 Mixins（混入）、HOC（Higher-Order Component，高阶组件）和 Renderless Components（无渲染组件）。

2023-05-21 14:22:41 400 1

原创 vue2 对数组、对象的响应式处理

需要注意的是，对于新增属性，Vue不能自动响应式地更新视图，因为 Vue 无法在运行时动态为对象添加 getter 和 setter 方法。如果需要动态添加属性，可以使用 Vue.set 或者 this.$set 方法，将新属性添加到对象中，并通知 Vue 进行响应式更新。在 Vue 2 中，数组的响应式处理采用了重写数组原型对象的方式，以拦截数组方法的调用，并在调用后通知依赖更新。，这样数组的所有方法就会被重写了。总的来说，Vue 2 通过重写数组原型对象来实现数组的响应式处理，而对于对象则采用了。

2023-05-13 16:04:33 996

原创 JavaScript 引擎

JavaScript 引擎是一种解释和执行 JavaScript 代码的软件程序或程序集合。JavaScript 引擎通常嵌入在 Web 浏览器或 Node.js 这样的服务器环境中，并负责解析和编译 JavaScript 代码、优化执行效率、管理内存等任务。通常，它们会将 JavaScript 代码解析成抽象语法树（AST），然后对 AST 进行优化和编译，最终生成可执行的机器码或字节码。在执行 JavaScript 代码时，引擎会实时解释和执行代码，并负责管理内存、垃圾回收等任务。

2023-05-13 11:54:57 239

原创 Vue2的响应式数据绑定的实现步骤

数据劫持：在Observer中，对每个属性使用Object.defineProperty()方法进行劫持，通过get()方法监听属性的读取事件，通过set()方法监听属性的修改事件。模板编译：在Compile中，对Vue模板进行编译，将模板中的指令（如v-model、v-bind等）转换成对应的更新函数，创建Watcher实例并将其添加到Dep的订阅者列表中。收集依赖：在Watcher中，当读取响应式数据时，会通过Dep进行依赖收集，将Watcher添加到Dep的订阅者列表中。

2023-05-12 15:43:04 336 1

原创 Object.defineProperty() 、属性访问器、vue2响应式数据绑定三者的关系

当我们在Vue组件中声明一个数据时，Vue会将该数据对象中的所有属性转换为响应式属性，并且每个响应式属性都会被设置为访问器属性，以便在属性值变化时可以及时地通知到Vue进行更新。通过使用属性访问器，我们可以在读取或设置属性时进行一些逻辑操作，比如数据类型验证、数据格式化、数据缓存等。总之，属性访问器和Object.defineProperty()是密不可分的，Object.defineProperty()可以说是属性访问器的实现方式之一，而属性访问器又是Vue.js响应式数据绑定的实现基础。

2023-05-12 15:34:10 75 1

原创 JavaScript 的 Proxies

通过 Proxy 对象，开发者可以在对象的属性访问、方法调用以及其他操作上拦截并处理，从而创建更加灵活和强大的 API，并实现数据验证、缓存等功能。创建 Proxy 对象需要使用 Proxy 构造函数，并传入两个参数：要代理的目标对象和一个处理器对象，用于定义对象操作的自定义逻辑。在这个例子中，处理器对象的 get 方法会在访问代理对象的属性时被调用。get 方法接收两个参数：目标对象和访问的属性名。因此，在使用 Proxies 时应谨慎，仅在必要时使用，并测试在特定用例中 Proxies 的性能。

2023-05-12 14:15:52 112 1

原创 avaScript的属性访问器

属性访问器是 JavaScript 中一个有用的功能，您可以在对象上定义它们，以便控制属性的访问和值的设置。属性访问器有两种类型：getter 和 setter。这使得您可以在属性读取或写入时执行自定义代码，例如验证属性值或执行一些额外的逻辑。属性访问器是 JavaScript 中一种特殊类型的属性，它们允许您在读取或写入属性时执行自定义逻辑。这使得您可以控制属性的读取和写入，并在其值被访问时执行一些自定义代码。使用属性访问器的好处是，它使您能够控制属性的读取和写入，并在读取或写入时执行一些自定义代码。

2023-05-11 20:06:27 94 1

Ella2016的博客