简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  15 nützliche JavaScript-Codeschnipsel, die es wert sind, gesammelt zu werden (ein Muss für Projekte)

15 nützliche JavaScript-Codeschnipsel, die es wert sind, gesammelt zu werden (ein Muss für Projekte)

青灯夜游
青灯夜游nach vorne
2021-09-10 10:58:571545Durchsuche

Dieser Artikel stellt Ihnen 15 JavaScript-Codeausschnitte vor, die für die Projektentwicklung unerlässlich sind. Ich hoffe, er wird Ihnen hilfreich sein!

15 nützliche JavaScript-Codeschnipsel, die es wert sind, gesammelt zu werden (ein Muss für Projekte)

1. Laden Sie ein Excel-Dokument herunter

Es eignet sich auch für Word-, PPT- und andere Dokumente, bei denen Browser standardmäßig keine Vorschau ausführen. Es kann auch zum Herunterladen der von der Back-End-Schnittstelle zurückgegebenen Stream-Daten verwendet werden , siehe 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. Anpassen des Herunterladens einiger Inhalte im Browser

Szenario: Ich möchte einige DOM-Inhalte herunterladen, ich möchte eine JSON-Datei herunterladen

let res=cleanObject({
    name:'',
    pageSize:10,
    page:1
})
console.log("res", res) //输入{page:1,pageSize:10}
Verwendung: 

/**
 * 获取文件后缀名
 * @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 . Laden Sie den vom Backend zurückgegebenen Stream herunter. Die Daten werden vom Backend in Form einer Schnittstelle zurückgegeben. Rufen Sie die Download-Methode in 1 auf, um einen Bildlink bereitzustellen Um

Bilder, PDFs und andere Dateien herunterzuladen, wird standardmäßig die Browservorschau ausgeführt und die Download-Methode kann nicht zum Herunterladen aufgerufen werden. Sie müssen zuerst Bilder, PDFs und andere Dateien in Blobs konvertieren und dann die Download-Methode aufrufen Download. Die Konvertierungsmethode besteht darin, Axios zu verwenden, um den entsprechenden Link anzufordern. 

getExt("1.mp4") //->mp4
, es wird nur einmal ausgeführt.

Die Implementierung dieser Methode wird aus der Lodash-Bibliothek kopiert

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
}
    Verwendung: 
  • //如果复制成功返回true
copyToBoard(&#39;lalallala&#39;)

    Wenn der dritte Parameter immediate true übergibt, wird ein Aufruf sofort ausgeführt , und nachfolgende Aufrufe werden nicht ausgeführt. Sie können es selbst im Code versuchen 

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

//使用方式
const fetchData=async()=>{
	await sleep(1000)
}
    • Der dritte Parameter ist etwas kompliziert, options

    • führend, die Funktion wird zu Beginn jeder Warteverzögerung aufgerufen. Der Standardwert ist false

    • nachfolgend. Die Funktion wird am Ende jeder Warteverzögerung aufgerufen. Der Standardwert ist true Wird aufgerufen, nachdem die Verzögerung endet die Verzögerung

Beispiel: 

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

Entfernen Sie die Attribute, deren Wert leer ist (null, undefiniert, ''), zum Beispiel: 

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

Das Verwendungsszenario ist: Back-End-Listenabfrage Schnittstelle: Wenn ein bestimmtes Feld nicht an das Front-End übergeben wird, filtert das Back-End nicht basierend auf diesem Feld. Wenn beispielsweise name nicht übergeben wird, basiert es nur auf page und pageSize filtern, aber wenn das Front-End Parameter (Vue oder React) abfragt, wird es oft so definiert 

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

Beim Senden von Daten an das Back-End, Es ist notwendig, festzustellen, ob ein bestimmtes Attribut ein leerer String ist, und dann die Parameter für das Backend zu buchstabieren. Diese Logik wird wie folgt implementiert: 

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

8 Suffixname

Verwendungsszenario: Laden Sie die Datei hoch, um den Suffixnamen zu ermitteln

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

Verwendung

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

9. Kopieren Sie den Inhalt in die Zwischenablage 

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

Prinzip:

Erstellen Sie einen Text sind Element und nennen das select()-Methode zum Auswählen von

document.execCommand('copy')-Methode, kopiert den aktuell ausgewählten Inhalt in die Zwischenablage.

10. Wie viele Millisekunden bis zum Schlafengehen

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

Wie man es benutzt zum Binden von Schlüsseln

12. Einfaches tiefes Kopieren

// 保留小数点以后几位，默认2位
export function cutNumber(number, no = 2) {
    if (typeof number != &#39;number&#39;) {
        number = Number(number)
    }
    return Number(number.toFixed(no))
}
Fehler: Kopiert nur Objekte, Arrays und Objekt-Arrays, was für die meisten Szenarien ausreichtrrreee

13. Das Prinzip der Array-Deduplizierung🎜rrreee🎜besteht darin, die Funktion zu nutzen dass doppelte Elemente nicht in Set erscheinen können🎜rrreee 🎜14. Konvertieren Sie das Objekt in ein FormData-Objekt🎜rrreee🎜Verwendungsszenario: Beim Hochladen einer Datei müssen wir ein neues FormData-Objekt erstellen und es dann so oft anhängen, wie Parameter vorhanden sind . Die Verwendung dieser Funktion kann die Logik vereinfachen🎜🎜Verwendung: 🎜rrreee🎜15. Behalten Sie n Nachkommastellen bei 🎜rrreee🎜Verwendungsszenario: Die Gleitkommazahl von JS ist sehr lang, manchmal ist es notwendig, 2 Dezimalstellen beizubehalten beim Anzeigen der Seite🎜🎜🎜Hinweis: 🎜Die oben genannten Codeausschnitte wurden vom Projekt getestet und können bedenkenlos im Projekt verwendet werden. 🎜🎜🎜Originaladresse: https://juejin.cn/post/7000919400249294862#heading-3🎜🎜Autor: _Red Scarf🎜🎜🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt von15 nützliche JavaScript-Codeschnipsel, die es wert sind, gesammelt zu werden (ein Muss für Projekte). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Dieser Artikel ist reproduziert unter:掘金--_红领巾. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Erfahren Sie mehr über asynchrone Programmierung in Node.js und teilen Sie vier LösungenNächster Artikel：Erfahren Sie mehr über asynchrone Programmierung in Node.js und teilen Sie vier Lösungen

In Verbindung stehende Artikel

Mehr sehen