- 博客(43)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 Vue项目打包后体积优化
Vue项目打包后体积优化背景这段时间使用Vue+Typescript完成了对公司用户管理系统的重构，替换掉了之前的JSF实现了准前后端分离。目前还没有采取前端独立部署的模式，前端文件打包后需要放到tomcat中进行访问。公司的服务器带宽100M，希望系统能支持500并发，且没有购买CDN服务。对于打包后的前端文件chunk-vendors.js就达到了900kb，急需优化。解决路由...
2020-04-20 16:28:35
1596
原创 在VSCode中使用Commitizen
安装插件：Visual Studio Code Commitizen SupportCommit规范参考文章：Git commit message 规范、git commit 规范指南type：用于说明 commit 的类别，只允许使用下面7个标识。feat：新功能（feature）fix：修补bugdocs：文档（documentation）style： 格式（不影响代码...
2020-04-17 16:14:26
3402
原创 mpvue小程序项目开发总结
背景9月和10月，穿插开发了两个项目，其中一个是对原有微信小程序进行重构。起初产品那边只是希望界面改版外加增加一些新功能，而我看了之前的项目代码后，强烈建议重构，很欣慰领导们最终也同意了我的提议。之前的微信小程序使用的是原生语法开发，目录结构和代码都较为混乱，几乎没什么组件复用，一个页面文件或者js文件动辄上千行，实在是没什么心情维护。于是便采用mpvue+typescript进行重构，自觉重...
2019-11-14 15:17:07
500
原创 北漂结束，扎根南昌
不知不觉快三个月没有写博客了，人一旦懒散下来时间过得真的特别快。其实也不能说是懒散，4月中旬离开北京回到南昌，4月23到博微入职，到现在也有两个月了。每天似乎都很忙，却感觉自己没有太大的进步。不得不说北京与南昌两地的互联网行情真的相差太多，回来之后面试了一些公司，基本上都拿到了offer，可是真正能让自己感到称心如意的却基本没有。最后在排除了路远的，排除了加班多的，又排除了规模小的之后，最终选...
2019-06-25 16:01:48
390
4
原创 Vue上传Excel文件并校验Excel内容
背景在近期开发的学校管理系统中，有一个导入管理模块，其中包含Excel的上传功能，由用户选择文件后进行上传，前端需要对文件内容进行初步校验后给出是否符合规范的提示后再传给后端。这就需要前端事先对Excel文件内容进行读取。解决我们这个项目使用Vue+Typescript进行开发，UI库使用的是iView。在简单调研之后，我发现可以使用xlsx库实现对Excel文件内容的读取。下边放实现功能...
2019-03-29 14:16:09
6679
原创 微信小程序开发笔记
去年在项目的空档期，自己学习了一下微信小程序的开发。由于之前的项目一直使用的Vue框架，所以在开发小程序的时候决定使用mpVue框架，配合iView Weapp的UI库，成功撸出了一个属于自己的微信小程序。在此也将整个开发过程和其中所遇到的问题记录分享一下。起步参考：使用mpvue开发小程序教程在开发之前，有幸看到了上面链接中的这位大神写的这个教程，让我的开发过程少走了很多弯路。这个教程...
2019-03-03 21:07:33
502
原创 Virtual DOM原理详解
背景今天准备开始学习React，于是看到了React入门看这篇就够了一文。而在看到虚拟DOM的时候，让我联想到了Vue中的虚拟Dom，于是顺着链接点进去看了一下Virtual DOM的实现原理。Virtual DOM具体实现原理参考深度剖析：如何实现一个 Virtual DOM 算法一文，感觉写的非常棒，虽然有一些地方感觉还没能完全理解，但终究是对整个流程有了一个基本的了解。感慨今天学着...
2018-12-03 16:14:07
483
原创 ES6 Class语法介绍
参考文章：ECMAScript 6 入门概述基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功/能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。举个栗子：// ES5function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toStri...
2018-11-28 15:36:51
399
原创 JS读取上传文件内容
背景今天遇到这样一个需求：用户选择一个文件上传，需要读取到文件的内容并筛选出所需数据进行处理。解决 function readFile() { const objFile = document.getElementById('file_id') if(objFile.value === '') { alert('请选择文件！') return ...
2018-11-20 14:05:26
11112
原创 点击按钮复制表格功能实现
背景今天这样一个需求：点击按钮，一键复制表格中的内容，能直接粘贴到Excel中。开始查找到了使用clipboardData方法实现复制，可是发现在chrome浏览器下无效。解决 function copyTable() { const table = document.getElementById('table') const range = document.creat...
2018-11-20 13:57:14
2503
转载 git-flow 的工作流程
原文档：git-flow 的工作流程什么是 git-flow？一旦安装安装 git-flow，你将会拥有一些扩展命令。这些命令会在一个预定义的顺序下自动执行多个操作。是的，这就是我们的工作流程！git-flow 并不是要替代 Git，它仅仅是非常聪明有效地把标准的 Git 命令用脚本组合了起来。严格来讲，你并不需要安装什么特别的东西就可以使用 git-flow 工作流程。你只需要了解，...
2018-11-02 11:32:25
188
原创 Mac下使用nvm管理node版本
概述日常工作中，由于node版本更新很快，时常会出现一些依赖在老版本的node下无法运行的问题，这就使得node的版本管理成为一个越来越迫切的需求。目前常用的node版本管理工具有n和nvm，本文中主要记录nvm的相关内容。nvm安装curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.6/install.sh | ...
2018-11-02 10:48:12
1699
原创 JS中阿拉伯数字转中文数字
背景做学业评价项目的时候，后台返回的数字为阿拉伯数字，而页面上需要展示中文数字。解决 // 阿拉伯数字转中文 private numberConvertToUppercase (num: number): string { const upperNumbers: string[] = ['零', '一', '二', '三', '四', '五', '六', '七', '...
2018-08-28 17:22:21
2668
原创 从Object.assign()到ES6对象到扩展
本文内容参考：ECMAScript 6 入门背景在上一个项目开发中，看到项目内存在很多Object.assign()写法的代码，由于之前没有接触过，感觉比较疑惑。通过网上查询发现，这是ES6对对象进行的扩展之一，于是系统的了解了一下ES6中对对象进行的扩展。学习属性的简洁表示法ES6 允许直接写入变量(变量需要存在)和函数，作为对象的属性和方法。let birth...
2018-07-23 18:26:50
909
原创 前端实现PDF分页与Vue中的render函数
背景提分加项目中遇到了一个需要前端对PDF页面进行分页的需求。该需求是要为每一位学生生成一份PDF的学习报告，起初是采用了前端提供几个页面模板，由java端调用iText去生成PDF，PDF的分页工作也由工具去完成。但是由于页面中包含大量的数学公式、图片等一些对样式要求较高的元素，iText对很多CSS3属性的支持较差，生成的PDF经常会出现切页的情况。最后决定由前端生成分好页的页面，并提...
2018-07-19 16:09:33
1370
原创 [].forEach.call
曾看到过一行非常有意思的代码：[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})放到浏览器里执行之后，页面上的所有元素都会加上一个随机颜色的边框。 而这行代码的原理便是先选取页面上所有的元素，...
2018-07-19 15:25:33
772
原创 ES6中let、const的区别及变量的解构赋值
声明：本文内容依照阮一峰老师ECMAScript 6 入门一书所总结。let和const相同点 都存在块级作用域都不存在变量声明提升都会造成“暂时性死区”在一个作用域下不可重复声明不同点 const一旦声明必须立即赋值const声明的变量指向的内存地址不得改动。变量解构赋值数组的解构赋值解构成功let [a, b, c] = [1, 2,...
2018-06-14 15:28:51
232
原创 Vue中在新窗口打开页面 及 Vue-router
背景在开发提分加项目的过程中，遇到了点击下拉菜单时在新窗口中打开页面，由于之前一直做的是单页面应用，没有碰到过类似的需求，于是上网搜了一下解决办法，也再次系统地温习了一下vue-router。 解决使用路由对象的resolve方法解析路由，可以得到location、router、href等目标路由的信息。得到href就可以使用window.open开新窗口了。const ...
2018-06-12 16:26:21
45142
8
原创 element-ui Select选择器边框闪烁问题 及 :focus-within伪类
背景在提分加项目中用到了element-ui的select组件，发现第一次进入页面点击选择器时会有一个边框闪烁，后审查元素时发现了:focus-within的伪类。解决.select-box span:focus-within { border: none; outline: none;}其中，.select-box是我给select组件取的类名，添加完以上样式后，边...
2018-06-12 13:55:16
10720
原创 HTML5 contenteditable属性
背景今天在项目开发过程中通过接口拿到了第三方返回的dom节点，结果发现展示到页面上会出现编辑框，然后查看了代码发现该标签内添加了contenteditable = true属性，由于之前没有用到过这个属性，遂上网查了一下。学习定义：contenteditable属性规定是否可编辑元素的内容。语法：<element contenteditable="value">...
2018-06-12 13:18:22
1036
原创 Vue中监听滚动事件
背景最近在做提分加的预览页面时，有一个用于实现锚点定位的侧边栏导航，而在页面滚动时，侧边导航也需要随着页面的滚动而激活相应的模块，这就需要监听页面的滚动事件了。 解决监听滚动事件mounted() {//监听页面滚动事件window.addEventListener('scroll', this.appScroll)//注意：如果由于自己的vue中的样式导致监听不到，可以...
2018-06-12 10:46:03
15542
原创 map()、forEach()、reduce()、filter()的区别
map()map()方法按照原始数组元素顺序依次处理元素，返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。可看作是对原数组进行映射。注意：map()方法不会对空数组进行检测。array.map(function(currentValue,index,arr), thisValue)//参数：当前元素、当前元素的索引、当前元素所属的数组var wallets = pe...
2018-05-23 19:56:15
1730
原创 新手使用Mac常见问题及iTerm2快捷命令
由于之前一直使用Windows系统，在刚开始接触Mac系统的时候，遇到了一些问题，在此记录一下。Mac常用快捷键Mac下有很多快捷键，可以简化鼠标操作。 该图片引用自知乎用户高阳Sunny的回答。Mac文件对齐对于一个强迫症患者来说，文件拖到哪就落到哪简直不能忍，于是搜寻了能让文件自动对齐的方法。方法：在文件夹内按Crtl+Command+1~7，会有7种不同...
2018-05-22 16:00:37
4246
原创 Vue中监听键盘事件
背景在一些搜索框中，我们往往需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作。在原生js或者jQuery中，我们需要判断e.keyCode的值来获取用户所按的键。这样就存在一个问题：我们必须知道某个按键的keyCode值才能完成匹配，使用起来十分不便。 keyCode 实际键值 48到57 0到9 65到90 a到z（...
2018-05-22 13:55:50
137011
10
原创 Vue项目中实现锚点定位
背景今天在开发限时练-提分加项目的时候，有一个需要锚点定位的需求，而在Vue项目中，使用传统的在a标签的href属性中写id的方法无效，会导致浏览器的地址改变从而跳转到其他页面。 解决最终参考vue2.0中怎么做锚点定位改问题下的回答实现了效果。<template><div class="score-preview-container"> <...
2018-05-21 18:35:11
64651
1
原创 CSS预处理器：SCSS
SCSS简介SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。另外，SCSS 还能识别大部分 CSS hacks（一些 CSS 小技巧）和特定于浏览器的语法，例如：古老的 IE filter 语法。由于 SCSS 是 CSS 的扩展，因此，所有在 CSS ...
2018-05-14 19:18:03
515
原创 git相关问题与常用操作
Mac下删除git文件夹今天在使用git的时候，在错误的目录下执行了git init，而在mac系统下看不到.git的文件夹，于是参考了Mac 删除git文件夹,删除svn文件夹文章中的方法，删除了该文件夹。删除方法： cd 文件夹名称find . -name ".git" | xargs rm -Rf修改git提交账户名称修改用户名：git config ...
2018-05-09 19:30:07
166
原创 ES6扩展运算符（...）
在使用vuex的过程中，经常会碰到以下写法：...mapGetters('user',['classList','class','subjectList','termList'])在不了解ES6的扩展运算符前，对这种写法很迷惑，不懂...的作用到底是什么，于是通过《ECMAScript 6 入门》一书，学习了扩展运算符的相关知识。数组的扩展运算符概念扩展运算符（spr...
2018-05-08 19:27:35
21748
1
原创 依赖管理工具——Yarn
入职为明之后，依赖管理工具由npm变为了yarn，在此记录一下两者的区别以及yarn的一些简单用法。Yarn的优点yarn.lock确保使用的库的版本相同；运行速度得到了显著的提升，整个安装时间也变得更少；无需互联网连接就能安装本地缓存的依赖项，它提供了离线模式；允许合并项目中使用到的所有的包的许可证。 参考：一文看懂npm、yarn、pnpm之间的区别Yarn...
2018-05-07 18:30:47
1631
原创 2018学习计划
五月，正式离开博汇，加入为明。 换个环境，离开自己的舒适区，希望能让自己有更强烈的危机感与学习的动力。 2018年还剩下8个月，拟定了剩余这八个月的学习计划，每个月结束的时候会回来记录完成情况，期待自己的成长与蜕变。五月技术： 熟悉mac系统，了解各种快捷键的使用；各类新工具的使用：iterm、rvm、brew、yarn、commitizen等；学习vuex、ES6。读书...
2018-05-03 16:18:25
597
原创 ES6 Promise对象概念及用法介绍
参考文章：ECMAScript 6 入门一、 Promise是什么Promise是异步编程的一种解决方案，它是一个容器，里面保存着某个未来才会结束的事件的结果。它有三种状态，只有异步操作的结果才能决定当前的状态，不受外界因素的影响。而一旦状态改变，就不会再变，也就是状态凝固了（resolved），任何时候都可以得到这个结果。 Promise的缺点： 1. 无法取消Prom...
2018-03-31 15:58:46
300
原创 mysql中日期格式化DATE_FORMAT()
背景今天在做IPS项目的时候，涉及到一个日期比较的问题，测试时比较的结果并不如我预期的那样，结果走debug发现数据库查出来的日期少了一位，后来去排查sql语句时看到我是这样写的： 解决然后上网查找了DATE_FORMAT()函数的使用，通过阅读博客： mysql 格式化日期 DATE_FORMAT，FROM_UNIXTIME，UNIX_TIME等 才知道，是自己的格式化参数...
2018-03-31 10:42:02
2711
原创 解决node导出Excel文件时中文名称乱码
背景今天在使用node导出Excel表格时，发现导出的文件名称为乱码，就去网上找解决方案。 参考文章：nodejs导出excel（解决中文文件名乱码） 在查看了上述文章后，按照文中所说在自己的代码filename后加上了*，结果就真的解决了乱码的问题。 但是还没高兴多久，就发现又有问题了。我这是火狐浏览器下测试的，而当我换成chrome，发现导出的文件名都不正常了，变成了我设置的变量...
2018-03-28 15:29:07
3204
原创 meta标签设置禁止加载缓存及延伸
背景今天在优化ADTS3.0项目的过程中遇到了ckplayer拉流异常的问题，问了同组其他小伙伴，说是需要禁用浏览器的缓存。 解决而在代码中开启这个功能就需要使用meta标签，具体的做法是：<meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" cont...
2018-03-27 16:34:05
1826
原创 面试总结（2018年3月 掌阅|360|锤子|58）
上周抽空约了几家公司的面试，有面的还可以的，也有被虐到怀疑人生的。现在记录一下面试情况以及面试中所涉及到的知识点，也算是有所收获与提高。面试过程掌阅科技这是本年度面的第一家公司，有点小紧张。公司位于四惠大厦，环境较好，但工位看起来较窄…面试是在一层前台右侧的一片休息区，首先要填完一张资料卡与一份笔试题，完成后交由前台的小姐姐联系面试官。第一轮的面试官是两位和我差不多大的小哥哥，针...
2018-03-26 22:21:21
1840
原创 echarts图广东和福建地图上城市坐标
背景今天在做供CCBN展会用的一个首页，首页是按照之前广东省的模板开发的，而为展会准备的数据是福建的，就需要将首页上的广东地图换成福建地图。于是我就陷入了将广东地图坐标换成福建地图坐标的恶心之中。既然整理出来了，就共享给大家，也能节省大家的时间。代码广东数据let GDGeoData = [{ name: '广州市', value: [113.53, 2...
2018-03-07 17:33:35
6962
1
原创 2017年工作总结
每到写总结的时候，我都会不由自主的发会儿呆。回顾过往的时光，如白驹过隙般悄然逝去，只留一些零碎的片段于记忆中，我努力将他们拾起、记录，并尽力刻画出一幅丰富饱满的图案，好让自己看起来并未虚度光阴。过去的一年里，大大小小共参与了八个项目，有的只是蜻蜓点水般接触了一下便再也不曾触碰；有的则从需求到设计到开发到维护全程充当着主力军。而经过这八个项目的历练，自己也收获了很多，成长了不少。衷心感谢一路走来...
2018-03-03 17:33:29
584
原创 将bat转为exe后利用程序监视解决node崩溃问题
背景上周在给吉视传媒用户升级信息发布系统的时候收到他们的反馈，说信息发布系统时间久了会宕掉，需要远程连接服务器重启，很麻烦，希望我们能优化一下性能。于是我首先按照网上的教程将启动脚本中的启动方式改为了node --max-old-space-size=4096 app.js，另外还是有些不放心，就想能不能在服务崩溃之后让它自动重启。我们公司很多的项目都是需要长时间一直启动的，之前一些java项...
2018-01-02 10:02:45
385
原创 vue路由事件beforeRouteLeave及组件内定时器的清除
背景之前在做ADTS项目的时候，首页是一个实时监测的页面，需要每隔5秒更新一次数据，而业务逻辑上的需要先请求告警列表的接口的，从告警列表中拿到数据再去获取其他的数据，所以我在获取告警列表的方法中增加了一个定时器。 最开始我是将定时器声明在组件内部的（由于页面不多，数据关联也不太强，所以项目中没有使用store进行数据管理），后来清除的时候发现无法清除，后来索性声明到window下了。...
2017-12-27 13:31:55
22887
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人