- 博客(28)
- 收藏
- 关注
RSS订阅原创 Event Loop事件循环
首先需要明白什么是Event Loop？Event Loop就是计算机系统的一种运行机制。JavaScript就是采用的这种机制 ，来解决单线程运行带来的一些问题。1. JavaScript为什么是单线程的？JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。举个例子：假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这样就.
2021-08-05 21:36:42
114
原创 JavaScript中new一个对象到底是怎么new的？
在JavaScript中，new是一个很常见的操作符，我们写代码的过程中经常会通过new一个构造函数或者类来创建出一个实例，那么为什么new一个构造函数或者类就可以创建出一个实例并且这个实例上还会有构造器的构造属性和构造器原型上的方法呢？js中new一个对象实例到底发生了什么？下面我们一起来探讨下先通过一个例子看一下js中怎么通过new一个构造函数创建一个新的对象：function Person(name, age) { this.name = name; this.age = age;}.
2021-08-04 22:10:40
289
原创 grid布局方式
参考博客 CSS Grid 网格布局教程 作者： 阮一峰什么是Grid布局？网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，可以做出各种各样的布局。它与flex布局有些相似，但是flex只能针对轴线排列，是一维布局，而grid将容器划分为了行和列，是二维布局，简单的来说就是grid布局比flex布局牛逼太多。先来看看grid布局有哪些属性和flex一样，采用grid布局的元素称为’容器’，容器内部的子元素称为’项目’。容器上的属性displa
2020-06-27 20:37:54
1058
原创 nth选择器详解
先来认识几个常用的:first-child选择某个元素的第一个子元素:last-child选择某个元素的最后一个子元素:nth-child()选择某个元素的一个或多个特定的子元素:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算:nth-of-type()选择指定的元素:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算:first-of-type选择一个上级元素下的第一个同类子元素:last-of-type选
2020-05-23 12:49:05
2878
原创 父盒子跟随子盒子margin-top移动问题
问题：当我们想给子元素设置margin-top时，发现子元素没有出现上外边距的效果，反而是父元素出现了上外边距的效果。原因根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。说白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己父元素。直到找到父元素有有效的padding或border为止。解决方法1.给父盒子设
2020-05-23 11:45:44
1223
1
原创 如何清除两个inline-block元素之间的默认间隙
清除两个inline-block元素之间的默认间隙最近在做项目时遇见一个问题就是我给一个盒子设置了display：inline-block后，元素之间会有一点默认间隙，后来上网一查，才知道inline-block是有默认间距的，默认间距为4px。下面就说一下我的解决方法：问题： <style> .box1{ width: 800px; height: 1000px; background-color: black; } .box1 .innerbox1{
2020-05-23 10:34:06
480
原创 Node系列-简易小爬虫爬取图片并下载
NodeJS爬取网站图片并下载说到爬虫，大家首先想到的一定是Python爬虫(反正我是)，前段时间学习nodejs老师讲了一个爬虫案例当时就感到很兴奋，没想到js也能爬虫，下面请看实例代码1.项目准备前提是安装了node环境并且npm安装了cheerio(用于筛选数据)。2.上代码const https = require('https'); // node内置模块https，如果你要爬取的网站是http协议就要引入http模块，两者用法基本相同const fs = require('fs');
2020-05-21 11:23:55
518
原创 使用after伪类-清除浮动
清除浮动解决了什么问题？父元素因为子元素的浮动而高度撑不起来的问题？比如：外面父盒子设置一个红色的边框，两个子盒子分别为蓝色和黑色。父元素没有设置高度。正常应该是这样：如果给两个子盒子设置了浮动的话就会变成这样：父盒子的高度就会变为零不会被撑开。这个时候就需要清除浮动了，方法是使用after伪元素清除浮动。即给父盒子天津爱如下样式：.box1::after{ content: ''; display: block; clear: both;}这样父盒子的高度
2020-05-08 23:27:29
2011
原创 Vue系列-使用better-scroll的方法
1.npm下载npm install better-scroll --save2.在需要使用better-scroll的地方引入import BScroll from ‘better-scroll’3.初始化这个组件，在methods 里面将这个写为一个方法_initScroll () { this.menuScroll = new BScroll(this.$refs.men...
2020-04-13 21:21:17
159
原创 什么是 Sticky footer 布局
今天在看一个vue项目时看到了这个Sticky footer布局，第一次听到这个所以记录一下1.什么是Sticky footer布局一个网页通常分为页头header，内容content和页脚footer，Sticky footer布局就是在页面内容不够长的情况下，footer能定位在页面的最下方，并且页面足够长的时候，footer也能被内容向下推送。简单的说就是为了解决这样的画面：使用St...
2020-04-10 21:34:12
165
转载 移动端1像素边框问题
在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的移动端1px像素问题。首选先看一下，pc时代和移动端时代对1px的对比。一、像素的理解像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细致，网站看起来更明快。1、...
2020-04-09 23:49:06
411
原创 使用IcoMoon将svg图片生成字体图标
1.进入IcoMoon官网 https://icomoon.io/点击iconmoon App按钮2.点击import icons按钮3.选中你的svg图片，然后点击Generate Font4.这里可以配置一些图标信息，然后点击下载5.下载完成解压后只需要将fonts和style.css保留就ok6.使用...
2020-04-09 23:16:33
210
原创 Vue项目中使用MUI的图片预览插件
大家在用手机app时大部分都有点击图片预览大图这样的效果最近自己在用vue+webpack写一个手机端项目时就想加上这个效果，就查阅资料看到MUI组件库有这个功能，自己摸爬滚打将近一天才把这个图片预览插件整明白了。。接下来就上干货：1.先把官方文档给整上来看看 https://dev.dcloud.net.cn/mui/template/#previewimage2.看了官方文档后...
2020-04-08 11:32:28
881
原创 使用Mint UI的Lazy load实现图片懒加载
官方文档：https://mint-ui.github.io/docs/#/zh-cn2/lazyload步骤：1.下载Mint UI组件库并在main.js中引入npm i mint-ui -Simport MintUI from ‘mint-ui’;import ‘mint-ui/lib/style.css’;Vue.use(MintUI);2.为 img 元素添加 v-la...
2020-04-06 00:31:17
234
原创 css3中的display：-webkit-box的用法
webkit-box1.之前要实现横列的web布局，通常就是float或者display:inline-block;但是都不能做到真正的流体布局。至少width要自己去算百分比。2.flexiblebox就可以实现真正意义上的流体布局。只要给出相应属性，浏览器会帮我们做额外的计算。3.box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典...
2020-02-22 16:59:57
227
原创 初识Promise对象
一、Promise是什么？promise是一个对象用于异步操作，它表示一个尚未完成且预计在未来完成的异步操作。二、为什么要用Promise？当我们发送异步请求时，如果第一次请求后还需要在第一次请求的前提下再次发出第二次请求，那么就会出现多层回调嵌套的现象。request('test1.html', '', function(data1) { console.log('第一次请求...
2020-02-19 11:09:33
154
原创 localStorage及JSON.stringify()和JSON.parse()使用方法
文章是本人闲时所写，方便自己以后查阅，如若有幸被您阅读的话，备感荣幸，文章仅为个人理解，如内容有误还望告知，感谢！！！
2020-02-05 12:04:22
1809
原创 编程式的导航
编程式的导航除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL当你点击 <router-link> 时，这个方法会在内部调...
2020-02-03 10:56:51
241
原创 Vue-preview图片预览组件
Vue-preview是一个非常好用的移动端图片预览的组件，简单易用是它的一大特点，支持滑动换图，支持手势缩放，显示当前时第几张和总共多少张。使用方法1.安装npm i vue-preview -S2.在main.js文件中导入该组件，并挂载到Vue身上import VuePreview from ‘vue-preview’;Vue.use(VuePreview);3.使用...
2020-02-02 19:38:59
556
原创 使用axios发送get和post请求
文章是本人闲时所写，方便自己以后查阅，如若有幸被您阅读的话，备感荣幸，文章仅为个人理解，如内容有误还望告知，感谢！！！
2020-02-02 14:40:47
893
原创 moment组件日期过滤器使用步骤
1.下载 npm i moment -S2.在main.js中导入moment组件import Moment from ‘moment’;3.在main.js中格式化日期的过滤器Vue.filter(‘dataFormat’,function(dataStr, pattern = ‘YYYY-MM-DD HH:MM’){return Moment(dataStr).format(patt...
2019-12-23 10:15:54
352
原创 display:flex；弹性布局
前言：文章是本人闲时所写，方便自己以后查阅，如若有幸被您阅读的话，备感荣幸，文章仅为个人理解，如内容有误还望告知，感谢！！！
2019-12-09 09:35:47
1384
原创 Bootstrap 下拉菜单更改为悬停(hover)触发
bootstrap的下拉组件，需要点击click时，方可展示下拉列表。但是大多数网页中还是用hover的比较多。如何实现这个hover事件呢，其实在dropdown组件的点击事件的基础上很好完成的。细心者可以发现，下拉框出现时，其父级会有一个open的class属性。我们只需要监听hover事件时，给父级增加或删除open类就可以了。...
2019-12-05 20:08:16
1446
原创 JavaScript中的数组方法扩展
前言：文章是本人闲时所写，方便自己以后查阅，如若有幸被您阅读的话，备感荣幸，文章仅为个人理解，如内容有误的还望告知，感谢！！！
2019-11-30 17:30:43
568
2
原创 简述事件捕获和事件冒泡
前言：文章是本人闲时所写，方便自己以后查阅，如若有幸被您阅读的话，备感荣幸，文章仅为个人理解，如内容有误的还望告知，感谢！！！
2019-11-24 19:22:12
744
原创 Bootstrap 轮播（Carousel）插件
简介：Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。
2019-11-21 18:43:26
410
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人