孤独而灿烂的神
立志做人参的萝卜🥕
获得徽章 1
#青训营笔记创作活动#
1月28日 打卡day14
今日学习开发图片编辑器
要点： 因为框架用的vue，主要解决如何把fabric的实例对象共享给各个功能组件，区分出是未选中、单选、多选状态，然后将选中、取消选中事件暴露给各个功能组件，子组件根据状态进行独立的功能开发。
我的方法是在入口文件中初始化实例，然后与mixins结合，在mixins中定义了选择类型（多选、单选、未选中）、选中元素类型、选中id等属性，以及选中、取消选中的事件，子组件通过引入mixins来开发对应功能；如子组件需要对fabric对象进行操作，则可以通过inject获得原始对象。
1月28日 打卡day14
今日学习开发图片编辑器
要点： 因为框架用的vue，主要解决如何把fabric的实例对象共享给各个功能组件，区分出是未选中、单选、多选状态，然后将选中、取消选中事件暴露给各个功能组件，子组件根据状态进行独立的功能开发。
我的方法是在入口文件中初始化实例，然后与mixins结合，在mixins中定义了选择类型（多选、单选、未选中）、选中元素类型、选中id等属性，以及选中、取消选中的事件，子组件通过引入mixins来开发对应功能；如子组件需要对fabric对象进行操作，则可以通过inject获得原始对象。
展开
评论
点赞
#青训营笔记创作活动#
1月27日 打卡dagy13
今日学习节流
函数节流（throttle）是 JS 中一个非常常见的优化手段，可以有效的避免函数过于频繁的执行。
举个例子：一个保存按钮，为了避免重复提交或者服务器考虑，往往需要对点击行为做一定的限制，比如只允许每300ms提交一次，这时候我想大部分同学都会到网上直接拷贝一段throttle函数，或者直接引用lodash工具库
1月27日 打卡dagy13
今日学习节流
函数节流（throttle）是 JS 中一个非常常见的优化手段，可以有效的避免函数过于频繁的执行。
举个例子：一个保存按钮，为了避免重复提交或者服务器考虑，往往需要对点击行为做一定的限制，比如只允许每300ms提交一次，这时候我想大部分同学都会到网上直接拷贝一段throttle函数，或者直接引用lodash工具库
展开
评论
1
1月26日 打卡day12
今日学习实现思路：
1）利用 iframe 创建沙箱，取出其中的原生浏览器全局对象作为沙箱的全局对象
2）设置一个黑名单，若访问黑名单中的变量，则直接报错，实现阻止\隔离的效果
3）在黑名单中添加 document 字段，来实现禁止开发者操作 DOM
4）在黑名单中添加 XMLHttpRequest、fetch、WebSocket 字段，实现禁用原生的方式调用接口
5）若访问当前全局对象中不存在的变量，则直接报错，实现禁用三方库调接口
6）最后还要拦截对 window 对象的访问，防止通过 window.document 来操作 DOM，避免沙箱逃逸
#青训营笔记创作活动#
今日学习实现思路：
1）利用 iframe 创建沙箱，取出其中的原生浏览器全局对象作为沙箱的全局对象
2）设置一个黑名单，若访问黑名单中的变量，则直接报错，实现阻止\隔离的效果
3）在黑名单中添加 document 字段，来实现禁止开发者操作 DOM
4）在黑名单中添加 XMLHttpRequest、fetch、WebSocket 字段，实现禁用原生的方式调用接口
5）若访问当前全局对象中不存在的变量，则直接报错，实现禁用三方库调接口
6）最后还要拦截对 window 对象的访问，防止通过 window.document 来操作 DOM，避免沙箱逃逸
#青训营笔记创作活动#
展开
评论
点赞
#青训营笔记创作活动#
1月25日 打卡day11
今日学习rem是指相对于根元素的字体大小的单位，在日常开发过程中我们通常把根元素（html/body）的字体设置为10px,方便于我们计算（此时子元素的1rem就相当于10px）。
适用场景
不固定宽高比的Web应用，适用于绝大部分业务场景
1月25日 打卡day11
今日学习rem是指相对于根元素的字体大小的单位，在日常开发过程中我们通常把根元素（html/body）的字体设置为10px,方便于我们计算（此时子元素的1rem就相当于10px）。
适用场景
不固定宽高比的Web应用，适用于绝大部分业务场景
展开
评论
点赞
#青训营笔记创作活动#
1月24日 打卡day10
今日学习css惊艳用法
或许，你认为 CSS 只能用来控制网页的结构与样式，但它的功能和应用却超乎你的想象。从逼真的图像到特效动画，优秀的开发者利用它已创造了无数种可能。
1月24日 打卡day10
今日学习css惊艳用法
或许，你认为 CSS 只能用来控制网页的结构与样式，但它的功能和应用却超乎你的想象。从逼真的图像到特效动画，优秀的开发者利用它已创造了无数种可能。
展开
评论
点赞
#青训营笔记创作活动#
1月23日 打卡day9
今日学习高级操作图片压缩
流程：输入「文件夹名称-tinyImg」，接着工具会找到当前项目下所有的tinyImg，接着选择一或多个tinyImg，紧接着，工具会找出tinyImg下所有的png、jpe?g和svga，最后选择压缩模式「全量」或「自定义」，选择需要压缩的图片。
1月23日 打卡day9
今日学习高级操作图片压缩
流程：输入「文件夹名称-tinyImg」，接着工具会找到当前项目下所有的tinyImg，接着选择一或多个tinyImg，紧接着，工具会找出tinyImg下所有的png、jpe?g和svga，最后选择压缩模式「全量」或「自定义」，选择需要压缩的图片。
展开
评论
点赞
#青训营笔记创作活动#
1月22日 打卡day8
今日学习使用 Svelte 编译器编译此代码会生成一个依赖于包的 JavaScript 模块，并使用导出将组件导出为单个类。这意味着文件可以独立编译，这使得 Svelte 非常适合 esbuild 插件。
1月22日 打卡day8
今日学习使用 Svelte 编译器编译此代码会生成一个依赖于包的 JavaScript 模块，并使用导出将组件导出为单个类。这意味着文件可以独立编译，这使得 Svelte 非常适合 esbuild 插件。
展开
评论
点赞
#青训营笔记创作活动#
1月21日 打卡day7
今日学习新技术概念
WebRTC (Web Real-Time Communications) 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRTC 包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。
1月21日 打卡day7
今日学习新技术概念
WebRTC (Web Real-Time Communications) 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRTC 包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。
展开
评论
点赞
#青训营笔记创作活动#
1月20日 打卡day6
今日学习前端抓包
通过whistle等PC端工具，对手机应用中发出的http请求进行分析，例如携带的参数，返回值，请求时间等，并进行具体的分析，这就是所谓的“抓包”。而whistle(意为哨子)，就是这样的一类前端抓包工具
1月20日 打卡day6
今日学习前端抓包
通过whistle等PC端工具，对手机应用中发出的http请求进行分析，例如携带的参数，返回值，请求时间等，并进行具体的分析，这就是所谓的“抓包”。而whistle(意为哨子)，就是这样的一类前端抓包工具
展开
评论
点赞
#青训营笔记创作活动#
1月19日 打卡day5
今日学习js工具
1.清楚js的定位
时刻都不能忘记，否则很容易犯不清楚js是什么的错误。不要学了很久就知道js是编程语言，就是写代码，而且特点就是乱七八糟就完了，那样是学不好js的。要时时抓住它的地位，确切的说是它在整个Web中的地位：它属于前端的核心，主要用来操控和重新调整DOM，通过修改DOM结构，从而来达到修改页面效果的目的。要用这个中心思想去指导后续的一切js的学习，并且形成条件反射。
1月19日 打卡day5
今日学习js工具
1.清楚js的定位
时刻都不能忘记，否则很容易犯不清楚js是什么的错误。不要学了很久就知道js是编程语言，就是写代码，而且特点就是乱七八糟就完了，那样是学不好js的。要时时抓住它的地位，确切的说是它在整个Web中的地位：它属于前端的核心，主要用来操控和重新调整DOM，通过修改DOM结构，从而来达到修改页面效果的目的。要用这个中心思想去指导后续的一切js的学习，并且形成条件反射。
展开
评论
点赞
#青训营笔记创作活动#
1月18日 打卡day4
今日学习异步处理
自动化部署的最佳实践
要做到自动化部署，要确保自动化部署的成功，最最重要的关键为：保障一致性！将要部署的各个环境一致；在各个环境执行的部署脚本一致；要部署的安装包也要一致！
从提测之后，所有环境运行的是同一个介质包，不要在SIT、UAT、准生产和生产等环节重复的打包；
保证各个环境的操作系统、补丁和软件运行环境的基线一致；
保证使用同一的二方和三方库依赖，推荐Nexus；
1月18日 打卡day4
今日学习异步处理
自动化部署的最佳实践
要做到自动化部署，要确保自动化部署的成功，最最重要的关键为：保障一致性！将要部署的各个环境一致；在各个环境执行的部署脚本一致；要部署的安装包也要一致！
从提测之后，所有环境运行的是同一个介质包，不要在SIT、UAT、准生产和生产等环节重复的打包；
保证各个环境的操作系统、补丁和软件运行环境的基线一致；
保证使用同一的二方和三方库依赖，推荐Nexus；
展开
评论
点赞
#青训营笔记创作活动#
1月17日 打开day3
今日学习现代前端工程
Monorepo 的核心观点是所有的项目在一个代码仓库中。这并不是说代码没有组织都放在 ./src 文件夹里面。相反，通过使用 Buck / Bazel，monorepo 中的代码都是分割到一个个小的模块中的。
1月17日 打开day3
今日学习现代前端工程
Monorepo 的核心观点是所有的项目在一个代码仓库中。这并不是说代码没有组织都放在 ./src 文件夹里面。相反，通过使用 Buck / Bazel，monorepo 中的代码都是分割到一个个小的模块中的。
展开
评论
点赞
#青训营笔记创作活动#
1月16日 打卡day2
前端必备工具网站的推荐
这里单独把github当作一类网站，是因为实在是找不到合适的分类给它。
你可以在上面找到各种各样的入门教程，找到很多的资源，找到各种各样有创意的项目；React、Vue等官方开源项目都在上面，你可以查看各种项目工具的issue，说不定你遇到的问题作者早就在上面给出了成熟的解决方案；甚至你可以只是在github记录自己的个人博客。
总而言之，这是一个神奇的网站。只要你作为一名程序员，总有一天你会需要在上面摸爬滚打的~
1月16日 打卡day2
前端必备工具网站的推荐
这里单独把github当作一类网站，是因为实在是找不到合适的分类给它。
你可以在上面找到各种各样的入门教程，找到很多的资源，找到各种各样有创意的项目；React、Vue等官方开源项目都在上面，你可以查看各种项目工具的issue，说不定你遇到的问题作者早就在上面给出了成熟的解决方案；甚至你可以只是在github记录自己的个人博客。
总而言之，这是一个神奇的网站。只要你作为一名程序员，总有一天你会需要在上面摸爬滚打的~
展开
评论
点赞
#青训营笔记创作活动#
1月15日 打卡day1
今日学习js拖拽效果
解题思路： 实现以上效果首先确定要利用鼠标的按下事件和鼠标的移动事件，其次就是利用鼠标指针的坐标(event.pageX,event.pageY)与鼠标相对于拖拽元素的坐标(event.offsetX,event.offsetY)的差来计算被拖拽元素的坐标值。
1月15日 打卡day1
今日学习js拖拽效果
解题思路： 实现以上效果首先确定要利用鼠标的按下事件和鼠标的移动事件，其次就是利用鼠标指针的坐标(event.pageX,event.pageY)与鼠标相对于拖拽元素的坐标(event.offsetX,event.offsetY)的差来计算被拖拽元素的坐标值。
展开
评论
点赞