获得徽章 15
- 8月14日 打卡day20
今日学习
pnpm 内部使用基于内容寻址的文件系统来存储磁盘上所有的文件,这个文件系统出色的地方在于:
不会重复安装同一个包。用 npm/yarn 的时候,如果 100 个项目都依赖 lodash,那么 lodash 很可能就被安装了 100 次,磁盘中就有 100 个地方写入了这部分代码。但在使用 pnpm 只会安装一次,磁盘中只有一个地方写入,后面再次使用都会直接使用 hardlink(硬链接,不清楚的同学详见这篇文章)。
即使一个包的不同版本,pnpm 也会极大程度地复用之前版本的代码。举个例子,比如 lodash 有 100 个文件,更新版本之后多了一个文件,那么磁盘当中并不会重新写入 101 个文件,而是保留原来的 100 个文件的 hardlink,仅仅写入那一个新增的文件。展开评论点赞 - 8月13日 打卡day19
今日学习
console 是我们开发中经常使用的功能,用来输出打印和调试开发,比较熟悉的有log、error、warn,这几个是常用的,但是如果你仅仅只是了解这几个那就挺可惜了,错过了那些有助于调高开发效率的功能,今天我们列举一些常用又可以提高开发效率的功能。展开评论点赞 - 8月11日 打卡day17
今日学习
在使用mouseout时还需要考虑 dom 嵌套结构,因为这些事件在父级 -> 子级的过程中仍然会触发,总之,细节会非常多,很容易误触发。
现在转折来了,如果借用 CSS 就可以有效地避免上述问题,如下,先给需要触发的元素加一个有延时的transition展开赞过评论1 - 8月10日 打卡day16
今日学习
人脸特征提取就是针对人脸的某些特征进行判断(以下的动作判断仅供参考,实际情况下需要多个特征点来判断某个动作)
人脸的远近
取4帧 人脸占画面的比例,判断这组值是递增或递减,取第一帧和最后最后一帧的占比,根据阈值判断人脸的远近。展开赞过评论1 - 8月9日 打卡day15
今日学习
main 是 commonjs 的入口,也就是 require('antd') 的时候会走这个。
module 是 esm 的入口,也就是 import xx from 'antd' 的时候会走这个。
unpkg 是 UMD 的入口,也就是通过 script 标签引入的时候或者 commonjs 的方式等都可以用。分别对应了 lib、es、dist 的目录。展开赞过评论1 - 8月8日 打卡day14
今日学习
因为框架用的vue,主要解决如何把fabric的实例对象共享给各个功能组件,区分出是未选中、单选、多选状态,然后将选中、取消选中事件暴露给各个功能组件,子组件根据状态进行独立的功能开发。
我的方法是在入口文件中初始化实例,然后与mixins结合,在mixins中定义了选择类型(多选、单选、未选中)、选中元素类型、选中id等属性,以及选中、取消选中的事件,子组件通过引入mixins来开发对应功能;如子组件需要对fabric对象进行操作,则可以通过inject获得原始对象。展开赞过评论1 - 8月7日 打卡day13
今日学习
函数节流是一个非常常见的优化方式,可以有效避免函数过于频繁的执行
CSS 的实现思路和 JS 不同,重点在于在于找到和该场景相关联的属性
CSS 实现“节流”其实就是控制一个动画的精准控制,假设有一个动画控制按钮从禁用->可点击的变化,每次点击时让这个动画重新执行一遍,在执行的过程中,一直处于禁用状态,这样就达到了“节流”的效果
还可以通过 transition 的回调函数动态设置按钮禁用态
这种实现的好处在于禁用逻辑和业务逻辑是完全解耦的展开赞过评论1 - 8月6日 打卡day12
今日学习
实现思路:
1)利用 iframe 创建沙箱,取出其中的原生浏览器全局对象作为沙箱的全局对象
2)设置一个黑名单,若访问黑名单中的变量,则直接报错,实现阻止\隔离的效果
3)在黑名单中添加 document 字段,来实现禁止开发者操作 DOM
4)在黑名单中添加 XMLHttpRequest、fetch、WebSocket 字段,实现禁用原生的方式调用接口
5)若访问当前全局对象中不存在的变量,则直接报错,实现禁用三方库调接口
6)最后还要拦截对 window 对象的访问,防止通过 window.document 来操作 DOM,避免沙箱逃逸展开赞过评论1 - 8月5日 打卡day11
今日学习
postcss-pxtorem 是PostCSS的插件,用于将像素单元生成rem单位
autoprefixer 浏览器前缀处理插件
amfe-flexible 可伸缩布局方案 替代了原先的lib-flexible选用了当前众多浏览器兼容的viewport展开赞过评论1