Smeb
行百里者半九十
获得徽章 1
- #青训营笔记创作活动#
2月12日 Day29
package.json
文件配置
项目在进行 npm 发布时，可以通过 files 指定需要跟随一起发布的内容来控制 npm 包的大小，避免安装时间太长。
发布时默认会包括 package.json，license，README 和main 字段里指定的文件。忽略 node_modules，lockfile 等文件。
在此基础上，我们可以指定更多需要一起发布的内容。可以是单独的文件，整个文件夹，或者使用通配符匹配到的文件。
依赖配置
dependencies
运行依赖，也就是项目生产环境下需要用到的依赖。比如 react，vue，状态管理库以及组件库等。使用 npm install xxx 或则 npm install xxx --save 时，会被自动插入到该字段中。
devDependencies
开发依赖，项目开发环境需要用到而运行时不需要的依赖，用于辅助开发，通常包括项目工程化工具比如 webpack，vite，eslint 等。
使用 npm install xxx -D 或者 npm install xxx --save-dev 时，会被自动插入到该字段中。
展开评论点赞 - #青训营笔记创作活动#
2月11日 Day28
Tapable
Tapable是一个类似于 Node.js 中的 EventEmitter 的库，但它更专注于自定义事件的触发和处理。通过 Tapable 我们可以注册自定义事件，然后在适当的时机去执行自定义事件。
都知道 Webpack 很复杂，但 Webpack 的源码却很优雅，是一个典型的可插拔架构，不仅逻辑清晰，而且灵活好扩展。近几年出来的一些构建工具，大多也都参考了 Webpack 的这种架构方式。而实现这一切的核心就是借助了 Tapable。
关于 Tapable 的源码其实并没有多少代码量，学习它的原理首当其冲的一定是可以让你在日常 Webpack Plugin 开发中更得心应手，解决相关问题更加顺畅。其次，Tapable 的内部以特别巧妙的方式实现了发布订阅模式，这之中会有非常多的知识点：比如懒编译或者叫动态编译，关于类与继承抽象类的面向对象思想以及 this 指向的升华等。
Tapable是一个类似于 Node.js 中的 EventEmitter 的库，但它更专注于自定义事件的触发和处理。通过 Tapable 我们可以注册自定义事件，然后在适当的时机去执行自定义事件。
展开评论点赞 - #青训营笔记创作活动#
2月10日 Day27
Map
在 JavaScript 中，对象是很方便的。它们允许我们轻松地将多个数据块组合在一起。 在ES6之后，又出了一个新的语言补充-- Map。在很多方面，它看起来像是一个功能更强的对象，但接口却有些笨拙。
然而，大多数开发者在需要 hash map 的时候还是会使用对象，只有当他们意识到键值不能只是字符串的时候才会转而使用 Map。但有时候Map要比Object更好用。
ES6 为我们带来了 Map，首先，与只允许键值为字符串和 symbols 的 Object 不同，Map 支持任何数据类型的键。
但更重要的是，Map 在用户定义的和内置的程序数据之间提供了一个干净的分离，代价是需要一个额外的 Map.prototype.get 来获取对应的项。
Map 也提供了更好的人机工程学。Map 默认是一个可迭代的对象。这说明可以用 for ... of 轻松地迭代一个 Map，并做一些事情，比如使用嵌套的解构来从 Map 中取出第一个项。
在大多数情况下，Map 要比 Object 快。有些人声称通过从 Object 切换到 Map 可以看到明显的性能提升。对于数据量大的 Object 会超时，但 Map 上则不会。
展开评论点赞 - #青训营笔记创作活动#
2月8日 Day26
Islands 架构原理
1.什么是 Islands 架构
这个架构主要用于 SSR (也包括 SSG) 应用，我们知道，在传统的 SSR 应用中，服务端会给浏览器响应完整的 HTML 内容，并在 HTML 中注入一段完整的 JS 脚本用于完成事件的绑定，也就是完成 hydration (注水) 的过程。当注水的过程完成之后，页面也才能真正地能够进行交互。当一个页面中只有部分的组件交互，那么对于这些可交互的组件，我们可以执行 hydration 过程，因为组件之间是互相独立的。而对于静态组件，即不可交互的组件，我们可以让其不参与 hydration 过程，直接复用服务端下发的 HTML 内容。可交互的组件就犹如整个页面中的孤岛(Island)，因此这种模式叫做 Islands 架构。
2.实现原理
通过Astro来实现，在 Astro 中，默认所有的组件都是静态组件，Astro 除了支持本身 Astro 语法之外，也支持 Vue、React 等框架，可以通过插件的方式来导入。在构建的时候，Astro 只会打包并注入 Islands 组件的代码，并且在浏览器渲染，分别调用不同框架(Vue、React)的渲染函数完成各个 Islands 组件的 hydrate 过程。展开评论点赞 - #青训营笔记创作活动#
2月7日 Day25
什么是Docker
富 Web 时代，应用变得越来越强大，与此同时也越来越复杂。集群部署、隔离环境、灰度发布以及动态扩容缺一不可，而容器化则成为中间的必要桥梁。
docker 使应用部署更加轻量，可移植，可扩展，更好的环境隔离也更大程度地避免了生产环境与测试环境不一致的巨大尴尬。
Docker 技术的三大核心概念，分别是：镜像 Image、容器 Container、仓库 Repository。Docker 底层使用了一些 linux 内核的特性，大概有 namespace，cgroups 和 ufs。
构建流程
首先安装Docker，可以通过软件安装或者命令行安装，然后我们使用Docker启动一个vue项目，然后对项目进行打包，此时项目目录下的 Dist 就是我们要部署的静态资源了。然后新建Dockerfile，拉去Nginx镜像，拉取成功后，在根目录创建Nginx配置文件，然后配置镜像和构建镜像，之后就可以运行容器和访问项目，最后发布镜像。
展开评论点赞 - #青训营笔记创作活动#
2月6日 Day24
三种大屏适配方案
1. vw+vh
按照设计稿的尺寸，将px按比例计算转为vw和vh，路径配置的话只需在vue.config.js里配置一下utils.scss的路径，用less的话就配置一下utils.less的路径，就可以全局使用了，这种使用方式有个弊端，就是屏幕尺寸发生变化后，需要手动刷新一下才能完成自适应调整，为了解决这个问题，你需要在各个图表中监听页面尺寸变化，重新调整图表，在 vue 项目中，也可以借助element-resize-detector，最好封装个 resize 的指令，在各图表中就只要使用该指令就可以了。
2.scale
通过 css 的 scale 属性，根据屏幕大小，对图表进行整体的等比缩放，从而达到自适应效果，比如当屏幕的尺寸比例刚好是 16:9 时，页面能刚好全屏展示，内容占满显示器，小于16:9 时，页面上下留白，左右占满并上下居中，显示比例保持 16:9，大于时，页面左右留白，上下占满并居中，显示比例仍然保持 16:9。
3.rem+vw+wh
显示效果跟scale的效果一样。rem(font size of the root element)，是 css3 中新增的一个大小单位，即相对于根元素 font-size 值的大小。思路就是动态的计算出页面的 fontsize 从而改变 rem 的大小。首先获得 rem 的基准值，然后在页面内写一段 js 代码，动态的计算html根元素的font-size
展开评论点赞 - #青训营笔记创作活动#
2月5日 Day23
几个热门的开源前端低代码项目
1.LowCodeEngine
由阿里巴巴钉钉宜搭团队开发的低代码框架，基于阿里云的云基础设施和钉钉的企业数字化操作系统。使用者只需要基于低代码引擎便可以快速定制符合自己业务需求的低代码平台。同时LowCodeEngine还提供了很多的基础组件，可以帮助开发者快速的构建业务页面。
项目地址：
github.com
2.Amis
Amis 是百度开源的一款前端低代码框架，通过 JSON 配置就能生成各种后台页面，包括数据获取、表单提交及验证等功能，同时，Amis内置 100+ 种 UI 组件，能够满足各种页面组件展现的需求，极大减少开发成本，甚至可以不需要了解前端。
项目地址：github.com
3.tmagic-editor
tmagic-editor是一款由腾讯技术中心出品的一款开源低代码框架，能够实现零代码/低代码生成页面 ， 可以快速搭建可视化页面生产平台，让非技术人员可以通过拖拽和配置，自助生成H5页面、PC页面、TV页面，大大降低页面生产成本 。
项目地址：gitee.com
4.vite-vue3-lowcode
vite-vue3-lowcode 是一款基于Vite2.x + Vue3.x + TypeScript技术框架的的H5 低代码平台。目前只是一个简单的模板，支持数据配置的导入和导出，配置的修改和删除操作，用到的技术有sandbox 中执行自定义逻辑、monaco-editor 自定义代码补全、vue3 createRenderer 自定义渲染器等。
项目地址：github.com
展开评论点赞 - #青训营笔记创作活动#
2月4日 Day22
高性能的树状结构
我们平时见到的树状结构一般都是每层数组中的item都会有一个children，里面嵌套一个数组然后每个子item也还会有各自的children，就这样一直嵌套下去。
而拍扁后的树状结构其实是一个对象，每个item都扁平化平铺在第一层，每一个item都有各自的parentId与childrenIds。
扁平化的不同
1.父节点
般都会有一个item专门来表示根节点，就比如这个对象第一行id为root的item。
2.子节点
对象中的每一项都可以当成是子节点，他们各自都拥有一个parentId，而根节点的parentId为空代表它没有父节点，他们的各自的childrenIds存储了他们各自item的子节点id。
3.渲染
我们一般渲染一个列表都是通过map进行遍历渲染，拿到对应的item通过itemRender()来处理对应的ReactNode，在渲染中其实两种状态的使用相差不大。
4.添加
不需要递归循环遍历整课树，可以发现，在整个结构中数据的表现是非常清晰的，每个item都是一样的。首先在Map新增一条子项数据，直接放在数据结构末尾即可，然后我们再给对应的父节点的childrenIds中push这个子项的id即可。
5.修改
拿到id之后就可以直接修改
6.删除
在Map形式中我们直接delete对应id的项即可，如果该项有父节点，我们可以在对应parentId项中的childrenIds移除对应的id即可。
展开评论点赞 - #青训营笔记创作活动#
2月3日 Day21
更好用的包管理器——pnpm
pnpm: Fast, disk space efficient package manager
特点：包安装速度极快，磁盘空间利用非常高效。
1.速度快
在绝多大数场景下，包安装的速度都是明显优于 npm/yarn，速度会比 npm/yarn 快 2-3 倍。
2.磁盘利用率高
pnpm 内部使用基于内容寻址的文件系统来存储磁盘上所有的文件，不会重复安装同一个包。即使一个包的不同版本，pnpm 也会极大程度地复用之前版本的代码。
3.支持 monorepo
在根目录下 pnpm add A -r, 那么所有的 package 中都会被添加 A 这个依赖。
4.pnpm依赖管理
将包本身和依赖放在同一个node_module下面，与原生 Node 完全兼容，又能将 package 与相关的依赖很好地组织到一起，根目录下的 node_modules 下面不再是眼花缭乱的依赖，而是跟 package.json 声明的依赖基本保持一致。即使 pnpm 内部会有一些包会设置依赖提升，会被提升到根目录 node_modules 当中，但整体上，根目录的node_modules比以前还是清晰和规范了许多。
5.安全问题
独创的一套依赖管理方式不仅解决了依赖提升的安全问题，还大大优化了时间和空间上的性能。
展开评论点赞 - #青训营笔记创作活动#
2月2日 Day20
纯前端实现羊了个羊（基本框架记录）
游戏本体基本上就是由卡片组成，而卡片是以1/4为单位排列的
地图模拟主要分为单层和多层
1.基础生成
最基础的地图只关乎当前层，假设当前需要判定是否放置卡片的坐标为 [i, j]，那么下面四个位置就不能存在卡片，否则就会出现同层卡片重叠。同时我们加入一个随机系数，保证每次生成的地图不同，Math.random() < 0.3 === true 的时候该位置才放置卡片
2.优化地图
卡片的分布是有规律的，左右对称，从顶层到底层越来越往中心聚集，卡片越来越少，上一层不会完全覆盖下一层。
3.卡片渲染
每次位置和随机数判定合格，我们应该实际放置一张卡片，一个实际的 dom。然后根据卡片的 x、y、z、宽高 值设置实际位置
4.填充数据
要保证卡片是 3 的倍数，同时需要随机（创建一个新数组，并且随机交换顺序即可）的把指定种类的卡片类型，以 3 的倍数填充（假设有 cardType 种类型的卡片，那么按 3 张重复填充即可）到现有卡片中去，只有顶层可以被点击，我们之前已经判定过卡片是否被覆盖的逻辑，做对应处理即可。一个简单的方法是给被覆盖的卡片设置一个特殊 style。
展开评论点赞
github.com