前端實用小工具

andot 發布于2019-08-23 15:14 / 1327人閱讀

摘要：類型判斷判斷的類型，單單用并無法完全滿足，這其實并不是，本質原因是的萬物皆對象的理論。獲取參數全局尺寸設置說明常用長度單位。

1、類型判斷

判斷 Target 的類型，單單用 typeof 并無法完全滿足，這其實并不是 bug，本質原因是 JS 的萬物皆對象的理論。因此要真正完美判斷時，我們需要區分對待:

基本類型(null): 使用 String(null)

基本類型(string / number / boolean /undefined) + function: 直接使用 typeof即可

其余引用類型(Array / Date / RegExp Error): 調用toString后根據[object XXX]進行判斷

很穩的判斷封裝:

let class2type = {}
"Array Date RegExp Object Error".split(" ").forEach(e => class2type[ "[object " + e + "]" ] = e.toLowerCase()) 

function type(obj) {
    if (obj == null) return String(obj)
    return typeof obj === "object" ? class2type[ Object.prototype.toString.call(obj) ] || "object" : typeof obj
}

2、防抖和節流
摘自https://segmentfault.com/a/11...

防抖 (debounce): 將多次高頻操作優化為只在最后一次執行，通常使用的場景是：用戶輸入，只需再輸入完成后做一次輸入校驗即可。

function debounce(fn, wait, immediate) {
    let timer = null

    return function() {
        let args = arguments
        let context = this

        if (immediate && !timer) {
            fn.apply(context, args)
        }

        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(context, args)
        }, wait)
    }
}

節流(throttle): 每隔一段時間后執行一次，也就是降低頻率，將高頻操作優化成低頻操作，通常使用場景: 滾動條事件或者 resize 事件，通常每隔 100~500 ms執行一次即可。

function throttle(fn, wait, immediate) {
    let timer = null
    let callNow = true
    
    return function() {
        let context = this,
            args = arguments

        if (callNow) {
            fn.apply(context, args)
            callNow = false
        }

        if (!timer) {
            timer = setTimeout(() => {
                fn.apply(context, args)
                timer = null
            }, wait)
        }
    }
}

3、獲取URL參數

function getUrlKey(name){
    return encodeURIComponent((new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(location.href)||[,""])[1].replace(/+g,"%20")) || null;
}

4、全局尺寸設置
說明：常用長度單位px、em、rem。其中px是物理像素，固定大小，無自適應特點；em是相對單位，以父元素大小為基準倍率，但累計疊乘，容易出錯；rem相對單位，以根元素大小為基準倍率（document.documentElement.style.fontSize），不疊加，可實現準確自適應。

;(function(win,doc){
    function setRem(){
        //以iphone6為標準，按屏幕大小實現屏幕基礎尺寸縮放，16px是文檔的默認尺寸（即1rem默認為16px），為方便計算可變更為50或者100（對應1rem=50px或者100px）
        doc.documentElement.style.fontSize = 16 * doc.documentElement.clientWidth / 375 + "px";
    }
    setRem();
    //監聽resize事件，屏幕大小發生變化時，隨時變換基礎尺寸
    win.addEventListener("resize",function(){
        setRem();
    },false);
})(window,document)

5、深拷貝數據
應用類型（array、object）按引用使用，不能復制，想要復制（深拷貝）需要新建對象，把目標的對象的屬性逐個拷貝。

function copyArr (arr){
    return arr.map((e) => {
        if(typeof e ==="object"){
            return Object.assign({},e)
        }else {
            return e
        }
    })
}

GPU云服務器云服務器 linux實用小工具實用小程序實用工具小程序的實用方法

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

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

前端實用小工具

摘要：類型判斷判斷的類型，單單用并無法完全滿足，這其實并不是，本質原因是的萬物皆對象的理論。獲取參數全局尺寸設置說明常用長度單位。 1、類型判斷判斷 Target 的類型，單單用 typeof 并無法完全滿足，這其實并不是 bug，本質原因是 JS 的萬物皆對象的理論。因此要真正完美判斷時，我們需要區分對待: 基本類型(null): 使用 String(null) 基本類型(string...

elarity 2019-08-30 15:55 評論0 收藏0
前端實用小工具

摘要：類型判斷判斷的類型，單單用并無法完全滿足，這其實并不是，本質原因是的萬物皆對象的理論。獲取參數全局尺寸設置說明常用長度單位。 1、類型判斷判斷 Target 的類型，單單用 typeof 并無法完全滿足，這其實并不是 bug，本質原因是 JS 的萬物皆對象的理論。因此要真正完美判斷時，我們需要區分對待: 基本類型(null): 使用 String(null) 基本類型(string...

meislzhua 2019-08-02 14:15 評論0 收藏0
前端最實用書簽(持續更新)

摘要：前言一直混跡社區突然發現自己收藏了不少好文但是管理起來有點混亂所以將前端主流技術做了一個書簽整理不求最多最全但求最實用。前言一直混跡社區,突然發現自己收藏了不少好文但是管理起來有點混亂; 所以將前端主流技術做了一個書簽整理,不求最多最全,但求最實用。書簽源碼書簽導入瀏覽器效果截圖showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 評論0 收藏0
前端工具【3】—— 圖片處理

摘要：切圖主要是用的工具就是等等，除此之外，在開發過程中我們也會用到其他工具，以下介紹一些有關于圖片處理的操作。是打開文件捕捉活動窗口捕獲窗口捕獲矩形區域，可自行截圖。新版的比之前那些版本增加了一鍵導出功能，這個功能很大程度方便了我們拆分圖片。在寫頁面之前，很重要的一個技能是切圖，根據UI設計的設計圖，在了解頁面結構和操作后進行分割，取出自己在開發過程中是用到的圖片資源。切圖主要是用的工具...

MobService 2019-08-02 16:05 評論0 收藏0
前端工具【3】—— 圖片處理

摘要：切圖主要是用的工具就是等等，除此之外，在開發過程中我們也會用到其他工具，以下介紹一些有關于圖片處理的操作。是打開文件捕捉活動窗口捕獲窗口捕獲矩形區域，可自行截圖。新版的比之前那些版本增加了一鍵導出功能，這個功能很大程度方便了我們拆分圖片。在寫頁面之前，很重要的一個技能是切圖，根據UI設計的設計圖，在了解頁面結構和操作后進行分割，取出自己在開發過程中是用到的圖片資源。切圖主要是用的工具...

Rango 2019-08-29 16:42 評論0 收藏0