前言

这篇文章记录学习js查到过的资料，因为经常记不住。(静不下心来导致的)
可恶不知道怎么分类，简单记录一下用到过的就算了，下次见到能想起来干啥用的就行。
归类以后再说

各种遇到的Web API和接口(对象类型)

可能会混进几个不是Web API或接口

document.querySelector()

文档对象模型Document引用的 querySelector() 方法返回文档中与指定选择器或选择器组匹配的第一个 Element对象。如果找不到匹配项，则返回null。

1
2
3
4
<select name="" id="weather">
    <option value="1">String1</option>
    <option value="2">String2</option>
</select>
1
2
3
4
5
const select = document.querySelector("select");//使用标签引用
const select = document.querySelector("#weather");//使用id引用
select.addEventListener("change", () => {
    alert("hello world");
});

当选择框改变时，会弹出hello world弹窗

Node.appendChild()

Node.appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中，那么 appendChild() 只会将它从原先的位置移动到新的位置（不需要事先移除要移动的节点）。

1
2
3
4
<button id="btn">点我开始倒计时</button>
<div class="output" style="height: 410px;overflow: auto;">
    <p>这里什么都没有</p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const btn = document.querySelector("#btn");
var output = document.querySelector(".output");
btn.addEventListener("click", () => {
    output.innerHTML = '';
    var i = 10;
    while (i >= 0) {
        var para = document.createElement("p");
        if (i === 0) {
            para.textContent = 0 + " cut dowwn";
        } else {
            para.textContent = i;
        }
        output.appendChild(para);
        i--;
    }
});

运行结果会显示倒计时(并非倒计时)

document.createElement()

createElement() 方法用于创建一个具有指定 localName 的 HTMLElement。

1
2
var p = document.createElement("p");
document.body.appendChild(p);

创建一个新的段落元素 p，然后添加到body的最尾部

element.innerHTML

Element.innerHTML 属性设置或获取 HTML 语法表示的元素的后代。
如果要向一个元素中插入一段 HTML，而不是替换它的内容，那么请使用 insertAdjacentHTML() 方法。

1
2
<button id="btn">点我替换下行文字</button>
<div class="output" style="height: 410px;overflow: auto;"><p>这里什么都没有</p></div>
1
2
3
4
5
const btn = document.querySelector("#btn");
var output = document.querySelector(".output");
btn.addEventListener("click",() => {
    output.innerHTML = `hello world`;
});

点击图中按钮替换掉文字

MediaQueryList.addListener()

MediaQueryList接口的 addListener() 方法向MediaQueryListener添加一个侦听器，该侦听器将运行自定义回调函数以响应媒体查询状态的更改。

1
<button id="btn">打招呼</button>
1
2
3
4
const btn = document.querySelector("#btn");
btn.addEventListener("click", () => {
    alert("hello world");
});

点击按钮时会弹出hello world。

Node.textContent

textContent 属性表示一个节点及其后代的文本内容。
其值是一个字符串或 null。

1
2
<button id="btn">打招呼</button>
<p>这里什么都没有</p>
1
2
3
4
5
const btn = document.querySelector("#btn");
const para = document.querySelector("p");
btn.addEventListener("click", () => {
    para.textContent = "hello world";
});

点击按钮时段落内容会改为hello world。

Element.setAttribute()

Element 接口的 setAttribute() 方法用于设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。

要获取某个属性当前的值，请使用 getAttribute()；要删除某个属性，请使用 removeAttribute()。

1
2
<button>你好，世界</button>
<button id="btn">更改前面按钮属性</button>
1
2
3
4
5
6
const btn = document.querySelector("button");
const btn2 = document.querySelector("#btn");
btn2.onclick = () => {
    btn.setAttribute("name", "hello button");
    btn.setAttribute("disabled", "");
};

点下“更改前面按钮属性”后，“你好，世界”按钮name属性将会更改，并且无法点击。

AbortController.abort()

中止一个尚未完成的异步操作。这能够中止 fetch 请求及任何响应体和流的使用。(看不懂)
以下是利用abort()移除事件侦听器。

