妧知
获得徽章 1
- #青训营笔记创作活动#
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月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月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月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月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事件，这就意味着如果我们要做到兼容多端，就必须注册多个事件监听。展开评论点赞