写在文章前:一个在项目开发中通常遇到的需求,后台返回一个时间戳,前台需要处理成 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'))
就这样,一个可安装下载的依赖就开发完成。博主所述的依赖源文件在github:
https://github.com/Path2017/plugin/tree/master/time-formater-select
此外也可以通过 npm i time-formater-select下载查看。
https://github.com/Path2017/plugin/tree/master/time-formater-select
此外也可以通过 npm i time-formater-select下载查看。