let 与 var 在 for 循环中的区别 场景今天遇到的一个很有趣的问题,下面两段 js 代码执行的结果是什么? 123for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 0)} 和 123for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 0)} 嗯,乍看之下 2020-02-02 #javascript
layui-layer load 弹窗自动关闭的问题 场景项目中的 Ajax 加载时的 loading 框有时候会关闭了弹窗之后很久页面上的数据才加载出来,而且这个问题是随机出现的,有些页面存在,有些页面则正常。 最小复现代码 123456789101112131415161718192021222324252627282930313233343536373839404142<!DOCTYPE html><html lang="en 2020-02-02 #javascript
jsdoc 注释标签一览 速览表格标签列表 标签 简介 param 参数 returns 返回值 example 示例 test 测试代码 class 类定义 property 类属性定义 语法列表 语法 简介 {T} 类型 {T,R} 多个类型 [] 可选值 [arg=v] 默认值 .<T> 泛型 obj.property 对象参数 func 2020-02-02 #javascript #工程化
js 处理 url 数组参数 场景使用 axios.get 时遇到的问题,axios 在 get 请求时会将参数转换为 url 上,这本是正常的逻辑,然而 Spring MVC 却无法接收,会抛出错误。 使用 Axios 发送的请求代码 12345axios.get('/api/index/array', { params: { list: ['1', '2', '3'], },}) Spring MVC 接口代码 2020-02-02 #java
FlexBox 布局入门 场景最近刚看了 flexbox,之前一直用的 UI 框架写前端,吾辈可能是个假的前端开发(好吧,其实之前吾辈前后端都写,写得最多的是 JS/TS 就是了),所以写一篇记录便于复习知识。 简介不谈需求讲功能就是扯淡,所以吾辈先来说一下吾辈使用 flex 的主要场景吧 水平布局: 导航栏,多栏展示,媒体元素 水平垂直居中: 这在 flex 之前使用 CSS 很难实现 避免使用浮动,行内块元素,表格进 2020-02-02 #css
Yarn link 链接本地项目 场景作为 JavaScript SDK 的开发者一定都知道,想要在未发布前进行测试整个包可谓是困难重重。而 yarn link 这个命令便是为了解决这个需求而产生的,它能让包引用并测试自身,即便包并未发布或不包含在 package.json 中亦然。 操作 官网链接 链接包在命令行运行即可将当前包链接安装到这个包中,即便你在 package.json 并不会找到显式的依赖。 1yarn link 2020-02-02 #工程化
Vue 表格封装 BasicTableVue 场景后台项目中大量使用表格,我们使用的 element-ui 中的表格并不足以满足吾辈的需求,而且使用起来重复的代码实在太多,所以吾辈便对数据表格进行了二次封装。 实现API 列表 [el]: 绑定的选择器。默认为 '#app' data: 数据对象 form: 搜索表单绑定对象 columns: 表格的列数组。每个列定义参考 TableColumn [formShow]: 是否显示搜索表单 [p 2020-02-02 #vue
Vue 自定义标签的 src 属性不能使用相对路径 场景吾辈在使用 Vuetify 时突然遇到的,明明 img 标签就可以使用相对路径获取到图片,而 Veutify 的组件 v-img 却不能使用。 如下面 3 种加载图片的方式 123456<!-- 正常加载 --><v-img :src="require('../../assets/logo.png')" /><!-- 无法加载 --><v-img sr 2020-02-02 #vue
Vue 深度监听 场景吾辈在前端项目中需要监听 Vue 组件中的一个数组的变化,然而没想到这个简单的功能却发现并没有想象中的容易。在废了一波三折之后终于算是实现了效果,所以便在这里记录一下。 代码 吾辈写一个 demo 在 GitHub,如果需要可以去看下。也有一个 网站 用来演示下面的三种方法的效果 12345678910111213141516171819202122232425262728293031323 2020-02-02 #vue
Vue 打包的静态文件不能直接运行 问题吾辈使用 vue-cli 直接生成的 vue 模板项目,在模板之上继续开发的。然而在使用 npm run build 打包项目时,却发现打包好的项目在浏览器中直接打开好像什么都没有? 原因查看了一下打包后的 index.html 源码,终于发现了一个重要的点: 所有涉及到路径的地方全都是以 / 开头的 下面是吾辈打包后生成的 dist 目录 1234567891011121314151617 2020-02-02 #vue
Vue 实现一个简单的瀑布流组件 场景在用 Vue 写前端的时候,需要实现无限滚动翻页的功能。因为用到的地方很多,于是便想着抽出一个通用组件。 实现 实现源码放到了 GitHub,Demo 演示 想直接看源码/效果的人可以直接去看 思路 定义一个 vuejs 容器组件 抽离出公共的属性(加载一页数据的函数/每个元素的模板) 在父容器中遍历每个元素并绑定到传入的模板上 监听滚动事件,如果不是最后一页就加载下一页 重新渲染集合元素 2020-02-02 #vue
Vue 实现一个滚动到顶部的悬浮图标组件 场景吾辈在写 vuejs 前端项目的时候,需要实现一个下拉文章列表时,出现一个悬浮按钮,用于一键回到文章顶部。 实现 实现源码放到了 GitHub,Demo 演示 想直接看源码/效果的人可以直接去看,但最好看一下 注意点 思路 定义一个 vuejs 组件,抽取出最需要的几个属性(位置,组件的样子) 监听窗口滚动,当滚动到第二屏的时候显示组件 监听组件点击,点击即逐渐减少与顶端的距离 当在滚动中用 2020-02-02 #vue