鲸落于熙
获得徽章 2
赞了这篇文章
2022年8月30日打卡，《web跨域请求安全》![[不看]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_102.b113c42.png)
为什么会出现其他源的非法请求呢？
同源策略（SOP：协议、域名、端口）的核心是 保护属于某个源的资源不被其他源读取，它们彼此独立；简单的定义为==“可写不可读”==。跨域访问可以写，请求http\ 提交表单等，不可以读取，例如获取cookie，dom等。
跨院资源共享CORS 是一种官方的协议用来在不同源直接共享资源，所以它的目的不是为了安全，比如使用这样的协议： `Access-Control-Allow-Origin: *` 允许所有源共享资源，无疑是向入侵者敞开大门。
所以，SOP 和 CORS 是资源隔离和共享的相反方向。
![[不看]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_102.b113c42.png)
为什么会出现其他源的非法请求呢？
同源策略（SOP：协议、域名、端口）的核心是 保护属于某个源的资源不被其他源读取，它们彼此独立；简单的定义为==“可写不可读”==。跨域访问可以写，请求http\ 提交表单等，不可以读取，例如获取cookie，dom等。
跨院资源共享CORS 是一种官方的协议用来在不同源直接共享资源，所以它的目的不是为了安全，比如使用这样的协议： `Access-Control-Allow-Origin: *` 允许所有源共享资源，无疑是向入侵者敞开大门。
所以，SOP 和 CORS 是资源隔离和共享的相反方向。
展开
评论
点赞
2022年8月23日打卡，前端调试工具devtool工具隐藏了很多调试工具，该文章总结了开发中常用的调试场景和实际应用场景，帮助你我他入门devtool。强烈推荐![[强]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_79.6185c09.png)
![[强]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_79.6185c09.png)
评论
点赞
2022年8月21日打卡，《前端四种代码封装模式》
针对不同的场景可以有不同的封装方法，需要大量产生类似实例的组件可以考虑用工厂模式来封装。封装利用的特性是this在函数被new调用时，指向的是new出来的对象，new出来的对象自然是类的instance，这里的this instanceof jQuery就是true。如果是普通调用，他就是false，我们就帮他new一下。
优点：降低new对象的次数，提高效率，代码封装后更明确清晰，易于维护。
这个作者相关文章写得很透彻，推荐！
针对不同的场景可以有不同的封装方法，需要大量产生类似实例的组件可以考虑用工厂模式来封装。封装利用的特性是this在函数被new调用时，指向的是new出来的对象，new出来的对象自然是类的instance，这里的this instanceof jQuery就是true。如果是普通调用，他就是false，我们就帮他new一下。
优点：降低new对象的次数，提高效率，代码封装后更明确清晰，易于维护。
这个作者相关文章写得很透彻，推荐！
展开
评论
点赞
赞了这篇文章
赞了这篇文章
2022年8月18日打卡，这篇文章相当于css查询的宝典了，开发中也尝试了文中的布局方式，脱离了初级只会flex position的程度![[捂脸]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_28.8981538.png)
，媒体查询用在页面自适应上大大防止了css变形，还要计算函数calm也是这次开发发现的好东西。前端菜鸟学到了！
![[捂脸]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_28.8981538.png)
，媒体查询用在页面自适应上大大防止了css变形，还要计算函数calm也是这次开发发现的好东西。前端菜鸟学到了！ 评论
点赞
2022年8月17日打卡，前端开发有很多细节和规范要注意，某些地方可以用更优的办法实现，文章内部分的基础知识点补充了我的空缺，可以运用到此次前端开发项目中，受益匪浅！！！掘金的文章质量很高的！
评论
点赞
赞了这篇文章
7月27日打卡，今日学习《移动端开发的屏幕图像字体布局的兼容适配》∶
①dp 和 rem 尝试使用；
放弃使用像素作为尺寸单位：用dp(对于前端来说，这里可能是rem)尺寸等方法来确保页面在分辨率相差很大的设备上，看起来也能保持一致。
②文字显示/隐藏
能够自动隐藏/部分显示的内容：如在电脑上显示的的大段描述文本，在手机上就只能少量显示或全部隐藏
③个人认为，响应式设计更优
响应式设计是 Responsive Web Design（RWD），自适应设计是 Adaptive Web Design（AWD）；从定义上而言，RWD 是一套代码，适用于所有屏幕。而 AWD 则是多端多套代码。
④渐进增强（逐层累加功能）vs 优雅降级（向下兼容）
⑤设备独立像素 = CSS 像素 = 逻辑像素（用户设备尺寸px）
⑥设备像素 = 物理像素（分辨率，屏幕实际的物理像素）
⑦DPR = 物理像素 / 设备独立像素，dpr越高，画面像素点多越精致
⑧H5手机适配也就是指的这两个维度：
1. 适配不同屏幕大小，也就是适配不同屏幕下的 CSS 像素
2. 适配不同像素密度，也就是适配不同屏幕下 dpr 不一致导致的一些问题
⑨适配屏幕
1、CSS媒体查询-按照百分比还原，但不同css属性继承规范不同，百分比总需要一个参照元素，很难保持一致。
2、rem（font size of the root element）根据网页的根元素来设置字体大小，em 是根据其父元素的字体大小来设置；基于此，淘宝早年推行的一套以 rem 为基准的适配方案：lib-flexible。其核心做法在于：根据`document.documentElement.clientWidth` 动态修改 `<html>` 的 font-size ，页面其他元素使用 rem 作为长度单位进行布局，从而实现页面的等比缩放。
3、viewport显示网页的一块区域，可大可小，不局限于浏览器可视区域；让布局视口宽度等于设备视觉视口宽度，常用在浏览器和移动端适配问题。
以上都是摒弃的旧方案，来看vw适配方案：
`vw`等于初始包含块（html元素）宽度的1%，也就是
- `1vw` 等于 `window.innerWidth` 的数值的 1%
- `1vh` 等于`window.innerHeight` 的数值的 1%
①dp 和 rem 尝试使用；
放弃使用像素作为尺寸单位：用dp(对于前端来说，这里可能是rem)尺寸等方法来确保页面在分辨率相差很大的设备上，看起来也能保持一致。
②文字显示/隐藏
能够自动隐藏/部分显示的内容：如在电脑上显示的的大段描述文本，在手机上就只能少量显示或全部隐藏
③个人认为，响应式设计更优
响应式设计是 Responsive Web Design（RWD），自适应设计是 Adaptive Web Design（AWD）；从定义上而言，RWD 是一套代码，适用于所有屏幕。而 AWD 则是多端多套代码。
④渐进增强（逐层累加功能）vs 优雅降级（向下兼容）
⑤设备独立像素 = CSS 像素 = 逻辑像素（用户设备尺寸px）
⑥设备像素 = 物理像素（分辨率，屏幕实际的物理像素）
⑦DPR = 物理像素 / 设备独立像素，dpr越高，画面像素点多越精致
⑧H5手机适配也就是指的这两个维度：
1. 适配不同屏幕大小，也就是适配不同屏幕下的 CSS 像素
2. 适配不同像素密度，也就是适配不同屏幕下 dpr 不一致导致的一些问题
⑨适配屏幕
1、CSS媒体查询-按照百分比还原，但不同css属性继承规范不同，百分比总需要一个参照元素，很难保持一致。
2、rem（font size of the root element）根据网页的根元素来设置字体大小，em 是根据其父元素的字体大小来设置；基于此，淘宝早年推行的一套以 rem 为基准的适配方案：lib-flexible。其核心做法在于：根据`document.documentElement.clientWidth` 动态修改 `<html>` 的 font-size ，页面其他元素使用 rem 作为长度单位进行布局，从而实现页面的等比缩放。
3、viewport显示网页的一块区域，可大可小，不局限于浏览器可视区域；让布局视口宽度等于设备视觉视口宽度，常用在浏览器和移动端适配问题。
以上都是摒弃的旧方案，来看vw适配方案：
`vw`等于初始包含块（html元素）宽度的1%，也就是
- `1vw` 等于 `window.innerWidth` 的数值的 1%
- `1vh` 等于`window.innerHeight` 的数值的 1%
展开
评论
点赞
7月24日打卡，今日学习《在H5移动端开发遇到的问题》∶本文介绍移动端的一些细节方面的优化，比如，input失焦后页面没有回弹，可以获取滚动条长度再次赋值使其回弹。在其他方面也可以根据设备尺寸的不同，利用百分比或者记录数值来完成适配。文章里还提到了，可以使用css来禁止用户长按保存复制的行为，-webkit-user-select: none，关于webkit的css属性还没学习使用过，找到漏洞了~这个点可以用在考试平台的开发中诶……rem的适配是真的牛，之前一直使用百分比和rpx，以后要尝试一下rem；最后一个知识点，关于弹窗的滑动穿透，我发现还是有很多我不知道的神奇的API。继续学习吧，小菜鸡！![[泣不成声]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_40.348108b.png)
![[泣不成声]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_40.348108b.png)
展开
评论
点赞