zoukankan      html  css  js  c++  java
  • javascript Date 日期格式化 formatDate, require.js 模块 支持全局js引入 / amd方式加载

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

      

  • 相关阅读:
    LOJ2565. 「SDOI2018」旧试题
    位运算
    Arrays.sort()原理
    LinkedList源码解析
    二维数组排序
    数据结构和算法-五大常用算法:贪心算法
    数据结构和算法-五大常用算法:分支限界法
    数据结构和算法-五大常用算法:分治算法
    数据结构和算法-二分查找
    Arrays.copyOf()&Arrays.copyOfRange()&System.arraycopy
  • 原文地址:https://www.cnblogs.com/mingzhanghui/p/9251311.html
Copyright © 2011-2022 走看看