七个项目中必备的JavaScript代码片段

 [[421451]]

1. 下载一个excel文档

同时适用于word,ppt等浏览器不会默认执行预览的文档,也可以用于下载后端接口返回的流数据，见 3

 
 
 
    
  
  
  
  1. //下载一个链接  
    2.   
  
  
  2. function download(link, name) { 
    3.   
  
  
  3.     if(!name){ 
    4.   
  
  
  4.             name=link.slice(link.lastIndexOf('/') + 1) 
    5.   
  
  
  5.     } 
    6.   
  
  
  6.     let eleLink = document.createElement('a') 
    7.   
  
  
  7.     eleLink.download = name 
    8.   
  
  
  8.     eleLink.style.display = 'none' 
    9.   
  
  
  9.     eleLink.href = link 
    10.   
  
  
  10.     document.body.appendChild(eleLink) 
    11.   
  
  
  11.     eleLink.click() 
    12.   
  
  
  12.     document.body.removeChild(eleLink) 
    13.   
  
  
  13. } 
    14.   
  
  
  14. //下载excel 
    15.   
  
  
  15. download('http://111.229.14.189/file/1.xlsx') 
    16.   
  
  
  16. 复制代码 
    17.

2. 在浏览器中自定义下载一些内容

场景：我想下载一些DOM内容，我想下载一个JSON文件

 
 
 
    
  
  
  
  1. /** 
    2.   
  
  
  2.  * 浏览器下载静态文件 
    3.   
  
  
  3.  * @param {String} name 文件名 
    4.   
  
  
  4.  * @param {String} content 文件内容 
    5.   
  
  
  5.  */ 
    6.   
  
  
  6. function downloadFile(name, content) { 
    7.   
  
  
  7.     if (typeof name == 'undefined') { 
    8.   
  
  
  8.         throw new Error('The first parameter name is a must') 
    9.   
  
  
  9.     } 
    10.   
  
  
  10.     if (typeof content == 'undefined') { 
    11.   
  
  
  11.         throw new Error('The second parameter content is a must') 
    12.   
  
  
  12.     } 
    13.   
  
  
  13.     if (!(content instanceof Blob)) { 
    14.   
  
  
  14.         content = new Blob([content]) 
    15.   
  
  
  15.     } 
    16.   
  
  
  16.     const link = URL.createObjectURL(content) 
    17.   
  
  
  17.     download(link, name) 
    18.   
  
  
  18. } 
    19.   
  
  
  19. //下载一个链接 
    20.   
  
  
  20. function download(link, name) { 
    21.   
  
  
  21.     if (!name) {//如果没有提供名字，从给的Link中截取最后一坨 
    22.   
  
  
  22.         name =  link.slice(link.lastIndexOf('/') + 1) 
    23.   
  
  
  23.     } 
    24.   
  
  
  24.     let eleLink = document.createElement('a') 
    25.   
  
  
  25.     eleLink.download = name 
    26.   
  
  
  26.     eleLink.style.display = 'none' 
    27.   
  
  
  27.     eleLink.href = link 
    28.   
  
  
  28.     document.body.appendChild(eleLink) 
    29.   
  
  
  29.     eleLink.click() 
    30.   
  
  
  30.     document.body.removeChild(eleLink) 
    31.   
  
  
  31. } 
    32.   
  
  
  32. 复制代码 
    33.

使用方式：

 
 
 
    
  
  
  
  1. downloadFile('1.txt','lalalallalalla') 
    2.   
  
  
  2. downloadFile('1.json',JSON.stringify({name:'hahahha'})) 
    3.   
  
  
  3. 复制代码 
    4.

3. 下载后端返回的流

数据是后端以接口的形式返回的,调用 1 中的download方法进行下载

 
 
 
    
  
  
  
  1.  download('http://111.229.14.189/gk-api/util/download?file=1.jpg') 
    2.   
  
  
  2.  download('http://111.229.14.189/gk-api/util/download?file=1.mp4') 
    3.   
  
  
  3.  
    4.   
  
  
  4. 复制代码 
    5.

4. 提供一个图片链接，点击下载

图片、pdf等文件，浏览器会默认执行预览，不能调用download方法进行下载，需要先把图片、pdf等文件转成blob，再调用download方法进行下载，转换的方式是使用axios请求对应的链接

 
 
 
    
  
  
  
  1. //可以用来下载浏览器会默认预览的文件类型，例如mp4,jpg等 
    2.   
  
  
  2. import axios from 'axios' 
    3.   
  
  
  3. //提供一个link，完成文件下载，link可以是  http://xxx.com/xxx.xls 
    4.   
  
  
  4. function downloadByLink(link,fileName){ 
    5.   
  
  
  5.     axios.request({ 
    6.   
  
  
  6.         url: link, 
    7.   
  
  
  7.         responseType: 'blob' //关键代码，让axios把响应改成blob 
    8.   
  
  
  8.     }).then(res => { 
    9.   
  
  
  9.  const link=URL.createObjectURL(res.data) 
    10.   
  
  
  10.         download(link, fileName) 
    11.   
  
  
  11.     }) 
    12.   
  
  
  12.  
    13.   
  
  
  13. } 
    14.   
  
  
  14. 复制代码 
    15.

