tools

一些常用工具

1、deepClone

var obj = {
    name: 'To',
    age: 24,
    sex: 'male',
    cars: ['BMW', 'audi'],
    girlfriend: {
    	name: 'shanshan',
    	age: 24,
    	gender: 'female'
    }
}
var obj1 = {}

function clone(origin, target) {
    var temp = target || {}
    if (typeof (origin) != 'object' && origin =='null') { // 如果是原始值或者null的话
    	temp = origin
    } else {
    	for (var k in origin) {
    		if (origin.hasOwnProperty(k)) { // 不复制原型链上的属性
    			if (Object.prototype.toString.call(origin[k]).indexOf('Array') >= 0) { // 如果是数组
    				temp[k] = []
    			} else { // 对象
    				temp[k] = {}
    			}
    			arguments.callee(origin[k], temp[k]) // 如果这行 temp[k] = clone(origin[k], temp[k]) 那么生效
    		}
    	}
    }
    return temp
}

typeof (完美检测所有类型)

function checkType(target) {
			var template = {
				'[object Array]': 'array',
				'[object Number]': 'number object',
				'[object Boolean]': 'boolean object',
				'[object String]': 'string object',
				'[object Object]': 'object'
			}
			if (target === null) {
				return 'null'
			} else {
				switch (typeof (target)) {
					case 'object':
						var toStr = Object.prototype.toString.call(target)
						return template[toStr]
					default:
						return typeof (target)
				}
			}
		}

数组去重

1.利用对象
	Array.prototype.unique = function () {

			var temp = {}
			var arr = []

			for (var i = 0; i < this.length; i++){
				if (!temp[this[i]]){
					tem[this[i]] = '去重'
					arr.push(this[i])
				}
			}
			return arr
		}
		
2.

找出字符串中第一个出现的只出现一次的字符

function firstUnique(str){
		var obj={},
			arr= []
		for(var a = 0; a < str.length; a++){
			if (!obj[str[a]]){
				obj[str[a]] = {
					count:1,
					index:a,
					label:str[a]
				}
			} else{
				obj[str[a]].count++
			}
		}
		for (var k in obj){
			arr.push(obj[k])
		}
	 	arr = arr.filter(function(a){
			return a.count === 1
		})
		arr.sort(function(a,b){
			if (a.count <  b.count ){
				return -1
			} else {
				return 1
			}

		})
		return arr[0]
	}

insertAfter 在某元素之后插入一个元素

    Element.prototype.insertAfter = function(target,origin){
        if (origin.nextElementSibling == null){
            origin.appendChild(target)
        } else{
            this.insertBefore(target,origin.nextElementSibling)
        }
    }

getScrollOffset 获取滚动条滚动距离

getScrollOffset(){
    if(window.pageXOffset){
        return {
            x:window.pageXOffset,
            y:window.pageXOffset
        }
    }else {
        return {
            x:document.body.scrollLeft + document.documentElement.scrollLeft,
            y:document.body.scrollTop + document.documentElement.scrollTop
        }
    }
}

getViewportSize 获取可视窗口尺寸

getViewportSize(){
    if(window.innerWidth){
        return {
            h:window.innerHeight,
            x:window.innerWidth,
        }
    }else {
        if (document.compatMode = 'BackCompat'){ // 怪异模式
            return {
                x:document.body.clientWidth,
                y:document.body.clientHeight
            }
        } else {
            return {
                x:document.documentElement.clientWidth,
                y:document.documentElement.clientHeight
            }
        }
    }
}

统一this指向和兼容性的事件绑定

    function addEvent(ele, type, handler) {
        if (ele.addEventListener) {
            ele.addEventListener(type, handler,false)
        } else if (ele.attachEvent) {
            ele.attachEvent(ele, type, function () {
                handler.call(ele)
            })
        } else {
            ele[`on${type}`] = handler
        }
    }

阻止冒泡

怎么阻止，是从事件源对象处阻止吗？

    function stopBubble(e) { // 阻止冒泡
        if (e.stopropagation) {
            e.stopropagation()
        } else {
            e.cancelBubble = true
        }
    }

阻止默认事件

   function cancelDefault(e) { // 阻止默认事件
        if (e.preventDefault) {
            e.preventDefault()
        } else {
            e.returnValue = false
        }
    }

元素的拖拽事件

        function dragElement(ele) {
            var posX = 0,
                posY = 0

            addEvent(ele, 'mousedown', elmousedown)

            addEvent(ele, 'mouseup', elmouseup)

            function elmousedown(e) { // 鼠标按下事件
                cancelDefault(e)
                stopBubble(e)
                posX = e.pageX - ele.style.left.split('px')[0]
                posY = e.pageY - ele.style.top.split('px')[0]
                
                document.addEventListener('mousemove', move, false)

            }
            function elmouseup(e) { // 松开鼠标 解除移动事件
                document.removeEventListener('mousemove', move, false)
            }
            function move(e) { // 方块跟随鼠标移动
                var event = e || window.event
                
                ele.style.left = event.pageX - posX + 'px'
                ele.style.top = event.pageY - posY + 'px'
            }
        }