* 引入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); } } } }