自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

kuke_kuke的博客

分享前端的一些小知识,前端攻城狮growing

原创 图片懒加载记录

// 图片处理$.each(data.imgList, function(i, n) { body.contents().find('#panel_imgList').append('<img src="' + tcymjcmJmqr.interfacePrefix + 'app/img/jiazai.gif" data-src="' + tcymjcmJmpr.interfacePre...

2020-04-23 14:12:12 88

原创 es6中的map

详解map?创建map集合?Map集合支持的方法?传入数组来初始化Map集合?同名属性碰撞?遍历?转为数组?forEach?JS的对象(Object),本质上是键值对的集合(Hash结构),但是传统上只能用字符串当做键,这给它的使用带来了很大的限制。为了解决这个问题,ES6提供了MAP数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。...

2020-04-22 15:47:19 91

转载 对es6中class的理解

ES6提供了更接近传统语言的写法,引入Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类,与多数传统语言类似。// 定义类class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ',' + this.y + ')'; ...

2020-04-21 17:01:38 74

原创 对es中的iterable的理解

iterable为了统一集合类型,ES6标准引入了新的iterable类型,Array、Map和Set都属于iterable类型,具有iterable类型的集合可以通过for…of循环来遍历var a = ['A', 'B', 'C'];var s = new Set(['A', 'B', 'C']);var m = new Map([[1, 'x'], [2, 'y'], [3, 'z'...

2020-04-21 09:11:55 69

原创 重新理解vuex

store.js中基本代码:import Vue from "vue";import Vuex from "vuex";Vue.use(Vuex);const cart = {};export default new Vuex.Store({ state: {}, getters: {}, mutations: {}, actions: {}, modules: {...

2020-01-03 16:59:01 67

原创 vue中实现表单校验

前提条件:vue-cli创建一个项目,安装async-validator(npm i async-validator -S)在components中新建FormTest.vue组件,并在App.vue中引入。一个form表单需要form、formItem、input,初步代码如下:formTest:<template> <div> for...

2020-01-02 21:00:11 669 1

转载 数据双向绑定原理

所谓双向数据绑定,无非就是数据层和视图层中的数据同步,在写入数据时视图层实时的跟着更新,具体描述:实现mvvm的双向绑定,是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter、getter,在数据变动时发布消息给订阅者,出发相应的监听回调。就必须要实现以下几点:实现一个数据监听器Observer,能够对数据对象的所有属性进...

2020-01-02 11:09:03 44

原创 微信小程序有关事件绑定与冒泡捕获的描述

事件绑定的写法和组件属性一致,以key="value"的形式,其中:1、key以bind或者catch开头,然后跟上事件的类型,如bindtap、catchtouchstart。2、value是一个字符串,需要在对应的页面Page构造器中定义同名的函数,否则触发事件时在控制台会有报错信息。bind和capture-bind的含义分别代表事件的冒泡阶段和捕获阶段,如图:以下示例中,点击 in...

2019-10-09 09:25:25 47

原创 各种时间日期处理收集

当前日期:function currentTime() { var now = new Date(); var year = now.getFullYear(); // 年 var month = now.getMonth() + 1; // 月 var day = now.getDate(); // 日 var hh = now.getHours(); // 时 var m...

2019-08-27 13:41:46 90

原创 websocket心跳重连(避免断网、服务器重启等)

背景websocket链接,为实现断网、服务器重启等特殊情况。原理每隔一段时间向服务器发送一次数据 即(heartCheck.start()),服务器接收数据后返回一次信息,用来证明一切正常,否则就开始启动新的定时器来尝试重新连接(websocketReconnect()一定的时间尝试重连,如此重复)。代码var lockReconnect = false;//避免重复连接var ws...

2019-02-18 17:19:14 9122 1

原创 前端处理后端传来的文件流实现下载或预览

直接下载var url = this.GLOBAL_URL + "/api/GetFile?id=" + id; // 请求的url + idvar xhr = new XMLHttpRequest();xhr.open("GET", url, true)xhr.responseType = "blob";xhr.setRequestHeader("client_type", "DES...

2019-01-07 16:29:28 9820 5

原创 关于vue中slot的理解

将父组件的内容放到子组件指定的位置叫做内容分发// 在父组件里使用子组件<son-tmp> <div>我是文字,我需要放到son-tmp组件里面指定的位置</div></son-tmp>1.单个插槽父组件:father.vue<template> <div id="app"> <son-

2019-01-07 10:57:29 2307 1

原创 vue项目加载优化之懒加载,以及Loading chunk {n} failed解决方法

一、懒加载懒加载:随时用随时加载,避免单页面应用一次性加载所造成的时间过长。import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ routes: [ { path: '/', redirect: '/login' ...

2019-01-07 10:08:18 5976

转载 基于Elementui的日期选择器时间范围限制

一般在实际开发场景中我们需要对时间选择做一些限制,如不能选择今天之前的时间、不能选择今天以后的日期、限制日期不能大于开始日期等等。日期组件<el-date-picker v-model="value1" type="date" placeholder="选择日期" :picker-options="pickerOptions0"> </el-date-picker...

2019-01-07 09:25:53 836

原创 js获取两个日期之间的所有日期

在实际项目中,我们偶尔会用到获取两个日期之间的所有日期getAll(begin, end){ // 开始日期和结束日期 if(!begin || !end){ // 去除空的可能性 console.log('有时间为空'); return false; } // 在时间Date的原型中定义一个format方法 Date.prototype.format = functio...

2018-11-20 09:27:00 3134 5

原创 vue项目中的elementui的表格中画甘特图

最近的项目要求甘特图在elementui中实现,在此做出总结。性能限制,不能传入太多的数据。需要条件:时间:计划开始时间、计划结束时间、开始时间、结束时间最大时间和最小时间。思维:渲染表格头、渲染天数、填充色块。实现简单的表格<el-table :data = "tableData" border> <el-table-column label="...

2018-11-19 20:11:39 5445 2

转载 webpack进阶之路三、(实战一,使用ES6、ts、Flow、SCSS)

一、使用新语言来开发项目1、使用ES6语言通常我们需要将采用ES6编写的代码转换成目前已经支持良好的ES5代码,包含如下:将新的ES6语法用ES5实现,例如ES6的class语法用ES5的prototype实现;为新的API注入polyfill,例如使用新的fetch API时在注入对应的polyfill后才能让低端浏览器正常运行。认识BabelBabel(https://bab...

2018-11-07 19:19:12 2173 1

转载 webpack进阶之路二、(配置)

Entry:配置模块的入口。Output:配置如何输出最终想要的代码。Module:配置处理模块的规则。Resolve:配置寻找模块的规则。Plugins:配置扩展插件DevServer:配置DevServer。其他配置项:其他零散的配置项。整体配置解构:整体地描述各配置项的结构。多种配置类型:配置文件不止可以返回一个Object,还可以返回其他形式。配置总结:寻找配置Webp...

2018-11-07 09:22:13 692

原创 es6的一些新特性总结

1、let和constlet命令也用于声明对象,但是作用域为局部{ let a = 10; var b = 1;}在函数外部可以获取到b,获取不到a,因此例如for循环计数器就适合使用let。const用于声明一个常量,设定后值不会在改变const PI = 3.1415;PI // 3.1415PI = 3;强行对其进行重新赋值会报错。2、iterable...

2018-10-23 19:28:00 551

原创 webpack进阶之路一、(介绍到安装及简单使用)

一、为什么要用webpack?1. 模块化开发指将一个复杂的系统分解为多个模块以方便开发和修改。好处有:避免变量污染,命名冲突提高代码复用率提高维护性依赖关系的管理2. 模块化开发规范介绍CommonJS、AMD、ES6等CommonJS(CommonJS官网)的核心思想是通过require方法来同步加载依赖的其它模块,通过module.exports导出需要暴露的接口...

2018-10-23 16:29:47 153

转载 浏览器的cookie、session、localStorage、sessionStorage区别

一、cookie和sessioncookie和session都是用来跟踪浏览器用户身份的会话方式。 区别: 1、保持状态:cookie保存在浏览器端,session保存在服务器端 2、使用方法: (1)cookie机制:如果不在浏览器中设置过期时间,cookie保存在内存中,生命周期随浏览器的关闭而结束,这种cookie简称会话cookie。如果浏览器中设置了cookie的过期...

2018-08-27 15:47:29 1895

原创 浏览器的加载以及重绘和回流问题总结

浏览器的加载原则:按照自上而下的顺序加载,一般来说浏览器会依据html来创建DOM树,并通过CSS来共同生成Render树(去掉一些没用的东西)。而JS作为整体载入,需要等待DOM树创建完成,通常放在最后(window.onload)。详细一点的HTML加载流程如下: 1、输入网址浏览器向服务器发送请求获得html文件。 2、浏览器载入html代码,自上而下开始解析。 3、发现...

2018-08-26 10:57:58 614

转载 基于webpack的前后端分离开发环境实践

为了提高开发效率,前后端分离的需求越来越被重视,前端负责展现/交互逻辑,后端负责业务/数据接口。每个团队在实现工程中都会基于自身的技术栈选择和开发环境进行具体的实现,本文依据自身在webpack开发中搭建的前后端分离开发环境进行叙述。理想化的前后端分离环境目前业界比较有代表性的前后端分离的例子是SPA(Single-page application),所有用到的展现数据都是后端通过异步接口...

2018-08-17 10:41:59 940

转载 javascript中的继承

1、继承分类先来个整体印象。如图所示,JS中继承可以按照是否使用object函数(在下文中会提到),将继承分成两部分。 其中,原型链继承和原型式继承有一样的优缺点,构造函数继承与寄生式继承也相互对应。寄生组合继承于Object.create,同时优化了组合继承,成为了完美的继承方式。ES6 Class Extends的结果与寄生组哈继承基本一致,但是实现方案又略有不同。 2、继承方...

2018-08-07 14:03:57 116

原创 极验证的运用(nodejs部署)

在页面中加入一些验证码,避免外部恶意破坏。下面描述的是本人在工作过程中用nodejs对极验证部署的总结。 1、用nodejs部署极验证思路: 安装依赖:request、express、body-parser、supervisor、express-session。 利用 npm install gt3-sdk –save 安装SDK,然后引入:var Geetest = require(...

2018-05-03 14:33:50 927

原创 两种时间选择器(移动端和PC端)

1、移动端时间选择器,以年月为例 此款时间选择器需要引入两个js文件,jquery.js和query.date.js下载地址在本文最后,代码如下:<script type="text/javascript" src="./jquery.min.js"></script><script type="text/javascript" src="jquery.d.

2018-05-03 11:15:47 9971

原创 如何在npm发布自己的包和上传文件到github

基于上一篇抽离完前端组件,现在想要把组件放在npm库里,并上传到自己的github上在npm库发布包你必须拥有npm库的账号 注册: https://www.npmjs.com/在抽离组件的文件夹中打开cmd,运行npm publish 注意:发布的包名为package.json中的name几种报错: a.当前的npm为淘宝镜像或其他,不是在npm,用nrm ls查看,nrm ...

2018-04-20 14:54:45 3322

原创 基于webpack搭建到抽离前端组件到发布在npm库

本篇分为三个部分,webpack搭建,前端组件抽离,在npm库上发布自己的包(基于vue)webpack搭建用npm init初始化,得到package.json,下载几个常见的webpack中的包,配置“dev”,“build”用于运行和打包项目。 运行项目的配置则存在于webpack.dev.config.js文件中 打包项目的配置存在于webpack.build.confi...

2018-04-20 11:34:28 2803

原创 用vue实现各类弹出框组件

简单介绍一下vue中常用dialog组件的封装:实现动态传入内容,实现取消,确认等回调函数。首先写一个基本的弹窗样式,如上图所示。在需要用到弹窗的地方中引入组件:import dialogBar from './dialog.vue'components:{ 'dialog-bar': dialogBar,},<dialog-bar></...

2018-04-10 17:52:48 73510 9

原创 nodejs的express实现上传文件到七牛

本文实现上传文件到七牛,动态切换上传空间,MD5设置key值,点击复制七牛返回的链接。 在七牛中注册开发者,获取key 七牛官网——管理控制台(偏右上角)——个人中心(获取秘钥)——对象存储,新建存储空间,获取存储空间名和对应的域名链接。 最开始,进入工程目录下,使用npm init初始化一个项目,其中包括以下几个文件: 文件夹public用于放置静态资源包括images、js等。rout...

2018-03-12 11:31:12 1125

原创 几种前端跨域总结

在做前端开发的一年多时间里,碰见各种前端跨域,今天在这里做一个简单的总结。 简单的理解一下为什么要跨域: 由于同源策略的限制,一个域下的文档或脚本不能去请求另一个域下的资源,跨域就是为了解决这样的问题。 同源是指:“协议+域名+端口”三者相同,即便两个不同的域名指向同一个ip地址,也非同源。 解决跨域的方案有: 1、通过jsonp跨域 2、document.dom...

2018-03-11 18:54:30 282

原创 vue中引用高德地图API

调用高德地图的API,首先注册高德开发平台的账号,称为高德地图开发者,创建应用后申请key(步骤如下): 进入高德开发平台——进入右上角控制台——进入做上角应用管理——创建key 安装高德地图组件: vue-amap 引入组件:import AMap from 'vue-amap'Vue.use(AMap)初始化vue-amap,放入对应的key值,在插件中加入所需要的搜索和定...

2018-02-28 08:42:05 1355

原创 vuex store的运用

vuex用来管理vue的所有组件状态。 首先下载vuex,”vuex”:”^3.0.1”,运用”vuex-persistedstate”来对数据进行缓存。下载”vuex-persistedstate” 在文件中引入:(新建一个store文件夹,在文件夹下的index.js文件进行如下编写)import Vue from 'vue'import Vuex from 'vuex'impor...

2018-02-27 19:47:35 20565 3

原创 vue组件之间的传值

组件传参: 组件实例的作用域是孤立的。这意味着不能在子组件的模块中直接引用父组件的数据,必须使用特定的方法才能实现组件之间的数据传递。 如在父组件中向子组件传值:<headerBar message = “hello” />在子组件中需要使用props获取到父组件的传值:props: [‘message’]子组件向父组件传递数据,如当input发生变化时,向子组...

2018-02-27 19:14:33 841

原创 简单分析MVVM

最常见的客户端框架:MVC: Model-View-Controller MVP: Model-View-Presenter MVVM: Model-View-ViewModel 在MVC里面,Model是数据模型,是应用程序中用于处理应用程序数据逻辑的部分;View是视图或者说就是界面需要去展示的东西,Controller是用来控制Model的读取、存储,以及如何在View上展示数据,...

2018-02-27 09:22:03 253

原创 实时监控文本框输入字数

需求:实时监控文本输入框的字数,并加以限制 1、实时监控当前输入字数,直接使用onkeyup事件方法,给输入框加maxlength属性限制长度。如: div> textarea id="txt" maxlength="10">textarea> p>span id="txtNum">0span>/10p> div> var tx

2018-01-17 17:34:56 2140

原创 移动端因软键盘的原因,固定在页面底部的按钮被弹起解决方案

问题描述:移动端,当需要输入内容时,软键盘弹出往往会导致固定在底部的按钮、导航栏等被弹起,如图: 解决思路: 当键盘弹起时隐藏掉按钮,键盘隐藏时按钮显示 监测键盘是否弹起(浏览器页面是否发生变化) 代码: 1、定义一个底部按钮 <div class="returnbtn" v-show="isOriginHei" :class="{act...

2018-01-17 15:58:26 6957 2

原创 vue移动端使用video标签

vue移动端使用video标签

2018-01-04 11:15:33 14206

原创 js判断移动端、ios或android、不同浏览器

js判断移动端、ios或android、不同浏览器

2018-01-04 10:50:16 362

原创 vue的路由传参

vue的两种传参方式: router-link传参方式, $router方式传参

2018-01-04 10:20:49 3211

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