原生JS封装常用函数

1. 求滚动条的滚动距离

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

2. 返回当前年，月，日 等

function getDate() {
    var date = new Date();
    var Year = date.getFullYear();
    var month = date.getMonth();
    var Date1 = date.getDate();

    var Hours = date.getHours();
    var minutes = date.getMinutes();
    var secod = date.getSeconds();
    return Year + "年" + (month + 1) + '月' + Date1 + '日' + Hours + '时' + minutes + '分' + (secod + 1) + '秒';
}

3. elem元素的第二层父元素是什么

function retParent(elem, n) {
    while (elem && n) {
        elem = elem.parentElement;
        n--;
    }
    return elem;
}

4 . n为正 返回后面的兄弟元素节点,n为负 返回前面的 为0 返回自己

function retSibling(elem, n) {
    while (elem && n) {
        if (n > 0) {
            n--;
            elem = elem.nextElementSibling
        } else {
            elem = elem.previousElementSibling
            n++
        }
    }
    return elem;
}

5. 标题返回target之后的元素,功能类似inserBefore

Element.prototype.inserAfter = function (target, after) {
    var before = after.nextElementSibling;
    if (before == null) {
        this.appendChild(target);
    } else {
        this.insertBefore(target, before)
    }
}

6. 返回子元素

Element.prototype.mychildren = function () {
    var childs = this.childNodes,
        len = childs.length,
        arr = [];
    for (var i = 0; i < len; i++) {
        if (childs[i].nodeType == 1) {
            arr.push(childs[i])
        }
    }
    return arr;
}

7. 将目标内的节点逆序

Element.prototype.invertedChild = function () {
    var childs = this.children,
        len = childs.length;    //当前len等于5  5-2=3;
    for (var i = len - 2; i >= 0; i--) {    // i = 3 ;i >= 0  从下标0开始数就是3就是倒数第二个
        this.appendChild(childs[i]);
    }
    return this;
}

8. 圣杯模式

function Inherit(Target, Origin) {
    function F() { }
    F.prototype = Origin.prototype;
    Target.prototype = new F();
    Target.prototype.constuctor = Target; //自己的是哪个构造出来的
    Target.prototype.uber = Origin.prototype    //自己最终是继承哪个的原型
}
Fater.prototype.lastName = 'yrg'
function Fater() { }
function Son() { }

Inherit(Son, Fater)
var fater = new Fater();
var son = new Son()

9. 实现阶乘 与斐波那契数列

function jc(n) {
    if (n < 2) {
        return 1
    }
    return n * jc(n - 1);
}


function fb(n) {
    if (n <= 2) {
        return 1;
    } else {
        return fb(n - 1) + fb(n - 2)
    }
}

10. 判断是什么类型是数据

function type(Target) {
    var template = {
        "[object Array]": "Arrat",
        "[object Object]": "Object",
        "[object Number]": "Object-Number",
        "[object Boolean]": "Boolean",
        "[object String]": "String",
        "[object Function]": "Function"
    }
    
    if (Target == null) {
        return "null"
    } else if (typeof (Target) == "object") {   //引用值
        var str = Object.prototype.toString.call(Target);
        return template[str]
    } else {
        return typeof (Target)
    }
}

11. 数组去重

Array.prototype.unique = function () {
    var obj = {},
        arr1 = []; //返回新的数组
    for (var i = 0; i < this.length; i++) {
        if (!obj[this[i]]) {               //obj没有值的话，undefined 取反说明已经有值
            obj[this[i]] = 'abc';
            arr1.push(this[i]);
        }
    }
    return arr1;
}

12. 返回浏览器的视口尺寸

function getViewprotOffset() {
    if (window.innerWidth) {
        return {
            w: window.innerWidth,
            y: 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
            }
        }
    }
}

13. 计算样式的属性

function getElementStyle(elem , prop){
    if(window.getComputedStyle){
        return window.getComputedStyle(elem, null)[prop]
    }else{ 
        return elem.currentStyle[prop]
    }
}

14.深度克隆

1. 判断是不是原始值，通过 typeof返回的结果。
2. 判断是数组还是对象 ，有三个方法：这里推荐使用Object.prototype.toString.call() 方法。
3. 建立相应的数组或对象.
4. 递归。

如上图：就是基本代码实现的功能！