自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

前端岚枫

前端技术分享,个人博客http://www.qingmiaokeji.cn

原创 axios学习笔记(二):轻松弄懂XHR的使用及如何封装简易axios
原力计划

使用 XMLHttpRequest(XHR)对象可以与服务器交互。您可以从URL获取数据,而无需让整个的页面刷新。这允许网页在不影响用户的操作的情况下更新页面的局部内容。在 AJAX 编程中,XMLHttpRequest 被大量使用。 文章目录1. 理解XHR区别一般http请求与ajax请求...

2020-03-15 23:06:03

阅读数 76

评论数 9

原创 axios学习笔记(一):学习HTTP相关的技术知识点

**HTTP是一种能够获取如 HTML 这样的网络资源的 **protocol(通讯协议)。它是在 Web 上进行数据交换的基础,是一种 client-server 协议,也就是说,请求通常是由像浏览器这样的接受方发起的。一个完整的Web文档通常是由不同的子文档拼接而成的,像是文本、布局描述、图片...

2020-03-09 20:38:46

阅读数 2566

评论数 6

原创 ES6学习笔记(五):轻松了解ES6的内置扩展对象

前面分享了四篇有关ES6相关的技术,如想了解更多,可以查看以下连接 《ES6学习笔记(一):轻松搞懂面向对象编程、类和对象》 《ES6学习笔记(二):教你玩转类的继承和类的对象》 《ES6学习笔记(三):教你用js面向对象思维来实现 tab栏增删改查功能》 《ES6学习笔记(四):教你理解ES6的...

2020-03-08 22:19:03

阅读数 204

评论数 9

原创 ES6学习笔记(四):教你理解ES6的新增语法

let ES6新增的用于声明变量的关键字 let声明的变量只在所处于的块级有效 不存在变量提升 暂时性死区 // 使用let声明的变量具有块级作用域 if(true) { let a = 10 console.log(a) // 10 if(true) { let c= 30 ...

2020-03-07 21:58:22

阅读数 182

评论数 4

原创 教你轻松搞定javascript中的正则

文章目录1 正则表达式概述1.1 什么是正则表达式1.2 正则表达式特点2 正则表达式在Javascript中的使用2.1 创建正则表达式2.2 测试正则表达式 test3 正则表达式中的特殊字符3.1 正则表达式的组成3.2 边界符3.3 字符类3.4 量词符3.5 括号总结3.6 预定义类4 ...

2020-03-06 09:17:04

阅读数 2602

评论数 4

原创 带你学习javascript的函数进阶(二)

1 严格模式 1.1 什么是严格模式 JavaScript除了提供正常模式外,还提供了严格模式(strict mode)。ES5的严格模式是采用具有限制性Javascript变体的一种方式。即在严格的条件下运行js代码。严格模式在IE10以上版本的浏览器中才会被支持,旧版本浏览器会被忽略。严格模...

2020-03-03 08:37:36

阅读数 2968

评论数 5

原创 带你学习Javascript中的函数进阶(一)

文章目录1. 函数的定义和调用1.1 函数的定义方式1.2 函数的调用方式2. this2.1 函数内this的指向2.2 改变函数内部this指向2.3 call apply bind 总结总结 1. 函数的定义和调用 1.1 函数的定义方式 函数声明方式function关键字(命名函数)...

2020-03-02 14:05:48

阅读数 445

评论数 4

原创 带你学习ES5中新增的方法

1. ES5中新增了一些方法,可以很方便的操作数组或者字符串,这些方法主要包括以下几个方面 数组方法 字符串方法 对象方法 2. 数组方法 迭代遍历方法:forEach()、map()、filter()、some()、every()判断方法:isArray() 2.1 forEach跟jQ...

2020-03-01 20:27:51

阅读数 1614

评论数 5

原创 作为前端,你需要懂得javascript实现继承的方法
原力计划

在ES6之前,javascript不跟其他语言一样,有直接继承的方法,它需要借助于构造函数+原型对象模拟实现继承。现在我们可以利用ES6的extends方法实现继承,如果想了解更多有关ES6实现的继承请查看《ES6学习笔记(二):教你玩转类的继承和类的对象》,在这里不再做更多的介绍。 文章目录1...

2020-02-29 17:19:58

阅读数 1680

评论数 9

原创 作为前端,你需要了解的js构造函数和原型
原力计划

1.1 概述 在典型的OOP的语言中,都存在类的概念,类就是对象的模板,对象就是类的实例,但在ES6之前,JS中并没有引入类的概念。对象不是基于类创建的,而是用一种构造函数的特殊函数来定义对象和它们的特征。 创建对象可以通过以下三种方式: 对象字面量 var obj1 = {} new O...