1
<button>点击按钮改变颜色</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const controller = new AbortController();
const btn = document.querySelector("button");
btn.addEventListener("click", () => {
    changeBgcolor();
    controller.abort();
}, { signal: controller.signal });
function getRandomNum() {
    return Math.floor(Math.random() * 255);
};

function changeBgcolor() {
    const bgcolor = `rgb(${getRandomNum()}, ${getRandomNum()}, ${getRandomNum()})`
    document.body.style.backgroundColor = bgcolor;
};

该案例中只能使背景颜色改变一次，改变一次过后btn的事件侦听器会被abort()移除。
(需要构造一个AbortController对象实例，并且在事件侦听器加第三个参数{ signal: controller.signal })

Event.currentTarget

Event 接口的 currentTarget 只读属性用于标识事件处理器所附加的元素。

1
2
3
4
5
6
<body>
  <div id="container">
    <button>点我！</button>
  </div>
  <pre id="output"></pre>
</body>
1
2
3
4
5
6
7
8
9
10
11
const output = document.querySelector("#output");
function handleClick(e) {
  output.textContent += `你在 ${e.currentTarget.tagName} 元素上进行了点击\n`;
}

const container = document.querySelector("#container");
const button = document.querySelector("button");

document.body.addEventListener("click", handleClick);
container.addEventListener("click", handleClick);
button.addEventListener("click", handleClick);

上文中用到了e.currentTarget.tagName，会输出你所点击到的区域名。

Request()

fetch API中request接口的构造方法，Request()构造器创建一个新的Request对象。

1
const request = new Request(URL);

将一个URL构造为Request对象

Window：fetch()

Window接口的fetch()方法用于发起获取资源的请求，它会返回一个会在请求响应后兑现的promise。该promise会兑现一个表示请求响应的 Response对象。

1
const response = await fetch(request);

返回一个Promise，会兑现Response对象。

Window：setTimeout()

Window接口的setTimeout()方法设置一个定时器，一旦定时器到期，就会执行一个函数或指定的代码片段。

1
2
3
window.setTimeout(() => {
  console.log(`hello world`);
}, delay)

延迟delay/1000秒后跳出弹框”hello world”。

location：reload()

Location 接口的 reload() 方法重载当前 URL，就像刷新按钮一样。

1
document.location.reload();

重载当前页面。

Request.json()

Request接口的json()方法读取请求体并将其作为一个promise返回，该promise将兑现一个由响应体的文本解析得到的JSON。

1
const obj = await response.json();

返回一个将兑现JavaScript对象的Promise。这个对象可能是任何可以用JSON表示的东西：一个对象、一个数组、一个字符串、一个数值……

XMLHttpRequest.status

只读属性 XMLHttpRequest.status 返回了 XMLHttpRequest 响应中的数字状态码。

1
2
3
4
fetch(URL)
  .then(Response => (
    console.log(`已收到响应:${Response.status}`);
  ));

返回数字状态码(一个数字，例如200，404等)

Worker.postMessage()

postMessage()方法可以向worker发送消息。第一个参数是要发送到worker的数据。(该数据可以是任何可以被结构化克隆算法处理JavaScript对象)

1
2
3
4
5
6
7
8
9
10
11
12
13
//main.js部分
const worker = new Worker('./generate.js');
worker.postMessage({
    command: "gernerate",
    quota: quota,
});

//generate.js部分
addEventListener("message", Message => {
    if(Message.data.command === "gernerate") {
        generatePrimes(Message.data.quota);
    }
});

main.js中加载名为generate.js的worker脚本，利用postMessage()函数向worker传递信息。worker脚本通过事件侦听器收到message后执行generatePrimes()函数。(generatePrimes函数未在这里给出)

Event: preventDefault()

Event 接口的 preventDefault() 方法，告诉用户代理：此事件被显式处理，它默认的动作（例如页面滚动、链接跳转或粘贴文本）不应该照常执行.

1
2
3
4
5
6
7
<h1>My shopping list</h1>
<form>
  <label for="item">Enter a new item:</label>
  <input type="text" name="item" id="item">
  <button>Add item</button>
</form>
<ul></ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const input = document.querySelector(`#item`);
const button = document.querySelector(`button`);
const list = document.querySelector(`ul`);

