前端开发代码大全_代码片段管理

大家好，我是考100分的小小码，祝大家学习进步，加薪顺利呀。今天说一说前端开发代码大全_代码片段管理,希望您对编程的造诣更进一步.

“这是我参与8月更文挑战的第18天，活动详情查看：8月更文挑战”

本文主要总结前端开发项目中常用的工具函数。

建议大家在项目中新建个utils/index.js文件，用于保存所有的工具函数，目录如下：

utils
  index.js

代码100分

然后编辑器安装的自动导入的插件，输入关键字即可引入对应的工具函数

每个函数都已通过单元测试，请放心使用。

数据格式转换

向后端发送数据请求时，经常会进行数据格式的转换，有时候要把json数据转成urlencode，有时候要把json数据转成formdata

对象转化为formdata

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

对象转成urlencode

{name:xxx,age:11} -> name=xxx&age=11

/** * 对象转化为url参数 * @param {*} obj */
export function getParams(obj) {
    return Object.keys(obj)
        .map(function(k) {
            return encodeURIComponent(k) + '=' + encodeURIComponent(obj[k])
        })
        .join('&')
}

url编码转成json格式 `'name=xxx&age=11' -> {name:xxx,age:11}`

代码100分function getObjByUrl(str){
  return   Object.fromEntries(new URLSearchParams(str));
}
//使用方式：getObjByUrl('a=b&name=xxx%20djdj')

浏览器下载文件

根据场景不同，划分如下：

下载字符串，使用场景是自己生成一个文件，可以是json文件也可以是html文件,然后下载
下载文件
- 浏览器会默认执行下载的，例如excel,word等
- 浏览器会默认执行预览的，例如图片、视频等

下载文件的原理是利用a标签的download属性，工具函数如下：


//下载一个链接 
export 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)
}

以上代码的原理是：创建一个a标签，设置download属性，设置a标签的href属性等于要下载的链接。

对于浏览器会默认执行下载的文件，例如excel,word,ppt等文件，直接调用download方法即可。举个栗子如下：

download('http://111.229.14.189/file/1.xlsx')

如果你想在浏览器中下载点什么东西，比如一个页面的Html或者一个json数据，可以调用下面的方面

/** * 浏览器下载静态文件 * @param {String} name 文件名 * @param {String} content 文件内容 */
export 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)
}

原理是创建一个Blob对象，然后生成一个浏览器可以预览的地址，然后调用上面的download方法就好了。

使用示例如下：

// 可以用来下载JSONString html等内容，只要是字符串都可以下载
const json=JSON.stringify({name:'xiaoming',age:11})
downloadFile('1.json',json)

可以在浏览器执行一下试下

第三种情况，对于浏览器会默认执行下载的文件，例如pdf,图片，视频等，下载方式如下：


//可以用来下载浏览器会默认预览的文件类型，例如mp4,jpg等
import axios from 'axios'
//提供一个link，完成文件下载，link可以是 http://xxx.com/xxx.xls
function downloadByLink(link,fileName){
    axios.request({
        url: link,
        responseType: 'blob'
    }).then(res => {
	const link=URL.createObjectURL(res.data)
        download(link, fileName)
    })

}

原理很简单，请求要下载的链接，然后生成一个Blob对象，然后生成一个浏览器可以预览的url，调用download方法即可。

对于后端的一些返回数据流的下载接口，也可以这样处理。

但是有个注意事项，即仅支持同源的链接，如果链接不同源的话，就本地转发一下就好了，或者让后端转发。

最后放一个可以执行的demo，把下面的Html保存下，在浏览器中执行下看下效果。

<!DOCTYPE html>
<html lang="en">
    <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>
        <script src="http://111.229.14.189/file/axios.min.js"></script>
    </head>
    <body>
        <button id="downloadCustom">下载自定义内容</button>
        <button id="downloadExcel">下载excel</button>
        <button id="downloadPic">下载图片</button>
        <script> //提供一个链接用户下载内容 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) } 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 downloadByLink(link, fileName) { axios .request({ url: link, responseType: 'blob' }) .then((res) => { const link = URL.createObjectURL(res.data) download(link, fileName) }) } // 下载自定义的字符串 function downloadCustom() { // 可以用来下载JSONString html等内容，只要是字符串都可以下载 const json = JSON.stringify({ name: 'xiaoming', age: 11 }) downloadFile('1.json', json) } //下载浏览器不会默认预览的文件，例如excel,word,ppt function downloadExcel() { download('http://111.229.14.189/file/1.xlsx') } // 下载浏览器会默认执行预览的文件，例如 function downloadPic() { // 需要转发才可以，否则会有同源策略 downloadByLink('http://111.229.14.189/file/1.jpg') } ;(function () { document.getElementById( 'downloadCustom' ).onclick = downloadCustom document.getElementById('downloadExcel').onclick = downloadExcel document.getElementById('downloadPic').onclick = downloadPic })() </script>
    </body>
</html>

下篇继续说工具函数，明天更新。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
转载请注明出处: https://daima100.com/11307.html

前端开发代码大全_代码片段管理

数据格式转换

对象转化为formdata

对象转成urlencode

url编码转成json格式 'name=xxx&age=11' -> {name:xxx,age:11}

浏览器下载文件

相关推荐

发表回复

url编码转成json格式 `'name=xxx&age=11' -> {name:xxx,age:11}`