首頁 > web前端 > uni-app > 主體

uniapp中使用的一些常見的公共js方法

PHPz
發布: 2023-04-20 09:39:03
原創
1673 人瀏覽過

隨著前端開發的不斷發展,越來越多的開發人員選擇使用uniapp開發跨平台應用程式。 uniapp是一個基於Vue.js框架的開發平台,它可以快速地創建需要同時在多個平台上運行的應用程式。在這種情況下,使用公共的js方法是實現程式碼重複使用和提高開發效率的有效方式。本文將介紹uniapp中所使用的一些常見的公共js方法。

一、 取得頁面參數

在uniapp中,我們可以透過uni.getStorageSync(key)方法輕鬆取得目前頁面的參數。例如,我們要取得頁面ID,可以透過以下程式碼實現:

const query = this.$mp.page.options;
const id = query.id;
登入後複製

這裡this.$mp.page.options表示目前頁面參數的集合,其中query.id就是參數中的id值,透過這種方式我們可以方便地取得頁面中的任何參數值。

二、 防止抖動方法

在一些功能複雜的頁面中,許多操作都會觸發事件,如果使用者頻繁點擊會導致資料的不穩定。這時,我們可以採取防止抖動方法,來解決這個問題。防手震是指在一段時間內,對同一個函數的多次呼叫只執行一次,通常情況下我們會採用定時器實作。如下所示:

var timer=null;
function debounce(fn,time){
    if(timer!=null){
        clearTimeout(timer)
    }

    timer=setTimeout(function(){
        fn()
    },time)
}

调用:

debounce(function(){
    console.log('防抖成功')
},1000)
登入後複製

上述程式碼中,debounce方法的作用是防止在短時間內多次執行這個函數,time是設定的時間視窗值,當函數呼叫後,wait毫秒內無論調用多少次,都只會執行一次函數。

三、 根據key值取得物件中對應的value值

在一些需要處理複雜資料結構的場景中,我們通常會遇到需要根據key值取得物件中對應的value值的需求。例如下面這個陣列:

let arr = [
    { name: '张三', age: 18 },
    { name: '李四', age: 19 },
    { name: '王五', age: 20 }
]
登入後複製

如果想取得name為李四的物件的age值,可以用以下程式碼實作:

function findValue(arr, key, value) {
    for (let i = 0; i < arr.length; i++) {
        if (arr[i][key] == value) {
            return arr[i]
        }
    }
    return null
}

var result = findValue(arr,'name','李四')
console.log(result.age) // 19
登入後複製

上述程式碼中,findValue方法的作用是在陣列中尋找符合條件的對象,並傳回這個對象。其中arr為數組,key為數組元素內的屬性名,value為要尋找的屬性值。

四、 判斷變數類型

在一些資料處理的場景中,我們需要判斷變數的類型,以便進行下一步操作。 JavaScript中typeof方法可以方便地取得變數的型別:

console.log(typeof 'uniapp') // string
console.log(typeof true) // boolean
console.log(typeof 1) // number
console.log(typeof undefined) // undefined
console.log(typeof null) // object
console.log(typeof {}) // object
console.log(typeof []) // object
console.log(typeof function() {}) // function
登入後複製

需要注意的是,typeof null的結果為'object',這是JavaScript的歷史問題。

綜上所述,以上四種公共js方法在uniapp開發中常會用到,可以大幅提升開發效率。希望這篇文章能夠對你有幫助。

以上是uniapp中使用的一些常見的公共js方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!