>웹 프론트엔드 >uni-app >uniapp에서 사용되는 몇 가지 일반적인 공개 js 메소드

uniapp에서 사용되는 몇 가지 일반적인 공개 js 메소드

PHPz
PHPz원래의
2023-04-20 09:08:261699검색

프론트 엔드 개발이 지속적으로 발전함에 따라 점점 더 많은 개발자가 크로스 플랫폼 애플리케이션을 개발하기 위해 uniapp을 선택하고 있습니다. uniapp은 Vue.js 프레임워크를 기반으로 하는 개발 플랫폼으로, 동시에 여러 플랫폼에서 실행되어야 하는 애플리케이션을 빠르게 생성할 수 있습니다. 이 경우 공개 js 메소드를 사용하는 것이 코드 재사용을 달성하고 개발 효율성을 향상시키는 효과적인 방법입니다. 이 기사에서는 uniapp에서 사용되는 몇 가지 일반적인 공개 js 메소드를 소개합니다.

1. 페이지 매개변수 가져오기

uniapp에서는 uni.getStorageSync(key) 메소드를 통해 쉽게 현재 페이지의 매개변수를 가져올 수 있습니다. 예를 들어 페이지 ID를 얻으려면 다음 코드를 통해 얻을 수 있습니다.

const query = this.$mp.page.options;
const id = query.id;

여기서 this.$mp.page.options는 현재 페이지 매개변수의 컬렉션을 나타내며, 여기서 query.id는 ID 값입니다. 이 방법으로 페이지의 모든 매개변수 값을 편리하게 얻을 수 있습니다.

2. 지터 방지 방법

복잡한 기능이 포함된 일부 페이지에서는 많은 작업이 이벤트를 유발하므로 사용자가 자주 클릭하면 데이터가 불안정해질 수 있습니다. 이때, 이 문제를 해결하기 위해 지터를 방지하는 방법을 사용할 수 있습니다. 흔들림 방지는 동일한 함수에 대한 여러 호출이 일정 시간 내에 한 번만 실행된다는 것을 의미합니다. 일반적으로 이를 달성하기 위해 타이머를 사용합니다. 아래와 같이

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

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

调用:

debounce(function(){
    console.log('防抖成功')
},1000)

위 코드에서 디바운스 메소드의 기능은 이 함수가 짧은 시간 내에 여러 번 실행되는 것을 방지하는 것입니다. 시간은 함수 호출 시 설정된 시간 창 값입니다. 대기 시간(밀리초) 내에 몇 번 호출되더라도 이 함수는 한 번만 실행됩니다.

3. 키 값을 기반으로 개체에서 해당 값을 가져옵니다

복잡한 데이터 구조를 처리해야 하는 일부 시나리오에서는 일반적으로 키 값을 기반으로 개체에서 해당 값을 가져와야 하는 경우가 있습니다. 예를 들어 다음 배열은 다음과 같습니다.

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

Li Si라는 객체의 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는 찾을 속성 값입니다.

4. 변수 유형 결정

일부 데이터 처리 시나리오에서는 다음 단계를 진행하기 위해 변수 유형을 결정해야 합니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.