封裝一些有用的方法

vslam 發布于2019-08-26 10:15 / 3329人閱讀

摘要：輸入一個值，返回其數據類型數組去重字符串去重去除連續的字符串深拷貝淺拷貝深克隆深克隆不考慮函數引用值且不為對象數組原始值或深淺克隆是針對引用值數組對象無法復制函數底層原理和擴展改變原數組圣杯模式的繼承最終的原型指向找出字符串中第一

1.輸入一個值，返回其數據類型

function type(para) {
    return Object.prototype.toString.call(para)
}

2.數組去重

function unique1(arr) {
    return [...new Set(arr)]
}

function unique2(arr) {
    var obj = {};
    return arr.filter(ele => {
        if (!obj[ele]) {
            obj[ele] = true;
            return true;
        }
    })
}

function unique3(arr) {
    var result = [];
    arr.forEach(ele => {
        if (result.indexOf(ele) == -1) {
            result.push(ele)
        }
    })
    return result;
}

3.字符串去重

String.prototype.unique = function () {
    var obj = {},
        str = "",
        len = this.length;
    for (var i = 0; i < len; i++) {
        if (!obj[this[i]]) {
            str += this[i];
            obj[this[i]] = true;
        }
    }
    return str;
}

###### //去除連續的字符串 

function uniq(str) {
    return str.replace(/(w)1+/g, "$1")
}

4.深拷貝淺拷貝

//深克隆（深克隆不考慮函數）
function deepClone(obj, result) {
    var result = result || {};
    for (var prop in obj) {
        if (obj.hasOwnProperty(prop)) {
            if (typeof obj[prop] == "object" && obj[prop] !== null) {
                // 引用值(obj/array)且不為null
                if (Object.prototype.toString.call(obj[prop]) == "[object Object]") {
                    // 對象
                    result[prop] = {};
                } else {
                    // 數組
                    result[prop] = [];
                }
                deepClone(obj[prop], result[prop])

    } else {
        // 原始值或func
        result[prop] = obj[prop]
    }
}

}
return result;

}

// 深淺克隆是針對引用值
function deepClone(target) {
    if (typeof (target) !== "object") {
        return target;
    }
    var result;
    if (Object.prototype.toString.call(target) == "[object Array]") {
        // 數組
        result = []
    } else {
        // 對象
        result = {};
    }
    for (var prop in target) {
        if (target.hasOwnProperty(prop)) {
            result[prop] = deepClone(target[prop])
        }
    }
    return result;
}
// 無法復制函數
var o1 = JSON.parse(JSON.stringify(obj1));

5.reverse底層原理和擴展

// 改變原數組
Array.prototype.myReverse = function () {
    var len = this.length;
    for (var i = 0; i < len; i++) {
        var temp = this[i];
        this[i] = this[len - 1 - i];
        this[len - 1 - i] = temp;
    }
    return this;
}

6.圣杯模式的繼承

function inherit(Target, Origin) {
    function F() {};
    F.prototype = Origin.prototype;
    Target.prototype = new F();
    Target.prototype.constructor = Target;
    // 最終的原型指向
    Target.prop.uber = Origin.prototype;
}

7.找出字符串中第一次只出現一次的字母

