Облегчите интерфейсное приложение за пять минут — day.js

JavaScript

предисловие

В работе со временем и датой, помимо использования собственных функций снаружи, это мощный Moment.js. Тем не менее, его вес упакованный убийца часто является слишком большой проблемой. Таким образом, вместо использования облегченного day.js он может значительно сократить количество пользователей при загрузке и ускорить загрузку веб-сайта.

Функции

Облегченное решение Moment.js размером 2 КБ с таким же мощным API

Day.js — это облегченная библиотека JavaScript для работы со временем и датами с точно таким же дизайном API, что и у Moment.js.Если вы использовали Moment.js, вы уже знаете, как использовать Day.js.

Мало того, он также совместим со всеми браузерами, поддерживает цепные операции и не изменяет исходные данные.

Установить

  1. Через нпм:
npm install dayjs --save

import dayjs from 'dayjs'
// const dayjs = require('dayjs');
dayjs().format();
  1. CDN
<!-- Latest compiled and minified JavaScript -->
<script src="https://unpkg.com/dayjs"></script>
<script>
  dayjs().format();
</script>

как использовать

Дизайн API Day.js и Moment.js остается точно таким же.

Если вы использовали последний, вы также можете без давления перейти на Day.js.

Если вы не использовали его, вот простой пример обработки даты:

dayjs('2018-09-19') // 解析

dayjs().format('{YYYY} MM-DDTHH:mm:ss SSS [Z] A') // 加格式

dayjs().set('month', 3).month() // 把月份改為三月

dayjs().add(1, 'second') // 加一秒

Вы также можете пройтиофициальная документацияПроверьте API.

Интернационализировать I18n

Нужно загружать вручную, загружать по запросу

import 'dayjs/locale/es' // 按需加載

dayjs.locale('es') // 全局使用西班牙語

dayjs('2018-05-05').locale('zh-tw').format() // 局部使用繁體中文

Если вы заинтересованы в понимании исходного кода, вы можете открыть/src/locale/.

Вот локализация традиционного китайского:

import dayjs from 'dayjs'

const locale = {
  name: 'zh-tw',
  weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
  weekdaysShort: '週日_週一_週二_週三_週四_週五_週六'.split('_'),
  weekdaysMin: '日_一_二_三_四_五_六'.split('_'),
  months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
  monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
  ordinal: n => `${n}日`,
  relativeTime: {
    future: '%s內',
    past: '%s前',
    s: '幾秒',
    m: '1 分鐘',
    mm: '%d 分鐘',
    h: '1 小時',
    hh: '%d 小時',
    d: '1 天',
    dd: '%d 天',
    M: '1 個月',
    MM: '%d 個月',
    y: '1 年',
    yy: '%d 年'
  }
}

dayjs.locale(locale, null, true)

export default locale

плагин

Кроме того, он позволяет загружать плагины, вы также можете написать плагин самостоятельно после того, как разберетесь с ним.

import advancedFormat from 'dayjs/plugin/advancedFormat' // 按需加載插件

dayjs.extend(advancedFormat) // 使用插件

dayjs().format('Q Do k kk X x') // 使用擴展後的API

боевая часть

мой блог уже используетdayjsкак инструмент обработки даты. Возьмем дату этой статьи в качестве примера:

  1. RSS-каналы (feed.xml)
const url = `${site.siteMetadata.siteUrl}/${dayjs(edge.node.createdDate).format('YYYY/MM/DD')}/${edge.node.url}`;

const date = dayjs(edge.node.createdDate).format('MMMM DD, YYYY, h:mm A');
  1. дата публикации в блоге
const date = dayjs(createdDate).format('YYYY/MM/DD');
  1. дата текста
const date = dayjs(createdDate).format('YYYY/MM/DD');
  1. Область комментариев Gitalk Как вы могли видеть из предыдущей статьи, с 1 марта 2018 года на Github введено ограничение на количество слов для тегов.

Кроме того, я использую id непосредственно в качестве идентификатора запроса после 9 сентября 2018 года.

    const issueDate = '2018-03-01';
    const idDate = '2018-09-09'; // 修理遺留代碼錯誤
    const { createdDate, title } = this.data.content.edges[0].node;
    let { id } = this.data.content.edges[0].node;

    let finalTitle = title;
    if (dayjs(createdDate).isAfter(issueDate)) {
      finalTitle = `${title} | Calpa's Blog`; // For Create Github Issue

      if (dayjs(createdDate).isBefore(idDate)) {
        id = md5(title);
      }
    } else {
      const pathname = getPath();
      const lastSymbol = pathname[pathname.length - 1] === '/' ? '' : '/';
      id = `${url}${pathname}${lastSymbol}`;
    }

постскриптум

Чтобы облегчить ваш сайт, на самом деле это может быть легко. Вы можете начать не только с Webpack, но и с выбора материалов.

использованная литература

  1. Github - iamkun/dayjs
Категории