Rumah >hujung hadapan web >tutorial js >15 coretan kod JavaScript berguna yang patut dikumpulkan (mesti ada untuk projek)
15 coretan kod JavaScript berguna yang patut dikumpulkan (mesti ada untuk projek)
- 青灯夜游ke hadapan
- 2021-09-10 10:58:571629semak imbas
Artikel ini akan berkongsi dengan anda 15 coretan kod JavaScript yang penting untuk kejuruteraan projek saya harap ia akan membantu anda!
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('/') + 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')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 == '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)
}Penggunaan:
downloadFile('1.txt','lalalallalalla')
downloadFile('1.json',JSON.stringify({name:'hahahha'}))3. Muat turun strim yang dikembalikan oleh bahagian belakang
Data dikembalikan oleh bahagian belakang dalam bentuk antara muka, panggil untuk memuat turun 1
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')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 '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)
})
} Nota: Akan ada sekatan pada dasar asal yang sama Perlu mengkonfigurasi pemajuan5 Anti goncangDalam 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)
}
}
}: <!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>Jika parameter ketiga diluluskan benar, panggilan akan dilaksanakan serta-merta, dan panggilan berikutnya tidak akan dilaksanakan Anda boleh Cuba sendiri dalam kodimmediate
<.>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
}options
- mengikut, fungsi dipanggil pada penghujung setiap kelewatan menunggu . Nilai lalai adalah benar
- Anda boleh menetapkan kesan yang berbeza mengikut nilai yang berbeza:
- memimpin-benar, mengekori-benar: Ia akan dipanggil pada permulaan kelewatan dan juga akan dipanggil selepas kelewatan tamat
- memimpin-benar, mengekor- false: hanya panggil
- pada permulaan kelewatan Contoh:
<!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>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, jikalet res=cleanObject({
name:'',
pageSize:10,
page:1
})
console.log("res", res) //输入{page:1,pageSize:10} name为空字符串，属性删掉 tidak diluluskan, ia hanya akan ditapis berdasarkan dan name Walau bagaimanapun, apabila menanya parameter pada bahagian hadapan (vue atau react), pagepageSizeApabila 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
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;
};let res=cleanObject({
name:'',
pageSize:10,
page:1
})
console.log("res", res) //输入{page:1,pageSize:10}Senario penggunaan: muat naik fail untuk menentukan nama akhiran Kaedah penggunaan
/**
* 获取文件后缀名
* @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')
}
}9 Salin kandungan ke papan keratan
getExt("1.mp4") //->mp4Penggunaan:
export 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
}Prinsip:
//如果复制成功返回true copyToBoard('lalallala')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)
}Penggunaan
/**
* 生成随机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
}<.>Senario penggunaan: digunakan untuk menjana ID rawak pada bahagian hadapan Lagipun, kedua-dua Vue dan React kini perlu mengikat kunci12 salinan dalam ringkas//第一个参数指定位数，第二个字符串指定字符，都是可选参数，如果都不传，默认生成8位 uuid()Kecacatan: sahaja salin objek , tatasusunan dan tatasusunan objek adalah mencukupi untuk kebanyakan senario
/**
*深拷贝
* @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))
}13 Prinsip penyahduplikasian tatasusunanconst person={name:'xiaoming',child:{name:'Jack'}}
deepCopy(person) //new person 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('The first parameter must be an array')
}
if (arr.length == 1) {
return arr
}
return [...new Set(arr)]
}14 Tukar objek kepada objek FormDatauniqueArray([1,1,1,1,1])//[1]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
}15 hingga n digit selepas titik perpuluhan let req={
file:xxx,
userId:1,
phone:'15198763636',
//...
}
fetch(getFormData(req))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 != 'number') {
number = Number(number)
}
return Number(number.toFixed(no))
}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 ScarfLebih 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!
Kenyataan：
Artikel ini dikembalikan pada:掘金--_红领巾. Jika ada pelanggaran, sila hubungi admin@php.cn Padam