前端一些零碎的小知识点

最后更新:
阅读次数:

以后在项目中遇到的 小的新的 知识点都会总结到这里,不定期更新。

download 属性

该属性用于 HTML a 标签,指示浏览器下载 URL 而不是导航到 URL,因此将提示用户将其保存为本地文件。(HTML5 新增)

<!-- 默认将导航到我博客的首页 -->
<a href="http://blog.percymong.com/index.html">我的博客首页</a>

<!-- 下载指定的文件,文件名不变 -->
<a href="http://blog.percymong.com/index.html" download>我的博客首页</a>

<!-- 下载指定的文件,下载后的文件名为指定的文件名 -->
<a href="http://blog.percymong.com/index.html" download="指定的文件名.txt"
>我的博客首页</a
>

HTMLElement.dataset

  • HTML 元素的 data-* 属性是在 HTML5 中新增的,可用来存放自定义数据。

最初还是傻乎乎地使用 getAttribute() 来获取自定义属性的值,而现在则通过 HTMLElement.dataset API 来获取自定义属性的值。

<div id="home" data-src="./home.html" data-owner="percy">
<span>Home page</span>
</div>
// Get the data of the data-* attribute
let home = document.getElementById("home");

// traditional way
let src1 = home.getAttribute("data-src"); // ./home.html
let owner1 = home.getAttribute("data-owner"); // percy

// HTML5 way
let attrs = home.dataset; // DOMStringMap {src: "./home.html", owner: "percy"}
let src2 = attrs.src; // ./home.html
let owner2 = attrs.owner; // percy

accept 属性

该属性用于 HTML input 标签,如果 input 的 type 属性的值是 file,则该属性表明了服务器端可接受的文件类型,否则它将被忽略。

<input type="file" accept="[rules]" name="uploadFile" />
// accept 的值其实就是一堆有效的 MIME 类型
// 常见的 accept 的值的写法如下

accept = "image/png"; // 只接受 .png 格式的图片
accept = ".png"; // 同上,只接受 .png 格式的图片
accept = "image/png, image/jpeg"; // 接受 .png、.jpeg、.jpg 格式的图片
accept = ".doc,.docx"; // 接受 .doc、.docx 格式的文件
accept = "image/*"; // HTML5 新增,接受所有格式的图片
accept = "audio/*"; // HTML5 新增,接受所有格式的音频
accept = "video/*"; // HTML5 新增,接受所有格式的视频

enctype 属性

该属性用于 HTML form 标签,当 method 属性值为 post 时, enctype 是提交 form 给服务器的内容的 MIME 类型 。可能的取值有:

  • application/x-www-form-urlencoded: 如果属性未指定时的默认值
  • multipart/form-data: 这个值用于一个 type 属性设置为 “file” 的 input 元素
  • text/plain (HTML5)

坑: 当你表单中有要上传的文件时,一定要指定 form 的 enctype 属性为 multipart/form-data,否则服务器死活不接受你的数据,然后你死活得不到服务器的响应。

至于上面第一种和第二种 MIME 类型的区别,可以看看下面链接中的内容。

application/x-www-form-urlencoded or multipart/form-data?

Array 对象与 String 对象容易搞混的 6 个方法

  • Array
    • Array.prototype.slice(start,end): 浅拷贝数组的指定部分,返回拷贝后的新数组(不会改变原数组)
    • Array.prototype.concat(value1[,value2]..): 合并两个或多个数组,返回新数组(不会更改原数组)
      • 注意 value 既可以是数组,也可以是其它类型的值
    • Array.prototype.splice(start, deleteCount, item1, item2, …): 删除现有元素或添加新元素来更改一个数组的内容(会更改原数组)
  • String
    • String.prototype.slice(begin,end): 提取字符串的一部分,返回新的字符串
    • String.prototype.concat(str1,,str2,…): 合并字符串,返回新字符串(一般使用 + 拼接字符串)
    • String 没有 splice 方法

Array 和 String 的 slice 方法的 begin 和 end 参数都允许传入负值,但一般仅为 begin 参数传入负值