
前端认知
Master.Yuan
润物细无声
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
js的柯里化(curry)
什么是柯里化?将使用多个参数的函数转换成一系列使用一个参数的函数柯里化的用途?柯里化实际将简单的问题复杂化了,单复杂化的同时,使用函数时拥有了更多的自由度如常用手机号码校验:如果校验多个电话号码,则相同的正则我们需要写多次。如果用柯里化来封装,先简单实现一个curry函数我们用curry函数再封装手机校验函数,达到参数复用的目的最后调用时直接传手机号码即可:...原创 2022-07-13 23:07:10 · 716 阅读 · 0 评论 -
vue中mixins的属性/方法/生命周期函数的优先级
1、对于data定义属性,组件中定义属性覆盖mixins中同名字段2、对于created、mounted等生命周期函数,mixins中中生命周期函数先执行(执行顺序按mixins中顺序),再执行组件中生命周期函数3、对于methods中的同名方法,组件内的方法覆盖mixins中的方法注:对于相同的computed属性,组件的computed属性覆盖mixins内的computed属性,而对于相同的watch监听,mixins中的watch监听先执行。...原创 2022-05-12 21:34:49 · 4274 阅读 · 1 评论 -
js和css是如何影响dom树构建的
浏览器会下载HTML解析页面生成dom数,遇到css标签就开始解析css,这个过程不会阻塞。但是如果遇到了js脚本,此时假如CSSOM还没构建完,需要等待CSSOM构建完,再去执行js脚本,然后再执行dom解析,此时会阻塞。就是说:js会阻塞dom的生成,而样式文件又会阻塞js的执行。用如下代码示例来说明:script脚本阻塞了dom的生成,此时CSSOM还没有构建完,需要等待CSSOM构建完,再执行js脚本。此时dom还没解析完,导致如下代码执行出错(没有查找到该元素)documen..原创 2022-05-07 17:18:25 · 442 阅读 · 0 评论 -
关于盒子模型的的见解
所谓的盒子模型,指的是1)、标准盒子模型2)、IE盒模型而区分这两种盒模型所用的方式是通过样式:border-sizing: content-box;(标准盒模型)border-sizing:border-box;(IE盒模型)来区分的。标准盒模型:指定的dom元素的宽度或高度指的是内容区content的宽高,而dom实际的宽高还要加上对应的内边距padding、border;而dom所占据的空间还要加上margin;IE盒模型:指定的dom元素的宽度或高度则包含了borde原创 2021-05-23 19:56:52 · 426 阅读 · 0 评论 -
load和DOmContentLoaded的区别
首先Dom文档加载步骤1)、解析html结构2)、加载外部脚本和样式表文件3)、解析并执行脚本文件4)、构造HTML DOM模型(DOMContentLoaded执行点)5)、加载图片等外部文件6)、页面加载完毕 (load)从上面这个流程,我们可以清晰的看到load和DOMContentLoaded的不同,DOMContentLoaded是在第6步之后执行,而load是在第4步之后执行,很明显DOMContentLoaed是在load之前执行。...原创 2021-05-23 19:16:47 · 779 阅读 · 0 评论 -
webpack五个核心概念
1、entry(入口)指示webpack以哪个文件为入口起点开始打包,分析构建内部依赖图。2、output(输出)指示webpack打包后的资源bundles到哪去,以及如何命名。3、loader能让webpack理解那些非javascript文件(webpack自身只理解javascript)4、plugins可用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。5、mode(模式)指示webpack使用相应模式的配置...原创 2021-04-29 08:32:50 · 485 阅读 · 0 评论 -
gitHub里fork的库出现404了怎么办?
今天工作时,删除fork的库后,再fork时,竟然提示命名空间已被占用。去私人仓查看时,发现之前fork的库还存在,但点进去后是404了。一时之间陷入了死循环,最后去到CodeHub中,在项目的setting里,进行高危操作,将仓库删除。就可以再fork了。...原创 2021-04-28 22:04:22 · 1164 阅读 · 1 评论 -
前端3种数据存储方式的区别
1、sessionStorage(会话存储)--生命周期:浏览器打开到关闭的过程大小:5M保存的位置:浏览器端方法都有哪些:setItem('key',value) 设置item对象getItem('key') 得到item对象的值removeItem('key') 移除item对象2、lovcalStorage(永久存储)--生命周期:永久,除非人为删除...原创 2020-03-21 18:01:32 · 1535 阅读 · 0 评论 -
document中ready、window中onload的区别
document.ready() 文档加载完毕,页面结构加载完毕;window.onload() 整个页面加载完毕,包括图片。原创 2020-03-19 09:36:11 · 301 阅读 · 0 评论 -
前端认知——前端三层
HTML,结构层,从语义的角度描述页面的结构;CSS,样式层,从审美的角度装饰页面;javascript,交互层,从交互的角度提升用户体验。原创 2020-03-12 21:58:21 · 401 阅读 · 0 评论