js封装一些常用功能函数

// 1.输出类型值，封装typeof方法
// 2.数组去重
// 3.字符串去重
// 4.字符串中只出现一次并且是第一次出现的字符
// 5.圣杯模式 继承模式
// 6.深拷贝
// 7.封装函数，返回元素e的第n层祖先元素
// 8.封装child功能，解决以前部分浏览器不兼容问题,返回元素节点 noteType==1
// 9.封装hasChildren()方法，不可以使用children属性
// 10.封装函数，返回元素e的第n个元素节点，n为正，返回后面的兄弟节点，
// 11.返回元素子节点，按照层级来（不是很好）
// 12.封装insertAfter
// 13.求屏幕滚动距离
// 14.封装函数，获取屏幕当前视口大小
// 15.封装 获取元素css属性值的方法
// 16.封装函数 事件绑定函数 解决兼容性问题 addEvent
// 17.封装取消冒泡事件
// 18.封装阻止默认事件



// 1.输出类型值，封装typeof方法
function type(target) {
    // 1.分两类 原始值 引用值
    // 2.区分引用值
    // 3.null
    var template = {
        "[object Array]": "array",
        "[object Object]": "object",
        "[object Number]": "number - object",
        "[object Boolean]": "boolean - object",
        "[object String]": "string - object"
    }

    if (target === null) {
        return "null";
    } else if (typeof (target) == 'object') {
        // 数组 对象 包装类  Object.prototype.toString
        var str = Object.prototype.toString.call(target);
        return template[str];
    } else {
        return typeof (target);
    }
}


// 2.数组去重
//      要求在原型链上编程
//      Array.prototype.unique = function () {}
//  利用对象属性名不能相同,哈希值

Array.prototype.unique = function () {
    var obj = {},
        arr = [],
        len = this.length;
    for (var i = 0; i < len; i++) {
        if (!obj[this[i]]) {
            obj[this[i]] = "a";
            arr.push(this[i]);
        }
    }
    return arr;
}

// 3.字符串去重
String.prototype.uniqueStr = function () {
    var Str = '',
        obj = {};
    for (var prop in this) {
        if (this.hasOwnProperty(prop)) {
            if (!obj[this[prop]]) {
                obj[this[prop]] = "a";
                Str += this[prop];
            }
        }

    }
    return Str;
}

// 4.字符串中只出现一次并且是第一次出现的字符
String.prototype.theFirstWord = function () {
    var obj = {};
    for (var prop in this) {
        if (this.hasOwnProperty(prop)) {
            (!obj[this[prop]]) ? obj[this[prop]] = 1 : obj[this[prop]] += 1;
        }

    }
    for (var prop in obj) {
        if (obj[prop] == 1) {
            return prop;
        }
    }
}

// 5.圣杯模式 继承模式
var inhert = (function () {
    var F = {};
    return function (target, origin) {
        F.prototype = origin.prototype;
        target.prototype = new F();
        target.prototype.constructor = target;
        target.prototype.uber = origin.prototype
    }
}())


// 6.深拷贝

function deepClone(origin, target) {
    var target = target || {},  //参数预处理
        toStr = Object.prototype.toString,  //判断是数组还是对象
        arrStr = '[object Array]';
    for (prop in origin) {
        if (origin.hasOwnProperty(prop)) {
            if (typeof (origin[prop]) == 'object') {
                if (toStr.call(origin[prop]) == arrStr) {
                    target[prop] = [];
                } else {
                    target[prop] = {};
                }
                deepClone(origin[prop], target[prop]);
            } else {
                target[prop] = origin[prop];
            }
        }
    }
}

// 7.封装函数，返回元素e的第n层祖先元素
function retParent(elem, n) {
    while (elem && n) {
        elem = elem.parentElement;
        n--;
    }
    return elem;
}


// 8.封装child功能，解决以前部分浏览器不兼容问题,返回元素节点 noteType==1
Element.prototype.myChildren = function () {
    var child = this.childNodes;
    var len = child.length;
    var arr = [];
    for (var i = 0; i < len; i++) {
        if (child[i].nodeType == 1) {
            arr.push(child[i]);
        }
    }

    return arr;
}


