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);
                }
            }
        }
    }
    

      

  • 相关阅读:
    leetcode 122. Best Time to Buy and Sell Stock II
    leetcode 121. Best Time to Buy and Sell Stock
    python 集合(set)和字典(dictionary)的用法解析
    leetcode 53. Maximum Subarray
    leetcode 202. Happy Number
    leetcode 136.Single Number
    leetcode 703. Kth Largest Element in a Stream & c++ priority_queue & minHeap/maxHeap
    [leetcode]1379. Find a Corresponding Node of a Binary Tree in a Clone of That Tree
    正则表达式
    十种排序算法
  • 原文地址:https://www.cnblogs.com/mingzhanghui/p/9251311.html
Copyright © 2011-2022 走看看