- 博客(81)
- 收藏
- 关注
RSS订阅原创 vue中导出excel
最近有一个需求，需要支持导入导出excel。导入嘛，没多想，直接调用了公司封装好了轮子，嗯，挺好用，三步就搞定了，但是导出，我找了又找，没有在公司的组件库中发现蛛丝马迹
2020-05-08 23:22:00
451
原创 vuex常用设计套路
由于时间太晚了，我早已是睡眼朦胧，不多说了，直接上代码。大家都知道vuex的state、getters、mutations、actions吧，不知道的也没关系，官网走一波。先看整体目录结构：下面我们来看看每个文件中是怎么操作的：index.js:import Vue from 'vue'import Vuex from 'vuex'import state from ...
2020-04-15 00:41:12
330
原创 如何在vue中封装一个高适用性、高扩展性的echarts
武汉解封，又是一年春好色！不管有事没事，我总喜欢把公司的项目拿出来da东看看，西点点，或许我是做测试的命吧。今天发现了一个问题，谈不上bug，但是体验不好。下面先上图，看看问题所在，（敏感数据已做处理）全屏下是这个样子的，中规中矩，看起来还行：如果我们把侧边栏打开，他就成了这个鬼样子：不用多说，想必大家已经知道问题所在了吧，下面的table用的是el-row + el-co...
2020-04-09 22:05:43
391
原创 Vue Router如何设计一个高扩展性的路由
我们在使用Vue做项目开发的时候，路由这一块肯定是少不了的。我们是否真正去考虑过、设计过如何才能整一个漂亮的、高扩展性的路由。可能很多开发者不以为然，认为路由嘛，不久是那么回事嘛，直接开撸就完事了，如果后期有什么需求，加什么页面，再随便加个路由，指向一个页面就行了。那么我可以很明确的告诉你，小项目这么干，可能问题不大，如果稍微大一点的项目，几百个路由的时候，你不做区分，不做规划，那么可能你自己...
2020-03-26 09:04:37
840
原创 MySQL轻快入门
客户端的概念：我们存取数据都需要客户端和服务器端进行通话，我们打开任务管理器，可以看到mysql相关的服务，可以找到mysql（客户端）和mysqld（服务端），其实数据的存取就是这二者之间的通话。
2020-03-07 13:44:55
192
原创 事件代理（事件委托）
事件代理，又称之为事件委托，是JS中绑定事件的常用技巧，顾名思义，事件代理就是把原本需要绑定在子元素上的事件委托给父元素，事件代理的原理是冒泡机制。下面我来举个例子：先写出页面上的HTML结构<button id="btn">添加按钮</button><ul> <li>1</li> <li>2</...
2020-02-25 15:16:19
233
原创 JS判断图片是否加载完成
我们经常需要获取图片的宽高，这需要在图片加载完成后才可以。下面我就介绍几种判断图片是否加载完成的方法：首先我们先写一个img标签<img src="./img.png" alt="">1.complete属性：var imgNode = document.getElementsByTagName('img')[0];var timer = setTimeout...
2020-02-24 23:56:13
3265
1
原创 JS延迟加载的方式有哪些
JS延迟加载，也就是等页面加载完成之后再加载 JavaScript 文件，有助于提高页面的加载速度。1.defer 属性：等于告诉浏览器立即下载，但延迟执行（脚本会被延迟到整个页面都解析完毕之后再执行。），即使<script>元素放在了<head>元素中，但包含的脚本将延迟浏览器遇到</html>标签后再执行，所有的defer脚本保证是按顺序依次执行的。...
2020-02-24 08:29:27
1443
原创 DOM操作方法大全
1.nodeType: 以数字值返回指定节点的节点类型元素节点：1属性节点：2文本节点：32.attributes:返回当前元素属性列表集合通过name取当前属性通过value取当前属性的属性值3.childNodes:返回子节点列表集合只包含一级子节点，不包含孙子级及以下；标准下，包含元素节点和文本节点,也会包含非法嵌套的子节点，如下面的p；非标准下，只包含元素...
2020-02-24 06:42:52
1498
原创 如何让低版本浏览器支持HTML5
HTML5能为我们做的事儿很多，最为可口的就是语义化标签的应用，但遗憾的是低版本IE不支持HTML5，下面我们就一起来解决这个问题。通过JavaScript语句document.createElement("xxx")的方式来解决这个问题我就不介绍了，因为IE8及更早的版本不支持这种方式。下面我们一步到位，直接介绍最OK的办法：<!--[if IE]><scrip...
2020-02-23 23:43:44
377
原创 清除浮动的几种方式
原本七天的假期，就想着不用带电脑，在老家带一点吃的过来，谁曾想到由于疫情的影响，在老家呆了足足二十多天。我承认手痒了想写代码了，由于最近打算换个工作，就找了一些面试题来刷一刷，希望下一份工作能够满意。好了，话不多说，开始今天的内容。我们都知道，如果不给外层div设置高度，那么它的高度会被里面的内容撑开，我们经常会遇到这样一种情况，div里面的元素是浮动的，那么，情况就会变得如下：<...
2020-02-23 18:39:19
89
原创 SVG制作图标字体
前言：小伙伴们是不是经常看到如下代码，然后就是一头雾水，这到底是个啥呀，今天我们就一起来研究一下这个问题。@font-face { font-family: 'sell-icon'; src: url('../fonts/sell-icon.eot?ze40eg'); src: url('../fonts/sell-icon.eot?ze40eg#iefix') form...
2020-01-22 16:40:41
1840
原创 stricky footer
stricky footer设计是最古老和最常见的效果之一，我们都曾经历过类似的情景：如果页面内容不够长的时候，页脚块粘贴在底部；如果内容足够长时，页脚块会被内容向下推送。最近做demo的时候跟着大佬认识了stricky footer，下来查阅了相关资料，在此记录一下： ...
2020-01-22 10:34:51
186
原创 Js之动画的最佳实现requestAnimationFrame
在讲解这个API之前，我们先来了解一些基础知识：屏幕刷新频率：屏幕每秒出现图像的次数。普通笔记本为60Hz。1000 / 60≈16.67 ，所以计算机每16.7ms刷新一次，由于人眼的视觉停留，所以看起来是流畅的移动。setTimeout：通过设定间隔时间来不断改变图像位置，达到动画效果。但是容易出现卡顿、抖动的现象；原因是：1、settimeout任务被放入异步队列，只有当主线程任务...
2019-12-25 15:39:16
902
1
原创 TypeScript高级类型之条件类型
什么是条件类型含义：是一种由条件表达式所决定的类型；基本语法：TextendsU?X:Y 代表的含义为：如果类型T可以被赋值给类型U，那么就是X类型，否则就是Y类型；作用：条件类型使类型具有了不唯一性，增加了语言的灵活性。下面我们来看一个最基本的例子：type TypeName<T>= T extends string ? "string"...
2019-12-24 10:15:04
589
原创 TypeScript高级类型之映射类型
映射类型：通过映射类型我们可以从一个旧的类型生成一个新的类型（比如说把一个类型中的所有属性变成只读）我们先定义一个接口：interface Obj{ a:string, b:number, c:boolean}1、只读Readonly：type readOnlyObj=Readonly<Obj>2、Partial（可选），把接口...
2019-12-24 01:43:36
581
原创 TypeScript高级类型之索引类型
先看下面的代码：let obj={ a:1, b:2, c:3}function getValues(obj:any,keys:string[]){ return keys.map(key=>obj[key])}getValues(obj,['a','b']) //[1,2]这个函数的意思是返回对象中指定属性的值所组成的数组。如果我们指...
2019-12-23 22:17:28
1148
原创 TypeScript高级类型之交叉类型与联合类型
所谓的高级类型就是指TS为了保障语言的灵活性，所引入的一些语言特性，这些特性将有助于我们应对复杂多变的开发场景。交叉类型将多个类型合并成一个类型，新的类型将具有所有类型的特性，所以交叉类型特别适用对象混入的场景。interface DogInterface{ run():void}interface CatInterface{ jump():void}let ...
2019-12-23 21:33:58
313
原创 Object.defineProperty定义对象属性
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。语法:Object.defineProperty(obj, prop, descriptor)参数：obj要在其上定义属性的对象。prop要定义或修改的属性的名称。descriptor将被定义或修改的属性描述符。value：属性...
2019-12-23 16:32:39
4464
原创 js中继承（拷贝）的几种常用方法
寻寻觅觅，寻寻觅觅，你终于找到了这儿。话不多说，直接开撸，我们先从最简单的浅拷贝开始浅拷贝：这里关于浅拷贝，我总结了三种方法，我们先来定义两个对象var person={ name:"cj", age:'22', add:{ c:"33", d:'44' }}var prog={ lang:"javascri...
2019-12-23 16:25:41
271
原创 TypeScript中的类型检查机制
类型检查机制：TS编译器在做类型检查时，所秉承的一些原则，以及表现出的一些行为。 作用：辅助开发，提高开发效率类型推断不需要指定变量的类型（函数的返回值类型），TS可以根据某些规则自动的为其推断出一个类型基础类型推断 let aa; //自动推断为any类型let s=1; //推断为number类型let ms=[]; //推断为以any类型为元素的数组类型...
2019-12-23 12:19:40
823
原创 回流和重绘
浏览器渲染过程：在页面加载时，浏览器把获取到的HTML代码解析成1个DOM树，DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体DOM Tree 和样式结构体组合后构建render tree（渲染树）,然后根据渲染树进行布局，最后调用GPU进行绘制，显示在屏幕上。ren...
2019-12-21 10:03:25
280
原创 vue递归组件与动态组件
递归组件递归组件就是指组件在模板中调用自己，开启递归组件的必要条件，就是在组件中设置一个name选项。比如下面的示例：<template> <div> <my-component></my-component> </div></template><script>export de...
2019-12-20 00:14:53
492
2
原创 TypeScript中的泛型
很多时候我们希望一个函数或者一个类可以支持多种数据类型，有很大的灵活性。很多小伙伴可能会想到函数重载，联合类型，或者any类型等。函数重载代码量大，联合类型冗长。function log(value:any):any{ console.log(value); return value;}虽然使用any类型可以满足我们的需求，但是缺失类型信息，这不是我们所希望的，...
2019-12-19 14:51:44
271
原创 webpack之构建日志
当我们执行构建命令时候，会出现如下效果：事实上，很多时候我们并不关注这些，只关注是否构建成功和错误信息。下面我们就一起来解决这个需求，让我们的命令行清爽整洁不依赖插件通过在webpack.config.js中设置stats统计信息stats errors-only只在发生错误时输出 minimal只在发生错误或有新的编译时输出 ...
2019-12-17 23:20:03
1831
原创 TypeScript中的类
总体来讲，TS中的类覆盖了ES6中的类，并引入了一些新的特性。类的基本实现class Dog{ constructor(name:string){ //构造函数的返回值会自动推断为Dog,也就是这个类的本身 this.name=name; //初始化实例属性 } name:string; run(){} //默认返回值是void...
2019-12-17 22:27:54
393
原创 TypeScript中的函数
定义函数的四种方式：// 1.用function来定义函数（返回值的number可以省略，这是由于ts的类型推断）function add1(x:number,y:number):number{ return x+y;}//2.通过变量来定义函数类型let add2:(x:number,y:number)=>number;//3.通过类型别名来定义函数类型t...
2019-12-13 22:16:29
361
原创 webpack之打包压缩版和非压缩版
我们知道，在开发中一般使用非压缩版，利于调试。在生产环境中一般使用体积小的压缩版，有利于提升加载速度。下面我们就来看一下如何在webpack中对一份文件打包出压缩版和非压缩版1.安装插件：cnpm i terser-webpack-plugin -D2.新建src目录，并且新建index.js ，我们随便写点什么都可以console.log(111)3.配置："...
2019-12-13 09:26:07
1721
原创 TypeScript中的接口
介绍：TypeScript的核心原则之一是对值所具有的结构进行类型检查。它有时被称做“鸭式辨型法”或“结构性子类型化”。在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。对象类型的接口：通过关键字interface来定义接口interface List{ id:number, name:string}interface R...
2019-12-12 23:32:00
155
原创 TypeScript中的数据类型
首先我们先来对比一下ES6和TS的数据类型ES6的数据类型： Boolean Number String Array Function Object Symbol undefined nullTypeScript的数据类型：Boolean Number String Array Func...
2019-12-12 00:02:22
263
原创 TypeScript入门须知
什么是强类型语言、弱类型语、静态类型语言、动态类型语言1. 强类型语言：不允许改变变量的数据类型，除非进行强制类型转换2. 弱类型语言：变量可以被赋予不同的数据类型3. 静态类型语言：在编译阶段确定所有的变量类型对类型极度严格， 立即发现错误， 运行时性能好， 自文档化4. 动态类型语言：在执行阶段确定所有的变量类型对类型非常宽松， bug可能隐藏数月甚至数年， 运...
2019-12-11 17:29:20
85
原创 webpack之Scope Hoisting
我们先来简单分析一下：（没有开启Scope Hoisting）现象：构建后的代码存在大量的闭包代码[ (function (module, __webpack_exports__, __webpack_require__) { var __WEBPACK_IMPORTED_MODULE_0__util_js__ = __webpack_require__(1); c...
2019-12-07 11:20:29
492
原创 webpack之Tree shaking（摇树优化）
概念：treeshaking就是只把用到的方法打入bundle,没有使用到的方法会在uglify阶段被擦除掉，这样得以优化项目体积。使用：webpack默认支持，在.babelrc里面设置moudules:false即可（如果你要把es6转成es5，同时又要开启treeshaking,需要在.babelrc里面设置modules:false,不然babel默认会把es6转成com...
2019-12-07 09:49:57
492
原创 如何动态渲染 .vue 文件
写在开头你可能用过jsfiddle或jsbin之类的网站，在里面你可以用 CDN 的形式引入 Vue.js，然后在线写示例。不过，这类网站主要是一个 html，里面包含 js、css 部分，渲染则是用 iframe 嵌入你编写的 html，并实时更新。在这些网站写示例，是不能直接写.vue文件的，因为没法进行编译。来看另一个网站iView Run，它是能够在线编写一个标准的...
2019-12-06 11:57:06
2877
6
原创 Vue extend的基本用法
我们创建Vue实例时，都会有一个el选项，来指定实例的根节点，如果不写el选项，那组件就处于未挂载状态。Vue.extend的作用，就是基于 Vue 构造器，创建一个‘ 子类 ’，它的参数跟new Vue的基本一样，但data要跟组件一样，是个函数，再配合$mount，就可以渲染组件，并且挂载到任意指定的节点上，比如body（这是单文件组件做不到的）下面我们就来看两个例子：1.在单文件组...
2019-12-06 09:40:23
1401
原创 webpack之多页面打包通用方案
多页面应用（MPA）概念：每一次页面跳转的时候，后台服务器都会返回一个新的html文档，这种类型的网站也就是多页网站，也叫做多页应用优势：页面之间的解耦 更利于SEO 多页面打包基本思路：每个页面对应一个entry,一个html-webpack-plugin缺点：每次新增或删除页面都需要修改webpack配置多页面应用通用打包方案动态获取entry和设置h...
2019-12-04 11:28:03
675
原创 webpack之移动端css px自动转换成rem
1.安装依赖：cnpm ipx2rem-loaderlib-flexible -D2.配置：{ test:/\.css/, use:[ MiniCssExtractPlugin.loader, 'css-loader', { loader:'px2rem-loader', ...
2019-12-03 18:20:51
874
原创 webpack之自动补全css前缀
css3的属性为什么需要前缀浏览器的兼容性问题（浏览器的标准尚未统一）谷歌：-webkit火狐：-mozIE：-ms欧朋：-o举个例子：display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers....
2019-12-03 17:26:28
870
原创 webpack之清除构建目录
安装：cnpm iCleanWebpackPlugin -Dclean-webpack-plugin插件是用于在下一次打包时清除之前打包的文件，避免构建前每次都需要手动删除dist使用clean-webpack-plugin(默认会删除output指定的输出目录)我在使用的过程中遇到了一个坑，先把报错信息给大家看一下：“TypeError: CleanWebpackPlu...
2019-12-02 16:04:27
682
原创 webpack之代码压缩
代码压缩的作用 / 好处JS和CSS经过压缩之后体积变小，也就是文件占用内存会变小 在访问网站的时候要加载JS和CSS，体积越小，加载越快。 网站打开的速度也就越快，有利于用户体验。 混淆：经过编码将变量和函数原命名改为毫无意义的命名，以防止他人窥视和窃取 Javascript 源代码。文件压缩1.js文件的压缩内置了uglifyjs-webpack-pluginwebpa...
2019-12-02 11:07:51
626
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人