button.addEventListener(`click`, (event) => {
    event.preventDefault();
    const listItem = document.createElement(`li`);
    const listBtn = document.createElement(`button`);
    const listspan = document.createElement(`span`);

    listItem.textContent = input.value;
    listBtn.textContent = `delet`;

    listspan.appendChild(listBtn);
    listItem.appendChild(listspan);

    listBtn.addEventListener("click", () => {
        list.removeChild(listItem);
    });

    list.appendChild(listItem);
});

这是一个简易的购物清单，而在这个例子里 button 元素被包裹在表单里，当用户点击这个按钮时，首先浏览器捕获到 click 事件，然后成功创建了 li、button、span元素，并把输入框的内容添加到了 ul 列表中。但是在最后一步里，表单中的button元素默认是 submit 类型，浏览器会执行默认行为：提交表单，而提交表单后会导致页面瞬间刷新，然后之前的操作就完全作废了。因此需要加上 event.preventDefault() 这行代码，阻止浏览器的默认提交行为。

或者换一种解决方法，在 html 中将 button 元素移出 form 表单，就可以不加 event.preventDefault()。

JavaScript内置标准对象

String.toLowerCase()

toLowerCase() 方法将该字符串转换为小写形式。

1
2
3
const sentence = "The quick brown fox jumps over the lazy dog.";

console.log(sentence.toLowerCase());

输出结果: “the quick brown fox jumps over the lazy dog.”

String.replace()

将源字符串替换为目标字符串，并返回新形成的字符串

1
2
3
const myText = "我是博主";
const newString = myText.replace("博主", "Elyrene");
console.log(newString);

输出“我是Elyrene”

Array.join()

join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串，用逗号或指定的分隔符字符串分隔。如果数组只有一个元素，那么将返回该元素而不使用分隔符。

1
2
3
const myArray = ["我", "爱", "巧克力", "青蛙"];
const madeAString = myArray.join(" ");
console.log(madeAString);

输出“我 爱 巧克力 青蛙”

Math.random()

Math.random() 静态方法返回一个大于等于 0 且小于 1 的伪随机浮点数，并在该范围内近似均匀分布，然后你可以缩放到所需的范围。其实现将选择随机数生成算法的初始种子；它不能由用户选择或重置。

1
2
3
4
5
6
7
8
9
10
11
12
function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

console.log(getRandomInt(3));
// Expected output: 0, 1 or 2

console.log(getRandomInt(1));
// Expected output: 0

console.log(Math.random());
// Expected output: a number from 0 to <1

随机数生成函数

String.prototype.split()

split() 方法接受一个模式，通过搜索模式将字符串分割成一个有序的子串列表，将这些子串放入一个数组，并返回该数组。

1
2
3
4
5
6
7
const str = "The quick brown fox jumps over the lazy dog.";

const words = str.split(" ");
console.log(words[3]);

const chars = str.split("");
console.log(chars[8]);

上面输出: “fox”
下面输出：”k”

JSON.parse()

静态方法JSON.parse()用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。可以提供一个可选的reviver函数，用于在返回结果对象之前对其进行转换。

1
2
3
4
5
6
const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);

console.log(obj.count);

console.log(obj.result);

输出42和true

Array.prototype.push()

push() 方法将指定的元素添加到数组的末尾，并返回新的数组长度。

1
2
3
4
5
6
7
8
9
10
11
const animals = ["pigs", "goats", "sheep"];

const count = animals.push("cows");
console.log(count);
// 期望输出: 4
console.log(animals);
// 期望输出: Array ["pigs", "goats", "sheep", "cows"]

animals.push("chickens", "cats", "dogs");
console.log(animals);
// 期望输出: ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

输出结果已在代码中

Promise.all()

Promise.all()静态方法接受一个Promise可迭代对象作为输入，并返回一个Promise。如果输入的任何 Promise被拒绝，则返回的Promise将被拒绝，并带有第一个被拒绝的原因。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const fetchPromise1 = fetch(
  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
);
const fetchPromise2 = fetch(
  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/not-found",
);
const fetchPromise3 = fetch(
  "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json",
);

