3 kuke_kuke

尚未进行身份认证

想要成为一名优秀的、卓越的前端攻城狮

等级
TA的排名 4w+

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

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

2019-02-18 17:19:14

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

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

2019-01-07 16:29:28

关于vue中slot的理解

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

2019-01-07 10:57:29

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

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

2019-01-07 10:08:18

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

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

2019-01-07 09:25:53

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

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

2018-11-20 09:27:00

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

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

2018-11-19 20:11:39

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

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

2018-11-07 19:19:12

webpack进阶之路二、(配置)

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

2018-11-07 09:22:13

es6的一些新特性总结

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

2018-10-23 19:28:00

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

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

2018-10-23 16:29:47

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

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

2018-08-27 15:47:29

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

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

2018-08-26 10:57:58

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

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

2018-08-17 10:41:59

javascript中的继承

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

2018-08-07 14:03:57

极验证的运用(nodejs部署)

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

2018-05-03 14:33:50

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

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

2018-05-03 11:15:47

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

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

2018-04-20 14:54:45

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

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

2018-04-20 11:34:28

用vue实现各类弹出框组件

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

2018-04-10 17:52:48

查看更多

勋章 我的勋章
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!