全栈-贾京浩-Vue第四次任务

src/七期学员文件夹/贾京浩/全栈-贾京浩-Vue第二次任务(改)/src/App.vue

@@ -5,8 +5,15 @@
       <TableThead />
       <tbody>
         <tr v-for="(item, index) in list" :key="index" :class="{ active: index === currentIndex }">
-          <BookInfo :name="item.name" :price="item.price" :index="index" :counter="item.counter" @add="add(index)"
-            @reduce="reduce(index)" @select="select(index)" @delete="Delete(index)"/>
+          <BookInfo
+          :name="item.name"
+          :price="item.price"
+          :index="index"
+          :counter="item.counter"
+          @add="add(index)"
+          @reduce="reduce(index)"
+          @select="select(index)"
+          @delete="Delete(index)"/>
         </tr>
         <BookAdd :serialNumber="this.list.length" @addInfo="addInfo"/>
       </tbody>

src/七期学员文件夹/贾京浩/全栈-贾京浩-Vue第四次任务/笔记.md

@@ -0,0 +1,250 @@
+# node.js
+
+## node的输入与输出
+
+node "路径名" + "回车" + "所要输入的内容"
+
+输入内容会以数组形式存在，用下面方法可以进行获取：
+
+```js
+const arg1 = process.argv[0]
+const arg2 = process.argv[1]
+```
+
+##### 清空控制台：
+
+```js
+console.clear()
+//可放在计时器中
+```
+
+##### 打印某位置代码执行的调用栈：
+
+```js
+console.trace()
+```
+
+## node的REPL
+
+REPL是一个简单的，交互式的编程环境
+
+在命令行直接输入"node"即可打开
+
+按两次ctrl+c即可退出
+
+## node中常见的全局对象
+
+##### 特殊的全局变量
+
+```js
+console.log(__dirname)  //显示当前文件夹所在目录
+console.log(__filename)   //显示当前文件夹所在目录+文件名
+```
+
+##### 常见的全局变量（了解即可）
+
+```js
+console.log(process)  //当前代码的进程
+```
+
+***globalThis==global***
+
+***globalThis==window***
+
+# 前端模块化开发
+
+目的：将程序划分成一个个小的结构，每个结构中编写属于自己的逻辑代码，有自己的作用域；这个结构可以将自己希望暴露的变量，函数，对象等导出给其他结构使用
+
+## CommonJS规范
+
+##### 模块中要导出内容：exports/module.exports
+
+```js
+const name = "aaa"
+function formatCount() {
+    return "bbb"
+}
+exports.name = name
+exports.formatCount = formatCount
+//或者:
+module.exports.name = name
+module.exports.formatCount = formatCount
+//但这个方法在开发中基本不用，用下面的：
+module.exports = {
+    name,
+    formatCount
+}
+```
+
+##### 模块中要导入内容：require
+
+```js
+const aaa = require("./aaa.js")
+console.log(aaa.name)
+console.log(aaa.formatCount())
+//但开发中采用更为简便的：
+const {
+    name,
+    formatCount
+} = require("./aaa.js")
+console.log(name)
+console.log(formatCount())
+```
+
+**补充：**
+
+require是一个函数，用于帮我们引入一个文件（模块）中导出的对象
+
+导入格式：require(X)
+
+***当X是一个Node核心模块如：path，http；将会直接返回核心模块***
+
+***当X是一个以./ ../ /开头，若有后缀名，则会按照后缀名的格式查找对应的文件；若没有后缀名，则会按照以下顺序进行查找：***
+
+*直接查找文件X---查找文件X.js---查找文件X.json---查找文件X.node*
+
+***若未找到对应文件，则会将X视为目录，查找目录下的index文件：***
+
+*直接查找文件X/index.js---查找文件X/index.json---查找文件X/index.node*
+
+***当X既不是核心模块也不是路径时，会在当前目录下寻找node_modules文件，在此文件中再次寻找，如果还是找不到，则会去上层目录里的node_modules中继续寻找***
+
+**ps:模块在第一次被引入时，模块中的js代码会被运行一次**
+
+每个模块对象moudle都有一个属性-loaded，其默认值时flase，加载后变为true
+
+**若有循环引入，则其执行顺序：（深度优先算法）**
+
+![联想截图_20230510174323](https://seven-8.oss-cn-beijing.aliyuncs.com/%E8%81%94%E6%83%B3%E6%88%AA%E5%9B%BE_20230510174323.png)
+
+CommonJS加载模块是同步的，这意味着只有等到对应模块加载完毕，模块中的内容才能被运行
+
+AMD:采用的是异步加载模块，常用的库是：require.js和curl.js
+
+CMD:采用的是异步加载模块，常用的库是：SeaJS
+
+## ES Module
+
+关键字：import（导入），export（导出）
+
+采用ES Module 将自动采用严格模式：use strict
+
+需要开启服务器进行测试
+
+##### 导入导出方式：
+
+```js
+const name = "aaa"
+const age = 18
+function sayHello() {
+    console.log("sayHello")
+}
+//导出
+export {
+	name,
+    age,
+    sayHello
+}
+```
+
+```js
+//导入
+import { age, name, sayHello } from "路径./aaa.js"
+//写法中后缀名必须加上
+```
+
+若要将js文件当成模块打开的话，必须用开启服务来打开
+
+##### 其他导出方式：
+
+```js
+//导出时给标识符起个别名
+export {
+	name as fname,
+    age,
+    sayHello
+}
+```
+
+```js
+export const name = "why"
+export const age = 19
+export function sayHello() {
+	console.log("sayHello")
+}
+```
+
+##### 其他导入方式：
+
+```js
+import { name as fname, age, sayHello } from "路径"
+```
+
+```js
+//给整个模块取个别名
+import * as foo from "路径"
+```
+
+###### 开发思想
+
+在文件夹中创建一个index.js文件用作统一导出口
+
+```js
+import { name, age } from "./utils/format.js"
+import { sayHello } from "./utils/parse.js"
+
+export {
+	name,
+    age,
+    parseLyric
+}
+//优化写法（阅读性强）（推荐）
+export { age, name } from "./format.js"
+export { sayHello } from "./parse.js"
+//更加优化写法(简洁)
+export * from "./format.js"
+export * from "./parse.js"
+```
+
+##### 默认导出
+
+```js
+function sayHello() {
+    console.log("sayHello")
+}
+export default sayHello
+//或者
+export default function() {
+    console.log("sayHello")
+}
+```
+
+```js
+import parse from "./parse.js"
+```
+
+*一个模块中只能有一个默认导出*
+
+##### 导入的声明语法
+
+**补充：**
+
+不允许再逻辑代码中导入模块，只能在顶层写
+
+若要对导入行为进行判断则按照以下写法（import函数）：
+
+```js
+let flag = true
+if (flag) {
+    const importPromise = import("./format.js")
+    importPromise.then(res => {
+        console.log(res.name, res.age)
+    })
+}
+else {
+    import("./prase.js").then(res => {
+        console.log(res.sayHello())
+    })
+}
+```
+