注意：会有同源策略的限制，需要配置转发

5. 防抖

在一定时间间隔内，多次调用一个方法，只会执行一次.

这个方法的实现是从Lodash库中copy的

 
 
 
    
  
  
  
  1. /** 
    2.   
  
  
  2.  * 
    3.   
  
  
  3.  * @param {*} func 要进行debouce的函数 
    4.   
  
  
  4.  * @param {*} wait 等待时间,默认500ms 
    5.   
  
  
  5.  * @param {*} immediate 是否立即执行 
    6.   
  
  
  6.  */ 
    7.   
  
  
  7. export function debounce(func, wait=500, immediate=false) { 
    8.   
  
  
  8.     var timeout 
    9.   
  
  
  9.     return function() { 
    10.   
  
  
  10.         var context = this 
    11.   
  
  
  11.         var args = arguments 
    12.   
  
  
  12.  
    13.   
  
  
  13.         if (timeout) clearTimeout(timeout) 
    14.   
  
  
  14.         if (immediate) { 
    15.   
  
  
  15.             // 如果已经执行过，不再执行 
    16.   
  
  
  16.             var callNow = !timeout 
    17.   
  
  
  17.             timeout = setTimeout(function() { 
    18.   
  
  
  18.                 timeout = null 
    19.   
  
  
  19.             }, wait) 
    20.   
  
  
  20.             if (callNow) func.apply(context, args) 
    21.   
  
  
  21.         } else { 
    22.   
  
  
  22.             timeout = setTimeout(function() { 
    23.   
  
  
  23.                 func.apply(context, args) 
    24.   
  
  
  24.             }, wait) 
    25.   
  
  
  25.         } 
    26.   
  
  
  26.     } 
    27.   
  
  
  27. } 
    28.   
  
  
  28. 复制代码 
    29.

使用方式：

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.      
    4.   
  
  
  4.          
    5.   
  
  
  5.          
    6.   
  
  
  6.          
    7.   
  
  
  7.         Document 
    8.   
  
  
  8.      
    9.   
  
  
  9.      
    10.   
  
  
  10.          
    11.   
  
  
  11.          
    12.   
  
  
  12.      
    13.   
  
  
  13.  
    14.   
  
  
  14.  
    15.   
  
  
  15. 复制代码 
    16.

如果第三个参数 immediate 传true，则会立即执行一次调用，后续的调用不会在执行，可以自己在代码中试一下

6. 节流

多次调用方法，按照一定的时间间隔执行

这个方法的实现也是从Lodash库中copy的

 
 
 
    
  
  
  
  1. /** 
    2.   
  
  
  2.  * 节流，多次触发，间隔时间段执行 
    3.   
  
  
  3.  * @param {Function} func 
    4.   
  
  
  4.  * @param {Int} wait 
    5.   
  
  
  5.  * @param {Object} options 
    6.   
  
  
  6.  */ 
    7.   
  
  
  7. export function throttle(func, wait=500, options) { 
    8.   
  
  
  8.     //container.onmousemove = throttle(getUserAction, 1000); 
    9.   
  
  
  9.     var timeout, context, args 
    10.   
  
  
  10.     var previous = 0 
    11.   
  
  
  11.     if (!options) options = {leading:false,trailing:true} 
    12.   
  
  
  12.  
    13.   
  
  
  13.     var later = function() { 
    14.   
  
  
  14.         previous = options.leading === false ? 0 : new Date().getTime() 
    15.   
  
  
  15.         timeout = null 
    16.   
  
  
  16.         func.apply(context, args) 
    17.   
  
  
  17.         if (!timeout) context = args = null 
    18.   
  
  
  18.     } 
    19.   
  
  
  19.  
    20.   
  
  
  20.     var throttled = function() { 
    21.   
  
  
  21.         var now = new Date().getTime() 
    22.   
  
  
  22.         if (!previous && options.leading === false) previous = now 
    23.   
  
  
  23.         var remaining = wait - (now - previous) 
    24.   
  
  
  24.         context = this 
    25.   
  
  
  25.         args = arguments 
    26.   
  
  
  26.         if (remaining <= 0 || remaining > wait) { 
    27.   
  
  
  27.             if (timeout) { 
    28.   
  
  
  28.                 clearTimeout(timeout) 
    29.   
  
  
  29.                 timeout = null 
    30.   
  
  
  30.             } 
    31.   
  
  
  31.             previous = now 
    32.   
  
  
  32.             func.apply(context, args) 
    33.   
  
  
  33.             if (!timeout) context = args = null 
    34.   
  
  
  34.         } else if (!timeout && options.trailing !== false) { 
    35.   
  
  
  35.             timeout = setTimeout(later, remaining) 
    36.   
  
  
  36.         } 
    37.   
  
  
  37.     } 
    38.   
  
  
  38.     return throttled 
    39.   
  
  
  39. } 
    40.   
  
  
  40. 复制代码 
    41.

