diff --git "a/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\350\264\276\344\272\254\346\265\251/\345\205\250\346\240\210-\350\264\276\344\272\254\346\265\251-Vue\347\254\254\344\272\214\346\254\241\344\273\273\345\212\241(\346\224\271)/src/App.vue" "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\350\264\276\344\272\254\346\265\251/\345\205\250\346\240\210-\350\264\276\344\272\254\346\265\251-Vue\347\254\254\344\272\214\346\254\241\344\273\273\345\212\241(\346\224\271)/src/App.vue" index f970c143..92063765 100644 --- "a/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\350\264\276\344\272\254\346\265\251/\345\205\250\346\240\210-\350\264\276\344\272\254\346\265\251-Vue\347\254\254\344\272\214\346\254\241\344\273\273\345\212\241(\346\224\271)/src/App.vue" +++ "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\350\264\276\344\272\254\346\265\251/\345\205\250\346\240\210-\350\264\276\344\272\254\346\265\251-Vue\347\254\254\344\272\214\346\254\241\344\273\273\345\212\241(\346\224\271)/src/App.vue" @@ -5,8 +5,15 @@ - + diff --git "a/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\350\264\276\344\272\254\346\265\251/\345\205\250\346\240\210-\350\264\276\344\272\254\346\265\251-Vue\347\254\254\345\233\233\346\254\241\344\273\273\345\212\241/\347\254\224\350\256\260.md" "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\350\264\276\344\272\254\346\265\251/\345\205\250\346\240\210-\350\264\276\344\272\254\346\265\251-Vue\347\254\254\345\233\233\346\254\241\344\273\273\345\212\241/\347\254\224\350\256\260.md" new file mode 100644 index 00000000..5f68ef75 --- /dev/null +++ "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\350\264\276\344\272\254\346\265\251/\345\205\250\346\240\210-\350\264\276\344\272\254\346\265\251-Vue\347\254\254\345\233\233\346\254\241\344\273\273\345\212\241/\347\254\224\350\256\260.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()) + }) +} +``` +