Node - LINNIL

LINNIL

Node

学习笔记

AST 抽象语法树

什么是 AST Abstract Syntax Tree（AST，抽象语法树）是一种用于表示程序源代码的抽象语法结构的树形数据结构。每个节点（Node）都表示源代码中的一个语法构造（Syntax Construct），例如表达式、语句、操作符、函数、变量等。AST 通过去除代码中的不必要的语法细节（如括号、逗号、空格和注释），提供了一种更高层次的代码表示形式，使编译器或解释器可以更容易地进行分析、优化和代码生成。在前端开发过程中，其实有很多工具都需要依赖于AST抽象语法树，比如：ESLint、Babel、Prettier等等。当我们使用 Vue.js 编写 template 时， template 转化成 render function 的过程，其实就是 AST 的转换过程，AST 是帮助程序理解代码的重要工具。 AST 的结构

CSS 居中元素

开发过程中居中对齐是最常见最基础的需求。根据具体情况（元素类型，父容器属性等），有很多方式可以实现居中。写下这篇笔记的原因是 2024 CSS 终于可以通过 align-content 属性实现垂直居中，顺便巩固其他的居中方式吧。 <div class="parent"> <div class="child">居中元素</div> </div> 使用 flex 布局实现居中 flex 弹性布局时最现代化，最简洁的布局方式之一，适用于大部分的场景。 .parent { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ height:

Javascript 中的作用域

Javascript 中的作用域

基本概念作用域（Scope）是编程中的一个基本概念，它指的是变量和函数在代码中的可访问范围。简单来说就是程序在哪个部分可以访问这个变量或函数。作用域可以帮助控制和管理变量的生命周期，避免命名冲突。作用域的类型在 Javascript 中有三种作用域： 1. 全局作用域（Global Scope）：全局作用域指的是在代码的最外层定义的作用域。全局作用域中的变量可以在整个代码中访问。 2. 函数作用域（Function Scope）：函数作用域是指在函数内部定义的变量只能在该函数内部访问。函数内部的变量对外部不可见。 3. 块级作用域（Block Scope）：块级作用域指的是在代码块（由 {} 包围的部分）内部定义的变量只能在该块内部访问。块级作用域是在 ES6 引入的，使用 let 和 const 声明的变量具有块级作用域。静态作用域与动态作用域静态作用域（Lexical Scope） * 静态作用域是在编写代码时确定的作用域。这意味着变量的作用范围由其在源代码中的位置决定，而不是在程序运行时的调用上下文决定。JavaScript、P

节流/防抖

什么时候需要防抖/节流在正常开发过程中，特别是在处理用户输入或窗口调整大小等频繁触发的事件时，如果事件的回调函数过于复杂或者是 ajax 请求，在高频调用下难免会出现卡顿。为了限制函数执行频率，一般有两种解决方案： 1. debounce 防抖 2. throttle 节流防抖的原理：在一定时间内函数只调用一次，当防抖函数被触发时，它不会立即执行目标函数，而是设置一个定时器。若在定时器时间到期前再次触发，则取消之前的定时器并重新设置定时器。只有当一段时间内没有新的触发，目标函数才会执行。从简单的例子入手： <!DOCTYPE html> <html> <head> <title>Debounce Example</title> <meta charset="UTF-8"

原型链

总结：用于在现有对象的基础上构建新类型的对象。类似于类的语言中的继承。对象实例上的原型可通过 Object.getPrototypeOf(object) 或 proto 属性获得，而构造函数上的原型可以通过 Object.prototype 获得。虽然 Object.prototype 是原型链的最顶层，但它本身也有一个原型对象 => null 。所以原型链的顶端实际上是 null 。总的来说，JavaScript 中的原型链顶端是 null，而原型链的最顶层对象是 Object.prototype。构造函数创建对象 function Fruit() {} var fruit = new Fruit(); fruit.name = 'Apple' console.log(fruit.name) // Apple Fruit 就是构造函数，fruit

React-状态管理

MVC 和 MVVM 模型 1. MVC：Model-View-Controller，模型-视图-控制器。 2. MVVM：Model-View-ViewModel，模型-视图-视图模型。视图模型负责将模型的数据转换为试图可以使用的格式，并且负责处理试图交互逻辑。 MVC 和 MVVM 都是组织和管理应用程序代码结构的模式，具体实现和使用上有一些不同。MVC 更关注控制器和模型的交互，MVVM 更关注视图模型和试图的交互。状态管理的概念状态管理一般处于 MVC 中的模型层，MVVM 中的视图模型层。 1. 状态：指的是应用程序中的数据或状态信息，可以是用户信息、界面状态、网络请求状态等等。在状态管理中，状态通常被集中存储和管理，以确保整个应用程序的一致性和可维护性。 2. 管理：指的是对状态的管理和控制。状态管理工具通常提供了一套 API 或机制，用于更新、访问和监听状态的变化。这些工具还可以帮助开发人员组织和结构化状态，以便更容易地维护和调试应用程序。 3. 通信：

浏览器运行机制

进程和线程进程和线程是操作系统中管理和执行任务的基本单位。它们有不同的概念和作用，理解它们之间的区别对于编程和系统设计非常重要。 * 进程（process）：程序的一次执行过程，是程序在执行过程中操作系统分配资源和管理任务的基本单位；每个进程都拥有自己独立的内存空间和系统资源，进程之间无法直接访问彼此的内存，这也意味着一个进程的崩溃不会直接影响到其他进程。 * 线程（thread）是 CPU 调度和分派的基本单位，它可与同属一个进程的其他的线程共享进程所拥有的全部资源，但彼此独立执行。浏览器的多进程浏览器可以视作一个复杂的应用程序。当用户启动浏览器时，操作系统会为该应用程序分配一个进程。这个进程启动后，CPU 会为其分配相应的内存空间，供其运行和存储数据。进程启动后，便可以利用线程来执行特定任务，从而实现应用程序的功能。在一个应用程序中，单一进程可能无法满足所有的功能需求，因此它会创建新的进程来处理其他任务。这些新创建的进程与原有进程是相互独立的，它们各自拥有独立的内存空间，无法直接共享数据。这种隔离增强了应用程序的安全性和稳定性。尽管这些进程不

Remix-路由驱动的前端开发模型

Remix-路由驱动的前端开发模型

Remix 是什么 Remix 是一个面向 React 开发者的现代化全栈框架，它提供了一种新的方法来构建 web 应用程序。Remix 的核心理念是将前端和后端代码统一在一个项目中，并且通过路由和路由参数来管理页面和数据的加载。 Remix 的特点 1. 允许或者说是鼓励全栈框架，将前后端代码整合到一个项目。 2. 路由和路由参数来管理页面和数据的加载，使得页面之间的跳转和数据传递更简单直观。 3. 提供了多种钩子。 4. 内置缓存。创建 Remix 项目以下内容均基于 v2 版本，旧版本内容不会提及。更多信息可以查阅官方文档。创建一个简单的 Remix 模板项目 npx create-remix@latest --template remix-run/indie-stack blog-tutorial // remix.config.js module.exports = { future: { v2_

GraphQL 一种更灵活的 API 解决方案

GraphQL 一种更灵活的 API 解决方案

简单介绍 GraphQL 是一种用于 API 的查询语言和运行时环境，由 Facebook 开发并于2015年公开发布。它旨在提供一个更高效、强大且灵活的替代方案，用于客户端和服务器之间的数据交互。与传统的 RESTful API 不同，精确的数据查询，允许仅获取所需的数据等都是 GraphQL 的优势。 GraphQL 的优势 GraphQL 的优势主要在于精确的数据查询，允许仅获取所需的数据，从而节省带宽和资源，这将通过一个例子来理解。 GraphQL 服务是通过定义类型和字段，为每种类型上的每个字段提供函数来创建的。查询用户的 GraphQL 服务可能长这样： type Query { me: User } type User { id: ID! name: String! } GraphQL 服务在运行时主要由两部分组成，Query Language 和 Engine，后端定义了类型和字段，客户端一样需要通过

事件循环 Event Loop

事件循环 Event Loop

基本概念事件循环（Event Loop）是 JavaScript 运行时环境中负责管理异步任务执行的一种机制。在浏览器中，事件循环是由浏览器的 JavaScript 引擎（如 V8 引擎）负责实现；在 Node.js 等环境中，也有自己的事件循环实现。简单来说，事件循环就是轮询任务队列，执行任务，休眠的无限循环。事件循环的意义原因很简单，JavaScript 是单线程语言，单线程意味着同一时间只能执行一个任务，为了能有效处理异步任务，而不会阻塞主线程，就需要并发处理，而事件循环就是并发的一种形式。这对于交互式的 Web 应用和处理网络请求等操作至关重要。任务队列任务队列是事件循环的核心组成部分，用于管理和调度异步任务的执行顺序。当任务到来时，JavaScript 引擎可能处于忙碌状态，那么任务会被排入队列里。队列中的任务遵循 “先进先出” 的原则。当浏览器引擎执行完 script 后，它会处理

Webpack 学习

1. 简介 1.1. Webpack 是什么？官方解释：本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。 Webpack 是一个模块打包工具(module bundler)，因为平常多用来对前端工程打包，所以也是一个前端构建工具。其最主要的功能就是模块打包。模块打包，通俗地说就是：找出模块之间的依赖关系，按照一定的规则把这些模块组织合并为一个 JS 文件。 Webpack 认为一切都是模块，JS 文件、CSS 文件、jpg/png 图片等等都是模块。Webpack 会把所有的这些模块都合并为一个 JS 文件，这是它最本质的工作。