获得徽章 7
- #青训营笔记创作活动#
12月16日 打卡day08
今日学习了如何使用fabric.js快速开发一个图片编辑器。
在入口文件中初始化实例，然后与mixins结合，在mixins中定义了选择类型（多选、单选、未选中）、选中元素类型、选中id等属性，以及选中、取消选中的事件，子组件通过引入mixins来开发对应功能；如子组件需要对fabric对象进行操作，则可以通过inject获得原始对象。
运用fabric.js创建对象，通过EventEmtter创建事件发射器，对订阅单选，多选，取消选择事件；通过vue的provide语法把fabric对象、EventEmitter对象向下传递，在mixins中保存选中的元素和选中状态。元素对齐区分单选元素与多选元素，单选元素时只支持相对于画布水平、垂直、水平垂直对齐。多元素对齐有上下左右对齐、水平、垂直对齐，主要是通过获得最边缘元素的坐标，然后进行计算排序，如顶部对齐代码：展开评论点赞 - #青训营笔记创作活动#
2月15日 打卡day07
今天学习了用css实现节流，运用pointer-events、animationi和 :active 实现节流，1. animation 设置step-end阶梯曲线很方便的控制pointer-events的变化时间点。forwards，会一直保持all的状态;2. 通过:active去触发transition变化，然后通过监听transition回调去动态设置按钮的禁用disabled状态展开评论点赞 - #青训营笔记创作活动#
2月14日 打卡day06
今天学习了制作沙箱隔离的插件. 通过with、proxy 和iframe 去实现沙箱，1. with对于沙箱的意义：可以实现所有变量均来自可靠或自主实现的上下文环境，而不会从全局的执行环境中取值，相当于做了一层拦截，实现隔离的效果,; 2. 使用 Proxy.has() 来拦截 with 代码块中的任意变量的访问,使用new Function替代eval，使用 new Function() 运行代码比eval更为好一些，函数的参数提供了清晰的接口来运行代码3. iframe 标签可以创造一个独立的浏览器原生级别的运行环境，这个环境由浏览器实现了与主环境的隔离;4. 4.1 设置黑名单，添加 document、XMLHttpRequest、fetch、WebSocket 、Image来禁止开发者操作DOM和调接口4.2 判断要访问的变量，是否在当前环境的 window 对象中，不在的直接报错，实现禁止通过三方库调接口展开评论点赞 - #青训营笔记创作活动#
2月13日 打卡day05
今日学习了vite项目屏幕适配方案;1.是PostCSS的插件，用于将像素单元生成rem单位2. 基于rem的适配方案 postcss-pxtorem 是PostCSS的插件，用于将像素单元生成rem单位;autoprefixer 浏览器前缀处理插件;amfe-flexible 可伸缩布局方案 ，通过依赖安装模块配置;展开评论点赞 - #青训营笔记创作活动#
2月12日 打卡day04
今日学习了不同的CSS属性 1. position: sticky;
用于可以让竖型结构的表格吸顶的需求，标题滚动时，会一直吸着最顶上；2. :empty 选择器，可以当数据请求接口，没有数据时，提示没有数据，通过 :empty 选中内容为空的容器，然后通过伪元素为空容器添加提示；3. gap,可以设置元素和元素之间的间隔，使用grid/flex布局，再添加想要间隔的距离gap；4. background-clip：text,和color: transparent;可以做一个带背景的文字效果; 5. user-select 属性可以 禁用光标选中 ，让网页看着和移动端一样。6. :invalid 伪类,可以不用 JS 也能实现校验提示的效果了;7. :focus-within 伪类,表示一个元素获得焦点，或该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配 :focus 伪类就会触发它，类似于js中的冒泡。8. mix-blend-mode:difference,属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。其中，difference 表示差值。展开评论点赞 - #青训营笔记创作活动#
2月11日 打卡day03
今日学习了如何通过TinyPng和代码制作图片压缩插件，TinyPng 一款智能压缩技术工具，效果跟原图基本没差，压缩效果好；开发一个在生产环境时对图片进行压缩；从查找，分配，上传，下载，写入去形成了这个插件；1. 查找: 目标文件夹的路径path，然后获取该path下的所有内容，接着遍历所有内容。然后进行判断，完之后保存结果；2. 分配：通过遍历list，把任务依次分给每一个进程。接着遍历works，通过send方法发送进程任务。通过监听message事件，利用pageNum记录进程任务的完成情况，当所有进程任务执行完毕后，则关闭进程。3. 上传：使用node自带的Https模块，构造请求头，把deepFindImg中返回的图片进行上传。上传成功后，会返回已经压缩好的图片的url链接。4. 下载：使用node自带的Https模块把upload中返回的图片链接进行下载。下载成功后，返回图片的buffer数据。5. 写入：在compressSvga内部，对svga进行解析成data，获取到svga的图片列表images，接着调用compressImg对images进行压缩，使用压缩后的图片覆盖data.images，最后再把data编码后，写入到本地覆盖原本的svga。6. 让UI自己去压缩展开评论点赞 - #青训营笔记创作活动#
2月10日 打卡day02
今日学习了Esbuild.Esbuild 在构建速度比常见的webpack,parcel构建工具要快，编译能力强，Esbuild 生态健壮，使用兼容性和自定义要求不高的Transformer，优秀的Bundler 和Minimizer 能力；在实际场景中，对js和css 代码压缩能力非常的优秀;Vite将在开发阶段用Esbuild来进行依赖预打包在未来，将所有用到的第三方依赖转成 ESM 格式 Bundle 产物，并且未来有用到生产环境的打算。Esbuild 对于真实的 Web 场景还有很多能力不支持，包括语法不支持降级到ES5，拆包不灵活、不支持 HMR，还需要更新迭代版本。展开评论点赞 - #青训营笔记创作活动#
2月9日 打卡day1
今日学习本章学习了webRTC。 了解了navigator.mediaDevices.getUserMedia(constraints) API 来去获取用户媒体设备，返回的是promise,支持then，catch等方法；可用传进去constraints参数是对象，可有audio,video等内置参数；将video和canvas 进行绑定；2. 运用toDataURL将canvas 转化成base64图片；3. 通过navigator.mediaDevices.enumerateDevices API 进行媒体设备进行切换；4. 通过使用 exact 关键字，强制切换前后摄像头；5. 通过getDisplayMedia 获取屏幕共享的媒体流；6. 通过MediaRecorder API 可以进行录制媒体流；7. 可以通过MediaRecorder.isTypeSupported API 进行判断用户是否支持媒体录制；8. 可以通过getImageData API 获取canvas 图像数据；9. 用captureStream API可以将canvas 画布转化成视频流展开评论点赞
![[呲牙]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_2.cd1e2bd.png)
![[流泪]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_6.dde0d83.png)