JavaScript BookList App | No Frameworks 个人笔记

JavaScript BookList App | No Frameworks 笔记

视频链接：

https://www.youtube.com/watch?v=JaMCxVWtW58&list=PLillGF-RfqbbnEGy3ROiLWk7JMCuSyQtX&index=6

bootstrap

​ 使用bootswatch的Yeti

Fontawesome

​ 外网fontawesome，注册并使用Kits，复制kit code到head里。

VScode 快捷键

​ 向下复制行：shift+option+向下键

​ 格式化：shift+option+f

static

​ 不能创建UI类的实例，所以UI类的所有方法都是static

const和let

​ const声明只限制他指向变量的引用，所以当const变量引用的是对象时，对象的内部属性是可以修改的。

---

​ 对于for循环，因为for循环每次会更新迭代变量，所以不能用const声明迭代变量.

​ 但是用const声明一个不会被for循环改变的变量是可以的，每次迭代只是创建一个新变量.

​ 这对for in和for of循环特别有意义：

for( const value of [1,2,3,4,5]) {
	console.log(value);
}

参考:

​ 产生这样的原因主要在于：
​ for in 和for of它们两个都是一种严格的迭代语句，对于对象中的每一个属性值，有一个指定的语句块被执行。也就是每一次循环，都会产生一个块级作用域来完成每个变量的行为。我可以把上面的例子理解为如下:

{const value = arr[0];}
{const value = arr[1];}
...
{const value = arr[4];}

​ 然而for循环并不会遍历对象的属性，每一次循环都是在同个块级作用域中进行，使用const声明就会报错。
​ 所以在for in或者for of当中，推荐使用const来确保访问到的属性值不会被后续语句所改变。

然而for循环并不会遍历对象的属性，每一次循环都是在同个块级作用域中进行，使用const声明就会报错。
所以在for in或者for of当中，推荐使用const来确保访问到的属性值不会被后续语句所改变。

---

​ 声明时，const优先，let次之，使用const强制声明变量为不可变时，可以提前发现不合法的赋值操作。

字符串模版

​ innerHTML可以用字符串模版动态添加数据

    static addBookToList(book) {
        const list = document.querySelector('#book-list');

        const row = document.createElement('tr');

        row.innerHTML = `
        <td>${book.title}</td>
        <td>${book.author}</td>
        <td>${book.isbn}</td>
        <td><a href="#" class="btn btn-danger btn-sm delete">X</a></td>
        `;
        list.appendChild(row);
    }

​ 字符串模版要使用反引号``，是英文1左边的键

DOMContentLoaded

DOMContentLoaded事件在DOM树构建完成后立即触发，而不用等待图片、js文件、css文件或其他资源加载完成

MDN解释：

DOMContentLoaded当 HTML 文档被完全解析并且所有延迟脚本（<script defer src="…">和<script type="module">）都已下载并执行时，该事件将被触发。它不会等待图像、子帧和异步脚本等其他内容完成加载。

DOMContentLoaded不等待样式表加载，但是延迟脚本会等待样式表，并DOMContentLoaded在延迟脚本后面排队。此外，未延迟或异步（例如<script>）的脚本将等待已解析的样式表加载。

此事件的原始目标是Document已加载的。您可以在接口上监听这个事件，Window在捕获或冒泡阶段进行处理。有关此事件的完整详细信息，请参阅文档页面：DOMContentLoaded事件。

一个不同的事件，load应该只用于检测一个完全加载的页面。在更合适的load地方使用是一个常见的错误。DOMContentLoaded

此活动不可取消。

classList

​ classList属性是 HTML 元素的一个属性，它保存当前选定元素的类名

splice

​ JavaScript中的splice主要用来对js中的数组进行操作，包括删除，添加，替换等。

​ 1.删除-用于删除元素，两个参数，第一个参数（要删除第一项的位置），第二个参数（要删除的项数）

array.splice(index,num)

​ 2.插入-向数组指定位置插入任意项元素。三个参数，第一个参数（插入位置），第二个参数（0），第三个参数（插入的项）

​ array.splice(index,0,insertValue)

​ 3.替换-向数组指定位置插入任意项元素，同时删除任意数量的项，三个参数。第一个参数（起始位置），第二个参数（删除的项数），第三个参数（插入任意数量的项）

​ array.splice(index,num,insertValue)

VScode调试

1. 打开live server
2. 打开调试页面，点运行和调试
3. 设置配置文件，将默认的url改为要调试页面的url
4. 点击绿色箭头调试，绿色箭头旁的要和配置文件中的name对应