![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
学习笔记
文章平均质量分 50
小朱爱开发
老老实实的前端搬砖工~~~
展开
-
通俗易懂分析:Vite和Webpack的区别
vite和webpack的区别对比原创 2024-02-22 15:17:56 · 1149 阅读 · 0 评论 -
vue如何动态加载显示本地图片资源
vue如何动态加载显示本地图片资源原创 2024-02-21 17:50:50 · 1174 阅读 · 0 评论 -
es6新增系列—let和const命令
es6新增系列—let和const命令原创 2022-06-30 16:18:19 · 205 阅读 · 0 评论 -
学习笔记—babel转码器,babel是什么
babel 转码器es6是2015年6月开始正式创立,所以一些老浏览器并不能解析es6的语法,babel转码器应运而生,可以将es6的代码转译为es5代码。安装babel: npm install --save-dev @babel/corebeble配置文件:babelrc该文件用来设置转码规则集和插件(转码规则集和插件均需要下载安装)//babelrc { "presets": [ //最新的转码码规则集 //npm install --save-dev @babe原创 2021-12-09 18:43:03 · 443 阅读 · 0 评论 -
v-model实现子传父组件(原理说明)
v-model实现子组件向父组件传值。原创 2021-05-16 14:28:29 · 560 阅读 · 0 评论 -
封装防抖节流函数、事件对象event对象的存活期
在封装防抖函数时,在网站上借鉴了下其它答主的办法,发现大家都是这样封装的:function debounce(method,delay){let myTimer=null;return function(){myTimer && clearTimeout(myTimer);let self=this;args = arguments;var myTimer=setTimeout(function(){ method.apply(self,args)},delay)}原创 2021-05-09 21:11:53 · 403 阅读 · 1 评论 -
怎么理解css文档流/元素脱离文档流后有什么特点
文档流处在文档的最底层,它规定了一个页面的位置和元素布局等规则。我们所创建的元素都处在文档流中,文档流所指定的规则比如块级元素独占一行,内联元素不会独占一行,内联元素不能设置高宽,父元素的高度由子元素撑开等。文档流之所以称为流,是它的布局像流一样从上到下在从左到右。而元素脱离文档流之后,该元素便不再遵循文档流的规则,比如块级元素不再独占一行,内联元素脱离文档流之后可以设置高宽,脱离的元素不能撑开父元素,不再在文档流中占有位置等。而脱离文档流的设置有两种:float,position:absolute原创 2021-04-02 22:44:36 · 1320 阅读 · 0 评论 -
css常用长度单位
px,em,%,rem,vw,vh,vmax,vmin前端工程师面试中经常会问到单位问题,一次性捋清楚就可1、em1em=父元素的font-size.2、rem1rem=html父元素的font-size原创 2021-04-02 20:42:41 · 207 阅读 · 0 评论 -
:nth-child和:nth-of-type选择器的区别
:nth-child和:nth-of-type的主要区别是-type是选中后代中出现的所有类型的元素中的第一个,而-child是选中第一个出现的元素有点拗口,可能会听不懂,放个例子:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> *{原创 2021-04-02 16:41:48 · 338 阅读 · 1 评论 -
学习笔记—使div/滑块/盒子跟随鼠标移动
<script type="text/javascript"> window.onload=function(){ var box1=document.getElementById("box1"); document.onmousemove=function(event){ event=event||window.event; var left=event.clientX; var top=event.clientY; box1.style.原创 2020-05-19 15:54:27 · 436 阅读 · 0 评论 -
学习笔记—使div/盒子/滑块/方块在鼠标按下并移动时跟随鼠标移动,鼠标松开释放时div不跟随鼠标移动(鼠标拖拽idv)
<script type="text/javascript"> window.onload=function(){ var box1=document.getElementById("box1"); document.onmousedown=function(){ document.onmousemove=function(event){ event=event||window.event; var left=event.clientX; v原创 2020-05-19 15:58:06 · 606 阅读 · 0 评论 -
学习笔记—JS实现对象和数组的深度克隆
什么是深度克隆?深度克隆也叫深拷贝,即不影响被拷贝对象的条件下的复制对象或数组。首先来分析一波,看到这里可能有小盆友们要说:这不是很简单嘛,直接a=b呀,这种实现的深度克隆是有条件的,即被拷贝对象只能是基本数据类型,原因嘛,如果是对象或数组,这样赋值的话赋的值是该对象或数组的引用,a变b也变,那么就与深度克隆的初衷相悖了。所以我们得来另想出路:首先让我们来回顾一波有哪些数组和对象的方法是能实现拷贝的:1、Array.prototype.concat()起到连接两个数组的作用,返回的是一个新数组原创 2020-07-07 15:21:20 · 373 阅读 · 0 评论 -
学习笔记—什么是微数据?itemscope/itemtype/itemprop(搜索引擎seo优化)
什么是微数据MDN官网定义:微数据是WHATWG HTML标准的一部分,用于在网页上的现有内容中嵌套元数据。[1]搜索引擎,网络抓取工具和浏览器可以从网页中提取和处理微数据,并使用它为用户提供更丰富的浏览体验。搜索引擎从直接访问此结构化数据中受益匪浅,因为它允许搜索引擎了解网页上的信息并向用户提供更相关的结果。微数据使用支持词汇表来描述项目和名称 - 值对,以便为其属性赋值。与使用RDFa和微格式的类似方法相比,微数据试图提供一种使用机器可读标签注释HTML元素的简单方法。看到这里可能很多同学一脸懵,这原创 2020-07-13 16:48:24 · 1677 阅读 · 0 评论 -
学习笔记—css模拟固定定位 / 解决ie6固定定位失效问题
ie6固定定位失效ie6中是不支持元素固定定位的,所以不要慌,我们可以用css代码模拟固定定位。在贴代码之前,先要说明几个相关的问题:1、在默认情况下,当页面内容超出视窗高度时,会出现滚动条,而这个滚动条是在html标签之外的初始包含快上的!!!初始包含块是一个浏览器窗口大小的矩形并非浏览器窗口2、绝对定位绝对定位是相对于最近的开了定位的祖先元素进行定位的,如果没有这样的祖先元素,则相对于初始包含块进行定位所以我们可以利用绝对定位的特点进行固定定位模拟,当一个元素开启绝对定位但没有开启了定位的原创 2020-08-27 22:26:22 · 237 阅读 · 0 评论 -
学习笔记—BFC/块级格式化上下文
Box:CSS布局基本单位,一个页面由很多Box组成,元素的类型和display属性决定了该元素的Box类型,会有不同的 formatting context容器来管理,而不同的formatting context容器有不同的渲染方式。一共由两种Box类型分别对应两种不同的渲染方式:①、block-level Boxdisplay:block,list-item,table的元素,由BFC容器来管理和渲染。②、inline-level Boxdisplay:inline,inline-block,原创 2020-08-29 17:22:51 · 139 阅读 · 0 评论 -
学习笔记—元素垂直水平居中方案总结
元素垂直水平居中分为以下两种情况:1、盒子高宽已知:#box1{ width: 200px; height: 200px; background-color: red; position: absolute; left: 0; right: 0; top:0; bottom: 0; margin: auto; }2、未知高宽:#box2{position:absolute;left:50%;top:50%;transform:tra原创 2020-09-03 11:02:31 · 123 阅读 · 0 评论 -
学习笔记—浏览器加载HTML页面的顺序
还记得当时电话面试某大厂时问过我一个这样的问题:你觉得js代码放在body标签的前面和后面有什么区别?所以呀,这个问题其实蛮重要的,很多面试官都会问,那么今天就让我来捋一捋浏览器加载HTML页面的顺序:首先我们可以把浏览器加载页面的工作分给渲染引擎和javascript引擎,这两个小伙伴貌似不能同时工作(我也不是很懂,望大神指教)!!!ok,言归正传,浏览器在解析页面时,是从上到下的,我们来看下面这个结构:浏览器加载顺序:1、解析到head标签内的内部样式表①,渲染引擎加载样式表中的样式,下载引原创 2020-10-21 16:20:55 · 602 阅读 · 0 评论 -
学习笔记—前端移动端开发知识点总结
1、什么是viewport,怎么理解在浏览器中渲染页面,当我们设置html,body{width:100%;}这个时候,body的宽度应该是初始包含快宽度的100%,而初始包含快的宽度为浏览器窗口宽度大小。按照这个理论来说,在移动端,也是这个道理,width:100%,应该就是移动端设备的宽度;其实不然,在移动端设备和html,body之间还有一层移动端初始包含快:viewport(可以这么理解,正不正确有待考究),而viewport的宽度默认都是980px.这样用文字表述未免苍白,可以参考原创 2020-11-16 19:05:14 · 671 阅读 · 0 评论 -
学习笔记—JS模块化规范总结
以下内容都是我的学习总结,可能会有不对的地方,还希望看到的伙伴们批评指正,谢谢啦一、为什么js文件需要模块化什么是“模块”:“模块”是为完成某一功能所需的一段程序或子程序。模块是系统中“职责单一”且“可替换”的部分。所谓的模块化就是指把系统代码分为一系列职责单一且可替换的模块。模块化开发是指如何开发新的模块和复用已有的模块来实现应用的功能。在js文件没有模块化之前,我们往一个页面中引入js文时件,采用的是这种写法:这样的做法缺点很多,尤其在引入文件过多的时候越明显,主要的缺点如下:1、请求过多原创 2020-11-30 15:35:08 · 107 阅读 · 0 评论