kuke_kuke的博客

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

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

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

2019-02-18 17:19:14

阅读数 324

评论数 0

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

直接下载 var url = this.GLOBAL_URL + "/api/GetFile?id=" + id; // 请求的url + id var xhr = new XMLHttpRequest(); xhr.open("GET&am...

2019-01-07 16:29:28

阅读数 1050

评论数 1

关于vue中slot的理解

将父组件的内容放到子组件指定的位置叫做内容分发 // 在父组件里使用子组件 <son-tmp> <div>我是文字,我需要放到son-tmp组件里面指定的位置</div&...

2019-01-07 10:57:29

阅读数 1083

评论数 0

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

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

2019-01-07 10:08:18

阅读数 1256

评论数 0

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

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

2019-01-07 09:25:53

阅读数 146

评论数 0

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

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

2018-11-20 09:27:00

阅读数 589

评论数 3

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

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

2018-11-19 20:11:39

阅读数 1410

评论数 1

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

一、使用新语言来开发项目 1、使用ES6语言 通常我们需要将采用ES6编写的代码转换成目前已经支持良好的ES5代码,包含如下: 将新的ES6语法用ES5实现,例如ES6的class语法用ES5的prototype实现; 为新的API注入polyfill,例如使用新的fetch API时在注入对应...

2018-11-07 19:19:12

阅读数 795

评论数 0

webpack进阶之路二、(配置)

Entry:配置模块的入口。 Output:配置如何输出最终想要的代码。 Module:配置处理模块的规则。 Resolve:配置寻找模块的规则。 Plugins:配置扩展插件 DevServer:配置DevServer。 其他配置项:其他零散的配置项。 整体配置解构:整体地描述各配置项的结构。...

2018-11-07 09:22:13

阅读数 228

评论数 0

es6的一些新特性总结

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

2018-10-23 19:28:00

阅读数 90

评论数 0

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

一、为什么要用webpack? 1. 模块化开发 指将一个复杂的系统分解为多个模块以方便开发和修改。 好处有: 避免变量污染,命名冲突 提高代码复用率 提高维护性 依赖关系的管理 2. 模块化开发规范介绍 CommonJS、AMD、ES6等 CommonJS(CommonJS官网)的核心思...

2018-10-23 16:29:47

阅读数 79

评论数 0

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

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

2018-08-27 15:47:29

阅读数 262

评论数 0

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

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

2018-08-26 10:57:58

阅读数 269

评论数 0

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

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

2018-08-17 10:41:59

阅读数 465

评论数 0

javascript中的继承

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

2018-08-07 14:03:57

阅读数 76

评论数 0

极验证的运用(nodejs部署)

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

2018-05-03 14:33:50

阅读数 545

评论数 0

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

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

2018-05-03 11:15:47

阅读数 3975

评论数 0

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

基于上一篇抽离完前端组件,现在想要把组件放在npm库里,并上传到自己的github上 在npm库发布包 你必须拥有npm库的账号 注册: https://www.npmjs.com/ 在抽离组件的文件夹中打开cmd,运行npm publish 注意:发布的包名为package.json中...

2018-04-20 14:54:45

阅读数 1328

评论数 0

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

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

2018-04-20 11:34:28

阅读数 901

评论数 0

用vue实现各类弹出框组件

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

2018-04-10 17:52:48

阅读数 41292

评论数 7

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