15 coretan kod JavaScript berguna yang patut dikumpulkan (mesti ada untuk projek)-tutorial js-php.cn

Artikel ini akan berkongsi dengan anda 15 coretan kod JavaScript yang penting untuk kejuruteraan projek saya harap ia akan membantu anda!

15 coretan kod JavaScript berguna yang patut dikumpulkan (mesti ada untuk projek)

1 Muat turun dokumen excel

Ia juga sesuai untuk dokumen word, ppt dan lain-lain yang penyemak imbas tidak pratonton secara lalai, dan juga boleh dipratonton. digunakan selepas memuat turun Untuk data strim yang dikembalikan oleh antara muka akhir, lihat 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;)

Salin selepas log masuk

2. Sesuaikan memuat turun beberapa kandungan dalam penyemak imbas

Senario: Saya ingin memuat turun beberapa kandungan DOM , saya ingin memuat turun fail 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)
}

Salin selepas log masuk

Penggunaan:

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

Salin selepas log masuk

3. Muat turun strim yang dikembalikan oleh bahagian belakang

Data dikembalikan oleh bahagian belakang dalam bentuk antara muka, panggil < Gunakan kaedah muat turun dalam 🎜> untuk memuat turun 1

 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;)

Salin selepas log masuk

4. Sediakan pautan gambar dan klik untuk memuat turun

gambar, pdf dan fail lain. Penyemak imbas akan melakukan pratonton secara lalai dan kaedah muat turun tidak boleh dipanggil Untuk memuat turun, anda perlu terlebih dahulu menukar imej, pdf dan fail lain ke dalam gumpalan, dan kemudian memanggil kaedah muat turun untuk memuat turun pautan yang sepadan

//可以用来下载浏览器会默认预览的文件类型，例如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)
    })

}

Salin selepas log masuk

Nota: Akan ada sekatan pada dasar asal yang sama Perlu mengkonfigurasi pemajuan

5 Anti goncang

Dalam selang masa tertentu, jika kaedah dipanggil beberapa kali, ia hanya akan dilaksanakan sekali.

Pelaksanaan kaedah ini adalah daripada perpustakaan Lodash Cara menggunakan salinan

/**
 *
 * @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)
        }
    }
}

Salin selepas log masuk

<!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>

Salin selepas log masuk

Jika parameter ketiga

diluluskan benar, panggilan akan dilaksanakan serta-merta, dan panggilan berikutnya tidak akan dilaksanakan Anda boleh Cuba sendiri dalam kodimmediate

6 Pendikit

<. 🎜>Panggil kaedah beberapa kali dan laksanakannya pada selang masa tertentu

Pelaksanaan kaedah ini juga disalin daripada perpustakaan Lodash

Parameter ketiga agak rumit,

/**
 * 节流，多次触发，间隔时间段执行
 * @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
}

Salin selepas log masuk

options

memimpin, fungsi dipanggil pada permulaan setiap kelewatan menunggu, nilai lalai adalah palsu

mengikut, fungsi dipanggil pada penghujung setiap kelewatan menunggu . Nilai lalai adalah benar

memimpin -salah, mengekori-benar: Secara lalai, fungsi akan dipanggil selepas kelewatan tamat

memimpin-benar, mengekori-benar: Ia akan dipanggil pada permulaan kelewatan dan juga akan dipanggil selepas kelewatan tamat
memimpin-benar, mengekor- false: hanya panggil

7 cleanObject

<!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>

Salin selepas log masuk

penyingkiran Atribut yang nilainya dalam objek kosong (null, undefined, ''), contohnya:

Senario penggunaan ialah: antara muka pertanyaan senarai hujung belakang, jika medan tertentu tidak dihantar ke hujung hadapan, hujung belakang tidak akan Tapis berdasarkan medan tersebut. Contohnya, jika

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

Salin selepas log masuk

tidak diluluskan, ia hanya akan ditapis berdasarkan

dan name Walau bagaimanapun, apabila menanya parameter pada bahagian hadapan (vue atau react), pagepageSize<🎜 sering ditakrifkan seperti ini >Apabila menghantar data ke bahagian belakang, anda perlu menentukan sama ada atribut tertentu ialah rentetan kosong, dan kemudian mengeja parameter untuk bahagian belakang Logik ini diekstrak sebagai

, dan kod tersebut dilaksanakan seperti berikut

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


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

Salin selepas log masuk

cleanObject

8 Dapatkan nama akhiran fail

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;
};

Salin selepas log masuk

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

Salin selepas log masuk

Senario penggunaan: muat naik fail untuk menentukan nama akhiran

Kaedah penggunaan

/**
 * 获取文件后缀名
 * @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;)
    }
}

Salin selepas log masuk

9 Salin kandungan ke papan keratan

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

Salin selepas log masuk

Penggunaan:

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
}

Salin selepas log masuk

Prinsip:

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

Salin selepas log masuk

Buat elemen textare dan panggil kaedah pilih() untuk memilih kaedah

document.execCommand('copy'), salin kandungan yang dipilih pada papan keratan.
10. Berapa milisaat untuk tidur

11 Hasilkan rentetan rawak

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

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

Salin selepas log masuk

Penggunaan

/**
 * 生成随机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
}

Salin selepas log masuk

<. 🎜>Senario penggunaan: digunakan untuk menjana ID rawak pada bahagian hadapan Lagipun, kedua-dua Vue dan React kini perlu mengikat kunci

12 salinan dalam ringkas

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

Salin selepas log masuk

Kecacatan: sahaja salin objek , tatasusunan dan tatasusunan objek adalah mencukupi untuk kebanyakan senario

/**
 *深拷贝
 * @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))
}

Salin selepas log masuk

13 Prinsip penyahduplikasian tatasusunan

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

Salin selepas log masuk

adalah untuk memanfaatkan ciri yang unsur pendua tidak boleh muncul. dalam Set

/**
 * 数组去重
 * @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)]
}

Salin selepas log masuk

14 Tukar objek kepada objek FormData

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

Salin selepas log masuk

Senario penggunaan: Apabila memuat naik fail, kita perlu mencipta objek FormData baharu, dan kemudian tambahkannya. seberapa banyak yang terdapat parameter. Menggunakan fungsi ini boleh memudahkan logik

Penggunaan:

/**
 * 对象转化为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
}

Salin selepas log masuk

15 hingga n digit selepas titik perpuluhan

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

Salin selepas log masuk

Senario penggunaan: Nombor titik terapung JS terlalu panjang, kadangkala apabila halaman dipaparkan 2 tempat perpuluhan perlu dikekalkan

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

Salin selepas log masuk

Nota:

Coretan kod di atas telah diuji oleh projek dan boleh digunakan dalam projek dengan yakin.

Alamat asal: https://juejin.cn/post/7000919400249294862#heading-3

Penulis: _Red Scarf

Lebih banyak berkaitan pengaturcaraan pengetahuan, sila layari:
Video Pengaturcaraan
! !

Atas ialah kandungan terperinci 15 coretan kod JavaScript berguna yang patut dikumpulkan (mesti ada untuk projek). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!