- 博客(40)
- 收藏
- 关注
RSS订阅原创 http链接重定向为https
有时候当用户通过http://www.xxxxx.com访问我们的网站的时候，我们期望可以自动跳转到https://www.xxxx.com，这样做也是为了数据传输的安全性考虑(当然了，首先需要你的网站已经配好了SSL证书)。下面介绍两种简单常用的解决方案。 第一种：JS检测window.location.protocal, 重写window.location.href if (window.location.protocol === 'http:') { w...
2020-08-03 16:02:51
5015
1
原创 vue懒加载对话框API封装技巧（项目必备技能，适用于各种需要懒加载动态展示的弹框组件）
懒加载对话框的方式做到了在你调用弹框展示API的那一刻，才去加载对话框文件并最终显示弹框效果。它最大的意义在于减少了你初次进入页面时加载的文件资源请求量和大小（加载资源小了，网页加载速度自然就提升了），将它封装成API顺带也做到了统一管理对话框的目的并且使得对话框文件和页面文件分离，起到了一个模块化的效果。 目前很多前端组件库提供的对话框组件在使用的时候，都是把对话框的代码和页面代码放在一起。例如下面Element官网的例子： 这样一来你的页面如果有不少对话框的话，整个代码看...
2020-07-25 20:54:22
1543
原创 纯数据驱动的侧边菜单组件封装
对于层级比较深的侧边菜单栏需求，常见的前端UI导航菜单栏组件的模板使用起来会比较复杂一点，主菜单和子菜单之间的嵌套关系会随之加大，你需要根据最大的层级去写你的模板内容，而且一旦层级加深，你的模板代码就需要再去维护一下。那么为了一劳永逸，就抽了时间写了一个纯数据驱动的侧边菜单栏组件，下面是最终实现的动态效果图： 上面是该组件的两种展开模式展示（是否只保持一个子菜单的展开），所使用的数据如下： [ { name: '菜单1'...
2020-07-05 22:36:31
521
原创 峰谷图配置（面积图， 基于echarts）
峰谷图或面积图也是数据可视化图表的一种常见类型。这个配置比较简单，下面就以一个销量峰谷图为例直接放效果图和代码了。下面是最终实现的效果动态图，提示框会跟随鼠标移动而确定位置： 为了有更好的适用性，这里把绘制峰谷图的操作都封装到了一个函数里面。以Vue项目为例，要完成这个峰谷图的配置所需步骤如下：1：npm下载echarts模块。2：在main.js文件中引入峰谷图相关的模块，并把echart主模块绑定到vue原型对象上，以便后续调用，代码如下：// 引入 EChar...
2020-06-18 12:42:23
2526
原创 可左右滑动的柱状图（数据区域可平移，缩放，基于echarts）
柱状图是数据可视化需求中的一种常见图表形式，当数据量大的时候，我们还会期望柱状图可以左右滑动。这里可以通过配置echarts的柱状图和数据区域缩放组件dataZoom来完成我们的需求。下面是完成后的效果动态图(鼠标移入柱条即出现提示框)： 为了有更好的适用性，这里把绘制柱状图的操作都封装到了一个函数里面。以Vue项目为例，要完成这个柱状图的配置所需步骤如下：1：npm下载echarts模块。2：在main.js文件中引入柱状图相关的模块，并把echart主模块绑定到vue原型对...
2020-06-17 19:16:31
10297
2
原创 不重叠且分布均匀的气泡图解决方案（基于echarts）
气泡图是数据可视化需求中的一种常见图表形式。然而截至目前，像echarts，d3，higncharts都还没有直接提供一个配置来完成不重叠且分布均匀的气泡图这项工作。幸运的是，我们可以通过配置echart的关系图来完成我们的气泡图需求。 下面是完成后的气泡图效果（数据加载后有一个动画效果，而且气泡支持拖动，下方动图不和谐的地方为鼠标拖动）： 最终稳定之后的效果如下： 为了有更好的适用性，这里把绘制气泡图的操作都封装到了一个函数里面。以Vue项目为例，要完...
2020-06-17 00:46:41
15141
9
原创 带全选项的多选下拉框封装（基于element）
业务需求期望多选的的下拉框带有全部选择选项，并且全部选择选项和其他的选项为互斥关系，而element中的下拉多选框是没有一个这种全选功能的，所以需要自己实现。下面我们看一下完成的效果动图：...
2020-06-03 22:54:13
818
原创 如何按照指定属性排序对象数组
在工作场景中会出现对对象数组按照某一对象属性排序的情况，例如对于下面的对象数组按照对象age从小到大排序。let arr = [ {name: 'code', age: 18}, {name: 'jack', age: 27}, {name: 'fake', age: 13}, {name: 'rade', age: 38}, {name: 'bob', age: 25}] 排序的核心算法有很多，一些算法详情可见笔者的另一篇博客经典十大...
2020-06-01 06:31:16
1294
1
原创 一起捋捋BFC的特点和它解决的问题（Block Formatting Context）
BFC （Block Formatting Context）译为块格式化上下文，是CSS渲染中的一块独立渲染区域， 计算高度的时候会算上内部的浮动元素。一个BFC区域内的元素布局排列不会影响到外部渲染区域的元素布局排列。根据这些特点，我们常常用来解决一些诸如相邻块外边距折叠，清除浮动，浮动塌陷，浮动块和普通块元素重叠等元素之间布局排列的问题。下列方式会创建块格式化上下文：根元素(<html>) 浮动元素（元素的float不是none） 绝对定位元素（元素的positi...
2020-05-11 20:28:46
255
原创 块级元素水平垂直居中的5种技巧
元素居中分为水平居中，垂直居中，还有水平垂直居中这三类。其中文本元素和块元素的居中方式又有略微不同。平时工作中我们最常见的就是块级元素的水平垂直居中和文字的水平居中了。下面是几种块级元素水平垂直居中的方式。 方式1：margin: auto + 绝对定位.wrapper { position: relative; background: yellow; ...
2020-05-05 13:00:27
4160
原创 广播与派发原理(基于vue实现dispatch, broadcast)
广播与派发适用于有祖先关系的组件间通信，原理是通过遍历组件树,用组件名（或者其它组件唯一标识）定位到对应的组件，并在找到的组件实例中调用$emit，从而触发$on监听的事件，这样就完成了一次组件间的通信。广播是父组件遍历他下面的所有后代组件，而派发的顺序则相反，是子组件向上寻找对应的父组件。 在vue中我们可以通过this.$parent获取父组件，this.$children获取...
2020-04-22 15:46:50
990
原创 基于element的网站自适应方案（移动端适配）
一般而言，管理系统类的网站我们往往会按照PC的标准来设计，不会去考虑小屏幕的适配，甚至是移动端的适配，因为这种系统网站往往涉及到大量的列表查询页（表格列往往很多，列内容长短不一），详情页（信息展示量大且分栏排布，例如一屏展示4列内容，或5列内容），数据分析的图表页（含有大量图表，例如折线图，柱状图，饼图）等等。为了获得最佳的视图效果，使用者都会选择在电脑上浏览页面。如果产品经理要求在移...
2020-04-15 10:40:58
41247
21
原创 vue cli4 配置alias 和 providePlugin
对于一些高频次的复杂路径模块导入我们往往会对这个路径设置一个别名，就像vue中的@代表着src一样。同理，对于一些公共的变量或者方法，为了简化调用我们往往会通过providePlugin将他们设置成全局变量或者方法。 首先我们来配置alias（在vue.config.js文件中配置)，下面把一个工具函数的地址配成了#util，以下是相关配置内容：configureWebpa...
2020-03-19 18:08:33
2658
原创 SplitChunksPlugin拆分规则（cli4 实测）
熟悉拆分规则才能避免误用SplitChunksPlugin并将chunks的拆分效益最大化。讲这个之前，我们先看一下SplitChunksPlugin的默认配置：module.exports = { //... optimization: { splitChunks: { chunks: 'async', // 仅提取按需载入的module ...
2020-03-17 15:53:28
3803
原创 vue cli4 配置资源CDN
出于对网站性能的要求，有时候我们不希望一些比较大的第三方库直接打包到最后的bundle中，而会选择在打包的时候忽略他们，并直接使用CDN上面的资源。脚手架经过升级，cli4的相关配置都需要在vue.config.js这个文件中进行，如果你没有这个文件请自己新建一个（与package.json同级）。 这里我们首先配置configureWebpack的externals字段，把不需...
2020-03-14 16:25:55
5981
11
原创 vue cli4 bundle分割（单独打包第三方库文件,配置splitChunks）
项目中的第三方库默认会被打包到一个文件名含vendors的bundle中，如果你的项目里面引用的第三方库过多，那么你的vendors就会很臃肿，文件也会变大，网站加载该文件的时候就越耗时，从而影响网站性能。这个时候我们可以考虑把一些比较大的第三方库从vendors中分离出来，或者直接配置cdn。这里我们主要来讲如何在cli4中单独打包第三方库文件从而实现bundle分割，减小vendors...
2020-03-14 16:04:27
14195
原创 nginx启用gzip（提升网站性能）
nginx服务器启用gzip可以对客户端请求的资源进行压缩，从而减少带宽和文件下载时间，提升网站加载速度。nginx关于gzip的配置内容如下： # 开启gzip gzip on; # 允许压缩文件的最小字节数，大于该阈值即可被压缩 gzip_min_length 1024; # 压缩级别1-9,级别越高,压缩率越大,越占用cpu时间 g...
2020-03-07 15:23:32
448
原创 vue 配置多入口项目（cli 版本4.1.2）
每个入口一般会有自己的html, main入口文件和内容模板。按照这个思路，我们先建立一个pages文件夹用来存放每个入口相关的文件。文件目录结构如下所示： 这里我们有alpha和beta两个入口，其中他们的html放在public文件夹下（参照脚手架生成的项目结构中index.html位置）。main作为入口文件我们可以打印一些信息来判断入口文件是否加载正确。这里我们看一...
2020-03-06 18:37:57
1750
5
原创 vue-router history模式前后端相应配置
vue路由有hash和history两种模式。hash模式路由路径如下http://localhost:8081/#/about,history模式路由路径如下http://localhost:8081/about。 配置history模式前端需要在初始化路由实例的时候把mode设为history 本地运行效果如下：此外服务器中的nginx配置文件中的l...
2020-03-06 15:39:28
2071
原创 el-tree取消特定叶子节点与上级的勾选联动
如果你用el-tree做菜单和按钮的权限数据选择，那么按钮和他所属的菜单联动关系之一是当前菜单可以独立选择，即不选按钮可单独选择菜单。 那么问题来了，el-tree的联动模式只有是否强制遵循父子联动关系，并没有为单独的特例而破格。在菜单和按钮权限的大背景之下，我们需要的是按钮和他的上级菜单不遵循强制的父子联动关系，而其余菜单则强制遵循父子联动关系。明白了这一点之后，我们需...
2020-03-01 17:43:33
2236
原创 js非标准树状结构数据的处理
之前笔者写过两篇博客来讲如何处理标准的树状结构数据，分别是js遍历树形结构方法和过滤树形结构数据并获取新的树形结构。这次就来聊一下如何处理非标准树状结构数据。标准的树状结构数据的下级节点存放的字段是统一的比如说我们常见的children，有一些特别的数据为了语义上更加明确，所以每一级的子级所在的字段都不一样，比如存放省市区标识的数据用cityList存放下级市，areaList存放下级...
2020-02-17 14:34:51
327
原创 package.json和package-lock.json的作用
package.json记录当前项目所依赖模块的版本信息，更新模块时锁定模块的大版本号（版本号的第一位）。package-lock.json记录了node_modules目录下所有模块的具体来源和版本号以及其他的信息。 当你修改了package.json 某一个模块的版本信息后，用npm i 更新模块，你会得到该模块在package.json限定的大版本下的最新模...
2020-01-06 18:23:44
22654
4
原创 仿el-table实现表格控件（内含作用域插槽访问数据， JSX， render）
前阵子看了饿了么的el-table源码，自己动手封装了一个具有下拉加载功能的表格控件，其中涉及到的知识有JSX，render渲染函数，组件间的状态管理等等。该组件实现了下拉加载，作用域插槽访问数据，加载动画，和宽度自适应这些主要效果，以及一些el-table常用的属性。下面是实现的效果动态图，点击大图查看效果更好：由于gif动态图不太清晰，下面放送两张...
2020-01-03 17:44:08
2173
5
原创 真正走进v-if和v-show的世界（与img的前世今生）
这是再谈系列的第二篇文章，讲的是v-if和v-show作用于加载网络图片的img标签之间的区别。众所周知，v-if 作用的标签是真正的条件渲染，具有惰性，只有当条件为真值的时候会渲染标签，在条件切换的过程中，标签会重新渲染。v-show作用的标签会都渲染出来，只不过会根据条件不同设置css的display属性值，条件为假时display设为none。 img标签...
2019-12-20 14:31:45
975
原创 从零开始用jenkins自动化部署Vue项目（包括域名配置，服务器部署等等）
几个月前笔者从个人项目搭建，购买服务器，备案，nginx配置到pm2进程管理，最后用jenkins完成了项目的自动化构建发布。今天阿里云发来消息要在网站首页底部中间添加备案号，才再一次用到了之前的成果。特以此文，记录几个月前折腾的整个过程。 1：第一步你需要一个github账号（jenkins需要配置项目远程地址），这里托管着我们的项目代码。没有的小伙伴可以去htt...
2019-12-19 17:58:49
1178
原创 仿vue实现数据双向绑定
前段时间笔者学习了一下Vue的源码，也看了一些前辈对Vue源码研究的博客，然后用es实现了一个基础的数据双向绑定框架Hue，作为学习成果之一，在此分享给大家。Hue实现了@click，v-model， watch监听属性变化这几个基本的功能，后续如有需要大家可以自行扩展，比如hook之类的，整个框架的组织架构也可以自行调整。其中很多内容的设计和实现都是参照了Vue源码来实现的，后面...
2019-12-16 17:58:53
347
原创 js过滤树形结构数据并获取新的树形结构
工作中不时会遇见对树形结构数据的处理，有时候只需要遍历并获取其中一个属性值就行了（这部分内容请参考笔者的另一篇博客JS遍历树形结构方法），有时候我们则需要根据某些条件去过滤并得到新的树形结构数据。let nodeList = [ {id: '1-1', children: [{id: '1-2-1'}, {id: '1-2-2'}]}, {id: '2-1'},...
2019-11-11 17:08:26
12295
6
原创 经典十大算法的JS实现
以下JS代码均以实现从小到大的升序排列为例，如若改为降序，请自行修改。本文算法描述部分来源于十大经典排序算法，该篇文本还有动图演示。1冒泡排序： 冒泡排序是一种简单的排序算法。它重复地走访过要排序的数列，一次比较两个元素，如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素...
2019-11-07 16:02:19
522
原创 js遍历树形结构方法
let nodeList = [ {id: '1-1', children: [{id: '1-2-1'}, {id: '1-2-2'}]}, {id: '2-1'}, {id: '3-1', children: [{id: '3-2-1', children: [{id: '3-3-1'}]}]}] 如上图的nodeList是一个标准的树形结构数组，他...
2019-10-28 18:00:51
24596
2
原创 JS获取字符串指定位置字符方法（史上最全，绝对干货）
这里以获取‘hello’字符串的第二个字符为例,首先我们定义一个变量: let str = 'hello'方法一（字符串函数直接截取）：这是最常规的方法，这三个函数可以截取字符串，但又有所不同。slice 和substring 的第一入参和第二入参表示截取的起始位置和结束位置，但是slice的入参允许为负，例如str.slice(-2,-1)代表截取str的倒数第二位字符。而subs...
2019-10-23 16:24:21
56849
原创 Vue按钮封装防抖功能
按钮防抖一直是前端经常需要做的事情，而防抖其实更加准确的说是避免用户在较短时间内进行过快点击，从而引发一系列负面的影响。 整个按钮组件封装的思路其实很简单，主要就是比较当前点击和上一次点击的时间差，如果时间差小于设置的值，即认为需要进行防抖处理，阻止子组件向父组件抛出click事件。同时在每一次点击之后需要记录一下时间，以便和下次点击计算时间差。具体代码如下：...
2019-10-22 16:40:41
4479
3
原创 自定义组件v-model (父组件赋值，子组件无响应问题）
一个组件上的v-model默认会利用名为value的 属性 和名为input的事件，也就是说会把v-model中的内容赋值给组件中props里面的value,同时监听input事件。有时候我们会在父组件中直接修改v-model中的绑定值，却发现子组件却并没有渲染出来。例如父组件代码如下： 子组件代码如下： 这个时候我去...
2019-10-21 14:19:42
2830
原创 NavigationDuplicated 产生原因和解决方法
当你的Vue项目在当前的路由下企图再次导航到当前路由时就会出现NavigationDuplicated的问题（通俗来讲就是多次进入了同一个path，比如说当前你在/user/user-list页面，这时候你通过点击按钮或其他的方式又进入了/user/user-list页面，那就会抛出下面的问题） 这个问题是vue-router3.0版本往上才出现的问题，目前的vue-ro...
2019-10-08 12:02:35
8925
2
原创 vue跨域拦截浏览器options预检
当你跨域访问接口的时候，会发现你的接口请求了两次，然后仔细对比一下会发现请求类型并不一致，一个是OPTIONS，另一个是你的POST请求。事情是这样发生的，当浏览器发现你准备跨域进行非简单请求的时候（有关简单请求说明请移步https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests），他会自发的发出一个O...
2019-06-09 12:16:08
6713
原创 vue 项目打包速度优化（1）
devtool选项个人开发环境配置，cli推荐开发环境配置，cli推荐生产环境配置，可以看到不同配置会对项目的打包速度造成一定程度的影响。随着项目越来越大，差异也就更加明显。生产环境需要精准的sourcemap不建议修改devtool推荐配置，开发环境可以以速度优先。更多devtool选项详见webpack官网（https://www.webpackjs.com/confi...
2019-05-21 23:59:26
2579
原创 npm发布包缺少.d.ts文件，VSCode找不到模块声明文件
问题的场景：你安装了刚刚用npm发布的模块，但是你的VSCode编辑器提示你缺少模块的声明文件。就像下面一样然后我们看到node_modules文件夹下，根本没什么声明文件，只有模块文件和包描述文件。模块的声明文件是.d.ts类型的文件，他是用typescript写的模块描述文件，主要用于支持编辑器的智能提示。VSCode以及大多编辑器依赖于.d.ts文件去实现智能提示，所以当你的模块...
2019-04-07 20:01:47
15875
1
原创 JS判断数组的7种方式
let arr = []1. instanceof arr isntanceof Array2. __proto__ arr.__proto__ === Array.prototype3.constructor arr.constructor === Array4.Object.prototype.toString Object.pr...
2019-03-07 15:15:54
48252
2
原创 小程序Canvas填坑路
有一个如下的业务场景：后台返回一张图片的ID,前端通过ID拼接出图片的地址，拿到图片之后需要在图片上添加一些额外的文字，在前端显示，然后再将它保存为一张新的图片，并把它以base64格式发送给后台。 这里我总共遇到了如下几个问题： 1：在线图片无法在手机端通过canvas绘制显示。 2：手机端测试...
2019-03-05 15:15:37
5152
原创 vue 组件之间传值方式总汇
在vue中组件之间的传值从大类上讲有父子组件和兄弟组件的传值，其他的小类还有通过状态管理器，或者是路由中的params和query。其中vuex状态管理本质上是通过共享数据实现的，路由方面则是通过附加额外参数（这个时候数据和route是高度耦合的，你只有通过$route对象才能拿到你需要的数据，所以为了实现数据和路由的解耦，我们还可以在设置路由的时候通过props去解决这个问题，详细操作可见路...
2019-03-05 14:52:16
284
原创 Vue-slicksort 之坑（无法响应点击事件）
Vue-slicksort 是一款不错的有不错拖拽效果的插件。如果纯粹只是用来展示数据，并利用插件的拖拽功能，那一点问题都不会有。但如果我们想要在slick-list 中的一个普通div中监听一个click点击事件，用来动态改变slick-list中绑定的数据，实现slick-item的动态新增和删除，向下面这样不好意思，该响应事件无效。甚至你在slick-list 和 slick...
2019-03-04 17:35:29
3614
5
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人