第三个参数还有点复杂， options

  • leading，函数在每个等待时延的开始被调用，默认值为false

  • trailing，函数在每个等待时延的结束被调用，默认值是true

可以根据不同的值来设置不同的效果：

  • leading-false，trailing-true：默认情况，即在延时结束后才会调用函数

  • leading-true，trailing-true：在延时开始时就调用，延时结束后也会调用

  • leading-true, trailing-false：只在延时开始时调用

例子：

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.      
    4.   
  
  
  4.          
    5.   
  
  
  5.          
    6.   
  
  
  6.          
    7.   
  
  
  7.         Document 
    8.   
  
  
  8.      
    9.   
  
  
  9.      
    10.   
  
  
  10.          
    11.   
  
  
  11.           
    12.   
  
  
  12.      
    13.   
  
  
  13.  
    14.   
  
  
  14.  
    15.   
  
  
  15. 复制代码 
    16.

7. cleanObject

去除对象中value为空(null,undefined,'')的属性,举个栗子：

 
 
 
    
  
  
  
  1. let res=cleanObject({ 
    2.   
  
  
  2.     name:'', 
    3.   
  
  
  3.     pageSize:10, 
    4.   
  
  
  4.     page:1 
    5.   
  
  
  5. }) 
    6.   
  
  
  6. console.log("res", res) //输入{page:1,pageSize:10}   name为空字符串，属性删掉 
    7.   
  
  
  7. 复制代码 
    8.

使用场景是：后端列表查询接口，某个字段前端不传，后端就不根据那个字段筛选，例如 name 不传的话，就只根据 page 和 pageSize 筛选，但是前端查询参数的时候（vue或者react）中，往往会这样定义

 
 
 
    
  
  
  
  1. export default{ 
    2.   
  
  
  2.     data(){ 
    3.   
  
  
  3.         return { 
    4.   
  
  
  4.             query:{ 
    5.   
  
  
  5.                 name:'', 
    6.   
  
  
  6.                 pageSize:10, 
    7.   
  
  
  7.                 page:1 
    8.   
  
  
  8.             } 
    9.   
  
  
  9.         } 
    10.   
  
  
  10.     } 
    11.   
  
  
  11. } 
    12.   
  
  
  12.  
    13.   
  
  
  13.  
    14.   
  
  
  14. const [query,setQuery]=useState({name:'',page:1,pageSize:10}) 
    15.   
  
  
  15. 复制代码 
    16.

给后端发送数据的时候，要判断某个属性是不是空字符串，然后给后端拼参数，这块逻辑抽离出来就是 cleanObject ，代码实现如下

 
 
 
    
  
  
  
  1. export const isFalsy = (value) => (value === 0 ? false : !value); 
    2.   
  
  
  2.  
    3.   
  
  
  3. export const isVoid = (value) => 
    4.   
  
  
  4.   value === undefined || value === null || value === ""; 
    5.   
  
  
  5.  
    6.   
  
  
  6. export const cleanObject = (object) => { 
    7.   
  
  
  7.   // Object.assign({}, object) 
    8.   
  
  
  8.   if (!object) { 
    9.   
  
  
  9.     return {}; 
    10.   
  
  
  10.   } 
    11.   
  
  
  11.   const result = { ...object }; 
    12.   
  
  
  12.   Object.keys(result).forEach((key) => { 
    13.   
  
  
  13.     const value = result[key]; 
    14.   
  
  
  14.     if (isVoid(value)) { 
    15.   
  
  
  15.       delete result[key]; 
    16.   
  
  
  16.     } 
    17.   
  
  
  17.   }); 
    18.   
  
  
  18.   return result; 
    19.   
  
  
  19. }; 
    20.   
  
  
  20.  
    21.   
  
  
  21. 复制代码 
    22.  
 
 
 
 
 
    
  
  
  
  1. let res=cleanObject({ 
    2.   
  
  
  2.     name:'', 
    3.   
  
  
  3.     pageSize:10, 
    4.   
  
  
  4.     page:1 
    5.   
  
  
  5. }) 
    6.   
  
  
  6. console.log("res", res) //输入{page:1,pageSize:10} 
    7.   
  
  
  7. 复制代码 
    8.

 

 

网站栏目：七个项目中必备的JavaScript代码片段
本文网址：http://www.csdahua.cn/qtweb/news32/448882.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

成都快上网为您推荐相关内容

网站改版知识

行业网站建设

艾名斯智能　　 　门户网站建设方案　　 　自贡主机托管　　 　四川搅拌罐车　　 　重庆网站营销　　 　成都公司注册　　 　四川航空文化　　 　公司网站建设　　 　成都木托盘　　 　定制网站建设　　 　营山产后护理　　 　成都做手机网站　　 　东电技改　　 　雅安服务器托管　　 　网络营销推广　　 　成都网站优化　　 　成都网站建设　　 　双流网站建设　　 　乐至网站建设　　 　微信小程序开发