- 博客(31)
- 收藏
- 关注
原创 浅谈一下防抖和节流
什么是防抖和节流函数防抖和节流,都是控制事件触发频率的方法。应用场景有很多,输入框持续输入,将输入内容远程校验、多次触发点击事件、onScroll等等。防抖(debounce)所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。注:防抖函数分为非立即执行版和立即执行版。例:鼠标滑过一个div,触发onmousemove事件,它内部的文字会显示当前鼠标的坐标。非立即执行版:是触发事件后函数不会立即执行,而是在 n 秒后执行,如果在 n
2020-11-25 15:29:40
246
原创 如何进行前端优化
前端优化的目的是什么 ?1. 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。2. 从服务商角度而言,优化能够减少页面请求数、或者减小请求所占带宽,能够节省可观的资源。一、HTML优化渲染顺序1、CSS样式表置于头部,CSS会一边加载一边渲染2、JS脚本置于尾部,JS在未加载完成之前,会阻塞渲染3、使用外部的样式表和脚本,优先加载出HTML结构4、关键JS、CSS代码可以内嵌在HTML中,比如:rem动态等5、避免使用iFrame6、使用
2020-11-25 14:35:24
2821
转载 npm 包的坎坷“续命”之生
如果说 npm 的大新闻,莫过于之前的 left-pad 撤包事件,event-stream 投毒事件,Ant Design 彩蛋事件。使得很多前端开发者又开始重新思考 npm 生态时候真的存在问题? 今天我们文章的主角是 memwatch,一个用来帮助我们检查 Node.js 是否存在内存泄漏的库,和这个库传奇的一生。 2012 年 02 月 06 日,一位 Mozilla ...
2020-11-23 15:46:03
228
转载 前端面试代码题
目录 序导读 DOM事件代理 数组 对象扁平化去重 - `unique()`拷贝浅拷贝深拷贝`copy()`函数实现`JSON.stringify` 字符串去除空格 - `trim()`字符串全排列广度优先实现深度优先实现 ...
2020-11-23 15:23:59
306
转载 面试高频的13个手写代码
1. promise.allPromise.all = function(promises) { return new Promise(function(resolve, reject) { var result = [] var count = 0 var promiseNum = promises.length if (promises.length === 0) resolve([]) for (let i = 0; i < promis
2020-11-17 17:53:47
290
原创 CSS清除浮动的方法以及优缺点
1.父级div定义 height<style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;} .left{float:left;width:20%;height:200px;backgrou
2020-11-16 16:31:24
102
转载 对于ES6的理解进阶
一:面向对象:类class 面向对象三大特性之封装 封装是面向对象的重要原则,它在代码中的体现主要是以下两点: 封装整体:把对象的属性和行为封装为一个整体,其中内部成员可以分为静态成员(也叫类成员)和实例成员,成员之间又可细分为属性和方法。访问控制:外部对对象内部属性和行为的访问权限,简单来分时就是私有和公有两种权限。 以下是基本封装示例: class Animal{ constructor(name) { this.name = name;// 实例属性 }
2020-11-16 16:23:29
243
原创 前端面试题整理
1、快速扰乱数组排序 var arr = [1,2,3,4,5,6,7,8,9,10]; arr.sort(function(){ return Math.random() - 0.5; }) console.log(arr);2、JS判断设备来源 function deviceType(){ var ua = navigator.userAgent; var agent = ["Android", "iPhone", "Sym
2020-11-09 16:07:23
248
转载 moment.js时间处理类库--时间戳和时间格式相互转换
nodejs引入moment (1)安装 npm install moment (2)引入 import moment from 'moment'; 获取时间 1.获得当前时间 var now = moment() 2.获取时间戳(当前时间转时间戳) moment().format('X') // (大写X)以秒为单位,返回值为字符串类型moment().format('x'...
2020-11-09 15:31:30
16606
原创 v-show和v-if的区别?
1.共同点:都能控制元素的显示和隐藏。2.不同点:实现本质⽅法不同,v-show本质就是通过控制css中的display设置为none,控制隐藏,只会编译⼀次;v-if是动态的向DOM树内添加或者删除DOM元素,若初始值为false,就不会编译了。⽽且v-if不停的销毁和创建⽐较消耗性能。3.总结:如果要频繁切换某节点,使⽤v-show(切换开销⽐较⼩,初始开销较⼤)。如果不需要频繁切换某节点使⽤v-if(初始渲染开销较⼩,切换开销⽐较⼤)。v-show 使用:<div v-show="sh
2020-11-09 15:22:27
164
原创 JavaScript中Map和ForEach的区别
JavaScript中Map和ForEach的区别forEach(): 针对每一个元素执行提供的函数map(): 创建一个新的数组,其中每一个元素由调用数组中的每一个元素执行提供的函数得来forEach()方法不会返回执行结果,而是undefined。也就是说,forEach()会修改原来的数组。而map()方法会得到一个新的数组并返回。示例下方提供了一个数组,如果我们想将其中的每一个元素翻倍,我们可以使用map和forEach来达到目的。let arr = [1, 2, 3, 4, 5];
2020-11-06 14:41:43
217
原创 JS中attr 和 prop 的区别
attr : 设置或返回被选元素的属性值.prop : 获取在匹配的元素集中的第一个元素的属性值。attr 和 prop 的本质attr 是 attribute 的缩写,prop 是 property 的缩写,都有属性的意思,只不过 attr 是操作 html 文档节点属性,prop 是操作 js 对象属性. attr 在 js 中使用的是 setAttribute 和 getAttribute 而 prop 直接使用原生 js 的 element[value] 和 element[value]=ke
2020-11-06 14:30:50
4724
原创 Express
配置文件npm init -y安装cnpm install express --save快速创建全局安装cnpm install -g express-generator在项目目录中创建项目express --view=ejs myapp[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VWdhSgMX-1604383470734)(C:\Users\凉城\AppData\Roaming\Typora\typora-user-images\image-2
2020-11-03 14:05:22
164
原创 操作MongoDB数据库
mongoDB命令行操作数据库(以管理员身份运行)net start mongodb启动数据库mongo数据库列表show dbs创建选择数据库use mydb数据库集合列表show collections删除数据库db.dropDatabase()创建集合db.createCollection(“name”)删除集合db.collection.drop()查看数据db.集合名.find()...
2020-11-03 13:58:08
69
原创 简述js中replace
replace var str = 'hello world' var a = str.replace('l', 'L') console.log(a);//heLlo world如果需要替换的是字符串,则就进行一次替换var str = 'hello world' var a = str.replace(/l/g, 'L') console.log(a);如果进行全局搜索,则全部替换...
2020-09-18 15:08:06
88
原创 vue中computed的用法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id=
2020-09-18 15:05:51
436
原创 vue中watch小案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id=
2020-09-18 15:04:49
138
原创 vue实现评论列表
实现功能:发表评论、本地存储、显示列表页面加载,从本地localStorage中获得数据子组件中,获取原数据,添加新数据,加入到localStorage点击发表评论时,调用第二步定义的方法,重新加载数据借助bootstrap页面布局,包含评论人、评论内容、提交按钮以及评论列表定义子组件,子组件包含了评论人、评论内容、提交按钮页面加载:methods定义方法:获得localStorage中的数据,转为数组对象,置为父组件中data定义的list,借助v-for循环输出2. 需要思考该方
2020-09-18 15:02:58
1849
原创 vue实现跑马灯效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id=
2020-09-14 20:21:45
105
原创 vue简单实现计算器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id=
2020-09-14 20:19:33
860
原创 一个简单的过滤器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id
2020-09-14 20:14:48
338
原创 简述js中replace()方法
replace var str = 'hello world' var a = str.replace('l', 'L') console.log(a);//heLlo world如果需要替换的是字符串,则就进行一次替换var str = 'hello world' var a = str.replace(/l/g, 'L') console.log(a);如果进行全局搜索,则全部替换...
2020-09-14 20:12:23
1571
原创 substring、substr、slice、splice的用法和区别。
substring、substr、slice、splice的用法和区别。一、关于substring()substring(start,stop)表示返回从start开始到stop处之间的新字符串,其长度为stop减 start。包含start,但不包含stop,且不修改原字符串。这一点与slice的含头不含尾相近。例如:var str = "0123456789";console.log(str.substring(1,5))//"1234" length为5-1console.log(str.s
2020-09-14 16:25:55
724
1
原创 webpack安装
Webpackwebpack安装的两种方式安装nvm install 12.18.0运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令npm install -g webpack npm install -g webpack-cli在项目根目录中运行npm i webpack --save-dev安装到项目依赖中npm install webpack webpack-cli --save-dev3.运行npm init初始化项目n
2020-09-08 19:31:52
114
原创 ES6模块化
ES6 模块化新建项目淘宝镜像 https://developer.aliyun.com/mirror/NPM?from=tnpm目的:提高成功率npm前面加c,提高速度1.npm init初始化(集成终端)一直回车,创建了package.json2.创建文件npm install --save-dev @babel/core @babel/cli @babel/preset-env//出现node_modules文件夹npm install --save @babe
2020-09-07 16:05:38
121
原创 sass安装
sass安装1.首先进行安装包的下载,进入网址(https://github.com/coreybutler/nvm-windows/releases)2.其次进行下载,推荐使用3.安装中注意4.window+R打开控制器输入cmd,如图运行结果5.## 安装/管理nodejs1、查看本地安装的所有版本;有可选参数available,显示所有可下载的版本。nvm list2、安装,命令中的版本号可自定义,具体参考命令1查询出来的列表nvm install 11.13.03、使用
2020-09-02 15:10:25
155
原创 HTML标签的使用
段落标签超链接图片标签,src:图片位置;alt:图片解释斜体标签下划线标签---标题标签换行标签©→ ©空格→ 注释:Ctrl+/使用效果如下:![在这里插入图片描述](https://img-blog.csdnimg.cn/20200713165310830.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXh
2020-07-13 16:53:45
76
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人