前端 杂七杂八 常用方法

1. 获取当前时间 并返回格式为（yyyy-MM-dd HH:mm:ss）

		//获取当前时间
        function getFormatDate() {
            var date = new Date();
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentDate = date.getFullYear() + "-" + month + "-" + strDate
                    + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
            return currentDate;
        };

2.获取url后的参数

		function getQueryString(name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
           var r = window.location.search.substr(1).match(reg);
           if (r != null) {
               return unescape(r[2]);
           }
       return null;
       };
      var state = getQueryString('state');//状态

3.复制到剪切板

		//复制
        function copyUrl() {
            var Url = $(".url");
            Url.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            alert("已复制好，可贴粘。");
        }

• ajax请求

        $.ajax({
            url:"http://differcom.gnway.cc:21017/open/authorizationurl/do", //请求的服务端地址
            data:{
                method: '',
                sign: $.md5(sign),		//mad5加密
                bizcontent: ''
            },
            type:"post",
            success:function(data){
                //成功之后的处理，返回的数据就是 data
                 alert('success'); //成功的处理
            },
            error:function(){
                alert('error'); //错误的处理
            }
        });

• 数组包含判断

        /**
        * 判断数组是否包含参数
         * @param {object:object} arr 数组
         * @param   obj 对象 
         */
        arrContains: function (arr, obj) {
            var i = arr.length;
            while (i--) {
                if (arr[i] === obj) {
                    return true;
                }
            }
            return false;
        },
        /**
      * 判断数组是否包含
       * @param {object:object} arr1 长数组
       * @param {object:object} arr2 短数组
       */
        isContained: function (arr1, arr2) {
            if (!(arr1 instanceof Array) || !(arr2 instanceof Array) || ((arr1.length < arr2.length))) {
                return false;
            }
            for (var i = 0; i < arr2.length; i++) {
                var flag = false;
                for (var j = 0; j < arr1.length; j++) {
                    if (arr1[j] == arr2[i]) {
                        flag = true;
                        break;
                    }
                }
                if (flag == false) {
                    return flag;
                }
            }
            return true;
        },

6.localStorage(本地存储)

特点：

• 生命周期：持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
• 存储的信息在同一域中是共享的。
• 当本页操作（新增、修改、删除）了localStorage的时候，本页面不会触发storage事件,但是别的页面会触发storage事件。
• 大小：据说是5M（跟浏览器厂商有关系）
• 在非IE下的浏览中可以本地打开。IE浏览器要在服务器中打开。
• localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
• localStorage受同源策略的限制

设置

• lacalStorage.setItem(‘username’,‘zxy’);

获取

• localStorage.getItem(‘username’);

删除

• localStorage.remove(‘username’);

• 也可以一次清除所有存储：localStorage.clear();

关于前端三种本地存储方式，参考大神相关笔记

7. websoket

			//判断当前浏览器是否支持WebSocket
            if('WebSocket' in window){

                let wsIp = '';
                if (window.Get_MessagePushUrl)
                    wsIp = window.Get_MessagePushUrl();
                else
                    wsIp='ws://192.168.3.97:50066';                     
                if (!/^ws/i.test(wsIp)) {
                    wsIp = 'ws://' + wsIp;
                }
                // wsIp = wsIp.replace(/\/ws/, '/omsapiws');
                wsIp = wsIp.replace(/\/ws/, '/websocket');


                // websocket = new WebSocket(wsIp);
                websocket = new WebSocket("ws://192.168.3.97:50066/websocket");
                
                var logmsg = 'wsIp:' + wsIp + '     memberName:' + omsUtils.getMemberName() + '     shopId:' + shopInfo.channelId + '    userId:' + omsUtils.getUserId()
                console.log(logmsg)
                jkUtils.writeLogToShell(logmsg)
            }
            else{
                alert('Not support websocket')
            }

            //连接发生错误的回调方法
            websocket.onerror = function(){
                setMessageInnerHTML("error");
            };

            //连接成功建立的回调方法
            websocket.onopen = function(event){
                setMessageInnerHTML("open");
                
                var clientId = omsUtils.getMemberName() + '-' + shopInfo.channelId + '-' + omsUtils.getUserId();
                var param = {clientId:clientId, source:1 }
                websocket.send(JSON.stringify(param));

                setInterval(function () {
                    websocket.close();
                }, 60 * 1000);
            }

            //接收到消息的回调方法
            websocket.onmessage = function(event){

                // 回写地址
                mini.get('url').setValue(event.data)
            }

            //连接关闭的回调方法
            websocket.onclose = function(){
                setMessageInnerHTML("close");
            }

            //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
            window.onbeforeunload = function(){
                websocket.close();
            }

            //将消息显示在网页上
            function setMessageInnerHTML(innerHTML){
                console.log(innerHTML)
            }

            // //关闭连接
            // function closeWebSocket(){
            //     websocket.close();
            // }

数组分组

 groupBy(array, f) {
 	var groups = {};
    array.forEach(function (o) {
    	var group = JSON.stringify(f(o));
        groups[group] = groups[group] || [];
        groups[group].push(o);
 	});
    return Object.keys(groups).map(function (group) {
        return groups[group];
    });
},

var arr = groupBy(list, function (item) {
     return [item.name];  //根据name分组
});
console.log(arr);

跳转外部链接

if (window.openurl && typeof window.openurl == "function") {
   window.openurl(orderUrl);
} else {
   open_link(orderUrl);
}

function open_link(url) {
	var el = document.createElement("a");
    document.body.appendChild(el);
    el.href = url;
    el.target = "_blank";
    el.click();
    document.body.removeChild(el);
};

div可拖动

<div id="idOuterDiv" class="Div"> </div> 

function dragFunc(id) {
    var Drag = document.getElementById(id);
    Drag.onmousedown = function(event) {
        var ev = event || window.event;
        event.stopPropagation();
        var disX = ev.clientX - Drag.offsetLeft;
        var disY = ev.clientY - Drag.offsetTop;
        document.onmousemove = function(event) {
            var ev = event || window.event;
            Drag.style.left = ev.clientX - disX + "px";
            Drag.style.top = ev.clientY - disY + "px";
            Drag.style.cursor = "move";
        };
    };
    Drag.onmouseup = function() {
        document.onmousemove = null;
        this.style.cursor = "default";
    };
};
dragFunc("Div");

reduce相关

• reduce方法详解及高级技巧