寫在文章前：一個在專案開發中通常遇到的需求，後臺返回一個時間戳，前臺需要處理成 xxxx年xx月xx日等格式的時間格式。通常我們會封裝成一個函式進行呼叫，但在本文中，就小題大作一下，一個這樣的需求怎麼寫成一個外掛依賴呢？

a. this.timeformater('1528094422381') // 2018-06-04 14:40:22
b. this.timeformater('1528094422381','YYYY-MM-DD hh:mm:ss') // 2018-06-04 14:40:22
c. this.timeformater('1528094422381','YYYY-MM-DD hh-mm-ss') // 2018-06-04 14-40-22
d. this.timeformater('1528094422381','YYYY/MM/DD') // 2018/06/04
e. this.timeformater('1528094422381','YYYY/MM/DD hh:mm:ss') // 2018/06/04 14:40:22
f. this.timeformater('1528094422381','YYYY/MM/DD hh-mm-ss') // 2018/06/04 14-40-22
 

1）構建外掛依賴資料夾

如博主： 專案資料夾 time-formater-select
a. npm初始化一下： npm init
b. 建立index.js檔案，作為依賴的入口檔案
c. 建立timerformater.js作為功能實現檔案

2）index.js檔案（因為需求功能簡單）

module.exports = require('./timeformater');

3）timerformater.js檔案，實現功能

//開啟嚴格模式，規範程式碼，提高瀏覽器執行效率
"use strict";
// 定義一個存放返回時間型別的陣列
var timeType = [{
    type: 1,
    description: 'YYYY-MM-DD'
  },
  {
    type: 2,
    description: 'YYYY/MM/DD'
  },
  {
    type: 3,
    description: 'YYYY-MM-DD hh:mm:ss'
  },
  {
    type: 4,
    description: 'YYYY-MM-DD hh-mm-ss'
  },
  {
    type: 5,
    description: 'YYYY/MM/DD hh:mm:ss'
  },
  {
    type: 6,
    description: 'YYYY/MM/DD hh-mm-ss'
  },
]
//定義一個類，通常首字母大寫
var TimeFormater = function (input, type) {
  var that = this
  // 預設返回的時間型別是 YYYY-MM-DD hh-mm-ss
  that.dateType = 3
  timeType.forEach(function (item) {
    if (item.description === type) {
      that.dateType = item.type
    }
  })

  if (typeof input === 'string') {
    that.timeNumber = parseInt(input);
  } else if (typeof input === 'number') {
    that.timeNumber = parseInt(input);
  } else {
    that.timeNumber = (new Date()).getTime()
  }
  TimeFormater.fn.timeNumber = that.timeNumber
  TimeFormater.fn.dateType = that.dateType
  return TimeFormater.fn.init();
}

//覆寫原型鏈，給繼承者提供方法
TimeFormater.fn = TimeFormater.prototype = {
  constructor: TimeFormater,
  init: function () {
    if (this.dateType === 1) {
      return this.YYYY() + '-' + this.MM() + '-' + this.DD()
    } else if (this.dateType === 2) {
      return this.YYYY() + '/' + this.MM() + '/' + this.DD()
    } else if (this.dateType === 3) {
      return this.YYYY() + '-' + this.MM() + '-' + this.DD() + ' ' + this.hh() + ':' + this.mm() + ':' + this.ss()
    } else if (this.dateType === 4) {
      return this.YYYY() + '-' + this.MM() + '-' + this.DD() + ' ' + this.hh() + '-' + this.mm() + '-' + this.ss()
    } else if (this.dateType === 5) {
      return this.YYYY() + '/' + this.MM() + '/' + this.DD() + ' ' + this.hh() + ':' + this.mm() + ':' + this.ss()
    } else if (this.dateType === 6) {
      return this.YYYY() + '/' + this.MM() + '/' + this.DD() + ' ' + this.hh() + '-' + this.mm() + '-' + this.ss()
    } else {
      return this.YYYY() + '-' + this.MM() + '-' + this.DD() + ' ' + this.hh() + ':' + this.mm() + ':' + this.ss()
    }
  },
  YYYY: function () {
    var that = this
    that.year = (new Date(that.timeNumber)).getFullYear()
    return that.year
  },
  MM: function () {
    var that = this
    that.month = ((new Date(that.timeNumber)).getMonth() + 1) < 10 ? ('0' + ((new Date(that.timeNumber)).getMonth() + 1)) : ((new Date(that.timeNumber)).getMonth() + 1)
    return that.month
  },
  DD: function () {
    var that = this
    that.day = (new Date(that.timeNumber)).getDate() < 10 ? ('0' + (new Date(that.timeNumber)).getDate()) : (new Date(that.timeNumber)).getDate()
    return that.day
  },
  hh: function () {
    var that = this
    that.hours = (new Date(that.timeNumber)).getHours() < 10 ? ('0' + (new Date(that.timeNumber)).getHours()) : (new Date(that.timeNumber)).getHours()
    return that.hours
  },
  mm: function () {
    var that = this
    that.minutes = (new Date(that.timeNumber)).getMinutes() < 10 ? ('0' + (new Date(that.timeNumber)).getMinutes()) : (new Date(that.timeNumber)).getMinutes()
    return that.minutes
  },
  ss: function () {
    var that = this
    that.seconds = (new Date(that.timeNumber)).getSeconds() < 10 ? ('0' + (new Date(that.timeNumber)).getSeconds()) : (new Date(that.timeNumber)).getSeconds()
    return that.seconds
  },
}

//相容CommonJs規範
if (typeof module !== 'undefined' && module.exports) module.exports = TimeFormater;
//相容AMD/CMD規範
if (typeof define === 'function') define(function () {
  return TimeFormater;
});

TimeFormater.fn.init.prototype = TimeFormater.fn;
module.exports = TimeFormater;
 

4）上傳到npm網站，作為可下載安裝的依賴(或參考博主：npm網站釋出自己的包)

npm login
npm publish

5）專案中使用，如博主是在vue專案開發

// 安裝依賴
npm i time-formater-select
// main.js中引入依賴
import timeformater from 'time-formater-select'
Vue.prototype.timeformater = timeformater
// 專案中使用
console.log(this.timeformater('1528094422381'))