Promise.any([fetchPromise1, fetchPromise2, fetchPromise3])
  .then((response) => {
    console.log(`${response.url}：${response.status}`);
  })
  .catch((error) => {
    console.error(`获取失败：${error}`);
  });

任何一个fetch()失败，则返回Error。

Promise.any()

Promise.any()静态方法将一个Promise可迭代对象作为输入，并返回一个Promise。当输入的任何一个Promise兑现时，这个返回的Promise将会兑现，并返回第一个兑现的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const fetchPromise1 = fetch(
  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
);
const fetchPromise2 = fetch(
  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/not-found",
);
const fetchPromise3 = fetch(
  "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json",
);

Promise.any([fetchPromise1, fetchPromise2, fetchPromise3])
  .then((response) => {
    console.log(`${response.url}：${response.status}`);
  })
  .catch((error) => {
    console.error(`获取失败：${error}`);
  });

任何一个fetch()成功，则Promise兑现。

了解npm包管理器

初始化npm包

运行以下代码初始化npm包，这将会创建一个package.json文件

1
npm init

接下来会在终端显示一些问题

  • name: 用于标识应用的名称。默认为文件项目文件夹的名字。
  • version: 应用的起始版本号。按下 Enter 接受默认值即可。
  • description: 应用的简要描述。
  • entry point: 应用的入口 JavaScript 文件。
  • test command: 暂时留空，按下 Enter 就行。
  • git repository: 暂时留空，按下 Enter 就行。
  • keywords: 暂时留空，按下 Enter 就行。
  • author: 填入作者名称。
  • license: 软件包的许可证。按下 Return 来接受默认值即可。

然后项目文件夹内会出现一个 package.json 文件，这样就算初始化完成了

1
npm init --force

或者直接使用 –force 参数直接创建一个默认的 package.json 文件，不会询问问题

安装工具包

运行以下代码安装工具包，这里安装 Parcel 作为演示

1
npm install parcel-bundler

可能会出现以下输出

1
2
3
4
5
To address issues that do not require attention, run:
  npm audit fix

Some issues need review, and may require choosing
a different dependency.

可以尝试运行 npm audit fix 修复一些依赖包的安全漏洞

…好吧这个看起来 v1 大版本已经停止维护了，需要安装 v2 大版本，现在重新下载新的版本。删除命令请看”卸载工具包”

这其中有 –save-dev 参数指定其为开发依赖，也就是只在开发过程中使用，项目打包时不会将其打包进去

1
npm install --save-dev parcel

试运行Parcel工具包

可以使用以下命令启动服务

1
2
3
4
5
# 启动开发服务器（假设入口文件是 index.html）
npx parcel index.html

# 或者，构建生产版本
npx parcel build index.html

如果当前项目是一个网站或Web应用（而非一个供他人使用的JS库），那么终端会报错，需要进入到 package.json 中移除 main 字段: "main": "main.js", 将这一行进行删除，然后就可以再次尝试运行上面的命令

在 main.js 文件中加入以下代码 (需要下载date-fns依赖)

1
2
3
4
import { formatDistanceToNow } from "date-fns";

const date = "1996-09-13 10:00:00";
console.log(`${formatDistanceToNow(new Date(date))} ago`);

同时还要将 index.html 中的引用语句添加 type=”module” 属性

1
<script type="module" src="url"><script>

进入 localhost:”port” (“port”改成自己运行服务的端口) ，控制台将会输出 main.js 代码中的 ‘date’ 时间距离现在有多久

添加脚本

可以在 package.json 脚本中加入以下内容

1
2
3
4
5
6
{
  "scripts": {
    "dev": "parcel src/index.html", // 请根据实际入口文件路径调整
    "build": "parcel build src/index.html"
  }
}

这样就可以使用以下命令启动服务

1
2
npm run dev
npm run build

卸载工具包

运行以下代码卸载工具包

1
npn uninstall [package]

将 [package] 改为要删除的包名称

其他常用命令

更新依赖

运行以下代码更新依赖

1
npm update

漏洞审查

运行一下代码进行漏洞审查

1
npm audit

检查一个依赖

以防会出现下载不同版本的依赖，可能会导致冲突，需要自己手动检查 

1
npm ls date-fns

本篇流水账持已结束更新