Maison > Article > interface Web > 15 extraits de code JavaScript utiles qui valent la peine d'être collectés (indispensables pour les projets)
Cet article partagera avec vous 15 extraits de code JavaScript essentiels à l'ingénierie de projet. J'espère qu'il vous sera utile !
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('/') + 1)
}
let eleLink = document.createElement('a')
eleLink.download = name
eleLink.style.display = 'none'
eleLink.href = link
document.body.appendChild(eleLink)
eleLink.click()
document.body.removeChild(eleLink)
}
//下载excel
download('http://111.229.14.189/file/1.xlsx')场景：我想下载一些DOM内容，我想下载一个JSON文件
/**
* 浏览器下载静态文件
* @param {String} name 文件名
* @param {String} content 文件内容
*/
function downloadFile(name, content) {
if (typeof name == 'undefined') {
throw new Error('The first parameter name is a must')
}
if (typeof content == 'undefined') {
throw new Error('The second parameter content is a must')
}
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('/') + 1)
}
let eleLink = document.createElement('a')
eleLink.download = name
eleLink.style.display = 'none'
eleLink.href = link
document.body.appendChild(eleLink)
eleLink.click()
document.body.removeChild(eleLink)
}使用方式：
downloadFile('1.txt','lalalallalalla')
downloadFile('1.json',JSON.stringify({name:'hahahha'}))数据是后端以接口的形式返回的,调用1中的download方法进行下载
download('http://111.229.14.189/gk-api/util/download?file=1.jpg') download('http://111.229.14.189/gk-api/util/download?file=1.mp4')
图片、pdf等文件，浏览器会默认执行预览，不能调用download方法进行下载，需要先把图片、pdf等文件转成blob，再调用download方法进行下载，转换的方式是使用axios请求对应的链接
//可以用来下载浏览器会默认预览的文件类型，例如mp4,jpg等
import axios from 'axios'
//提供一个link，完成文件下载，link可以是 http://xxx.com/xxx.xls
function downloadByLink(link,fileName){
axios.request({
url: link,
responseType: 'blob' //关键代码，让axios把响应改成blob
}).then(res => {
const link=URL.createObjectURL(res.data)
download(link, fileName)
})
}注意：会有同源策略的限制，需要配置转发
在一定时间间隔内，多次调用一个方法，只会执行一次.
这个方法的实现是从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('1111')
}
const debounceOnInput = debounce(onInput)
document
.getElementById('input')
.addEventListener('input', debounceOnInput) //在Input中输入，多次调用只会在调用结束之后，等待500ms触发一次
</script>
</body>
</html>如果第三个参数immediate传true，则会立即执行一次调用，后续的调用不会在执行，可以自己在代码中试一下
多次调用方法，按照一定的时间间隔执行
这个方法的实现也是从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
可以根据不同的值来设置不同的效果：
例子：
<!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('1111')
}
const throttleOnInput = throttle(onInput)
document
.getElementById('input')
.addEventListener('input', throttleOnInput) //在Input中输入，每隔500ms执行一次代码
</script>
</body>
</html>去除对象中value为空(null,undefined,'')的属性,举个栗子：
let res=cleanObject({
name:'',
pageSize:10,
page:1
})
console.log("res", res) //输入{page:1,pageSize:10} name为空字符串，属性删掉使用场景是：后端列表查询接口，某个字段前端不传，后端就不根据那个字段筛选，例如name不传的话，就只根据page和pageSize筛选，但是前端查询参数的时候（vue或者react）中，往往会这样定义
export default{
data(){
return {
query:{
name:'',
pageSize:10,
page:1
}
}
}
}
const [query,setQuery]=useState({name:'',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 navigateurScé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 == 'string') {
return filename
.split('.')
.pop()
.toLowerCase()
} else {
throw new Error('filename must be a string type')
}
}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échargergetExt("1.mp4") //->mp44. 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 correspondantexport function copyToBoard(value) {
const element = document.createElement('textarea')
document.body.appendChild(element)
element.value = value
element.select()
if (document.execCommand('copy')) {
document.execCommand('copy')
document.body.removeChild(element)
return true
}
document.body.removeChild(element)
return false
}//如果复制成功返回true copyToBoard('lalallala')Utilisation :
/**
* 休眠xxxms
* @param {Number} milliseconds
*/
export function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms))
}
//使用方式
const fetchData=async()=>{
await sleep(1000)
}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 code6 Throttleplusieurs fois Appelez la méthode et exécutez-la à un certain intervalle de tempsL'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 ||
'0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
length = length || 8
var result = ''
for (var i = length; i > 0; --i)
result += chars[Math.floor(Math.random() * chars.length)]
return result
}options
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
//第一个参数指定位数，第二个字符串指定字符，都是可选参数，如果都不传，默认生成8位 uuid()7. cleanObjectSupprimez les attributs dont la valeur est vide (nulle, non définie, '') dans l'objet, par exemple :
8. nom du suffixe/** *深拷贝 * @export * @param {*} obj * @returns */ export function deepCopy(obj) { if (typeof obj != 'object') { 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
namen'est pas transmis, il sera uniquement basé sur <. code>page et filtrepageSize, mais lorsque le front-end interroge les paramètres (vue ou réagir), il est souvent défini comme ceciconst person={name:'xiaoming',child:{name:'Jack'}} deepCopy(person) //new personLors 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
cleanObjectLe code est implémenté comme suit/** * 数组去重 * @param {*} arr */ export function uniqueArray(arr) { if (!Array.isArray(arr)) { throw new Error('The first parameter must be an array') } if (arr.length == 1) { return arr } return [...new Set(arr)] }uniqueArray([1,1,1,1,1])//[1]
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:'15198763636',
//...
}
fetch(getFormData(req))🎜9 Copiez le contenu dans le presse-papiers 🎜// 保留小数点以后几位，默认2位
export function cutNumber(number, no = 2) {
if (typeof number != 'number') {
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!