获得徽章 16
#每天一个知识点# npm 模块安装机制和实现原理
安装机制：查询node_modules目录中是否存在指定模块，存在不重新安装；不存在向registry查询模块压缩包网址，下载压缩包存放在根目录下的.npm目录里，解压压缩包到当前目录的node_modules目录
实现原理：
1. 执行工程自身preinstall
2. 确定首层依赖模块：dependencies 和 devDependencies 属性中直接指定的模块
3. 获取模块：获取模块信息、模块实体、查找该模块依赖
4. 模块扁平化：遍历所有节点，逐个将模块放在根节点下，如果发现重复模块则丢弃
5. 安装模块：更新 node_modules目录，执行模块中的生命周期函数
6.执行工程自身生命周期
安装机制：查询node_modules目录中是否存在指定模块，存在不重新安装；不存在向registry查询模块压缩包网址，下载压缩包存放在根目录下的.npm目录里，解压压缩包到当前目录的node_modules目录
实现原理：
1. 执行工程自身preinstall
2. 确定首层依赖模块：dependencies 和 devDependencies 属性中直接指定的模块
3. 获取模块：获取模块信息、模块实体、查找该模块依赖
4. 模块扁平化：遍历所有节点，逐个将模块放在根节点下，如果发现重复模块则丢弃
5. 安装模块：更新 node_modules目录，执行模块中的生命周期函数
6.执行工程自身生命周期
展开
评论
3
#每天一个知识点# React 懒加载的实现原理主要基于 ES6 中的 import() 动态导入语法和 React 中 Suspense 组件的机制。当使用 React.lazy 导入一个组件时，实际上该组件会作为只包含该组件的缓存模块进行封装。只有在该组件被渲染并且所依赖的模块已经完成下载，才会真正地引用和加载该组件，否则会出现尚未准备好的状态并等待模块下载完成。此时就可以使用 Suspense 组件和 fallback 属性来显示一个或多个组件在数据装载完成之前显示的内容。当组件和它所依赖的所有组件加载完成后，React 会自动取消注释并显示该组件及其所依赖的组件。
展开
评论
1
赞了这篇文章
赞了这篇文章
#每天一个知识点# 常见的CSS元素关系
父子关系：使用空格分隔父元素和子元素。例如，div p 表示选择 div 元素内的所有 p 元素
直接子元素关系：使用大于号 > 分隔父元素和直接子元素。例如，ul > li 表示选择 ul 元素的直接子元素 li
兄弟关系：使用波浪号 ~ 分隔两个兄弟元素。例如，h1 ~ p 表示选择紧接在 h1 元素后面的所有 p 元素
相邻兄弟关系：使用加号 + 分隔两个相邻的兄弟元素。例如，h1 + p 表示选择紧接在 h1 元素后面的第一个 p 元素
元素选择器：使用标签名选择元素。例如，div 表示选择所有的 div 元素
类选择器：使用类名选择元素。例如，.red 表示选择所有具有 red 类名的元素
ID选择器：使用ID属性选择元素。例如，#myElement 表示选择具有 myElement ID的元素
属性选择器：根据元素的属性值来选择元素。例如，[type="text"] 表示选择所有 type 属性值为 "text" 的元素
父子关系：使用空格分隔父元素和子元素。例如，div p 表示选择 div 元素内的所有 p 元素
直接子元素关系：使用大于号 > 分隔父元素和直接子元素。例如，ul > li 表示选择 ul 元素的直接子元素 li
兄弟关系：使用波浪号 ~ 分隔两个兄弟元素。例如，h1 ~ p 表示选择紧接在 h1 元素后面的所有 p 元素
相邻兄弟关系：使用加号 + 分隔两个相邻的兄弟元素。例如，h1 + p 表示选择紧接在 h1 元素后面的第一个 p 元素
元素选择器：使用标签名选择元素。例如，div 表示选择所有的 div 元素
类选择器：使用类名选择元素。例如，.red 表示选择所有具有 red 类名的元素
ID选择器：使用ID属性选择元素。例如，#myElement 表示选择具有 myElement ID的元素
属性选择器：根据元素的属性值来选择元素。例如，[type="text"] 表示选择所有 type 属性值为 "text" 的元素
展开
评论
点赞