写在文章前:一个在项目开发中通常遇到的需求,后台返回一个时间戳,前台需要处理成 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下载查看。