String.prototype.firstAppear = function () {
    var obj = {},
        len = this.length;
    for (var i = 0; i < len; i++) {
        if (obj[this[i]]) {
            obj[this[i]]++;
        } else {
            obj[this[i]] = 1;
        }
    }

for (var prop in obj) {

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

}

8. 找元素的第n級父元素

function parents(ele, n) {
    while (ele && n) {
        ele = ele.parentElement ? ele.parentElement : ele.parentNode;
        n--;
    }
    return ele;
}

9. 返回元素的第n個兄弟節點

function retSibling(e, n) {
    while (e && n) {
        if (n > 0) {
            if (e.nextElementSibling) {
                e = e.nextElementSibling;
            } else {
                for (e = e.nextSibling; e && e.nodeType !== 1; e = e.nextSibling);
            }
            n--;
        } else {
            if (e.previousElementSibling) {
                e = e.previousElementSibling;
            } else {
                for (e = e.previousElementSibling; e && e.nodeType !== 1; e = e.previousElementSibling);
            }
            n++;
        }
    }
    return e;
}

10. 封裝mychildren，解決瀏覽器的兼容問題

function myChildren(e) {
    var children = e.childNodes,
        arr = [],
        len = children.length;
    for (var i = 0; i < len; i++) {
        if (children[i].nodeType === 1) {
            arr.push(children[i])
        }
    }
    return arr;
}

11.判斷元素有沒有子元素

function hasChildren(e) {
    var children = e.childNodes,
        len = children.length;
    for (var i = 0; i < len; i++) {
        if (children[i].nodeType === 1) {
            return true;
        }
    }
    return false;
}

12.我一個元素插入到另一個元素的后面

Element.prototype.insertAfter = function (target, elen) {
    var nextElen = elen.nextElenmentSibling;
    if (nextElen == null) {
        this.appendChild(target);
    } else {
        this.insertBefore(target, nextElen);
    }
}

13.返回當前的時間（年月日時分秒）

function getDateTime() {
    var date = new Date(),
        year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate(),
        hour = date.getHours() + 1,
        minute = date.getMinutes(),
        second = date.getSeconds();

month = checkTime(month);
day = checkTime(day);
hour = checkTime(hour);
minute = checkTime(minute);
second = checkTime(second);

function checkTime(i) {

if (i < 10) {
    i = "0" + i;
}
return i;

}
return "" + year + "年" + month + "月" + day + "日" + hour + "時" + minute + "分" + second + "秒"

14.獲得滾動條的滾動距離

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

15.獲得視口的尺寸

function getViewportOffset() {
    if (window.innerWidth) {
        return {
            w: window.innerWidth,
            h: window.innerHeight
        }
    } else {
        // ie8及其以下
        if (document.compatMode === "BackCompat") {
            // 怪異模式
            return {
                w: document.body.clientWidth,
                h: document.body.clientHeight
            }
        } else {
            // 標準模式
            return {
                w: document.documentElement.clientWidth,
                h: document.documentElement.clientHeight
            }
        }
    }
}

16.獲取任一元素的任意屬性

function getStyle(elem, prop) {
    return window.getComputedStyle ? window.getComputedStyle(elem, null)[prop] : elem.currentStyle[prop]
}

17.綁定事件的兼容代碼

function addEvent(elem, type, handle) {
    if (elem.addEventListener) { //非ie和非ie9
        elem.addEventListener(type, handle, false);
    } else if (elem.attachEvent) { //ie6到ie8
        elem.attachEvent("on" + type, function () {
            handle.call(elem);
        })
    } else {
        elem["on" + type] = handle;
    }
}

18.解綁事件

function removeEvent(elem, type, handle) {
    if (elem.removeEventListener) { //非ie和非ie9
        elem.removeEventListener(type, handle, false);
    } else if (elem.detachEvent) { //ie6到ie8
        elem.detachEvent("on" + type, handle);
    } else {
        elem["on" + type] = null;
    }
}

19.取消冒泡的兼容代碼

function stopBubble(e) {
    if (e && e.stopPropagation) {
        e.stopPropagation();
    } else {
        window.event.cancelBubble = true;
    }
}

20.檢驗字符串是否是回文

function isPalina(str) {
    if (Object.prototype.toString.call(str) !== "[object String]") {
        return false;
    }
    var len = str.length;
    for (var i = 0; i < len / 2; i++) {
        if (str[i] != str[len - 1 - i]) {
            return false;
        }
    }
    return true;
}

21.檢驗字符串是否是回文

function isPalindrome(str) {
    str = str.replace(/W/g, "").toLowerCase();
    console.log(str)
    return (str == str.split("").reverse().join(""))
}

22.兼容getElementsByClassName方法

Element.prototype.getElementsByClassName = Document.prototype.getElementsByClassName = function (_className) {
    var allDomArray = document.getElementsByTagName("*");
    var lastDomArray = [];

function trimSpace(strClass) {

var reg = /s+/g;
return strClass.replace(reg, " ").trim()

}
for (var i = 0; i < allDomArray.length; i++) {

var classArray = trimSpace(allDomArray[i].className).split(" ");
for (var j = 0; j < classArray.length; j++) {
    if (classArray[j] == _className) {
        lastDomArray.push(allDomArray[i]);
        break;
    }
}

}
return lastDomArray;

23.運動函數

function animate(obj, json, callback) {
    clearInterval(obj.timer);
    var speed,
        current;
    obj.timer = setInterval(function () {
        var lock = true;
        for (var prop in json) {
            if (prop == "opacity") {
                current = parseFloat(window.getComputedStyle(obj, null)[prop]) * 100;
            } else {
                current = parseInt(window.getComputedStyle(obj, null)[prop]);
            }

    speed = (json[prop] - current) / 7;
    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

    if (prop == "opacity") {
        obj.style[prop] = (current + speed) / 100;
    } else {
        obj.style[prop] = current + speed + "px";
    }
    if (current != json[prop]) {
        lock = false;
    }
}
if (lock) {
    clearInterval(obj.timer);
    typeof callback == "function" ? callback() : "";
}

}, 30)

24.彈性運動

function ElasticMovement(obj, target) {
    clearInterval(obj.timer);
    var iSpeed = 40,
        a, u = 0.8;
    obj.timer = setInterval(function () {
        a = (target - obj.offsetLeft) / 8;
        iSpeed = iSpeed + a;
        iSpeed = iSpeed * u;
        if (Math.abs(iSpeed) <= 1 && Math.abs(a) <= 1) {
            console.log("over")
            clearInterval(obj.timer);
            obj.style.left = target + "px";
        } else {
            obj.style.left = obj.offsetLeft + iSpeed + "px";
        }
    }, 30);
}

25.封裝自己的forEach方法

Array.prototype.myForEach = function (func, obj) {
    var len = this.length;
    var _this = arguments[1] ? arguments[1] : window;
    // var _this=arguments[1]||window;
    for (var i = 0; i < len; i++) {
        func.call(_this, this[i], i, this)
    }
}

26.封裝自己的filter方法

Array.prototype.myFilter = function (func, obj) {
    var len = this.length;
    var arr = [];
    var _this = arguments[1] || window;
    for (var i = 0; i < len; i++) {
        func.call(_this, this[i], i, this) && arr.push(this[i]);
    }
    return arr;
}

27.數組map方法

Array.prototype.myMap = function (func) {
    var arr = [];
    var len = this.length;
    var _this = arguments[1] || window;
    for (var i = 0; i < len; i++) {
        arr.push(func.call(_this, this[i], i, this));
    }
    return arr;
}

28.數組every方法

Array.prototype.myEvery = function (func) {
    var flag = true;
    var len = this.length;
    var _this = arguments[1] || window;
    for (var i = 0; i < len; i++) {
        if (func.apply(_this, [this[i], i, this]) == false) {
            flag = false;
            break;
        }
    }
    return flag;
}

29.數組reduce方法

Array.prototype.myReduce = function (func, initialValue) {
    var len = this.length,
        nextValue,
        i;
    if (!initialValue) {
        // 沒有傳第二個參數
        nextValue = this[0];
        i = 1;
    } else {
        // 傳了第二個參數
        nextValue = initialValue;
        i = 0;
    }
    for (; i < len; i++) {
        nextValue = func(nextValue, this[i], i, this);
    }
    return nextValue;
}

30.獲取url中的參數

function getWindonHref() {
    var sHref = window.location.href;
    var args = sHref.split("?");
    if (args[0] === sHref) {
        return "";
    }
    var hrefarr = args[1].split("#")[0].split("&");
    var obj = {};
    for (var i = 0; i < hrefarr.length; i++) {
        hrefarr[i] = hrefarr[i].split("=");
        obj[hrefarr[i][0]] = hrefarr[i][1];
    }
    return obj;
}

31.數組排序

// 快排 [left] + min + [right]
function quickArr(arr) {
    if (arr.length <= 1) {
        return arr;
    }
    var left = [],
        right = [];
    var pIndex = Math.floor(arr.length / 2);
    var p = arr.splice(pIndex, 1)[0];
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] <= p) {
            left.push(arr[i]);
        } else {
            right.push(arr[i]);
        }
    }
    // 遞歸
    return quickArr(left).concat([p], quickArr(right));
}

// 冒泡
function bubbleSort(arr) {
    for (var i = 0; i < arr.length - 1; i++) {
        for (var j = i + 1; j < arr.length; j++) {
            if (arr[i] > arr[j]) {
                var temp = arr[i];
                arr[i] = arr[j];
                arr[j] = temp;
            }
        }
    }
    return arr;
}

function bubbleSort(arr) {
    var len = arr.length;
    for (var i = 0; i < len - 1; i++) {
        for (var j = 0; j < len - 1 - i; j++) {
            if (arr[j] > arr[j + 1]) {
                var temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }
    }
    return arr;
}

32.遍歷Dom樹

// 給定頁面上的DOM元素,將訪問元素本身及其所有后代(不僅僅是它的直接子元素)
// 對于每個訪問的元素，函數講元素傳遞給提供的回調函數
function traverse(element, callback) {
    callback(element);
    var list = element.children;
    for (var i = 0; i < list.length; i++) {
        traverse(list[i], callback);
    }
}

33.原生js封裝ajax

function ajax(method, url, callback, data, flag) {
    var xhr;
    flag = flag || true;
    method = method.toUpperCase();

if (window.XMLHttpRequest) {

xhr = new XMLHttpRequest();

} else {

xhr = new ActiveXObject("Microsoft.XMLHttp");

}

xhr.onreadystatechange = function () {

if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(2)
    callback(xhr.responseText);
}

}

if (method == "GET") {

var date = new Date(),
    timer = date.getTime();
xhr.open("GET", url + "?" + data + "&timer" + timer, flag);
xhr.send()

} else if (method == "POST") {

xhr.open("POST", url, flag);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(data);

}

34.異步加載script

function loadScript(url, callback) {
    var oscript = document.createElement("script");
    if (oscript.readyState) { // ie8及以下版本
        oscript.onreadystatechange = function () {
            if (oscript.readyState === "complete" || oscript.readyState === "loaded") {
                callback();
            }
        }
    } else {
        oscript.onload = function () {
            callback()
        };
    }
    oscript.src = url;
    document.body.appendChild(oscript);
}

35.cookie管理

var cookie = {
    set: function (name, value, time) {
        document.cookie = name + "=" + value + "; max-age=" + time;
        return this;
    },
    remove: function (name) {
        return this.setCookie(name, "", -1);
    },
    get: function (name, callback) {
        var allCookieArr = document.cookie.split("; ");
        for (var i = 0; i < allCookieArr.length; i++) {
            var itemCookieArr = allCookieArr[i].split("=");
            if (itemCookieArr[0] === name) {
                return itemCookieArr[1]
            }
        }
        return undefined;
    }
}

36.實現bind()方法

Function.prototype.myBind = function (target) {
    var target = target || window;
    var _args1 = [].slice.call(arguments, 1);
    var self = this;
    var temp = function () {};
    var F = function () {
        var _args2 = [].slice.call(arguments, 0);
        var parasArr = _args1.concat(_args2);
        return self.apply(this instanceof temp ? this : target, parasArr)
    }
    temp.prototype = self.prototype;
    F.prototype = new temp();
    return F;
}

37.實現call()方法

Function.prototype.myCall = function () {
    var ctx = arguments[0] || window;
    ctx.fn = this;
    var args = [];
    for (var i = 1; i < arguments.length; i++) {
        args.push(arguments[i])
    }
    var result = ctx.fn(...args);
    delete ctx.fn;
    return result;
}

38.實現apply()方法

Function.prototype.myApply = function () {
    var ctx = arguments[0] || window;
    ctx.fn = this;
    if (!arguments[1]) {
        var result = ctx.fn();
        delete ctx.fn;
        return result;
    }
    var result = ctx.fn(...arguments[1]);
    delete ctx.fn;
    return result;
}

39.防抖

function debounce(handle, delay) {
    var timer = null;
    return function () {
        var _self = this,
            _args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            handle.apply(_self, _args)
        }, delay)
    }
}

