Javascript

  • 这里说的自动格式化是指当用户在输入框里面输入数字,例如银行卡号,为了方便用户输入,希望在输入过程中对输入数字进行加空格处理,优化用户体验

    先看一下例子: http://jsfiddle.net/am0200/qugp8tvL/

    注意例子里面的输入框的类型是 tel,而不是 number,主要原因是 number 类型

    • 会导致 Android 上某些系统不显示 placeholder
    • 无法插入非数字内容,例如空格

    代码实现

    data-gap 代表第几位开始加空格,不为 0

    <input data-gap=4 maxlength="24" size="30" autocomplete=
  • 原理就是将要排序的数组的每一个项作为 setTimeout 时间参数,然后就可以排序了

    排序时间跟数组最大值绝对值有关 :)

    需要对数组的负数项做一下处理,因为 setTimeout 参数负数的话跟参数 0 是一样的

    例子 JSFiddle

    具体代码说明:

    // 需要排序数组
    const numbers = [8, 0, 3, -1, 9, -3, -767, 4, 111, 999, 89];
    
    async function sortArr(arr) {
      const left = arr.filter(a => a < 0).map(a => a * -1) // 获取
  • ithinkimight.com 这个网站图片来自 Instagram,图片随机大小,位置也是随机,图片可以重叠,但是并没有 过分 重叠。这种随机大小,位置排版页面元素跟平常的整齐 grid 或者 瀑布流 风格很不一样,下面我们尝试一下实现类似效果

    从网站源文件上看并不能看出网站是如何随机排布这些图片,因为是后端直接输出图片的位置参数,并不是前端实现的位置计算。不过这里有一种简单方法,可以实现类似效果。先看一下具体效果

    例子以及实际运用效果

    http://jsfiddle.net/am0200/1mn5xbf8/

    http://stone.am0200.com/

    实现思路

    首先把 conta

  • Falco 是基于 webpack,npm 的一层封装。解决的问题是 demo 代码的构建打包问题,而直接运行代码是附加的一个功能

    项目地址:https://github.com/fratercula/falco

    背景

    JavaScript 模块或者框架需要 demo 展示来说明使用方式,例如 antd 里面就有很多 demo 的展示。那么怎么快速生成这些 demo 呢,一些框架可以做类似事情,例如 docz

    docz 只是解决本地已经安装的问题,也就是说 demo 的展示需要本地已经安装好依赖。那这样就有问题了,如果 demo 代码是各种 js 依赖的,那就是说要不断的本地安装依赖。无

  • 前言

    接触过react的人应该对redux并不陌生。但是,redux并不是react的伴生产物,即使你使用其他类库,也可以使用redux框架来管理状态,但是,有react如此好的选择,没人会考虑其他的技术选型。但是,多多少少还是会有人误解redux。

    正文

    redux框架在使用过程中有三个原则:

    1. 唯一的状态树(数据源)
      The first principle of Redux is whether your app is a really simple one like this counter example, or a complex application with a lot of