简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  15 extraits de code JavaScript utiles qui valent la peine d'être collectés (indispensables pour les projets)

15 extraits de code JavaScript utiles qui valent la peine d'être collectés (indispensables pour les projets)

青灯夜游
青灯夜游avant
2021-09-10 10:58:571582parcourir

Cet article partagera avec vous 15 extraits de code JavaScript essentiels à l'ingénierie de projet. J'espère qu'il vous sera utile !

15 extraits de code JavaScript utiles qui valent la peine d'être collectés (indispensables pour les projets)

1. Téléchargez un document Excel

Il convient également aux documents Word, ppt et autres que les navigateurs n'exécutent pas en aperçu par défaut. Il peut également être utilisé pour télécharger les données de flux renvoyées par l'interface back-end. , voir 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. Personnaliser le téléchargement de certains contenus dans le navigateur

Scénario : Je souhaite télécharger du contenu DOM, je souhaite télécharger un fichier JSON

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

/**
 * 获取文件后缀名
 * @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. . Téléchargez le flux renvoyé par le backend

Les données sont renvoyées par le backend sous la forme d'une interface. Appelez la méthode de téléchargement en 1 pour télécharger

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

4. pour télécharger des

images, pdf et autres fichiers, l'aperçu du navigateur sera exécuté par défaut et la méthode de téléchargement ne peut pas être appelée pour télécharger. Vous devez d'abord convertir les images, pdf et autres fichiers en blobs, puis appeler la méthode de téléchargement pour. télécharger. La méthode de conversion consiste à utiliser axios pour demander le lien correspondant
    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
}
  • Remarque : il y aura la même source. Les restrictions de politique nécessitent la configuration du transfert

    5 Anti-shake
  • Si une méthode est appelée plusieurs fois dans un certain intervalle de temps. , elle ne sera exécutée qu'une seule fois.

    L'implémentation de cette méthode est copiée depuis la bibliothèque Lodash
    • //如果复制成功返回true
copyToBoard(&#39;lalallala&#39;)
Utilisation : 

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

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

Si le troisième paramètre immédiat passe vrai, un appel sera exécuté immédiatement , et les appels suivants ne seront pas exécutés. Vous pouvez l'essayer vous-même dans le code

6 Throttle

plusieurs fois Appelez la méthode et exécutez-la à un certain intervalle de temps

L'implémentation de cette méthode est également copiée à partir de la bibliothèque Lodash. 

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

Le troisième paramètre est un peu compliqué, options

    leading, la fonction est en Elle est appelée au début de chaque délai d'attente. La valeur par défaut est false

    trailing. La fonction est appelée à la fin de chaque délai d'attente. La valeur par défaut est true

    Vous pouvez définir différents effets selon différentes valeurs :

    leading-false, trailing-true : Par défaut, la fonction sera appelé après la fin du délai

    leading-true, trailing-true : il sera appelé au début du délai et sera également appelé après la fin du délai

    leading-true, trailing-false : appelé uniquement au début du le délai

    Exemple : 

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

    Supprimez les attributs dont la valeur est vide (nulle, non définie, '') dans l'objet, par exemple : 
    /**
 *深拷贝
 * @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))
}

    Le scénario d'utilisation est : requête de liste back-end interface, si un certain champ n'est pas transmis au front-end, le back-end ne filtrera pas en fonction de ce champ. Par exemple, si name n'est pas transmis, il sera uniquement basé sur <. code>page et filtre pageSize, mais lorsque le front-end interroge les paramètres (vue ou réagir), il est souvent défini comme ceci 

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

    Lors de l'envoi de données au back-end, il est nécessaire de déterminer si un certain attribut est une chaîne vide, puis d'épeler les paramètres du backend. Cette logique est extraite dans cleanObject Le code est implémenté comme suit

    /**
 * 数组去重
 * @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)]
}
    uniqueArray([1,1,1,1,1])//[1]
    8. nom du suffixe

    Scénario d'utilisation : Téléchargez le fichier pour déterminer le nom du suffixe

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

    Utilisation🎜
    let req={
    file:xxx,
    userId:1,
    phone:&#39;15198763636&#39;,
    //...
}
fetch(getFormData(req))
    🎜9 Copiez le contenu dans le presse-papiers 🎜
    // 保留小数点以后几位，默认2位
export function cutNumber(number, no = 2) {
    if (typeof number != &#39;number&#39;) {
        number = Number(number)
    }
    return Number(number.toFixed(no))
}
    🎜Utilisation : 🎜rrreee🎜Principe : 🎜🎜🎜🎜Créez un élément textare et appelez le Méthode select() pour sélectionner la méthode 🎜🎜🎜🎜document.execCommand('copy' ), copie le contenu actuellement sélectionné dans le presse-papiers. 🎜🎜🎜🎜10. Combien de millisecondes pour dormir🎜rrreee🎜11. Générer une chaîne aléatoire🎜rrreee🎜Comment utiliser🎜rrreee🎜Scénario d'utilisation : utilisé pour générer des identifiants aléatoires sur le front-end. Après tout, Vue et React en ont désormais besoin. pour lier les clés🎜🎜 12. Copie profonde simple🎜rrreee🎜Défauts : copie uniquement les objets, les tableaux et les tableaux d'objets, ce qui est suffisant pour la plupart des scénarios🎜rrreee🎜13 Le principe de la déduplication de tableau🎜rrreee🎜est de profiter de la fonctionnalité. que les éléments en double ne peuvent pas apparaître dans Set🎜rrreee 🎜14. Convertir l'objet en un objet FormData🎜rrreee🎜Scénario d'utilisation : lors du téléchargement d'un fichier, nous devons créer un nouvel objet FormData, puis l'ajouter autant de fois qu'il y a de paramètres. . L'utilisation de cette fonction peut simplifier la logique🎜🎜Utilisation : 🎜rrreee🎜15. Gardez n chiffres après la virgule décimale 🎜rrreee🎜Scénario d'utilisation : Le nombre à virgule flottante de JS est très long, il est parfois nécessaire de conserver 2 décimales. lors de l'affichage de la page🎜🎜🎜Remarque : 🎜Les extraits de code ci-dessus ont été testés par le projet et peuvent être utilisés dans le projet en toute confiance. 🎜🎜🎜Adresse originale : https://juejin.cn/post/7000919400249294862#heading-3🎜🎜Auteur : _Red Scarf🎜🎜🎜Pour plus de connaissances liées à la programmation, veuillez visiter : 🎜Vidéo de programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Apprenez-en davantage sur la programmation asynchrone dans Node.js et partagez quatre solutionsArticle suivant：Apprenez-en davantage sur la programmation asynchrone dans Node.js et partagez quatre solutions

Articles Liés

Voir plus