分类 捣鼓前端 下的文章

Day.js是又一个处理时间和日期的JavaScript库,非常轻量级,主文件只有2KB大小,采用和Moment.js完全一样的API。

本文以最简单的方式演示其用法。

安装

这里以CDN方式引入主文件。

<script src="https://lib.baomitu.com/dayjs/1.8.13/dayjs.min.js"></script>

使用

如果仅仅是需要获取当前时间和日期,使用如下代码即可。

dayjs().format('YYYY-MM-DD HH:mm:ss')//2019-06-07 13:20:35
dayjs().format('YYYY-MM-DD')//2019-06-07

如果需要日期中文化以及更多格式,就需要使用到国际化 I18n文件和localizedFormat插件。

<script src="https://lib.baomitu.com/dayjs/1.8.13/locale/zh-cn.js"></script>
<script src="https://lib.baomitu.com/dayjs/1.8.13/plugin/localizedFormat.js"></script>
dayjs.extend(dayjs_plugin_localizedFormat);
dayjs.locale('zh-cn');

具体输出结果,请参考以下模板。

值得注意的是,如果你要用LLLL输出2019年6月7日星期五下午1点48分这样带上午下午的结果。请将zh-cn.js文件放在本地,并将

meridiem: (hour, minute, isLowercase) => { return hour > 12 ? '下午' : '上午'}

添加进去,否则下午会被显示为PM。

模版 格式 输出
LT HH:mm 8:02
LTS HH:mm:ss 15:25:50
L YYYY/MM/DD 2010/02/14
LL YYYY 年 M 月 D 日 2010 年 2 月 14 日
LLL YYYY 年 M 月 D 日 Ah 点 mm 分 2010 年 2 月 14 日下午 3 点 25 分
LLLL YYYY 年 M 月 D 日 ddddAh 点 mm 分 2010 年 2 月 14 日星期日下午 3 点 25 分
l YYYY/M/D 2010/2/14
ll YYYY 年 M 月 D 日 2010 年 2 月 14 日
lll YYYY 年 M 月 D 日 HH:mm 2010 年 2 月 14 日 15:25
llll YYYY 年 M 月 D 日 dddd HH:mm 2010 年 2 月 14 日星期日 15:25

本文所展示代码的演示效果,请访问http://lab.fengtalk.com/dayjs/

更详尽的说明,请访问https://github.com/iamkun/dayjs

一个轻量级的图片延迟加载 JS 库,使用<a>标签替代<img>标签。

前几天刚提到不依赖于JQuery的懒加载LazyLoad,今天在看阮一峰老师的每周分享第 58 期时,发现了这么一个名叫gandul的图片延迟加载JS库。gandul非常轻量级,压缩之后不到2KB。

废话少说,上代码:

<a href="images/bmw_m1_hood.jpg" class="gandul">bmw_m1_hood</a>
<script src="https://cdn.jsdelivr.net/gh/alterebro/accessible-image-lazy-load/dist/gandul.min.js"></script>
<script>gandul();</script>

第2、3行在</body>标签之前引入即可。

请看第1行,这跟我们以往使用延迟加载代码不同。

以住使用的代码可能是这样:

<img class="lazyload" src="images/dot.gif" alt="bmw_m1_hood" data-src="images/bmw_m1_hood.jpg">

data-src为实际要加载的图片地址;src为占位图片地址,在实际图片未加载时,临时替代实际图片的位置。class视情况设置为lazyloadalt则是图片的名称。

通过对比,我们发现,gandul的使用非常简单,a标签的href就是图片的实际地址,不用额外设置一个占位图片。class设置成了gandula标签链接的锚文本则是bmw_m1_hood

<a href="images/bmw_m1_hood.jpg" class="gandul">bmw_m1_hood</a>

再让我们看看图片加载之后html代码是什么样子的。

<img alt="bmw_m1_hood" src="images/bmw_m1_hood.jpg" class="gandul gandul-active">

通过图片加载前后的对比,我们发现以下几个特征:

  1. a标签和img标签的class属性值都没变,都是gundul,但是img标签多了一个gandul-active,说明图片已加载。
  2. a标签href属性和img标签src属性的值都是images/bmw_m1_hood.jpg
  3. a标签的锚文本成了img标签的alt属性值。

至此,gandul的优势就已经显现出来。写的代码更简单,还会自动加上给图片加上alt属性,这对于图片的SEO是非常优化的。

再退一步,如果浏览器JavaScript被禁用,a标签依然生效,我们只要点击链接,就能看到这张图片。

更多用法,请访问原作者的GitHub项目地址https://github.com/alterebro/accessible-image-lazy-load

点击http://lab.fengtalk.com/gandul/,查看演示效果。