发表于 | 更新于 | 分类于
前言手上有些项目用的element-ui，刚好有空琢磨一下怎么减小打包文件大小和打包速度方面，为了演示实验，用 vue-cli 生成初始项目，在这仅对 element-ui 主题和组件方面来优化。 1vue init webpack vuecli 完整引入完整地将 ui 和样式引入。 12import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css' 在页面简单使用 2 个组件，看看效果。 12345678910111213<el-tabs v-model="activeName" @tab- ...
阅读全文 »

发表于 | 更新于
前言公司的移动端业务需要在用户上传图片是由前端压缩图片大小，再上传到服务器，这样可以减少移动端上行流量，减少用户上传等待时长，优化用户体验。 插播一下，本文案例已整理成插件，已上传 npm ，可通过 npm install js-image-compressor -D 安装使用，可以从 github 下载。 JavaScript 操作压缩图片原理不难，已有成熟 API，然而在实际输出压缩后结果却总有意外，有些图片竟会越压缩越大，加之终端（手机）类型众多，有些手机压缩图片甚至变黑。 所以本文将试图解决如下问题： 弄清 Image 对象、data URL、Canvas 和 File（Blob） ...
阅读全文 »

发表于 | 更新于
2020-5-29傻傻分不清之 Cookie、Session、Token、JWTPS：明扼要的对比了四者之间的异同点，加深前后端身份校验的认识，相关阅读阮一峰的JSON Web Token 入门教程 2020-5-31面试官：你可以用纯 CSS 判断鼠标进入的方向吗？PS：实际用途不大，但是思路清晰，利用鼠标进入区域 :hover，和动画过渡效果 transition 面试官问了一下三次握手，我甩出这张脑图，他服了！PS：深入 HTTP 三次握手部分 2020-6-1现在当前做的项目中遇到的难题： 参考：规避功能型问题&业务性问题，除非是功能和业务确实很复杂，例如： 单点登录 权限的 ...
阅读全文 »

发表于 | 更新于
前言随着2020年4月份 Vue3.0 beta 发布，惊喜于其性能的提升，友好的 TS 支持（语法补全），改写ES export写法，利用Tree shaking 减少打包大小,Composition API，Custom Renderer API 新功能拓展及其RECs 文档的完善。当然，还有一些后续工作（vuex, vue-router, cli, vue-test-utils, DevTools, Vetur, Nuxt）待完成，当前还不稳定，正式在项目中使用（目前可以在小型新项目中），还需在2020 Q2稳定版本之后。 Vue3.0 的到来已只是时间问题，未雨绸缪，何不先来尝鲜一波 ...
阅读全文 »

发表于 | 更新于
前言在有些 CSS 相互影响作用下，对元素设置的 z-index 并不会按实际大小叠加，一直不明白其中的原理，最近特意查了一下相关资料，做一个小总结。那么，现在就开始。 层叠上下文与层叠顺序层叠上下文（stacking content）是 HTML 中的三维概念，也就是元素z轴。层叠顺序（stacking order）表示层叠时有着特定的垂直显示顺序。 层叠准则 谁大谁上 当具有明显的层叠水平标示的时候，如识别的 z-indx 值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。 后来居上 当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。 ...
阅读全文 »

发表于 | 更新于 | 分类于
H5 调用系统某些功能1234567891011121314151617<!-- 拨号 --><a href="tel:10086">打电话给: 10086</a><!-- 发送短信 --><a href="sms:10086">发短信给: 10086</a><!-- 发送邮件 --><a href="mailto:example@qq.com">example@qq.com</a><!-- 选择照片或者拍摄照片 --><input type="file" accept ...
阅读全文 »

发表于 | 更新于
clip-path 创建一个只有元素的部分区域可以显示的裁剪区域。区域内的部分显示，区域外的隐藏。裁剪区域是被引用内嵌的 URL 定义的路径或者外部 SVG 的路径，或者作为一个形状，例如 circle()。 clip-path 属性代替了现在已经弃用的剪切 clip 属性。 剪切元素路径 <clip-source> 1clip-path: url(resources.svg#c1); 剪切形状 <basic-shape> 12345678910/* 嵌入 */clip-path: inset(100px 50px);/* 圆形 半径 at 圆心位置 */clip-pa ...
阅读全文 »

发表于 | 更新于
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136 ...
阅读全文 »

发表于 | 更新于
npm 常用命令安装命令1234567891011121314// 全局安装npm install 模块名 -g// 本地安装npm install 模块名// 一次安装多个模块npm install 模块名1 模块名2 模块名3// 安装开发时依赖包npm install 模块名 --save-dev// 安装运行时依赖包npm install 模块名 --save 查看安装目录12345// 查看项目中模块所在目录npm root// 查看全局安装模块所在目录npm root -g 查看 npm 所有命令1npm help 查看某个包的依赖包1npm view 模块名 dependenci ...
阅读全文 »

发表于 | 更新于
前言老鸟：怎样去监听 DOM 元素的高度变化呢？菜鸟：哈哈哈哈哈，这都不知道哦，用 onresize 事件鸭！老鸟扶了扶眼睛，空气安静几秒钟，菜鸟才晃过神来。对鸭，普通 DOM 元素没有 onresize 事件，只有在 window 对象下有此事件，该死，又双叒叕糗大了。 哈哈哈哈，以上纯属虚构，不过在最近项目中还真遇到过对容器监听高（宽）变化：在使用 iscroll 或 better-scroll 滚动插件，如果容器内部元素有高度变化要去及时更新外部包裹容器，即调用 refresh() 方法。不然就会造成滚动误差（滚动不到底部或滚动脱离底部）。 可能我们一般处理思路： 在每次 DOM 节点 ...
阅读全文 »