自定义博客皮肤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

原创 夯实基础,彻底掌握js的核心技术(一)
原力计划

由于工作项目原因,最近很少更新博客了,不过忙中抽闲,利用晚上时间,总结了一些有关JS的基础知识,并分享一些大厂面试 题,根据知识点进行具体分析讲解,希望能对方便大家来学习。 数据类型/堆栈内存 JS中的数据类型 基本数据类型 number string boolean null undef...

2020-07-09 18:29:14 54 0

原创 小程序入门到精通(三):学小程序必备技术基础-flex布局
原力计划

学小程序我们需要有点html、css、js基础,而flex布局是我们小程序常用的css布局,学习小程序之前,我们需要了解一些css方面的布局知识-Flex布局,Flex 布局将成为未来布局的首选方案 1. flex 布局是什么 Flex 是 Flexible Box 的缩写,意为"弹...

2020-05-24 23:59:45 300 5

原创 小程序入门到精通(二):了解小程序开发4个重要文件
原力计划

1. 小程序没有DOM对象,一切基于组件化 2. 小程序的四个重要的文件 *.js —> view逻辑 —> javascript *.wxml —> view结构 ----> html *.wxss —> view样式 -----> css *. jso...

2020-05-22 23:14:55 1866 8

原创 vue-codemirror基本用法:实现搜索功能、代码折叠功能、获取编辑器值及时验证
原力计划

昨天实现了一些codemirror:基本的编辑代码功能、插入变量功能、codemirror语法验证功能、代码格式化(由于主要是json数据,所以暂时没引用其他组件,如果需要建议引用js-beautify,因为查资料发现codemirror在新的版本中已经去掉autoFormatRange方法),如...

2020-05-15 20:29:32 1137 8

原创 教你轻松搞懂vue-codemirror的基本用法:主要实现代码编辑、验证提示、代码格式化
原力计划

2017年的时候用过codemirror,当时用的是jQuery库、codemirror、beautify插件。主要实现代码的编辑功能、插入一些变量功能、beautify插件主要用来格式化代码,实现代码美化效果。不过这两年做项目都是用vue了,需要用到代码编辑器,于是我又找到了代码编辑器vue-c...

2020-05-14 18:16:29 2016 12

原创 小程序入门到精通:微信小程序介绍及开发准备工作(一)
原力计划

1. 什么是小程序? 微信小程序(wei xin xiao cheng xu),简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是无需安装,用完即走,实际上是需要安装的,只不过小程序的体积特别小, 下载速度很快,用户感觉不到下载的过程 )。小程序...

2020-05-12 08:46:19 1044 13

原创 前端工程师需要懂的前端面试题(c s s方面)总结(二)

实现元素水平垂直居中的几种方法: <div id="wrap"> <div class="box"></div> </div> 1. 定位方法实现水平垂直居中 <style> *{ mar...

2020-04-22 08:33:29 309 9

原创 每个前端工程师都应该去了解的前端面试题总结(一)

当我们需要找工作的时候,面试对于我们每个程序员来说都是非常重要的环节,掌握一些面试题技巧是非常有必要的,今天主要分享几个js有关的面试题 作用域 var num1 = 55 var num2 = 66 function f1(num, num1) { num = 100 num1 = 100 ...

2020-04-13 11:59:43 2815 10

原创 每个前端工程师都应该懂的前端性能优化总结:
原力计划

文章目录采用css雪碧图(css sprite/css图片精灵)技术在项目中,我们最好把css或者js文件进行合并或者压缩,尤其是在移动端开发的时候,如果css或者j s内容不是很多,我们可以采用内嵌式,以此减少http的请求次数,加快页面加载速度采用图片懒加载技术,在页面开始加载的时候,不请求真...

2020-04-02 10:57:44 10687 28

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

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

2020-03-15 23:06:03 620 12

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

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

2020-03-09 20:38:46 3062 7

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

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

2020-03-08 22:19:03 631 11

原创 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 569 5

原创 教你轻松搞定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 2988 7

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

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

2020-03-03 08:37:36 3041 6

原创 带你学习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 509 4

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

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

2020-03-01 20:27:51 1672 6

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

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

2020-02-29 17:19:58 1772 9

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

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

2020-02-28 22:38:29 482 6

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

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

2020-02-27 23:21:03 1747 3

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

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

2020-02-26 20:02:34 1729 6

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

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

2020-02-25 22:20:50 481 2

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

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

2020-02-24 23:47:39 455 4

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

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

2020-02-22 20:58:27 1070 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 2652 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 1012 4

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

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

2020-02-16 00:26:04 426 4

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

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

2020-02-15 22:45:31 356 1

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

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

2020-02-11 10:31:44 579 3

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

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

2020-02-10 23:27:13 2429 4

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

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

2020-01-29 16:05:44 521 4

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

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

2020-01-28 21:32:37 512 1

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

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

2020-01-21 14:52:03 3159 5

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

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

2020-01-20 10:27:32 651 4

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

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

2020-01-19 11:30:42 3503 3

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

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

2020-01-18 10:16:41 3578 7

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

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

2020-01-16 13:25:09 3340 3

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

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

2020-01-10 14:51:55 3538 4

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

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

2020-01-08 14:16:01 1967 7

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

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

2020-01-05 17:54:33 1317 1

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