爱吃芋泥的麻薯
在掘金悄悄地许了一个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月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月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月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月23日 打卡day2
今天学习了如何通过第三方库实现docx文档预览功能。这能够很好地满足在线预览的需求，也方便对文档进行管理。我们在平时的学习和工作中也经常需要在线预览一些文档，因此这个技能对于大部分人来说都是十分实用的。
对于docx的实现，需要用到docx.preview插件:首先创建一个容器标签，然后引入并创建渲染函数。展开评论点赞 - #青训营笔记创作活动#
1月22日 打卡day1
今天学习的是8个关于CSS不常见但十分有用的属性。
1、position: sticky
简单的理解就是：在目标区域以内，它的行为就像 position:relative;在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
适用场景：表格标题栏、网站导航栏等位置的固定。
2. :empty 选择器
通过 :empty 选中内容为空的容器，然后通过伪元素为空容器添加提示，会更加方便。
3. gap
适用于当元素之间的间隙为除不尽的值时，除此以外gap 属性适用于 Grid 布局、Flex 布局以及多列布局。
4. background-clip: text
可以将一串字符或文本背景色设置为图片，类似于powerpoint中的相交功能。
5. user-select
user-select 属性可以禁用光标选中 ，让网页看着和移动端一样。
6. :invalid 伪类
表示任意内容未通过验证的 input 或其他 form 元素。对于突出显示用户的字段错误非常有用，也能实现简单的校验功能。
7. :focus-within 伪类
表示一个元素获得焦点，或该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配 :focus 伪类。这就可以根据子元素的状态来改变父元素的样式。
8、mix-blend-mode:difference
这一属性会查看每个通道中的颜色信息，比较底色和绘图色，用较亮的像素点的像素值减去较暗的像素点的像素值。简单来说就是上方图层的亮区将下方图层的颜色进行反相，暗区则将颜色正常显示出来，效果与原图像是完全相反的颜色。
展开评论点赞