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

原创 javascript基础系列:javascript中的变量和数据类型(一)

javascript基础系列:javascript中的变量和数据类型(一)今天开始去重新系统温习一遍js基础,并作下记录javascript是由三部分组成:ECMASCRIPT(ES): 描述了该语言的语法和基本对象DOM: 文档对象模型,描述处理网页内容的方法和接口BOM:浏览器对象模型,描述与浏览器进行交互的方法和接口js做客户端语言按照相关的js语法,去操作页面中的元素,有时还要操作浏览器里面的一些功能ECMAScript3/5/6,js的语法规范(变量、数据类型、操作语句

2020-08-03 08:19:30 102

原创 夯实基础,彻底掌握js的核心技术(四):ES5、ES6对象方法详解

ES5 Object 对象方法扩展ES5给Object扩展了一些静态方法,常用的2个Object.create(prototype,[descriptors])作用:以指定对象为原型创建新的对象为新对象指定新的属性,并对属性进行描述value: 指定值writable: 标识当前属性值是否是可修改的,默认为falseconfigurable: 标识当前属性是否可以被删除,默认为falseenumerable: 标识当前属性是否能用 for in 枚举 默认为falseObject.

2020-07-24 08:13:21 91 1

原创 夯实基础,彻底掌握js的核心技术(三):堆栈内存及闭包详解

数据渲染机制及堆栈内存1. 数据值操作机制/** 1. 先声明一个变量a,没有赋值(默认值谁undefined)* 2. 在当前作用域中开辟一个位置存储12这个值* 3. 让变量a和12关联在一起(定义:赋值)*/var a = 12var b = a;b = 13;console.log(a);var ary1 = [12, 23];var ary2 = ary1;ary2.push(100);console.log(ary1)function sum() { var .

2020-07-21 20:32:56 130 1

原创 夯实基础,彻底掌握js的核心技术(二):面向对象编程(Object Oriented Programming)
原力计划

单例设计模式(Singleton Pattern)1. 单例模式解决的问题:表现形式:Var obj = {xxx; xxx,…}2. 作用:把描述同一件事物的属性和特征进行“分组、分类”(存储在同一个推内存空间中),因此避免了全局变量之间的冲突和污染var pattern1 = {name: ‘xxx’}var pattern2 = { name: ‘xxx’}//name值并不是一个值,属于两个堆内存空间中在单例设计模型中,obj不仅仅是对象名,它被称为”命名空间[N.

2020-07-13 22:42:52 720 3

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

由于工作项目原因,最近很少更新博客了,不过忙中抽闲,利用晚上时间,总结了一些有关JS的基础知识,并分享一些大厂面试 题,根据知识点进行具体分析讲解,希望能对方便大家来学习。数据类型/堆栈内存JS中的数据类型基本数据类型number string boolean null undefined symbol bigint引用数据类型object function数据类型结构如下图数字类型中的比较奇怪的值NaN是number类型Console.log(typeof NaN)

2020-07-09 18:29:14 152

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

学小程序我们需要有点html、css、js基础,而flex布局是我们小程序常用的css布局,学习小程序之前,我们需要了解一些css方面的布局知识-Flex布局,Flex 布局将成为未来布局的首选方案1. flex 布局是什么Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。2. flex布局体验2.1 传统布局与flex布局传统布局兼容性好布局繁琐局限性,不能再移动端很好的布局flex布局操作方便,布局极为简单,移动端应用很.

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

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

1. 小程序没有DOM对象,一切基于组件化2. 小程序的四个重要的文件*.js —> view逻辑 —> javascript*.wxml —> view结构 ----> html*.wxss —> view样式 -----> css*. json ----> view 数据 -----> json文件注意:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名。2.1 WXMLWXML(WeiXin Markup..

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

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

昨天实现了一些codemirror:基本的编辑代码功能、插入变量功能、codemirror语法验证功能、代码格式化(由于主要是json数据,所以暂时没引用其他组件,如果需要建议引用js-beautify,因为查资料发现codemirror在新的版本中已经去掉autoFormatRange方法),如果想了解更多,请参考《教你轻松搞懂vue-codemirror的基本用法:主要实现代码编辑、验证提示、代码格式化》,今天接着昨天的功能代码继续,主要分享vue-codemirror实现搜索功能、代码折叠功能、获取.

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

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

2017年的时候用过codemirror,当时用的是jQuery库、codemirror、beautify插件。主要实现代码的编辑功能、插入一些变量功能、beautify插件主要用来格式化代码,实现代码美化效果。不过这两年做项目都是用vue了,需要用到代码编辑器,于是我又找到了代码编辑器vue-codemirror,感觉组件再变,其原理、底层还是没多大变化,用vu e-codemirror,codemirror的方法,配置参数都是通用的,今天我就来分享一下我今天研究的vue-codemirror用法及一些.

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

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

1. 什么是小程序?微信小程序(wei xin xiao cheng xu),简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是无需安装,用完即走,实际上是需要安装的,只不过小程序的体积特别小, 下载速度很快,用户感觉不到下载的过程 )。小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。2. 小程序用途同App进行互补,提供同app类似的功能,比app操作更加简洁的轻应用通.

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

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

实现元素水平垂直居中的几种方法:<div id="wrap"> <div class="box"></div></div>1. 定位方法实现水平垂直居中<style>*{ margin: 0; padding: 0;}#wrap { width: 500px; height: 500px; back...

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

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

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

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

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

文章目录采用css雪碧图(css sprite/css图片精灵)技术在项目中,我们最好把css或者js文件进行合并或者压缩,尤其是在移动端开发的时候,如果css或者j s内容不是很多,我们可以采用内嵌式,以此减少http的请求次数,加快页面加载速度采用图片懒加载技术,在页面开始加载的时候,不请求真实图片地址,而是用默认图占位,当前页面加载完成后,在根据相关的条件依次加载真实图片(减少页面首次加载h...

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

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

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

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

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

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

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

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

前面分享了四篇有关ES6相关的技术,如想了解更多,可以查看以下连接《ES6学习笔记(一):轻松搞懂面向对象编程、类和对象》《ES6学习笔记(二):教你玩转类的继承和类的对象》《ES6学习笔记(三):教你用js面向对象思维来实现 tab栏增删改查功能》《ES6学习笔记(四):教你理解ES6的新增语法》文章目录Array的扩展方法扩展运算符(展开语法)构造函数方法: Array.from...

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

原创 ES6学习笔记(四):教你轻松搞懂ES6的新增语法
原力计划

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

2020-03-07 21:58:22 585 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 正则表达式中的替换4.1 replace 替换4.2 正则表达式参数总结1 正则表达式概述1....

2020-03-06 09:17:04 3013 7

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

1 严格模式1.1 什么是严格模式JavaScript除了提供正常模式外,还提供了严格模式(strict mode)。ES5的严格模式是采用具有限制性Javascript变体的一种方式。即在严格的条件下运行js代码。严格模式在IE10以上版本的浏览器中才会被支持,旧版本浏览器会被忽略。严格模式对正常的javascript语义做了一些更改:消除了Javascrip语法的一些不合理、不严谨...

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

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

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

2020-03-02 14:05:48 515 4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

文章目录一个页面需要引入多个js文件引发的问题:模块化的好处:几种常用的模块化规范1、 commonJs2、 AMD3、 ES64、CMD总结js模块化是现在比较流行的一种用法,它能避免很多以前js的弊端,是前端工程化的所要涉及到的话题,今天我们来谈谈几种模块化的方法。一个页面需要引入多个js文件引发的问题:请求过多依赖模糊难以维护这些问题可以通过现代模块化编码和项目构建来解决...

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

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

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

2020-02-22 20:58:27 1256 6

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

qiuqiudeMacBook-Pro:git qiuqiu$ git initInitialized empty Git repository in /Users/qiuqiu/Documents/node/git/.git/qiuqiudeMacBook-Pro:git qiuqiu$ ls -ah. … .gitqiuqiudeMacBook-Pro:git qiuqiu$ defa...

2020-02-22 09:34:18 2696 4

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

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

2020-02-17 10:49:16 1392 4

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

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

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

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

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

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

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

Github 目的借助用于代码托管Github 基本概念仓库(respitory)仓库用来存放项目代码,每个项目对应一个仓库,多个开源项目则有多个仓库收藏(star)收藏项目,方便下次查看复制克隆项目(fork)clone的项目是独立存在的发送请求(pull request)Pull Request 本质上是一种软件的合作方式,是将涉及不同功能的代码,纳入主干的一种流程。这个过...

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

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

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

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

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

第八篇[《教你搞懂webpack如果实现代码分片(code splitting)》] (https://blog.csdn.net/lfcss/article/details/104099412) 主要分享了webpack实现代码分片 的几种方式:合理地规划入口,使用Commons-ChunkPlugin或SplitChunks配置。这几种方法实现了资源按需加载。今天我分享另外一种实现方法–资源...

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

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

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

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

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

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

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

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

2020年1月17日上午申请了博客专家,下午收到申请已通过,我当时感觉到很兴奋,很激动,虽然19年的目标,20年初才达到,不过还没过春节,也算是19年的一个目标实现了,技术之路上的一个里程碑,在此纪念一下,以前也申请过,平台回复说我写的文章不够深,就像代码库,当时感觉很失落,不过幸好没放弃在博客上更新文章,记录自己工作遇到的难点、问题。今天终于实现了自己的这个小梦想了。在接下来的2020年中,...

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

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

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

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

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

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

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

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