javascript Date 日期格式化 formatDate, require.js 模块 支持全局js引入 / amd方式加载
阅读原文时间:2023年07月08日阅读:6

* 引入AMD加载方式: require.js CDN

https://cdn.bootcss.com/require.js/2.3.5/require.js

*  创建模块文件./js/util/date.js

(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.DateUtil = factory());
}(this, function() {
/**
按所给的时间格式输出指定的时间
格式说明
对于 2014.09.05 13:14:20
yyyy: 年份,2014
yy: 年份,14
MM: 月份,补满两位,09
M: 月份, 9
dd: 日期,补满两位,05
d: 日期, 5
HH: 24制小时,补满两位,13
H: 24制小时,13
hh: 12制小时,补满两位,01
h: 12制小时,1
mm: 分钟,补满两位,14
m: 分钟,14
ss: 秒,补满两位,20
s: 秒,20
w: 星期,为 ['日', '一', '二', '三', '四', '五', '六'] 中的某一个,本 demo 结果为 五

e.g.  
formatDate(new Date(1409894060000), 'yyyy-MM-dd HH:mm:ss 星期w')  
2014-09-05 13:14:20 星期五  
\*/  
function formatDate(t, str) {  
    var obj = {  
        yyyy: t.getFullYear(),  
        yy: ("" + t.getFullYear()).slice(-2),  
        M: t.getMonth()+1,  
        MM: ("0"+(t.getMonth()+1)).slice(-2),  
        d: t.getDate(),  
        dd: ("0"+t.getDate()).slice(-2),  
        H: t.getHours(),  
        HH: ("0"+t.getHours()).slice(-2),  
        h: t.getHours() % 12,  
        hh: ("0"+(t.getHours()%12)).slice(-2),  
        m: t.getMinutes(),  
        mm: ("0"+t.getMinutes()).slice(-2),  
        s: t.getSeconds(),  
        ss: ("0"+t.getSeconds()).slice(-2),  
        w: \['日', '一', '二', '三', '四', '五', '六'\]\[t.getDay()\]  
    };  
    return str.replace(/(\[a-z\]+)/ig, function($1) {  
        return obj\[$1\];  
    });  
}

return {  
    formatDate: formatDate  
}  

}));

* 配置amd方式加载的配置文件 config.js

+1 Line:  "date": "js/util/date"

require.config({
paths : {
"jquery": "bootstrap/js/jquery-1.10.2.min",
'jquery-cookie': "bootstrap/js/jquery.cookie",
"url-param": "js/util/getUrlParam",
"date": "js/util/date"
},
shim: {
'jquery-cookie': {
deps: ['jquery']
},
'bootstrap': {
deps: ['jquery']
}
}
});

* 使用这个模块 对日期格式化 

require(['date'], function(DateUtil) {
// 转换为这样的格式2018.2.1
var ds = DateUtil.formatDate(new Date(), "yyyy.M.d");
});

* 总结

** 全局环境不一定是window

(function(global) {console.log(global)})(this)

  运行结果:

- 在浏览器下:

Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

- 在node环境

{}

** 不使用amd方式加载的话, 会执行这行

global.DateUtil = factory() // 这里的DateUtil为该模块的名字 可以是jQuery, Vue…

(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.DateUtil = factory());
}(this, function() {
function m1() {}
function m2() {}
// …
// 封装一组方法
return {
method1: m1,
method2: m2,
// …
}
});

  Usage:   DateUtil.method1(), DateUtil.method2()…

* 简单的自定义异步加载js的函数

/**
* 动态引入javascript文件,
* Usage:
* function script_onload() {
* alert(1);
* }
* var load_js = new Script(script_onload);
* load_js.set("http://static.gongju.com/js/jquery-1.4.4.min.js");
* @param id: domid [optional]
* @param callback js文件加载完了callback function
*/
function Script(callback) {
var js = document.createElement("script");
this.js = js;
js.type = "text/javascript";
document.body.appendChild(js);

Script.prototype.set = function(url, id) {  
    this.js.src = url;  
       id && (this.js.id = id);  
};  
if (callback) {  
    if (navigator.appName.toLowerCase().indexOf('netscape') === -1) {  
        js.onreadystatechange = function() {  
            js.readyState === 'complete' && callback(this);  
        }  
    } else {  
        js.onload = function() {  
            callback(this);  
        }  
    }  
}  

}