Number 类型的 input 输入框中输入浮点数

在 HTML5 中,input 元素有了一个好用的 type: Number,当我们把一个 input 设置为 Number 类型以后,它就可以接收 max、min 等参数设置最大值最小值,达到原生表单控制的目的:

但是这么一弄,问题来了,当我们输入浮点型的数字时就会报错,难道它只能接收整数吗?显然不是的,他不光可以接受浮点型,还可以控制输入到小数点后几位,以及每次增加的步幅(step),当我们需要精确到小数点后两位时,只要把 step 设置为 0.01 即可:

Have fun!

Vue Pikaday

Pikaday 是一个干净小巧不依赖其他库(如 jQuery 等)的日期选择库(只能选日期不能选时间),如果只需要一个简单的日期选择功能,又不想要加载 jQuery 甚至 Bootstrap 这样的大部头可以考虑选择。

最近在使用 Vuejs 做项目,就把这个日期选择库包装了一下,是他可以作为一个组件在项目中使用,组件源代码如下:

使用这个组件以前需要做一点微小的工作,首先安装 pikaday:

然后将所需的 css 文件引入(scsscss);
接着在项目中使用组件:

hava fun!

JS AOP

有时候我们需要在某个 function 执行之前或之后执行某些自定义的操作,但又不想去修改封装好的代码,这时候就可以使用 AOP 这一设计模式。

首先我们需要扩展 Function:

使用时是这样的:

view demo

JS 中的 bind 与 call

JS 中调用方法或函数时,有时候需要变更 this 的指向,通常我们会使用 call/apply,而 bind 也可以改变 this 的指向,那么他们有什么区别呢?

简单地说,call/apply 是改变 this 指向时立即调用,而 bind 只是绑定了新的指向,返回的依然是一个 function。举例说明:

#1,#2,#3 将会返回一样的值。