爱吃芋泥的麻薯
在掘金悄悄地许了一个2023年一定会实现的愿……
兔子会帮我阻止焦虑生根🌱发芽
获得徽章 1
#青训营笔记创作活动#
2月3号 打卡day9
今天学习了几个实用的JS工具方法。
1、计算距离下次生日还有多少天——moment
getBirthdayFun(){
// 首先要获取到今年的生日
let birthdayTime = moment().format('YYYY-') + '12-19'
// 通过时间戳 去判断当前的时间戳是否大于今年生日的时间戳
if (moment().unix() >= moment(birthdayTime).unix()) {
// 如果大于的话，那么就在今年的生日上再添加一年，已达到获取下次生日的时间
birthdayTime = moment(birthdayTime).add(1, 'y').format('YYYY-MM-DD')
}
// 这个直接通过计算 （下次生日的时间戳 - 当前日期的时间戳) / (60 * 60 * 24) 最后求出来的就是 XX 天
return parseInt(
(moment(birthdayTime).unix() - moment().unix()) / (60 * 60 * 24)
)
}
2、初始化数组
// fill()方法 是 es6新增的一个方法 使用指定的元素填充数组,其实就是用默认内容初始化数组
const arrList = Array(6).fill()
console.log(arrList) // 此处打印的是 ['','','','','','']
3、将 RGB 转换为十六进制
function getColorFun(r,g,b) {
return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
}
getColorFun(178,232,55) // 这里输出的是 #b2e837
这些都是比较常用的可以利用JS实现的功能，掌握之后，在代码编写过程中页非常方便。
2月3号 打卡day9
今天学习了几个实用的JS工具方法。
1、计算距离下次生日还有多少天——moment
getBirthdayFun(){
// 首先要获取到今年的生日
let birthdayTime = moment().format('YYYY-') + '12-19'
// 通过时间戳 去判断当前的时间戳是否大于今年生日的时间戳
if (moment().unix() >= moment(birthdayTime).unix()) {
// 如果大于的话，那么就在今年的生日上再添加一年，已达到获取下次生日的时间
birthdayTime = moment(birthdayTime).add(1, 'y').format('YYYY-MM-DD')
}
// 这个直接通过计算 （下次生日的时间戳 - 当前日期的时间戳) / (60 * 60 * 24) 最后求出来的就是 XX 天
return parseInt(
(moment(birthdayTime).unix() - moment().unix()) / (60 * 60 * 24)
)
}
2、初始化数组
// fill()方法 是 es6新增的一个方法 使用指定的元素填充数组,其实就是用默认内容初始化数组
const arrList = Array(6).fill()
console.log(arrList) // 此处打印的是 ['','','','','','']
3、将 RGB 转换为十六进制
function getColorFun(r,g,b) {
return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
}
getColorFun(178,232,55) // 这里输出的是 #b2e837
这些都是比较常用的可以利用JS实现的功能，掌握之后，在代码编写过程中页非常方便。
展开
评论
点赞
#青训营笔记创作活动#
2月1日 打卡day8
今天了解了几个实用的前端必备的实用工具与网站。
1、github desktop
使用git可视化工具，便于多个记住git命令
2、tinypng和squoosh
它们可以实现图片在线压缩。tinypng一般能满足日常大部分压缩图片的需求，如果你需要压缩大于5M的图片，可以考虑用 squoosh ，这个网站支持大图片压缩和图片压缩质量自定义。
3、carbon
carbon 可以生成酷炫的代码片段，并且支持导出图片
4、EMOJI中文网
这个网站有很多表情符号，并且可以直接复制
5、封面模板——canva
canva上面有很多免费的素材和模板，满足我们在写文章或者有时候要自己制作一些封面图片的需求
6、UnSplash
国外的一个高清图片下载网站，可以免费下载很多的4k高清图片
2月1日 打卡day8
今天了解了几个实用的前端必备的实用工具与网站。
1、github desktop
使用git可视化工具，便于多个记住git命令
2、tinypng和squoosh
它们可以实现图片在线压缩。tinypng一般能满足日常大部分压缩图片的需求，如果你需要压缩大于5M的图片，可以考虑用 squoosh ，这个网站支持大图片压缩和图片压缩质量自定义。
3、carbon
carbon 可以生成酷炫的代码片段，并且支持导出图片
4、EMOJI中文网
这个网站有很多表情符号，并且可以直接复制
5、封面模板——canva
canva上面有很多免费的素材和模板，满足我们在写文章或者有时候要自己制作一些封面图片的需求
6、UnSplash
国外的一个高清图片下载网站，可以免费下载很多的4k高清图片
展开
评论
点赞
#青训营笔记创作活动#
1月29日 打卡day7
今天学习了规范代码的几个技巧，能够增强代码的可读性与美观性。
1、规范命名
比如，用英文“IDCardNo”代替拼音首字母“sfzh”表示的“身份证号码”。
2、规范代码格式
要求：
a.合适的空格
b.代码对齐，比如大括号要对齐
c.及时换行，一行不要写太多代码
3、抽取重复代码
当一份代码重复出现在程序的多处地方时，可以抽取成一个工具类，还可以抽成一个公共的父类。
4、尽量使用工具类
比如在对集合判空的时候，可以通过一些判断的工具类来写：
public void updatePersons(List<Person> persons) {
if (!CollectionUtils.isEmpty(persons)) {
}
}
1月29日 打卡day7
今天学习了规范代码的几个技巧，能够增强代码的可读性与美观性。
1、规范命名
比如，用英文“IDCardNo”代替拼音首字母“sfzh”表示的“身份证号码”。
2、规范代码格式
要求：
a.合适的空格
b.代码对齐，比如大括号要对齐
c.及时换行，一行不要写太多代码
3、抽取重复代码
当一份代码重复出现在程序的多处地方时，可以抽取成一个工具类，还可以抽成一个公共的父类。
4、尽量使用工具类
比如在对集合判空的时候，可以通过一些判断的工具类来写：
public void updatePersons(List<Person> persons) {
if (!CollectionUtils.isEmpty(persons)) {
}
}
展开
评论
点赞
#青训营笔记创作活动#
1月28日 打卡day 6
今天学习了用纯 JS 实现语雀的划词高亮功能。
它的实现思路是生成一个 canvas 元素，让 canvas 元素与需要划词高亮功能的文本容器元素等宽高，并且重叠在文本容器上，划词的时候获取划词区域的文本节点相对于文本容器的位置信息，然后通过这些位置信息进行高亮背景的渲染。
但我们需要注意在拿到了节点信息后，需要借助 Range 对象获得任何一个文本节点中的任何一段文本相对与整个页面的位置信息，然后再通过减去文本容器元素相对于整个页面的位置信息，我们就可以得到划词区域文本相对与文本容器的位置信息了。
1月28日 打卡day 6
今天学习了用纯 JS 实现语雀的划词高亮功能。
它的实现思路是生成一个 canvas 元素，让 canvas 元素与需要划词高亮功能的文本容器元素等宽高，并且重叠在文本容器上，划词的时候获取划词区域的文本节点相对于文本容器的位置信息，然后通过这些位置信息进行高亮背景的渲染。
但我们需要注意在拿到了节点信息后，需要借助 Range 对象获得任何一个文本节点中的任何一段文本相对与整个页面的位置信息，然后再通过减去文本容器元素相对于整个页面的位置信息，我们就可以得到划词区域文本相对与文本容器的位置信息了。
展开
评论
点赞
#青训营笔记创作活动#
1月27日 打卡day5
今天学习了用CSS实现JS的函数节流功能。
首先需要用pointer-events方式禁用点击事件，然后利用animation的特性进行时间的限制，除此之外，利用伪类:active设置一个点击行为，也就是触发时机。
@keyframes throttle {
from {
pointer-events: none;
}
to {
pointer-events: all;
}
}
button{
animation: throttle 2s step-end forwards;
}
button:active{
animation: none;
}
通过 CSS 的思路实现了类似“节流”的功能，相比 JS 实现而言，实现更精简、使用更简单，没有框架限制。
1月27日 打卡day5
今天学习了用CSS实现JS的函数节流功能。
首先需要用pointer-events方式禁用点击事件，然后利用animation的特性进行时间的限制，除此之外，利用伪类:active设置一个点击行为，也就是触发时机。
@keyframes throttle {
from {
pointer-events: none;
}
to {
pointer-events: all;
}
}
button{
animation: throttle 2s step-end forwards;
}
button:active{
animation: none;
}
通过 CSS 的思路实现了类似“节流”的功能，相比 JS 实现而言，实现更精简、使用更简单，没有框架限制。
展开
评论
点赞
#青训营笔记创作活动#
1月26日 day4
今天学习了几个可以用CSS取代JS的操作。
1、颜色选择器
<input type="color" value="#FF99FF" />
可以直接设置 input 标签属性，因为它自带颜色选择的功能，就不需要通过复杂的 JavaScript 来实现一个颜色选择器组件。
2、顺滑切图
.box{
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
display: flex;
overflow-x: scroll;
}
CSS 的"scroll-snap-type: x mandatory;"可以让顺滑切图。当我们滑动横向滚动条到一定位置时，会自动为你切图，这样也显得更加流畅。
1月26日 day4
今天学习了几个可以用CSS取代JS的操作。
1、颜色选择器
<input type="color" value="#FF99FF" />
可以直接设置 input 标签属性，因为它自带颜色选择的功能，就不需要通过复杂的 JavaScript 来实现一个颜色选择器组件。
2、顺滑切图
.box{
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
display: flex;
overflow-x: scroll;
}
CSS 的"scroll-snap-type: x mandatory;"可以让顺滑切图。当我们滑动横向滚动条到一定位置时，会自动为你切图，这样也显得更加流畅。
展开
评论
点赞
#青训营笔记创作活动#
1月25日 打卡day3
今天学习了跨域问题的概念和解决方法。关于问题本质是浏览器的一种保护机制，它的初衷是为了保护保证用户的安全，防止恶意网站窃取数据，但它同时也阻碍了一些站点之间的正常调用。
跨域的三种情况分为:协议不同、域名不同、端口不同
跨域问题的解决方案:
1、使用 @CrossOrigin 注解实现跨域；
2、通过配置文件实现跨域；
3、通过 CorsFilter 对象实现跨域；
4、通过 Response 对象实现跨域；
5、通过实现 ResponseBodyAdvice 实现跨域。
1月25日 打卡day3
今天学习了跨域问题的概念和解决方法。关于问题本质是浏览器的一种保护机制，它的初衷是为了保护保证用户的安全，防止恶意网站窃取数据，但它同时也阻碍了一些站点之间的正常调用。
跨域的三种情况分为:协议不同、域名不同、端口不同
跨域问题的解决方案:
1、使用 @CrossOrigin 注解实现跨域；
2、通过配置文件实现跨域；
3、通过 CorsFilter 对象实现跨域；
4、通过 Response 对象实现跨域；
5、通过实现 ResponseBodyAdvice 实现跨域。
展开
评论
点赞