수집할 가치가 있는 15가지 유용한 JavaScript 코드 조각(프로젝트에 필수)-JS 튜토리얼-php.cn

이 기사에서는 프로젝트 엔지니어링에 필수적인 15가지 JavaScript 코드 조각을 공유하겠습니다. 도움이 되기를 바랍니다.

수집할 가치가 있는 15가지 유용한 JavaScript 코드 조각(프로젝트에 필수)

1. 엑셀 문서 다운로드

브라우저가 기본적으로 미리보기를 실행하지 않는 워드, ppt 및 기타 문서에도 적합합니다. 백엔드 인터페이스에서 반환되는 스트림 데이터를 다운로드하는 데에도 사용할 수 있습니다. , 3 code><code>3

//下载一个链接 
function download(link, name) {
    if(!name){
            name=link.slice(link.lastIndexOf(&#39;/&#39;) + 1)
    }
    let eleLink = document.createElement(&#39;a&#39;)
    eleLink.download = name
    eleLink.style.display = &#39;none&#39;
    eleLink.href = link
    document.body.appendChild(eleLink)
    eleLink.click()
    document.body.removeChild(eleLink)
}
//下载excel
download(&#39;http://111.229.14.189/file/1.xlsx&#39;)

로그인 후 복사

2. 在浏览器中自定义下载一些内容

场景：我想下载一些DOM内容，我想下载一个JSON文件

/**
 * 浏览器下载静态文件
 * @param {String} name 文件名
 * @param {String} content 文件内容
 */
function downloadFile(name, content) {
    if (typeof name == &#39;undefined&#39;) {
        throw new Error(&#39;The first parameter name is a must&#39;)
    }
    if (typeof content == &#39;undefined&#39;) {
        throw new Error(&#39;The second parameter content is a must&#39;)
    }
    if (!(content instanceof Blob)) {
        content = new Blob([content])
    }
    const link = URL.createObjectURL(content)
    download(link, name)
}
//下载一个链接
function download(link, name) {
    if (!name) {//如果没有提供名字，从给的Link中截取最后一坨
        name =  link.slice(link.lastIndexOf(&#39;/&#39;) + 1)
    }
    let eleLink = document.createElement(&#39;a&#39;)
    eleLink.download = name
    eleLink.style.display = &#39;none&#39;
    eleLink.href = link
    document.body.appendChild(eleLink)
    eleLink.click()
    document.body.removeChild(eleLink)
}

로그인 후 복사

使用方式：

downloadFile(&#39;1.txt&#39;,&#39;lalalallalalla&#39;)
downloadFile(&#39;1.json&#39;,JSON.stringify({name:&#39;hahahha&#39;}))

로그인 후 복사

3. 下载后端返回的流

数据是后端以接口的形式返回的,调用1中的download方法进行下载

 download(&#39;http://111.229.14.189/gk-api/util/download?file=1.jpg&#39;)
 download(&#39;http://111.229.14.189/gk-api/util/download?file=1.mp4&#39;)

로그인 후 복사

4. 提供一个图片链接，点击下载

图片、pdf等文件，浏览器会默认执行预览，不能调用download方法进行下载，需要先把图片、pdf等文件转成blob，再调用download方法进行下载，转换的方式是使用axios请求对应的链接

//可以用来下载浏览器会默认预览的文件类型，例如mp4,jpg等
import axios from &#39;axios&#39;
//提供一个link，完成文件下载，link可以是  http://xxx.com/xxx.xls
function downloadByLink(link,fileName){
    axios.request({
        url: link,
        responseType: &#39;blob&#39; //关键代码，让axios把响应改成blob
    }).then(res => {
	const link=URL.createObjectURL(res.data)
        download(link, fileName)
    })

}

로그인 후 복사

注意：会有同源策略的限制，需要配置转发

5 防抖

在一定时间间隔内，多次调用一个方法，只会执行一次.

这个方法的实现是从Lodash库中copy的

/**
 *
 * @param {*} func 要进行debouce的函数
 * @param {*} wait 等待时间,默认500ms
 * @param {*} immediate 是否立即执行
 */
export function debounce(func, wait=500, immediate=false) {
    var timeout
    return function() {
        var context = this
        var args = arguments

        if (timeout) clearTimeout(timeout)
        if (immediate) {
            // 如果已经执行过，不再执行
            var callNow = !timeout
            timeout = setTimeout(function() {
                timeout = null
            }, wait)
            if (callNow) func.apply(context, args)
        } else {
            timeout = setTimeout(function() {
                func.apply(context, args)
            }, wait)
        }
    }
}

로그인 후 복사

使用方式：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <input id="input" />
        <script>
            function onInput() {
                console.log(&#39;1111&#39;)
            }
            const debounceOnInput = debounce(onInput)
            document
                .getElementById(&#39;input&#39;)
                .addEventListener(&#39;input&#39;, debounceOnInput) //在Input中输入，多次调用只会在调用结束之后，等待500ms触发一次   
        </script>
    </body>
</html>

로그인 후 복사

如果第三个参数immediate传true，则会立即执行一次调用，后续的调用不会在执行，可以自己在代码中试一下

6 节流

多次调用方法，按照一定的时间间隔执行

这个方法的实现也是从Lodash库中copy的

/**
 * 节流，多次触发，间隔时间段执行
 * @param {Function} func
 * @param {Int} wait
 * @param {Object} options
 */
export function throttle(func, wait=500, options) {
    //container.onmousemove = throttle(getUserAction, 1000);
    var timeout, context, args
    var previous = 0
    if (!options) options = {leading:false,trailing:true}

    var later = function() {
        previous = options.leading === false ? 0 : new Date().getTime()
        timeout = null
        func.apply(context, args)
        if (!timeout) context = args = null
    }

    var throttled = function() {
        var now = new Date().getTime()
        if (!previous && options.leading === false) previous = now
        var remaining = wait - (now - previous)
        context = this
        args = arguments
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout)
                timeout = null
            }
            previous = now
            func.apply(context, args)
            if (!timeout) context = args = null
        } else if (!timeout && options.trailing !== false) {
            timeout = setTimeout(later, remaining)
        }
    }
    return throttled
}

로그인 후 복사

第三个参数还有点复杂，options

leading，函数在每个等待时延的开始被调用，默认值为false
trailing，函数在每个等待时延的结束被调用，默认值是true

可以根据不同的值来设置不同的效果：

leading-false，trailing-true：默认情况，即在延时结束后才会调用函数
leading-true，trailing-true：在延时开始时就调用，延时结束后也会调用
leading-true, trailing-false：只在延时开始时调用

例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <input id="input" />
        <script>
            function onInput() {
                console.log(&#39;1111&#39;)
            }
            const throttleOnInput = throttle(onInput)
            document
                .getElementById(&#39;input&#39;)
                .addEventListener(&#39;input&#39;, throttleOnInput) //在Input中输入，每隔500ms执行一次代码
        </script> 
    </body>
</html>

로그인 후 복사

7. cleanObject

去除对象中value为空(null,undefined,'')的属性,举个栗子：

let res=cleanObject({
    name:&#39;&#39;,
    pageSize:10,
    page:1
})
console.log("res", res) //输入{page:1,pageSize:10}   name为空字符串，属性删掉

로그인 후 복사

使用场景是：后端列表查询接口，某个字段前端不传，后端就不根据那个字段筛选，例如name不传的话，就只根据page和pageSize筛选，但是前端查询参数的时候（vue或者react）中，往往会这样定义

export default{
    data(){
        return {
            query:{
                name:&#39;&#39;,
                pageSize:10,
                page:1
            }
        }
    }
}


const [query,setQuery]=useState({name:&#39;&#39;,page:1,pageSize:10})

로그인 후 복사

给后端发送数据的时候，要判断某个属性是不是空字符串，然后给后端拼参数，这块逻辑抽离出来就是cleanObject

export const isFalsy = (value) => (value === 0 ? false : !value);

export const isVoid = (value) =>
  value === undefined || value === null || value === "";

export const cleanObject = (object) => {
  // Object.assign({}, object)
  if (!object) {
    return {};
  }
  const result = { ...object };
  Object.keys(result).forEach((key) => {
    const value = result[key];
    if (isVoid(value)) {
      delete result[key];
    }
  });
  return result;
};

로그인 후 복사

2를 참조하세요. 브라우저에서 일부 콘텐츠 다운로드 맞춤설정

시나리오: 일부 DOM 콘텐츠를 다운로드하고 싶습니다. JSON 파일을 다운로드하고 싶습니다

let res=cleanObject({
    name:&#39;&#39;,
    pageSize:10,
    page:1
})
console.log("res", res) //输入{page:1,pageSize:10}

로그인 후 복사

사용법:

/**
 * 获取文件后缀名
 * @param {String} filename
 */
 export function getExt(filename) {
    if (typeof filename == &#39;string&#39;) {
        return filename
            .split(&#39;.&#39;)
            .pop()
            .toLowerCase()
    } else {
        throw new Error(&#39;filename must be a string type&#39;)
    }
}

로그인 후 복사

3 . 백엔드에서 반환된 스트림을 다운로드합니다.

데이터는 인터페이스 형식으로 백엔드에서 반환됩니다. 다운로드하려면 1에서 다운로드 메소드를 호출하세요. 4. 이미지 링크를 제공하고 클릭하세요.

이미지, PDF 및 기타 파일을 다운로드하려면 브라우저 미리보기가 기본적으로 실행되며 다운로드를 위해 다운로드 메소드를 호출할 수 없습니다. 먼저 이미지, PDF 및 기타 파일을 Blob으로 변환한 다음 다운로드 메소드를 호출하여 다운로드해야 합니다. 다운로드 변환 방법은 axios를 사용하여 해당 링크를 요청하는 것입니다

getExt("1.mp4") //->mp4

로그인 후 복사

참고: 동일한 소스가 있습니다. 정책 제한으로 전달 구성이 필요합니다

5 흔들림 방지
특정 시간 내에 메서드가 여러 번 호출되는 경우 간격을 두고 한 번만 실행됩니다.

이 메소드의 구현은 Lodash 라이브러리

export function copyToBoard(value) {
    const element = document.createElement(&#39;textarea&#39;)
    document.body.appendChild(element)
    element.value = value
    element.select()
    if (document.execCommand(&#39;copy&#39;)) {
        document.execCommand(&#39;copy&#39;)
        document.body.removeChild(element)
        return true
    }
    document.body.removeChild(element)
    return false
}

로그인 후 복사

사용법:

//如果复制成功返回true
copyToBoard(&#39;lalallala&#39;)

로그인 후 복사

세 번째 매개변수 immediate가 true를 통과하면 호출이 실행됩니다. 즉시 호출하면 후속 호출은 실행되지 않습니다. library

/**
 * 休眠xxxms
 * @param {Number} milliseconds
 */
export function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms))
}

//使用方式
const fetchData=async()=>{
	await sleep(1000)
}

로그인 후 복사

세 번째 매개변수는 약간 복잡합니다. options

이행 함수는 대기 지연이 시작될 때마다 호출됩니다. 기본값은 false

trailing입니다. . 이 함수는 대기 지연이 끝날 때마다 호출됩니다. 기본값은 true입니다.

다른 값에 따라 다른 효과를 설정할 수 있습니다:

< ul>

leading-false, trailing-true: 기본적으로 함수는 지연이 끝난 후에 호출됩니다

leading-true, trailing-true: 지연이 시작될 때 호출되고 지연이 끝난 후에도 호출됩니다

leading-true, trailing-false: 처음에만 호출됩니다 지연

예:

/**
 * 生成随机id
 * @param {*} length
 * @param {*} chars
 */
export function uuid(length, chars) {
    chars =
        chars ||
        &#39;0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ&#39;
    length = length || 8
    var result = &#39;&#39;
    for (var i = length; i > 0; --i)
        result += chars[Math.floor(Math.random() * chars.length)]
    return result
}

로그인 후 복사

7. cleanObject

객체에서 값이 비어 있는(null, 정의되지 않음, '') 속성을 제거합니다. 예:

//第一个参数指定位数，第二个字符串指定字符，都是可选参数，如果都不传，默认生成8位
uuid()

로그인 후 복사

사용 시나리오는 백엔드 목록입니다. 쿼리 인터페이스. 특정 필드가 프런트엔드에 전달되지 않으면 백엔드는 해당 필드를 기준으로 필터링하지 않습니다. 예를 들어 name이 전달되지 않으면 해당 필드만 기반으로 합니다. page 및 pageSize 필터를 사용하지만 프런트엔드에서 매개변수(vue 또는 React)를 쿼리할 때 이렇게 정의하는 경우가 많습니다.

/**
 *深拷贝
 * @export
 * @param {*} obj
 * @returns
 */
export function deepCopy(obj) {
    if (typeof obj != &#39;object&#39;) {
        return obj
    }
    if (obj == null) {
        return obj
    }
    return JSON.parse(JSON.stringify(obj))
}

로그인 후 복사

데이터를 백엔드로 보낼 때 , 특정 속성이 빈 문자열인지 확인한 후 백엔드에 대한 매개변수를 철자해야 합니다. 이 로직은 cleanObject로 추출됩니다. 코드는 다음과 같이 구현됩니다. 파일 접미사 이름

사용 시나리오: 파일을 업로드하여 접미사 이름

const person={name:&#39;xiaoming&#39;,child:{name:&#39;Jack&#39;}}
deepCopy(person) //new person

로그인 후 복사

Usage

/**
 * 数组去重
 * @param {*} arr
 */
export function uniqueArray(arr) {
    if (!Array.isArray(arr)) {
        throw new Error(&#39;The first parameter must be an array&#39;)
    }
    if (arr.length == 1) {
        return arr
    }
    return [...new Set(arr)]
}

로그인 후 복사

9 콘텐츠를 클립보드에 복사합니다.

uniqueArray([1,1,1,1,1])//[1]

로그인 후 복사

사용법:

/**
 * 对象转化为formdata
 * @param {Object} object
 */

 export function getFormData(object) {
    const formData = new FormData()
    Object.keys(object).forEach(key => {
        const value = object[key]
        if (Array.isArray(value)) {
            value.forEach((subValue, i) =>
                formData.append(key + `[${i}]`, subValue)
            )
        } else {
            formData.append(key, object[key])
        }
    })
    return formData
}

로그인 후 복사

원리:

textare 요소를 만들고 호출합니다. select() 메소드를 사용하여 🎜🎜🎜🎜document.execCommand('copy' ) 메소드를 선택하면 현재 선택된 내용을 클립보드에 복사합니다. 🎜🎜🎜🎜10. 잠자기 시간은 몇 밀리초🎜

let req={
    file:xxx,
    userId:1,
    phone:&#39;15198763636&#39;,
    //...
}
fetch(getFormData(req))

로그인 후 복사

🎜11. 무작위 문자열 생성🎜

// 保留小数点以后几位，默认2位
export function cutNumber(number, no = 2) {
    if (typeof number != &#39;number&#39;) {
        number = Number(number)
    }
    return Number(number.toFixed(no))
}

로그인 후 복사

🎜사용 방법🎜rrreee🎜사용 시나리오: 결국 Vue와 React 모두 이제 필요합니다. 키 바인딩🎜🎜 12. 단순 딥 카피🎜rrreee🎜결함: 객체, 배열, 객체 배열만 복사합니다. 이는 대부분의 시나리오에 충분합니다.🎜rrreee🎜13 배열 중복 제거의 원리🎜rrreee🎜는 이 기능을 활용하는 것입니다. 중복 요소는 Set🎜rrreee 🎜14에 나타날 수 없습니다. 개체를 FormData 개체로 변환🎜rrreee🎜사용 시나리오: 파일을 업로드할 때 새 FormData 개체를 만든 다음 매개 변수만큼 추가해야 합니다. . 이 함수를 사용하면 논리를 단순화할 수 있습니다🎜🎜사용법: 🎜rrreee🎜15. 소수점 이하 n자리를 유지합니다. 🎜rrreee🎜사용 시나리오: JS의 부동 소수점 숫자는 매우 길며 때로는 소수점 2자리를 유지해야 합니다. 페이지를 표시할 때🎜🎜🎜참고: 🎜위의 코드 조각은 프로젝트에서 테스트되었으며 프로젝트에서 안심하고 사용할 수 있습니다. 🎜🎜🎜원본 주소: https://juejin.cn/post/7000919400249294862#heading-3🎜🎜저자: _Red Scarf🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 수집할 가치가 있는 15가지 유용한 JavaScript 코드 조각(프로젝트에 필수)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!