JS随笔(二)

180 阅读3分钟

1.下载文件的几种方式

  1. 启用浏览器的下载,在知道静态资源文件的url情况下,location.href,window.open

  2. 创建一个form,用提交表单的方式启用浏览器下载,这种方案可以携带参数

  3. 接口请求的方式,服务端返回的二进制用blob或者arrayBuffer接收

File继承自Blob,file对象是一种特殊的blob对象,因而file对象可以直接调用Blob提供的方法。Blob提供的方法如下:

  • 文件下载:URL.createObjectURL(blob),通过a链接进行下载

  • 图片显示:URL.createObjectURL(blob),通过img.src进行显示

  • 资源分段上传:通过blob.slice切割为子blob上传

  • 转化为其他的类型:通过FileReader转化为文本字符串/ArrayBuffer/dataURL(即base64)类型,对应如下3个api:FileReader.readAsText,FileReader.readAsArrayBuffer,FileReader.readAsDataURL

2.获取url参数

const urlSearchParams = new URLSearchParams(location.search);
const params = Object.fromEntries(urlSearchParams.entries());

3.列举模块化方案并理解其中的原理

node端commonJs规范,module.exports/exports+require(其中exports是对module.exports的一个引用)

浏览器端es modules规范,export/export default+import

commonJs是同步运行时加载,加载的时候会将模块文件执行一遍,返回一个对象(即module.exports属性);es modules是在静态编译阶段,运行之前加载,返回的内容不局限于对象,还可以是变量,函数等等。

因为加载方式的差异导致了它们有以下的不同:

(1)commonJs导出的是值的拷贝,es modules导出的是值的引用

(2)使用方式上的差异(不详细展开),注意:

  • es modules引入export default导出的模块不用加{},引入export导出的模块需要加{}

  • export default和export可以同时存在,但是只能有一个export default

  • 浏览器中通过script标签导入模块需要加type="module",并且只支持http协议,不支持ftp协议

(3)es modules不能对引入的模块重新赋值/定义,如下都是错误的:

import { e1 } from './webUtils.js';
e1 = 123; // 重新赋值
var el = 123; // 重新定义

(4)es modules可以在import导入语句前使用模块,commonJs必须要先导入后使用模块

(5)es modules只能在模块顶层使用import/export语句,不能在函数、判断语句等代码块之中使用;commonJs可以在代码块中使用require/exports语句

(6)commonJs加载模块的时候会优先从缓存中加载,缓存中没有则按照规则加载核心模块/自定义模块/第三方模块,es modules模块不存在缓存

(7)es11可以通过import函数动态导入模块(注意和import语句的区别)

4.cookie的有效期

通过setMaxAge()来进行设置,maxAge大于0,cookie会被写进硬盘,在有效期内关闭浏览器或者电脑都不会丢失。 如果maxAge小于0,则cookie不会被写进硬盘,浏览器关闭时则cookie就会失效被清除。 maxAge默认值为-1,即不指定cookie有效时间时默认浏览器关闭时失效被清除。