妧知
获得徽章 1
#青训营笔记创作活动#
2月24日打卡day46
今日学习：
前端的一整套东西覆盖也非常广泛，从开发、规范、测试、lint、构建、部署、监控、集成、微服务等等链路都隶属于前端工程化。前端工程化的内容：各种工具和技术前端工程化的作用：通过使用工具，提升开发效率
2月24日打卡day46
今日学习：
前端的一整套东西覆盖也非常广泛，从开发、规范、测试、lint、构建、部署、监控、集成、微服务等等链路都隶属于前端工程化。前端工程化的内容：各种工具和技术前端工程化的作用：通过使用工具，提升开发效率
展开
评论
点赞
#青训营笔记创作活动#
2月23日打卡day45
今日学习：
JSDoc是Javascript注释规范标准，Typescript出现之后，虽然JSDoc也一直在兼容TS，但无奈这2种语言一种是弱类型，一种是强类型，注释对它们的意义大相径庭，所以JSDoc并不适合TS使用。于是Typescript东家就联合了一些社区组织，推出了TS注释规范标准：TSDoc。TypeDoc以上一顿操作下来，感觉有些繁琐，有没有更简洁的方法一步到位生成API站点呢？有，比如：TypeDoc，它集成了API信息提取、文档生成、站点生成：官网：typedoc.org/TypeDoc也是TSDoc标准的参与者，TypeDoc可以完全兼容TSDoc标准，但比TSDoc更宽松，这意味着TypeDoc可以使用更多非标准的标签。TypeDoc默认提供了一套API站点的简洁主题，当然你也可以修改和定制。它供了两种途径：主题，主题会覆盖API文档的默认呈现方式插件，插件可以进行其他更改使用方法npminstalltypedoc配置typedoc.json执行命令：typedoc--outapisrc/index.ts生成API站点
2月23日打卡day45
今日学习：
JSDoc是Javascript注释规范标准，Typescript出现之后，虽然JSDoc也一直在兼容TS，但无奈这2种语言一种是弱类型，一种是强类型，注释对它们的意义大相径庭，所以JSDoc并不适合TS使用。于是Typescript东家就联合了一些社区组织，推出了TS注释规范标准：TSDoc。TypeDoc以上一顿操作下来，感觉有些繁琐，有没有更简洁的方法一步到位生成API站点呢？有，比如：TypeDoc，它集成了API信息提取、文档生成、站点生成：官网：typedoc.org/TypeDoc也是TSDoc标准的参与者，TypeDoc可以完全兼容TSDoc标准，但比TSDoc更宽松，这意味着TypeDoc可以使用更多非标准的标签。TypeDoc默认提供了一套API站点的简洁主题，当然你也可以修改和定制。它供了两种途径：主题，主题会覆盖API文档的默认呈现方式插件，插件可以进行其他更改使用方法npminstalltypedoc配置typedoc.json执行命令：typedoc--outapisrc/index.ts生成API站点
展开
评论
点赞
#青训营笔记创作活动#
2月22日打卡day44
今日学习：
Git优越的版本管理能力，及广被使用的github、gitlab开源平台，Git成为了程序员必须掌握了一个工具。
Git分为4个工作区：
工作区：指在本地仓库中的全部代码区域；
暂存区：指在本地仓库中通过gitadd后的代码区域；本地仓库：指在本地仓库中的gitcommit后的代码区域；远程仓库：远程仓库指的托管代码的服务器。
常用指令：
gitclone命令用于将存储库克隆到本地。
gitinit命令用于在目录中创建新的Git仓库。
gitremote用于管理跟踪远程仓库。
gitcheckout命令用于切换分支。
gitbranch命令用于查看、创建、删除分支。
gittag用于创建、删除、查看标签。
gitadd命令用于将本地文件添加到暂存区。
gitcommit命令用于将暂存区内容添加到本地仓库中。gitpush命令用于将本地分支推送到远程仓库。
gitpull命令用于从远程仓库拉取代码并合并到本地当前分支。
gitfetch命令用于从远程获取代码库。
gitcherry-pick命令用于获取指定的commit，可以将分支a上的commit1，复制到分支b上。
gitmerge命令用于分支合并，将其他分支的内容合并到当前分支中。
gitrebase用于分支变基。
gitreset命令用于回退版本，可以指定退回某一次提交的版本。
gitrevert指令用于回滚提交，可以回滚某一次提交记录。
gitreflog记录了所有的commit操作记录，便于错误操作后找回。
gitrm用于从git仓库删除指定文件或目录。
gitlog命令用于查看gitcommit记录。
2月22日打卡day44
今日学习：
Git优越的版本管理能力，及广被使用的github、gitlab开源平台，Git成为了程序员必须掌握了一个工具。
Git分为4个工作区：
工作区：指在本地仓库中的全部代码区域；
暂存区：指在本地仓库中通过gitadd后的代码区域；本地仓库：指在本地仓库中的gitcommit后的代码区域；远程仓库：远程仓库指的托管代码的服务器。
常用指令：
gitclone命令用于将存储库克隆到本地。
gitinit命令用于在目录中创建新的Git仓库。
gitremote用于管理跟踪远程仓库。
gitcheckout命令用于切换分支。
gitbranch命令用于查看、创建、删除分支。
gittag用于创建、删除、查看标签。
gitadd命令用于将本地文件添加到暂存区。
gitcommit命令用于将暂存区内容添加到本地仓库中。gitpush命令用于将本地分支推送到远程仓库。
gitpull命令用于从远程仓库拉取代码并合并到本地当前分支。
gitfetch命令用于从远程获取代码库。
gitcherry-pick命令用于获取指定的commit，可以将分支a上的commit1，复制到分支b上。
gitmerge命令用于分支合并，将其他分支的内容合并到当前分支中。
gitrebase用于分支变基。
gitreset命令用于回退版本，可以指定退回某一次提交的版本。
gitrevert指令用于回滚提交，可以回滚某一次提交记录。
gitreflog记录了所有的commit操作记录，便于错误操作后找回。
gitrm用于从git仓库删除指定文件或目录。
gitlog命令用于查看gitcommit记录。
展开
评论
点赞
#青训营笔记创作活动#
2月21日打卡day43
今日学习：
颜色选择器：直接通过设置input标签属性，就自带这个颜色选择功能。打字效果：纯CSS就能实现滑顶/触底效果：纯CSS就能实现顺滑切图：纯CSS就能实现
2月21日打卡day43
今日学习：
颜色选择器：直接通过设置input标签属性，就自带这个颜色选择功能。打字效果：纯CSS就能实现滑顶/触底效果：纯CSS就能实现顺滑切图：纯CSS就能实现
展开
评论
点赞
#青训营笔记创作活动#
2月20日打卡day42
今日学习：
schema结构,目的是为了更好的识别组件和派发属性。BaseBoard就是我们的画布组件,我们使用这个组件可以在页面上创建任意数量的画布msg用来在外部控制画布的名称onMouseChange用来将内部鼠标监听的事件传到外部,让外部可以拿到内部是事件运行时
2月20日打卡day42
今日学习：
schema结构,目的是为了更好的识别组件和派发属性。BaseBoard就是我们的画布组件,我们使用这个组件可以在页面上创建任意数量的画布msg用来在外部控制画布的名称onMouseChange用来将内部鼠标监听的事件传到外部,让外部可以拿到内部是事件运行时
展开
评论
点赞
#青训营笔记创作活动#
2月19日打卡day41
今日学习：
Block块是我们游戏中最重要的一个部分，我们现在来创建一下我们的Block块,这里我是使用了一个Class类来声明的，为什么要使用Class而不是直接直接使用createElement渲染Dom块,我在这里说明一下，因为我们后续需要不断地判断Blcok块高亮，我这里是用的暴力检测法，选择的方法是重新渲染Dom，使用Class类，保存他的constaCs=newXXX()实例化结果，可以造成一种映射关系，aCs存储着生成dom的参数，这样我们需要修改页面上的dom的时候，不需要通过获取dom的方式来获取它的参数，而是直接使用aCs映射的参数即可。
2月19日打卡day41
今日学习：
Block块是我们游戏中最重要的一个部分，我们现在来创建一下我们的Block块,这里我是使用了一个Class类来声明的，为什么要使用Class而不是直接直接使用createElement渲染Dom块,我在这里说明一下，因为我们后续需要不断地判断Blcok块高亮，我这里是用的暴力检测法，选择的方法是重新渲染Dom，使用Class类，保存他的constaCs=newXXX()实例化结果，可以造成一种映射关系，aCs存储着生成dom的参数，这样我们需要修改页面上的dom的时候，不需要通过获取dom的方式来获取它的参数，而是直接使用aCs映射的参数即可。
展开
评论
点赞
#青训营笔记创作活动#
2月18日打卡day40
今日学习：
固定窗口计数：用redis的话，由于有过期机制，其实设置1min过期，就可以实现计数器重置的效果了redis设置一个名为qps的key，val用来计数，1min过期即可滑动窗口计数：用ZSet来实现，能按区间查询出【当前访问时间-1min，当前访问时间】这段区间的计数
2月18日打卡day40
今日学习：
固定窗口计数：用redis的话，由于有过期机制，其实设置1min过期，就可以实现计数器重置的效果了redis设置一个名为qps的key，val用来计数，1min过期即可滑动窗口计数：用ZSet来实现，能按区间查询出【当前访问时间-1min，当前访问时间】这段区间的计数
展开
评论
点赞
#青训营笔记创作活动#
2月16日打卡day39
今日学习：
background-clip：background-clip设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。而background-clip:text可以实现背景被裁剪成文字的前景色。使用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。使用mix-blend-mode实现混合模式。
2月16日打卡day39
今日学习：
background-clip：background-clip设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。而background-clip:text可以实现背景被裁剪成文字的前景色。使用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。使用mix-blend-mode实现混合模式。
展开
评论
点赞
#青训营笔记创作活动#
2月15日打卡day38
今日学习：
使用ESLint的ReactHooks插件尽管React官方文档给出了两条Hook规则，但无论是新手还是经验丰富的React开发人员，都常常会忘记遵循ReactHooks的规则。因此，React团队开发了一个名为eslint-plugin-react-hooks的ESLint插件，以帮助开发人员在自己的项目中以正确的方式编写ReactHooks。这个插件能够帮助我们在尝试运行应用程序之前捕获并修复Hooks错误，所以最好将此插件添加到我们有使用ReactHooks的项目中。需要注意的是，eslint-plugin-react-hooks插件约定，当在以大驼峰法命名的函数（视作一个组件）或在useSomething函数（视作一个自定义Hook）中调用Hooks时，lint规则才能正常地工作。
2月15日打卡day38
今日学习：
使用ESLint的ReactHooks插件尽管React官方文档给出了两条Hook规则，但无论是新手还是经验丰富的React开发人员，都常常会忘记遵循ReactHooks的规则。因此，React团队开发了一个名为eslint-plugin-react-hooks的ESLint插件，以帮助开发人员在自己的项目中以正确的方式编写ReactHooks。这个插件能够帮助我们在尝试运行应用程序之前捕获并修复Hooks错误，所以最好将此插件添加到我们有使用ReactHooks的项目中。需要注意的是，eslint-plugin-react-hooks插件约定，当在以大驼峰法命名的函数（视作一个组件）或在useSomething函数（视作一个自定义Hook）中调用Hooks时，lint规则才能正常地工作。
展开
评论
点赞
#青训营笔记创作活动#
2月14日打卡day37
今日学习：
原生JS一步步实现完整的图片预览和查看功能：实现图片预览/查看的关键点在于CSS3中的transform变换，该属性应用于元素在2D或3D上的旋转，缩放，移动，倾斜等等变换，通过设置translate(x,y)即可偏移元素位置，设置scale即可缩放元素，当然你也可以只设置matrix来完成上述所有操作，这涉及到矩阵变换的知识，本文使用的均是CSS提供的语法糖进行变换操作。PC上的点击、移动，H5的手势操作，都离不开DOM事件监听。例如鼠标移动事件对应mousemove，移动端因为没有鼠标则对应touchmove，而本文将介绍如何仅通过指针事件来进行多端统一的事件监听。在监听事件中我们可以通过event对象获取各种属性，例如常用的offsetX、offsetY相对偏移量，clientX、clientY距离窗口的横坐标和纵坐标等。打开蒙层在开始前我们先准备一个图片列表，并绑定好点击事件，当点击图片时，通过document.createElement创建元素，然后把图片节点克隆进蒙层中。图片缩放（PC）在PC实现图片缩放相对是比较简单的，我们利用滚轮事件监听并改变scale值即可。重点是利用deltaY值的正负来判断滚轮是朝上还是朝下。移动查看由于缩放导致图像发生变化，我们自然地想到要靠移动来观察图片，此时体现在PC端的是按住鼠标拖拽，移动端则是手指点击滑动，而两者各自的事件监听显然并不共通，如以移动事件为例，PC端对应的是mousemove事件而移动端则是touchmove事件，这就意味着如果我们要做到兼容多端，就必须注册多个事件监听。
2月14日打卡day37
今日学习：
原生JS一步步实现完整的图片预览和查看功能：实现图片预览/查看的关键点在于CSS3中的transform变换，该属性应用于元素在2D或3D上的旋转，缩放，移动，倾斜等等变换，通过设置translate(x,y)即可偏移元素位置，设置scale即可缩放元素，当然你也可以只设置matrix来完成上述所有操作，这涉及到矩阵变换的知识，本文使用的均是CSS提供的语法糖进行变换操作。PC上的点击、移动，H5的手势操作，都离不开DOM事件监听。例如鼠标移动事件对应mousemove，移动端因为没有鼠标则对应touchmove，而本文将介绍如何仅通过指针事件来进行多端统一的事件监听。在监听事件中我们可以通过event对象获取各种属性，例如常用的offsetX、offsetY相对偏移量，clientX、clientY距离窗口的横坐标和纵坐标等。打开蒙层在开始前我们先准备一个图片列表，并绑定好点击事件，当点击图片时，通过document.createElement创建元素，然后把图片节点克隆进蒙层中。图片缩放（PC）在PC实现图片缩放相对是比较简单的，我们利用滚轮事件监听并改变scale值即可。重点是利用deltaY值的正负来判断滚轮是朝上还是朝下。移动查看由于缩放导致图像发生变化，我们自然地想到要靠移动来观察图片，此时体现在PC端的是按住鼠标拖拽，移动端则是手指点击滑动，而两者各自的事件监听显然并不共通，如以移动事件为例，PC端对应的是mousemove事件而移动端则是touchmove事件，这就意味着如果我们要做到兼容多端，就必须注册多个事件监听。
展开
评论
点赞
#青训营笔记创作活动#
2月13日打卡day36
今日学习：
在vue中key可以没有，没有也可以运行并且不会报错，但是建议加上key。另外，我们必须知道，vue中key运用的地方------配合v-for使用。key是vue中虚拟dom标记的唯一标识，通过这个key，diff算法能更加准确和快捷。不使用key的情况下，因为vue的就地更新会选择复用节点，之前的状态被保存，可能会产生一系列的bug。虚拟DOM结构就是一个对象而已，其中描述了每一层容器的特征。在beroreCreated执行的时候，DOM树并没有生成。diff算法只要数据源发生变化，就一定会触发watcher观察者函数（Object。defineProperty（））的回调函数，去驱动视图更新，(加_是为了表明这是vue自带的方法)
2月13日打卡day36
今日学习：
在vue中key可以没有，没有也可以运行并且不会报错，但是建议加上key。另外，我们必须知道，vue中key运用的地方------配合v-for使用。key是vue中虚拟dom标记的唯一标识，通过这个key，diff算法能更加准确和快捷。不使用key的情况下，因为vue的就地更新会选择复用节点，之前的状态被保存，可能会产生一系列的bug。虚拟DOM结构就是一个对象而已，其中描述了每一层容器的特征。在beroreCreated执行的时候，DOM树并没有生成。diff算法只要数据源发生变化，就一定会触发watcher观察者函数（Object。defineProperty（））的回调函数，去驱动视图更新，(加_是为了表明这是vue自带的方法)
展开
评论
点赞
#青训营笔记创作活动#
2月12日打卡day35
今日学习：
vue-tour是一个轻量级、简单且可自定义的Tour插件，配置也算比较简单清晰，但只适用于Vue2的项目，具体效果可以直接参考对应的前面链接对应的内容。driver.js是一个强大而轻量级的普通JavaScript引擎，可在整个页面上驱动用户的注意力，只有4kb左右的体积，并且没有外部依赖，不仅高度可定制，还可以支持所有主流浏览器。shepherd.js包含的API众多，大多场景都可以通过其对应的配置得到，缺点就是整体的包体积较大，并且配置也比较复杂，配置复杂的内容一般都需要进行二次封装，将可变和不可变的配置项进行抽离，具体效果可见其官方文档。intro.js是是一个开源的vanillaJavascript/CSS库，用于添加分步介绍或提示，大小在10kB左右，属于轻量级的且无外部依赖，详情可见官方文档。z-index+position+transition核心实现：高亮部分通过控制z-index的值，让目标元素展示在蒙层之上引导部分通过position:fixed实现定位效果，并通过动态修改left、top属性实现引导弹窗跟随目标移动过渡动画通过transition实现位置的平滑移动页面位置/内容发生变化时（如：resize、scroll事件），需要重新计算位置信息缺点：当目标元素的父元素position:fixed|absolute|sticky时，目标元素的z-index无法超过蒙版层（可参考shepherd.js的svg解决方案）
2月12日打卡day35
今日学习：
vue-tour是一个轻量级、简单且可自定义的Tour插件，配置也算比较简单清晰，但只适用于Vue2的项目，具体效果可以直接参考对应的前面链接对应的内容。driver.js是一个强大而轻量级的普通JavaScript引擎，可在整个页面上驱动用户的注意力，只有4kb左右的体积，并且没有外部依赖，不仅高度可定制，还可以支持所有主流浏览器。shepherd.js包含的API众多，大多场景都可以通过其对应的配置得到，缺点就是整体的包体积较大，并且配置也比较复杂，配置复杂的内容一般都需要进行二次封装，将可变和不可变的配置项进行抽离，具体效果可见其官方文档。intro.js是是一个开源的vanillaJavascript/CSS库，用于添加分步介绍或提示，大小在10kB左右，属于轻量级的且无外部依赖，详情可见官方文档。z-index+position+transition核心实现：高亮部分通过控制z-index的值，让目标元素展示在蒙层之上引导部分通过position:fixed实现定位效果，并通过动态修改left、top属性实现引导弹窗跟随目标移动过渡动画通过transition实现位置的平滑移动页面位置/内容发生变化时（如：resize、scroll事件），需要重新计算位置信息缺点：当目标元素的父元素position:fixed|absolute|sticky时，目标元素的z-index无法超过蒙版层（可参考shepherd.js的svg解决方案）
展开
评论
点赞
#青训营笔记创作活动#
2月11日打卡day34
今日学习：
短路运算Javascript的逻辑或||的短路运算有时候可以用来代替一些比较简单的ifelse逻辑或||的短路运算：若左边能转成true，返回左边式子的值，反之返回右边式子的值。switchcase，虽然它的可读性确实比elseif更高，但是它写起来比较麻烦。
2月11日打卡day34
今日学习：
短路运算Javascript的逻辑或||的短路运算有时候可以用来代替一些比较简单的ifelse逻辑或||的短路运算：若左边能转成true，返回左边式子的值，反之返回右边式子的值。switchcase，虽然它的可读性确实比elseif更高，但是它写起来比较麻烦。
展开
评论
点赞
#青训营笔记创作活动#
2月10日打卡day33
今日学习：
mock一个简单的登录接口
vite：创建和管理vue项目
pinia：状态管理
axios：网络请求
vite-plugin-mock：提供登录的mock接口pinia-plugin-persistedstate：状态持久化插件
Pinia的核心概念只剩下了：
store：状态仓库
state：状态，和vuex保持一致
getters：类似组件的计算属性，和vuex中的getters的保持一致
actions：和vuex中的actions保持一致，可以处理逻辑并修改state
2月10日打卡day33
今日学习：
mock一个简单的登录接口
vite：创建和管理vue项目
pinia：状态管理
axios：网络请求
vite-plugin-mock：提供登录的mock接口pinia-plugin-persistedstate：状态持久化插件
Pinia的核心概念只剩下了：
store：状态仓库
state：状态，和vuex保持一致
getters：类似组件的计算属性，和vuex中的getters的保持一致
actions：和vuex中的actions保持一致，可以处理逻辑并修改state
展开
评论
点赞
#青训营笔记创作活动#
2月9日打卡day32
今日学习：
docx的实现需要使用docx-preview插件。pdf的预览需要使用PDFJS这个插件,通过将文件流解析写到canvas上实现预览效果。
2月9日打卡day32
今日学习：
docx的实现需要使用docx-preview插件。pdf的预览需要使用PDFJS这个插件,通过将文件流解析写到canvas上实现预览效果。
展开
评论
点赞
#青训营笔记创作活动#
2月8日打卡day31
今日学习：
抽象语法树（AbstractSyntaxTree，AST）是源代码语法结构的一种抽象表示，它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。在代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全等等场景均有广泛的应用。
一个完整的编译器整体执行过程可以分为三个步骤：Parsing(解析过程)：这个过程要经词法分析、语法分析、构建AST（抽象语法树）一系列操作。
解析过程分为2个步骤：词法分析、语法分析；Transformation（转化过程）：这个过程就是将上一步解析后的内容，按照编译器指定的规则进行处理，形成一个新的表现形式。这个过程主要是改写AST（抽象语法树），或者根据当前AST（抽象语法树）生成一个新的AST（抽象语法树），这个过程可以是相同语言，或者可以直接将AST（抽象语法树）翻译为其他语言；CodeGeneration（代码生成）：将上一步处理好的内容转化为新的代码。
2月8日打卡day31
今日学习：
抽象语法树（AbstractSyntaxTree，AST）是源代码语法结构的一种抽象表示，它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。在代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全等等场景均有广泛的应用。
一个完整的编译器整体执行过程可以分为三个步骤：Parsing(解析过程)：这个过程要经词法分析、语法分析、构建AST（抽象语法树）一系列操作。
解析过程分为2个步骤：词法分析、语法分析；Transformation（转化过程）：这个过程就是将上一步解析后的内容，按照编译器指定的规则进行处理，形成一个新的表现形式。这个过程主要是改写AST（抽象语法树），或者根据当前AST（抽象语法树）生成一个新的AST（抽象语法树），这个过程可以是相同语言，或者可以直接将AST（抽象语法树）翻译为其他语言；CodeGeneration（代码生成）：将上一步处理好的内容转化为新的代码。
展开
评论
点赞
#青训营笔记创作活动#
2月7日打卡day30
今日学习：
微应用mount时先把上一次记录的变更modifyPropsMap应用到微应用的全局window，没有则跳过浅复制主应用的windowkey-value快照，用于下次恢复全局环境微应用unmount时将当前微应用window的key-value和快照的key-value进行Diff，Diff出来的结果用于下次恢复微应用环境的依据将上次快照的key-value拷贝到主应用的window上，以此恢复环境。
2月7日打卡day30
今日学习：
微应用mount时先把上一次记录的变更modifyPropsMap应用到微应用的全局window，没有则跳过浅复制主应用的windowkey-value快照，用于下次恢复全局环境微应用unmount时将当前微应用window的key-value和快照的key-value进行Diff，Diff出来的结果用于下次恢复微应用环境的依据将上次快照的key-value拷贝到主应用的window上，以此恢复环境。
展开
评论
点赞
#青训营笔记创作活动#
2月6日打卡day29
今日学习：
描述配置主要是项目的基本信息
Name：项目的名称，如果是第三方包的话，其他人可以通过该名称使用npminstall进行安装
version：项目的版本号，开源项目的版本号通常遵循semver语义化规范
repository：项目的仓库地址以及版本控制信息description：项目的描述，会展示在npm官网
keywords：一组项目的技术关键词
homepage：项目主页的链接，通常是项目github链接，项目官网或文档首页
bugs：项目bug反馈地址，通常是githubissue页面的链接
license：项目的开源许可证
author：项目作者
Files：项目在进行npm发布时，可以通过files指定需要跟随一起发布的内容来控制npm包的大小，避免安装时间太长。发布时默认会包括package.json，license，README和main字段里指定的文件
type：在node支持ES模块后，要求ES模块采用.mjs后缀文件名。只要遇到.mjs文件，就认为它是ES模块。如果不想修改文件后缀，就可以在package.json文件中，指定type字段为module
main：项目发布时，默认会包括package.json，license，README和main字段里指定的文件，因为main字段里指定的是项目的入口文件，在browser和Node环境中都可以使用。如果不设置main字段，那么入口文件就是根目录下的index.js
browser：main字段里指定的入口文件在browser和Node环境中都可以使用
module：同样，项目也可以指定ES模块的入口文件，这就是module字段的作用
exports：node在14.13支持在package.json里定义exports字段，拥有了条件导出的功能。exports字段可以配置不同环境对应的模块入口文件，并且当它存在时，它的优先级最高
workspaces：项目的工作区配置，用于在本地的根目录下管理多个子项目
Scripts：指定项目的一些内置脚本命令，这些命令可以通过npmrun来执行。通常包含项目开发，构建等CI命令
Config：用于设置scripts里的脚本在运行时的参数。
2月6日打卡day29
今日学习：
描述配置主要是项目的基本信息
Name：项目的名称，如果是第三方包的话，其他人可以通过该名称使用npminstall进行安装
version：项目的版本号，开源项目的版本号通常遵循semver语义化规范
repository：项目的仓库地址以及版本控制信息description：项目的描述，会展示在npm官网
keywords：一组项目的技术关键词
homepage：项目主页的链接，通常是项目github链接，项目官网或文档首页
bugs：项目bug反馈地址，通常是githubissue页面的链接
license：项目的开源许可证
author：项目作者
Files：项目在进行npm发布时，可以通过files指定需要跟随一起发布的内容来控制npm包的大小，避免安装时间太长。发布时默认会包括package.json，license，README和main字段里指定的文件
type：在node支持ES模块后，要求ES模块采用.mjs后缀文件名。只要遇到.mjs文件，就认为它是ES模块。如果不想修改文件后缀，就可以在package.json文件中，指定type字段为module
main：项目发布时，默认会包括package.json，license，README和main字段里指定的文件，因为main字段里指定的是项目的入口文件，在browser和Node环境中都可以使用。如果不设置main字段，那么入口文件就是根目录下的index.js
browser：main字段里指定的入口文件在browser和Node环境中都可以使用
module：同样，项目也可以指定ES模块的入口文件，这就是module字段的作用
exports：node在14.13支持在package.json里定义exports字段，拥有了条件导出的功能。exports字段可以配置不同环境对应的模块入口文件，并且当它存在时，它的优先级最高
workspaces：项目的工作区配置，用于在本地的根目录下管理多个子项目
Scripts：指定项目的一些内置脚本命令，这些命令可以通过npmrun来执行。通常包含项目开发，构建等CI命令
Config：用于设置scripts里的脚本在运行时的参数。
展开
评论
点赞
#青训营笔记创作活动#
2月5日打卡day28
今日学习：
Tapable是一个类似于Node.js中的EventEmitter的库，但它更专注于自定义事件的触发和处理。通过Tapable我们可以注册自定义事件，然后在适当的时机去执行自定义事件。
使用只需三步：实例化钩子函数（tapable会暴露出各种各样的Hook，这里先以同步钩子Synchook为例）注册事件触发事件按照执行机制进行分类：
BasicHook:基本类型的钩子，执行每一个注册的事件函数，并不关心每个被调用的事件函数返回值如何。Waterfall:瀑布类型的钩子，如果前一个事件函数的结果result!==undefined，则result会作为后一个事件函数的第一个参数（也就是上一个函数的执行结果会成为下一个函数的参数）。
Bail:保险类型钩子，执行每一个事件函数，遇到第一个结果result!==undefined则返回，不再继续执行（也就是只要其中一个有结果了，后面的就不执行了）。Loop:循环类型钩子，不停的循环执行事件函数，直到所有函数结果result===undefined（有点像我们小时候打单机游戏一样，只要哪一关不小心死了，就得从头再来一遍，直到所有的关卡都打过才算通关）。
2月5日打卡day28
今日学习：
Tapable是一个类似于Node.js中的EventEmitter的库，但它更专注于自定义事件的触发和处理。通过Tapable我们可以注册自定义事件，然后在适当的时机去执行自定义事件。
使用只需三步：实例化钩子函数（tapable会暴露出各种各样的Hook，这里先以同步钩子Synchook为例）注册事件触发事件按照执行机制进行分类：
BasicHook:基本类型的钩子，执行每一个注册的事件函数，并不关心每个被调用的事件函数返回值如何。Waterfall:瀑布类型的钩子，如果前一个事件函数的结果result!==undefined，则result会作为后一个事件函数的第一个参数（也就是上一个函数的执行结果会成为下一个函数的参数）。
Bail:保险类型钩子，执行每一个事件函数，遇到第一个结果result!==undefined则返回，不再继续执行（也就是只要其中一个有结果了，后面的就不执行了）。Loop:循环类型钩子，不停的循环执行事件函数，直到所有函数结果result===undefined（有点像我们小时候打单机游戏一样，只要哪一关不小心死了，就得从头再来一遍，直到所有的关卡都打过才算通关）。
展开
评论
点赞
#青训营笔记创作活动#
2月4日打卡day27
今日学习：
HashMap中使用对象只允许键是字符串和symbol。任何其他类型的键都会通过toString方法被隐含地转换为字符串。使用对象做HashMap会造成混乱和安全隐患。次优的人机工程学
Size：Object并没有提供方便的API来获取size，即属性的数量。只关心字符串、可枚举的键，那么可以用Object.keys()将键转换为数组，并获得其length；只想要不可枚举的字符串键，那么必须得使用Object.getOwnPropertyNames来获得一个键的列表并获得其length；只对symbol键感兴趣，可以使用getOwnPropertySymbols来显示symbol键。或者可以使用Reflect.ownKeys来一次获得字符串键和symbol键，不管它是否是可枚举的。iterate循环遍历对象也有类似的复杂性我们可以使用for...in循环。但它会读取到继承的可枚举属性。
Clear：没有简单的方法来删除一个对象的所有属性，我们必须用delete操作符一个一个地删除每个属性Map默认是一个可迭代的对象。这说明可以用for...of轻松地迭代一个Map，并做一些事情，比如使用嵌套的解构来从Map中取出第一个项。
2月4日打卡day27
今日学习：
HashMap中使用对象只允许键是字符串和symbol。任何其他类型的键都会通过toString方法被隐含地转换为字符串。使用对象做HashMap会造成混乱和安全隐患。次优的人机工程学
Size：Object并没有提供方便的API来获取size，即属性的数量。只关心字符串、可枚举的键，那么可以用Object.keys()将键转换为数组，并获得其length；只想要不可枚举的字符串键，那么必须得使用Object.getOwnPropertyNames来获得一个键的列表并获得其length；只对symbol键感兴趣，可以使用getOwnPropertySymbols来显示symbol键。或者可以使用Reflect.ownKeys来一次获得字符串键和symbol键，不管它是否是可枚举的。iterate循环遍历对象也有类似的复杂性我们可以使用for...in循环。但它会读取到继承的可枚举属性。
Clear：没有简单的方法来删除一个对象的所有属性，我们必须用delete操作符一个一个地删除每个属性Map默认是一个可迭代的对象。这说明可以用for...of轻松地迭代一个Map，并做一些事情，比如使用嵌套的解构来从Map中取出第一个项。
展开
评论
点赞