- 博客(31)
- 收藏
- 关注
RSS订阅原创 浅谈一下防抖和节流
什么是防抖和节流函数防抖和节流，都是控制事件触发频率的方法。应用场景有很多，输入框持续输入，将输入内容远程校验、多次触发点击事件、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+/使用效果如下：
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人