2020-02-28 22:38:29

阅读数 391

评论数 6

原创 ES6学习笔记(三):教你用js面向对象思维来实现 tab栏增删改查功能

前两篇文章主要介绍了类和对象、类的继承,如果想了解更多理论请查阅《ES6学习笔记(一):轻松搞懂面向对象编程、类和对象》、《ES6学习笔记(二):教你玩转类的继承和类的对象》,今天主要来分享关于如何用js面向对象的思维来实现tab栏的一些相关的功能。 要实现的功能分析 点击tab栏可以切换效果...

2020-02-27 23:21:03

阅读数 1568

评论数 3

原创 ES6学习笔记(二):教你玩转类的继承和类的对象

文章目录继承super关键字ES6中的类和对象的4个注意点:总结 继承 程序中的继承: 子类可以继承父类的一些属性和方法 class Father { //父类 constructor () { } money () { console.log(100) } } class...

2020-02-26 20:02:34

阅读数 1600

评论数 6

原创 ES6学习笔记(一):轻松搞懂面向对象编程、类和对象
原力计划

面向过程编程P OP(Process oriented programming) 面向过程就是分析出解决问题的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了。 面向对象编程OOP(Object Oriented Programming) ...

2020-02-25 22:20:50

阅读数 356

评论数 2

原创 浅谈js模块化:commons、AMD、CMD、ES6几种模块化的用法及各自的特点
原力计划

文章目录一个页面需要引入多个js文件引发的问题:模块化的好处:几种常用的模块化规范1、 commonJs2、 AMD3、 ES64、CMD总结 js模块化是现在比较流行的一种用法,它能避免很多以前js的弊端,是前端工程化的所要涉及到的话题,今天我们来谈谈几种模块化的方法。 一个页面需要引入多个...

2020-02-24 23:47:39

阅读数 369

评论数 4

原创 前端基础-git(三):git和GitHub的一些基础操作
原力计划

文章目录settings 用户设置创建仓库把本地仓库信息提交到远程仓库真实项目开发流程:NPM(node package manger)总结 github是一个网站,是一个开源的源代码管理平台,用户注册后,可以在自己账户下创建仓库,用来管理项目的源代码(源代码是基于git传到仓库中) 我们所熟知...

2020-02-22 20:58:27

阅读数 874

评论数 6

原创 前端基础-git(二):轻松搞定git创建仓库,操作仓库内容

qiuqiudeMacBook-Pro:git qiuqiu$ git init Initialized empty Git repository in /Users/qiuqiu/Documents/node/git/.git/ qiuqiudeMacBook-Pro:git qiuqiu$ l...

2020-02-22 09:34:18

阅读数 2534

评论数 4

原创 端口被占用问题Error: listen EADDRINUSE 127.0.0.1:8888

今天工作的时候,启动环境突然启动不了,报这样的错误 Error: listen EADDRINUSE 127.0.0.1:8888 具体如下图: 发现时候8888的端口被占用,启动不了 那么 如何Mac OS 查看端口和杀死进程呢? 查看步骤如下 sudo lsof -i:port(端口号) s...

2020-02-17 10:49:16

阅读数 380

评论数 3

原创 前端基础git(一)-git入门代码版本控制介绍

上两篇文章我主要分享了github的一些操作及用法,从今天开始我讲分享一些有关git的一些知识。如果想了解github的操作可以看 前端都应懂的入门基础-github基础 https://blog.csdn.net/lfcss/article/details/104276265 版本控制 集中化...

2020-02-16 00:26:04

阅读数 319

评论数 3

原创 前端基础牢记的一些操作-Github仓库管理

我上一篇文章主要分享了github介绍及项目仓库创建,这篇文章主要说说仓库的管理 仓库管理 新建文件 编辑文件 删除文件 上传文件 搜索仓库文件 下载/检出项目 Github Issues 作用: 发现代码 BUG,但是目前没有成型代码,需要讨论时使用,或者使用开源项目发现问题,提问题...

2020-02-15 22:45:31

阅读数 284

评论数 1

原创 前端都应懂的入门基础-github基础

Github 目的 借助用于代码托管 Github 基本概念 仓库(respitory) 仓库用来存放项目代码,每个项目对应一个仓库,多个开源项目则有多个仓库 收藏(star) 收藏项目,方便下次查看 复制克隆项目(fork) clone的项目是独立存在的 发送请求(pull request) P...

2020-02-11 10:31:44

阅读数 478

评论数 3

原创 如何玩转sortablejs-vuedraggable实现表单嵌套拖拽功能

最近几天在研究有关vue实现拖拽的功能,不过跟一般的拖拽排序有点不同,这个需求可能出现多行多列嵌套的表单元素,数据也是递归形式的出现。我也是在vuedraggable的基础上扩展实现的,如何想了解更多的拖拽排序功能可以参考https://sortablejs.github.io/Vue.Dragg...

2020-02-10 23:27:13

阅读数 1394

评论数 4

原创 Webpack实战(九):实现资源按需加载-资源异步加载

第八篇[《教你搞懂webpack如果实现代码分片(code splitting)》] (https://blog.csdn.net/lfcss/article/details/104099412) 主要分享了webpack实现代码分片 的几种方式:合理地规划入口,使用Commons-ChunkPl...

2020-01-29 16:05:44

阅读数 304

评论数 3

原创 Webpack实战(八):教你搞懂webpack如果实现代码分片(code splitting)

2020年春节已过,本来打算回郑州,却因为新型冠状病毒感染肺炎的疫情公司推迟了上班的时间,我也推迟了去郑州的时间,在家多陪娃几天。以前都是在书房学习写博客,今天比较特殊,抱着电脑,在楼顶晒着太阳,陪着家人,写着博客。 前面的几篇文章主要告诉大家如何安装、配置webpack、webpack...

2020-01-28 21:32:37

阅读数 368

评论数 1

原创 Webpack实战(七):简单搞懂PostCSS的用法及与一些插件的用法

不知不觉地春节要来临了,今天已经是放假的第二天,想想回老家之后所有的时间就不是自己的了,要陪孩子玩,走亲戚等等,我还是趁着在郑州的这两天,把几天后春节要发布的文章给提前整整。在此,提前祝大家春节快乐!! 前面我已写了6篇相关的Webpack方面的技术知识点,今天我主要分享有关PostCS...

2020-01-21 14:52:03

阅读数 2971

评论数 5

原创 2019年的一个小目标,成为csdn的博客专家,纪念一下

2020年1月17日上午申请了博客专家,下午收到申请已通过,我当时感觉到很兴奋,很激动,虽然19年的目标,20年初才达到,不过还没过春节,也算是19年的一个目标实现了,技术之路上的一个里程碑,在此纪念一下,以前也申请过,平台回复说我写的文章不够深,就像代码库,当时感觉很失落,不过幸好没放弃在博客上...

2020-01-20 10:27:32

阅读数 549

评论数 4

原创 Webpack实战(六):如何优雅地运用样式CSS预处理

上一篇文章中,我主要分享了《Webpack如何分离样式文件》CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序,css预处理指的是在开发中我们经常会使用一些样式预编译语言,在项目打包过程中再将这些预编译语言转换成css。这些预编译语言具有便捷的特性,使用这些,可以减少代码编写...

2020-01-19 11:30:42

阅读数 3350

评论数 3

原创 Webpack实战(五):轻松读懂Webpack如何分离样式文件

在上一篇文章中我给大家分享了预处理器(loader),里面讲到了style-loader 和css-loader,有关样式引入的问题,但是上面的样式文件只是引入到style标签里面,并不是我想要的样式文件独立分离。 如果想了解有关css-loader和style-loader可以参考以下地址...

2020-01-18 10:16:41

阅读数 3435

评论数 7

原创 Webpack实战(四):教教你如何轻松搞定-预处理器(loader)

前面三节,我主要给大家分享了有关webpack的一些配置的知识点,如何打包js文件,而如果我们遇到其他类型的资源如图片、css、字体font等等,我们该如何处理呢?今天会介绍预处理器(loader),它赋予了Webpack可处理不同资源类型的能力,极大丰富了其可扩展性。 如果想了解Webpack...

2020-01-16 13:25:09

阅读数 3254

评论数 3

原创 Webpack实战(三):作为前端你不得不懂的Webpack资源入口和出口的配置

关于Webpack前两篇跟大家分享的主要是Webpack的一些基本的配置,今天开始我们详细了解一下有关Webpack的各种配置,今天主要跟大家分享的是Webpack的资源入口和资源出口的配置。 如果想了解前两篇的文章请访问下面的地址: Webpack实战(一):Webpack打包工具安装及参数配...

2020-01-10 14:51:55

阅读数 3459

评论数 4

原创 轻松弄懂var、let、const之间的区别

ECMAScript 6(简称ES6)是JavaScript语言的下一代标准,于2015年6月正式发布,也称ECMAScript 2015。 ES6的好处 ES6的出现为我们前端带来了很多方便之处,以前用js几十行才实现的一个功能,ES6几行代码就能简单的实现,ES6新增的一些特性,改变了很多弊...

2020-01-08 14:16:01

阅读数 1787

评论数 5

原创 Webpack实战(二):基础配置入门 - webpack-dev-server的介绍与用法

为什么要用webpack-dev-server 在开发中,我们都可以发现仅仅使用Webpack以及它的命令行工具来进行开发调试的效率并不高,每次编写好代码之后,我们需要执行npm run build命令更新js文件,然后再刷新页面,才能看到更新效果。webpack-dev-server正好解决了这...

2020-01-05 17:54:33

阅读数 852

评论数 1

原创 再见2019,拥抱2020

2019年已匆匆离去,2020年已来临,现在坐在书桌前,望着窗外下着雪,郑州2020年的第一场雪,来得有点晚,很多人都已期盼了很久的雪,今天终于跟大家见面了,心里有点迷茫,这一年经历了什么了,又收获了什么了,想想2019自己定的规划和目标,差了很远,只完成了其中的一小部分。 2019年收获 本科...

2020-01-05 11:47:07

阅读数 552

评论数 2

原创 Webpack实战(一):基础入门-教你轻松搞定Webpack打包工具安装及参数配置

Webpack实战(一):Webpack打包工具特点及安装 为什么要模块化 javascript跟其他开发语言有很多的区别,其中一个就是没有模块化概念,如果一个项目中有多个js文件,我们只能通过script标签引入的方式,把一个个js文件插入到页面,这种做法会也引起了很多弊端: 需要手动维护Ja...

2020-01-03 09:42:02

阅读数 841

评论数 3

原创 有关return、return false、break、continue 用法详解

return false、break、continue 这三种语句是我们写代码中经常遇到的语句,有时不清楚它们的用途场景很容易弄混乱,今天我收集这些语句的详细用法。 return 函数中的return 语句既是指函数调用的的返回值,这里是return语句的语法: return expression...

2019-11-12 08:37:47

阅读数 504

评论数 1

原创 正则表达式捕获分组和非捕获分组及用法

正则表达式 (regular expression)是一个描述字符模式的对象。 ECMAScript 的 RegExp 类 表示正则表达式,而 String 和 RegExp 都定义了使用正则表达式进行强大的模式匹配和文本 检索与替换的函数。 捕获组:把正则表达式中子表达式匹配的内容,保存到内存中...

2019-10-28 11:54:20

阅读数 275

评论数 0

原创 javascript实现数组深复制的方法

// 复制方法 function copy(arr1, arr2) { for (var i = 0; i < arr1.length; ++i) { arr2[i] = arr1[i]; } } var nums = []; ...

2019-10-10 14:53:07

阅读数 219

评论数 0

原创 过滤树形结构数组的方法

前天做项目时候,遇到一个方法,过滤树形数据,把符合条件的数据过滤出来,树形数据如下: const objarr= [{ "id": 1, "isshow": true, "children": [{ &q...

2019-09-22 11:12:04

阅读数 460

评论数 0

原创 刻意练习

小雨淅淅沥沥的下了两天,给人一种秋凉的感觉,几天前每天在家还开空调呢!这两天温度算下来了,很多人穿上了外套。 今天应该算是比较特殊的日子,明天是中秋节,上午公司人力同事在群里发了两条通知,对于我们大家来说算是好消息,8月份的工资今天发,以前都是15号才发的。另外一条是,下午四点半开始打扫卫生,四点...

2019-09-12 14:26:25

阅读数 892

评论数 0

原创 vue实现判断页面是否编辑及编辑页面未保存离开弹窗提示

最近做一个表单页面,所有的交互效果都是到最后表单保存提交才实现的数据交互,因此出现用户可能不保存页面,而离开此页面,造成数据损失,为了避免这样的情况,特意做一个弹窗提示功能,用watch监听数据,如果数据发生变化,用户点击了其他地方链接要离开页面,则根据beforeRouteLeave离开该页面时...

2019-07-19 17:30:31

阅读数 2144

评论数 1

原创 chrome中Blackbox Script 黑盒脚本作用及用法

chrome中Blackbox Script 黑盒脚本作用及用法 Blackbox Script功能 每天前端人员在调试代码的时候,都可能会遇到代码调试着会进入第三方库文件,带来很多没必要的调试,不方便之处,Blackbox提供了这个便利功能,当你把不需要调试的代码加入Blackbox时候,调试的...

2019-07-19 09:56:22

阅读数 1034

评论数 1

提示
确定要删除当前文章?
取消 删除