// 9.封装hasChildren()方法，不可以使用children属性
Element.prototype.myHasChildren = function () {
    var child = this.childNodes;
    var len = child.length;
    for (var i = 0; i < len; i++) {
        if (child[i].nodeType == 1) {
            return true;
        }
    }

    return false;
}


// 10.封装函数，返回元素e的第n个元素节点，n为正，返回后面的兄弟节点，
// n为负，返回前面的，n = 0返回自己
// 循环一般要考虑条件的合法性
function retSibling(e, n) {
    while (e && n) {
        if (n > 0) {
            e = e.nextElementSibling;
            n--;
        } else {
            e = e.previousElementSibling;
            n++;
        }
    }
    return e;
}
// 做浏览器兼容问题
function retSibling(e, n) {
    while (e && n) {
        if (n > 0) {
            if (e.nextElementSibling) {
                e = e.nextElementSibling;
            } else {
                for (e = e.nextSibling; e && e.noteType != 1; e = e.nextSibling);
            }
            n--;
        } else {
            if (e.nextElementSibling) {
                e = e.nextElementSibling;
            } else {
                for (e = e.previousSibling; e && e.noteType != 1; e = e.previousSibling);
            }
            n++;
        }
    }
    return e;
}

// 11.返回元素子节点，按照层级来（不是很好）
Element.prototype.myChild1 = function (obj) {
    var Obj = obj || {};
    var child = this.childNodes;
    var len = child.length;
    for (var i = 0; i < len; i++) {
        var myNodeName = child[i].nodeName.toString();
        if (child[i].nodeType == 1 && child[i].childNodes.length <= 1) {
            Obj[i + "." + myNodeName] = child[i].nodeName;
        } else if (child[i].nodeType == 1 && child[i].childNodes.length > 1) {
            Obj[i + "." + myNodeName] = {};
            child[i].myChild1(Obj[i + "." + myNodeName]);
        }
    }
    return Obj;
}

// 12.封装insertAfter
Element.prototype.inserAfter = function (targetNode, afterNode) {
    var beforNode = afterNode.nextElementSibling;
    if (beforNode == null) {
        this.appendChild(targetNode);
    } else {
        this.insertBefore(targetNode, beforNode);
    }
}

// 13.求屏幕滚动距离
function getScrollOffset() {
    if (window.pageXOffset) {
        return {
            x: window.pageXOffset,
            y: window.pageYOffset
        }
    } else {
        return {
            x: document.body.scrollLeft + document.documentElement.scrollLeft,
            y: document.body.scrollTop + document.documentElement.scrollTop

        }
    }
}

// 14.封装函数，获取屏幕当前视口大小
function getViewportOffset() {
    if (window.innerWidth) {
        return {
            w: window.innerWidth,
            h: window.innerHeight
        }
    } else {
        if (document.compatMode === "BackCompat") {
            return {
                w: document.body.clientWidth,
                h: document.body.clientHeight
            }
        } else {
            return {
                w: document.documentElement.clientWidth,
                h: document.documentElement.clientHeight
            }
        }
    }
}

//15.封装 获取元素css属性值的方法
// elem：元素名  prop：css属性名
function getStyle(elem, prop) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(elem, null)[prop];
    } else {
        return elem.currentStyle[prop];
    }
}

// 16.封装函数 事件绑定函数 解决兼容性问题 addEvent 
function addEvent(elem, type, handle) {
    if (elem.addEventListener) {
        elem.addEventListener(type, handle, false);
    } else if (elem.attachEvent) {
        elem.attachEvent('on' + type, function () {
            handle.call(elem);
        })
    } else {
        elem['on' + type] = handle;
    }
}

// 17.封装取消冒泡事件
function stopBobble(event) {
    if (event.stopPropagation) {
        event.stopPropagation;
    } else {
        event.cancelBubble = true;
    }
}

//  18.封装阻止默认事件
function cancelHandler(event) {
    if (event.preventDefault) {
        event.preventDefault;
    } else {
        event.returnValue = false;
    }
}