常用的js方法

易小星發表於2018-08-15
JS

在易企秀工作了快兩年了，做過不同的專案，接觸過不同的框架，發現有許多基礎的方法使用率很高，今天簡單的總結一部分（不全，以後慢慢補吧）。

一，判斷當前元素是否是陣列

1，通過 constructor 判斷

function isArray(value) {
    return value && typeof value == 'object' && value.constructor === Array
}
複製程式碼

2，通過instanceof 判斷判斷

function isArray(value) {
    return value && typeof value == 'object' && value instanceof Array
}
複製程式碼

3，通過 toString 判斷

function isArray(value) {
    return Array.isArray(value) || (typeof value == 'object' && Object.prototype.toString.call(value) === '[object Array]')
}
複製程式碼

二，判斷是否是物件

function isObject(value) {
    return value != null && typeof value === 'object' && Object.prototype.toString.call(value) === '[object Object]'
}
複製程式碼

三，判斷瀏覽器環境

1，判斷是否安卓

function isAndroid() {
    return /Android/i.test(navigator.userAgent) || /Linux/i.test(navigator.appVersion);
}
複製程式碼

2，判斷是否ios

function isIOS() {
    return (/ipad|iphone/i.test(navigator.userAgent));
}
複製程式碼

3，判斷是否是Safari

function isSafari() {
    return (/msie|applewebkit.+safari/i.test(navigator.userAgent));
}
複製程式碼

4，判斷是否在微信

function isWeixin() {
    return /MicroMessenger/i.test(navigator.userAgent);
}
複製程式碼

三，使用promise封裝ajax(對jq的ajax的封裝)

1，普通的封裝

function $ajax(config) {
    return new Promise(function (resolve, reject) {
        $.ajax($.extend({}, config, {
            success: function (data) {
                if (data && data.success === false) {
                    reject(data);
                } else {
                    resolve(data);
                }
            },
            error: function (...args) {
                console.error(config, ...args);
                reject(...args);
            }
        }));
    });
}
複製程式碼

2，新增跨域的ajax

function ajax(config) {
    return new Promise(function (resolve, reject) {
        $.ajax($.extend(
            {
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true
            },
            config,
            {
                success: function (data) {
                    if (data && data.success === false) {
                        reject(data);
                    } else {
                        resolve(data);
                    }
                },
                error: function (...args) {
                    console.error(config, ...args);
                    reject(...args);
                }
            }));
    });
}
複製程式碼

對於ajax請求，我們可能直接將後續的一些業務邏輯直接寫在了ajax的會調裡，如果業務邏輯比較複雜，就會造成程式碼巢狀層級較深，不好閱讀與維護。這裡我們用promise對ajax進行簡單的封裝，這樣我們將後續的業務寫在then()裡，可以避免‘回撥地獄’的產生。

四，物件的深拷貝

1，對於object

// 簡單粗暴，一步到位
JSON.parse(JSON.stringify(obj));
複製程式碼

2，對於陣列，我們可以用Array.slice()，Array.concat()，ES6擴充套件運算子...來實現。

以上大概是目前來說運用的最多的一些公用方法，可能實現方法不是最好的，這裡僅供參考。還有許多通用的方法，這裡只想起這麼多了，以後再慢慢補充吧。

相關文章