江上之清风，山间之明月

一、Number 方法

num.toString(radix)

释义：将数字转为字符串，并返回处理结果。
参数：radix: 可选，数字基数（进制），默认为十进制。
eg: 如果 radi 为 2, 则数字会被转为二进制字符串。

num.toFixed(n)

释义：将数字四舍五入为指定位数的数字字符串，并返回处理结果。
参数：n: 必选，小数位数，为 0 - 20 之间的数字，包括 0 和 20。如果省略了该参数，则默认为 0。

1. str.charAt(index)

根据下标获取字符串中的字符，
返回获取的字符。
注意：如果 index 不存在，返回空字符串。

2. str[index]

和 chartAt() 等效，
HTML5,
IE8+ 支持。

3. str.concat(str1, str2, …, strX)

将多个字符串拼接成一个字符串，
返回拼接完成的字符串。
作用和 + 相同，+ 更常用。

前言

这段时间我负责的基于 coreui/vue 的后台管理项目遇到难题了。在开发商品上架功能时，表单提交时，上传的图片数据始终为空，参数携带不了。但在发送请求之前是可以正常打印文件数据的。

尝试解决

• 设置 content-type

1
2
3
4
5
6
7
8

let config = {
    headers: {
      "Content-Type": "multipart/form-data"
    }
};
this.$http
    .post("/product/add", params, config)
    .then().catch()

结果是不 OK。

前言

最近的项目使用了 vue-chartjs 图表和 echarts 图表。昨天联调接口发现接口返回数据后，图表没有根据数据更新。还是默认数据渲染的图表。

排查

确认了接口没问题和代码也没报错后。审查代码发现是图表的渲染是在 mounted 中执行的，而这个生命周期函数只执行一次，所以数据更新了，图表没有响应式更新也是正常的。本来还以为是要调用专门的 API 去刷新图表。

解决

经过网上查找资料发现，其实只要使用 watch 检测数据，然后当数据更新后调用图表的绘制方法就可以了。就这么简单。

前言

最近的 coreui/vue 后台管理的项目中默认引入的是 vue-notification + mini-toastr 的消息提示，使用起来比着 element ui 麻烦一些，一开始翻了文档也没找到如何定义到全局。就每个文件重复定义。直到这两天突然有了灵感给解决了。

main.js 中初始化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

import VueNotifications from "vue-notifications";
import miniToastr from "mini-toastr"; // https://github.com/se-panfilov/mini-toastr

// notifications
const toastTypes = {
  success: "success",
  error: "error",
  info: "info",
  warn: "warn"
};
miniToastr.init({ types: toastTypes });
function toast({ type, message, title, timeout, cb }) {
  return miniToastr[type](message, title, timeout, cb);
}
const options = {
  success: toast,
  error: toast,
  info: toast,
  warn: toast
};
//  VueNotifications.setPluginOptions(options)
Vue.use(VueNotifications, options);

前言

在最近的一次项目中遇到了一个小问题，就是进行提现操作时，明明提现金额小于可用总余额，却依旧提示输入的提取金额不合法（超出总余额）。

追根溯源

经过排查，确认代码逻辑没有问题，问题出在比较的步骤。在做大小比较时，只记得基本类型比较时，== 不全等比较时，类型不一样会自动进行类型的隐式转换，然后只比较值是否一致。=== 全等类型比较时，会比较类型和值。而忽略了字符串同类型的比较是比较编码，而不是值。在排查问题时，很快想到了这个点，依稀记得这个知识点是从 arr.sort() 数组的排序方法得来的。

1. arr.push()

• 释义：在数组的末尾添加一个或多个元素。
• 返回值：返回新的数组的长度。
• 语法：arr.push(元素1,元素2,...,元素x)
• 参数：元素 1 必填，元素 2 和元素 x 可选。
• 说明：会改变原数组，并不会返回一个新数组。
  阅读全文 »

前言

前端的交互中，有些操作需要持续触发，而且频率非常高。比如：resize, scroll, mousemove, input 等事件。而为了性能和效率，我们不需要让事件触发太多次。这就诞生了函数的防抖和节流。

防抖(debounce)

防抖简单说就是在设定的时间内，虽然操作上持续触发，通过定时器约束，我们也只执行函数触发的最后一次。

防抖函数可以分为延迟执行版和立即执行版

延迟执行版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/*
 fn: 需要防抖的函数
 wait: 延迟毫秒数
 return: 函数
 */
 // 延迟执行
 function debounce(fn, wait) {
   var timer; // 全局的定时器 id
   return function () {
     var that = this; // 将函数被调用时的 this 保存
     var args = arguments; // 保存函数的参数
     if (timer) {
       clearTimeout(timer); // 清除 wait 时间内频繁调用函数产生的定时器
     }
     timer = setTimeout(() => {
       fn.apply(that, args); // 将传递进来的 fn 使用 apply 调用，将 this 指向改为保存的 that，同时进行传参
     }, wait);
   };
 }

阅读全文 »

前情提要

这几天在使用 vue-cli 创建 vue 项目时，竟然忘记 runtime-only 运行时和 runtime + compiler 完整版的区别了，查过官网文档后，记下这篇笔记。

注：以下内容摘自官网。

runtime-only

术语

完整版：同时包含编译器和运行时的版本。

编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。

运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

对于 Vue 不同构建版本的区别，可访问 Vue 官网查看 Vue 对不同构建版本的解释

_.debounce() 和 _.throttle()

防抖：

语法

_.debounce(func, [wait=0], [options={}])

创建一个防抖动函数。会从上一次调用结束后延迟 wait 毫秒后继续调用 func 方法，
该函数提供一个 cancel 方法以供取消延迟函数的调用以及 flush 方法立即调用。

options 对象这个参数决定了怎么调用 func 函数。
options.leading 与（或） options.trailing 决定延迟（wait）前，func 如何调用（也就是先调用再等待还是先等待再调用）。
func 会传入最后一次传递的参数给 debounce 这个函数。随后调用的 debounce 函数返回的是最后一次 func 调用的结果。