原生JS封裝常用函數

此文轉載自：https://blog.csdn.net/qq_50109437/article/details/110009805

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]
    }
}