自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 封装axios请求api.js

当你需要编码URL中的参数的时候,那么encodeURIComponent是最好方法。 var param = "http://www.cnblogs.com/season-huang/"; //param为参数 param = encodeURIComponent(param...

2020-04-27 20:07:15 71 0

原创 git如何新建分支并拉取代码,git如何提交合并代码

git 新建分支拉取代码 git init git remote add origin git@github.com:XXXX/nothing2.git git fetch origin yuanailan_2020(yuanailan_2020为远程仓库的新建分支名) git checkout ...

2020-04-27 13:22:21 240 0

原创 vue命名路由

命名路由 有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。你可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称。 const router = new VueRouter({ routes: [ { ...

2019-12-25 14:17:16 48 0

原创 前端优化之利用键值对快速查询数据

通常情况下,我们获取本地数据的时候,需要取对应的值,是采用循环。如果改变数据模型,封装专门的方法来取值,会提高效率。分步骤处理数据,先存数据[id:{},id:{},…];取数据传入id,取对应id的对象的值。 案例: let data=[{id:1,name:"北京",gdp...

2019-12-25 09:54:39 60 0

原创 手机端上传照片压缩功能canvas

移动端前端压缩照片的方法一般是用canvas,然后转换成base64或者blob,发送后台。 压缩方法 photoCompress: function(file, callback) { var that = this; var ready = new FileReader...

2019-11-28 10:00:11 78 0

原创 MVC和MVVM的区别

MVC和MVVM的区别 现在是市面上使用MVVM模型越来越多,相关的前端框架的选择也相应增多。 那么什么是MVVM模型,它和传统MVC模型有什么区别,接下来我们来总结探讨一下。 MVVM即Model-View-ViewModel的简写。即模型-视图-视图模型。模型(Model)指的是后端传递的数据...

2019-10-23 10:19:50 59 0

原创 js享元模式设计原理以及应用案例

摘要 享元模式是用于性能优化的设计模式之一,在前端编程中有重要的应用,尤其是在大量渲染DOM的时候,使用享元模式及对象池技术能获得极大优化。本文介绍了享元模式的概念,并将其用于渲染大量列表数据的优化上。 初识享元模式 在面向对象编程中,有时会重复创建大量相似的对象,当这些对象不能被垃圾回收的时候(...

2019-10-18 10:12:00 80 0

转载 Echarts x轴文本内容太长的几种解决方案

Echarts 标签中文本内容太长的时候怎么办 ? 1对文本进行倾斜 在xAxis.axisLabe中修改rotate的值 xAxis: { data: ["衬衫11111","羊毛二二","雪纺衫111"...

2019-10-10 10:36:42 40 0

原创 js深度复制方法总结

想理解js深度复制,一定要理解JS的内存管理,我们知道JS拥有自动的垃圾回收机制,这样就使得很多前端开发人员不是很重视内存管理这一块。但是其实这一部分的内容对于理解JS中原型与原型链,闭包,递归都是非常有帮助的。 在JS中,每一个数据都需要一个内存空间。内存空间又被分为两种:栈内存(stock) ...

2019-10-10 10:30:38 38 0

原创 高级前端工程师必备的搜索技巧,快速解决问题的方法

前端工程师索要处理的功能业务是比较多的,在开发项目过程中可能会遇到各种各样的问题,那么我们就需要去网上搜素一些解决方案,看看别人的或者一些大牛的处理方法。对于搜索技巧我们很有必要进行掌握,这样可以快速准确的找到我们想到的答案。下面我们就一起来探讨一下吧! 一般前端工程师在搜索过程中会存在三个问题:...

2019-10-10 09:55:50 86 0

原创 js 获取mac地址和IP地址

1. js 获取mac地址 function MacInfo(){ var locator =new ActiveXObject ("WbemScripting.SWbemLocator"); var service = locator.ConnectS...

2019-10-09 13:40:09 68 0

原创 截取第n个某字符前的字符串

const splitString = (str, str1, index)=>{ let arr = str.split(str1); let value = ""; for(let i = 0; i < index; i++){ value += ar...

2019-10-09 13:30:29 47 0

原创 动态合并elementUI表数据

html: 请求完数据掉方法getSpanArr() 效果图:

2019-08-26 18:15:48 67 0

原创 js封装方法:获取最大值最小值,排除空数据和异常数据

//增加数组原型方法写法 Array.prototype.getMax = function() { if (!this.length) return 0; let t = parseFloat(this[0] || 0); for (let i = 0...

2019-08-13 13:38:38 144 0

原创 echarts图渲染问题:解决图不正常显示,图缩到一起了,清空图表数据,随窗口变化自动缩放问题(vue)

echarts图是常用的数据展示图表插件,在运用过程中可能会遇到各种问题,下面我总结一下我在项目开发中遇到的问题: 在切换tab页的时候,很容易出现图缩到一起了,如下图: 重新加载数据,图任然有数据 图形不随窗口放大缩小 解决方案: 初始化ehcarts与数据渲染,不用加echarts实例...

2019-08-13 11:04:25 1277 0

原创 VUE事件修饰符总结

对事件添加一些通用的限制,比如阻止事件冒泡,Vue 对这种事件的限制提供了特定的写法,称之为修饰符 用法:v-on:事件.修饰符 <!--阻止事件冒泡.stop--> <div id="div1" class="stop" ...

2019-07-23 08:55:50 46 0

原创 css改写滚动条样式

/*滚动条样式*/ body,html{ ::-webkit-scrollbar { width: 6px; /*height: 6px;*/ } ::-webkit-scrollbar-...

2019-07-02 13:43:53 200 0

原创 JS快速建立一个数组,长度100,值是下标或者0

1.Object.keys和Array.apply和map var arr = Object.keys(Array.apply(null, { length: 100 })).map(function( item ) { return +item; }); 2.Object.keys...

2019-06-28 15:07:36 1255 0

原创 js字符串的方法总结(包括es6新增方法)

1、str.charAt(index); 方法返回指定索引位置处的字符。如果超出有效范围的索引值返回空字符串,index为字符串下标,index取值范围[0,str.length-1] var str = "fuck" console.log(str.charAt(3))//...

2019-06-26 14:43:32 717 0

原创 vue源码研究--Data为啥要写成函数?

大家在使用vue的时候,肯定有想过为什么 data 要写成函数,而不允许写成对象? 首先我们要想到: data是 Vue 实例上的一个属性。 对象是对于内存地址的引用。 函数有自己的作用域空间。 第一点无可厚非,data属性附着于 Vue 实例上。 第二点,JS 的数据类型分为基本类型和引用类...

2019-06-03 11:00:23 596 1

原创 cnpm安装手册

1.安装nodejs 2.配置环境变量 3.设置代理 首先用:npm install --save 如果网络异常,再执行:cnpm install --save 成功后,执行:cnpm run dev 正常显示机构服务平台界面后,确认安装成功完成。 ...

2019-05-30 13:26:48 163 0

原创 vscode自定义插件安装位置

我们安装的vsode编辑器的插件目录默认在C盘: extensions文件会很大,占用C盘空间 我们可以通过自定义vscode插件安装位置来解决 1、前提:已安装VSCode,并且已将其添加到了环境变量path中; 2、打开cmd,输入code --help,显示如下: 方法: 1、(推荐,不...

2019-05-29 15:14:09 8805 0

原创 面向对象的详细理解与继承方法对比

类的声明 /** *es5 */ var Animal = function () { this.name = 'Animal'; }; /** * es6中class的声明 ...

2019-05-22 23:00:22 111 0

原创 前端安全CSRF

安全类:CSRF CSRF:跨站请求伪造,英文:Cross-site request forgery forgery 攻击原理: 从上图可以看出,要完成一次CSRF攻击,受害者必须依次完成两个步骤:   1.登录受信任网站A,并在本地生成Cookie。   2.在不退出A的情况下,访问危险网站B...

2019-05-19 21:31:45 2538 0

原创 HTTP协议知识总结

1.HTTP协议的主要特点 1.支持客户/服务器模式。 2.简单快速:客户向服务器请求服务时,只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单,使得HTTP服务器的程序规模小,因而通信速度很快。 3.灵活:HTTP允...

2019-05-19 21:11:20 108 0

原创 跨域通信的几种方法

1. jsonp工作原理,参考jsonp.js // 创建ajax【参考网址】https://segmentfault.com/a/1190000006669043 jsonp.js jsonp = function (url, onsuccess, onerror, charset) { ...

2019-05-19 20:21:38 218 0

原创 实例化的对象没有prototype属性

function Human(){ this.height=180; this.say=function(){ alert("我在说话"); } } var he = new Human(); alert(Human.prototype);//Obje...

2019-05-19 19:45:51 541 0

原创 js原型链的详细介绍

1.创造对象的方法: //第一种方式:字面量 var o1 ={name:'o1'}; var o2=new Object({name:'o2'}); //第二种方式:通过构造函数 var M=function(name){this.name=name}; ...

2019-05-14 22:29:47 127 0

转载 js面向对象理解

ECMAScript 有两种开发模式:1.函数式(过程化),2.面向对象(OOP)。面向对象的语言有一个标志,那就是类的概念,而通过类可以创建任意多个具有相同属性和方法的对象。但是,ECMAScript 没有类的概念,因此它的对象也与基于类的语言中的对象有所不同。 js(如果没有作特殊说明,本文...

2019-05-13 21:25:29 4392 0

原创 盒子模型详细介绍---面试全面回答

1.基本概念:标准模型+IE模型 区别? 在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分。这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔...

2019-05-08 22:36:19 461 0

原创 css实现双飞翼布局,三列布局,中间宽度自适应,两边定宽--五种方案对比延伸

标题css实现双飞翼布局,三列布局,中间宽度自适应,两边定宽;假设高度固定300px; html <div class="container"> <div class="left"></div> ...

2019-05-08 21:36:53 267 0

原创 typeof 与 instanceof之间的区别

ES6规范中有7种数据类型,分别是基本类型和引用类型两大类 基本类型(简单类型、原始类型):String、Number、Boolean、Null、Undefined、Symbol 引用类型(复杂类型):Object(对象、Function、Array) 1、typeof返回结果是该类型的字符串形式...

2019-05-06 21:15:42 118 0

原创 js闭包--关于在for循环中每隔一秒打印一次

上篇我们介绍了js闭包-关于在for循环中绑定事件打印变量i 我们可以将结果一次性打印出0 1 2 3 4,那么下面我介绍一下每隔一秒钟一次打印出 0 1 2 3 4 1000*i是重点 es5方法: for (var i = 0; i < 5; i++) { (function (j)...

2019-05-06 19:52:00 1416 0

原创 js闭包--关于在for循环中绑定事件打印变量i是最后一次。

闭包是指有权访问另一个函数作用域中的变量的函数,创建闭包的常见的方式,就是在一个函数内部创建另一个函数,通过另一个函数访问这个函数的局部变量。 在for循环里面的匿名函数执行 return i 语句的时候,由于匿名函数里面没有i这个变量,所以这个i他要从父级函数中寻找i,而父级函数中的i在for循...

2019-05-05 22:53:06 360 0

原创 ES6 之reduce的高级技巧

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。 语法:array.reduce(function(total, currentValue, currentIndex, arr), initialValue) reduce() 可以作为一个高阶函...

2019-05-05 20:27:42 683 0

原创 gulp的配置文件

1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: $ npm install --save-dev gulp 3. 在项目根目录下创建一个名为 gulpfile.js 的文件: var gulp =...

2019-05-05 19:30:01 408 0

原创 es6中的Set 实现并集(Union)、交集(Intersect)和差集(Difference)

ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。 Set本身是一个构造函数,用来生成 Set 数据结构。数组的map和filter方法也可以间接用于 Set 了。因此使用 Set 可以很容易地实现并集(Union)、交集(Intersect)和差集(Diff...

2019-05-04 23:01:13 311 0

原创 js筛选条件匹配对应值的几种方法

根据状态值筛选出对应的状态文字 switch写法: function test (status) { switch (status) { case 0: return "未启动" case 1: return "...

2019-05-04 22:44:31 947 0

原创 如何写出可读性强实用性强又高质量的JavaScript 代码,需要掌握一些小技巧

虽然现在写代码不像以前,现在都有 eslint、prettier、babel(写新版语法) 这些来保证代码格式,然而,技术手段再高端都不能解决代码可读性(代码能否被未来的自己和同事看懂)的问题,因为这个问题只有人自己才能解决。要想写出不让你同事或者你的交接人吐槽的代码,首先要有良好的代码风格,下列...

2019-05-03 22:53:25 258 0

原创 js 实现sleep函数

sleep函数作用是让线程休眠,等到指定时间在重新唤起。 方法一:这种实现方式是利用一个伪死循环阻塞主线程。因为JS是单线程的。所以通过这种方式可以实现真正意义上的sleep()。 function sleep(delay) { var start = (new Date()).getTime...

2019-05-03 14:48:05 4064 0

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