40.節流

function throttle(handler, wait) {
    var lastTime = 0;
    return function (e) {
        var nowTime = new Date().getTime();
        if (nowTime - lastTime > wait) {
            handler.apply(this, arguments);
            lastTime = nowTime;
        }
    }
}

41.requestAnimFrame兼容性方法

window.requestAnimFrame = (function () {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();

42.cancelAnimFrame兼容性方法

window.cancelAnimFrame = (function () {
    return window.cancelAnimationFrame ||
        window.webkitCancelAnimationFrame ||
        window.mozCancelAnimationFrame ||
        function (id) {
            window.clearTimeout(id);
        };
})();

43.jsonp底層方法

function jsonp(url, callback) {
    var oscript = document.createElement("script");
    if (oscript.readyState) { // ie8及以下版本
        oscript.onreadystatechange = function () {
            if (oscript.readyState === "complete" || oscript.readyState === "loaded") {
                callback();
            }
        }
    } else {
        oscript.onload = function () {
            callback()
        };
    }
    oscript.src = url;
    document.body.appendChild(oscript);
}

44.獲取url上的參數

function getUrlParam(sUrl, sKey) {
    var result = {};
    sUrl.replace(/(w+)=(w+)(?=[&|#])/g, function (ele, key, val) {
        if (!result[key]) {
            result[key] = val;
        } else {
            var temp = result[key];
            result[key] = [].concat(temp, val);
        }
    })
    if (!sKey) {
        return result;
    } else {
        return result[sKey] || "";
    }
}

45.格式化時間

function formatDate(t, str) {
    var obj = {
        yyyy: t.getFullYear(),
        yy: ("" + t.getFullYear()).slice(-2),
        M: t.getMonth() + 1,
        MM: ("0" + (t.getMonth() + 1)).slice(-2),
        d: t.getDate(),
        dd: ("0" + t.getDate()).slice(-2),
        H: t.getHours(),
        HH: ("0" + t.getHours()).slice(-2),
        h: t.getHours() % 12,
        hh: ("0" + t.getHours() % 12).slice(-2),
        m: t.getMinutes(),
        mm: ("0" + t.getMinutes()).slice(-2),
        s: t.getSeconds(),
        ss: ("0" + t.getSeconds()).slice(-2),
        w: ["日", "一", "二", "三", "四", "五", "六"][t.getDay()]
    };
    return str.replace(/([a-z]+)/ig, function ($1) {
        return obj[$1]
    });
}

46.驗證郵箱的正則表達式

function isAvailableEmail(sEmail) {
    var reg = /^([w+.])+@w+([.]w+)+$/
    return reg.test(sEmail)
}

47.函數柯里化

//是把接受多個參數的函數變換成接受一個單一參數(最初函數的第一個參數)的函數，并且返回接受余下的參數且返回結果的新函數的技術

function curryIt(fn) {
    var length = fn.length,
        args = [];
    var result = function (arg) {
        args.push(arg);
        length--;
        if (length <= 0) {
            return fn.apply(this, args);
        } else {
            return result;
        }
    }

return result;

48.大數相加

function sumBigNumber(a, b) {
    var res = "", //結果
        temp = 0; //按位加的結果及進位
    a = a.split("");
    b = b.split("");
    while (a.length || b.length || temp) {
        //~~按位非 1.類型轉換，轉換成數字 2.~~undefined==0 
        temp += ~~a.pop() + ~~b.pop();
        res = (temp % 10) + res;
        temp = temp > 9;
    }
    return res.replace(/^0+/, "");
}

49.單例模式

function getSingle(func) {
    var result;
    return function () {
        if (!result) {
            result = new func(arguments);
        }
        return result;
    }

## }

云服務器 GPU云服務器數據分析的一些方法 python封裝方法 js可以封裝方法么 java的一些代碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105869.html

封裝一些有用的方法

摘要：輸入一個值，返回其數據類型數組去重字符串去重去除連續的字符串深拷貝淺拷貝深克隆深克隆不考慮函數引用值且不為對象數組原始值或深淺克隆是針對引用值數組對象無法復制函數底層原理和擴展改變原數組圣杯模式的繼承最終的原型指向找出字符串中第一 1.輸入一個值，返回其數據類型 function type(para) { return Object.prototype.toString.cal...

crossea 2019-08-02 15:34 評論0 收藏0
封裝一些有用的方法

摘要：輸入一個值，返回其數據類型數組去重字符串去重去除連續的字符串深拷貝淺拷貝深克隆深克隆不考慮函數引用值且不為對象數組原始值或深淺克隆是針對引用值數組對象無法復制函數底層原理和擴展改變原數組圣杯模式的繼承最終的原型指向找出字符串中第一 1.輸入一個值，返回其數據類型 function type(para) { return Object.prototype.toString.cal...

hoohack 2019-08-30 15:44 評論0 收藏0
jquery源碼分析

摘要：前言隨著前端的不斷發展，很多開發人員已經開始使用等框架，但是很少有人去深入分析以及的源碼本人也是，至今還停留在使用的層面。最近還在寫一些的筆記，有興趣的小白也可以看下我的博客文章源碼分析地址前言隨著前端的不斷發展，很多開發人員已經開始使用react、vue等web框架，但是很少有人去深入分析vue以及react的源碼（本人也是，至今還停留在使用的層面）。框架的使用勢必會有更新迭代的...

SHERlocked93 2019-08-22 16:35 評論0 收藏0
CSS技巧

摘要：技巧使你的更加專業這是上關于技巧的一篇譯文，另外你也可以在本項目看到原文。列舉了一些很實用的技巧，比如給空內容的標簽添加內容，逗號分隔列表等等。排序算法看源碼，把它背下來吧排序算法的封裝。主要幫助初學者更好的掌握排序算法的實現。成為專業程序員路上用到的各種優秀資料、神器及框架成為一名專業程序員的道路上，需要堅持練習、學習與積累，技術方面既要有一定的廣度，更要有自己的深度。 Java...

DangoSky 2019-08-22 11:15 評論0 收藏0