JS导入导出

本文探讨了JavaScript的导入导出机制,包括命名导出和默认导出,并详细介绍了Axios库,它是一个基于Promise的HTTP库,可在浏览器和Node.js中使用。Axios提供了多种实例方法,如get、post等,方便进行网络请求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天讲下JS的导入导出

  1. 命名导出/命名导出 2.默认导出/默认导入
    //命名导出 export const "变量" = "值"
    导出方法
//命名导入
import{变量名,值} from '文件路径'
//注意值大小写问题,需要两边一模一样
//默认导出
export default 对象,函数;
{
"字符串"
age:19,
name:张三,
}



```javascript
//默认导入
import 变量名 from '路径'

Axios 是什么?
Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
//转载中文网
实例方法
以下是可用的实例方法。指定的配置将与实例的配置合并。

axios#request(config)
axios#get(url[, config]) tip:config传对象
axios#delete(url[, config])
axios#head(url[, config])
axios#options(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])
axios#getUri([config])

//先导入axios
import axios from 'axios';

//配置全局
axios.defaults.baseURL = "http://ajax-api.itheima.net"

//axios实例方法
//GET请求.地址:/api/list 两个参数:sort:1 type :2
axios.get("/api/list",{
    params:{
        sort:1,
        type:2,
    }
})
axios.post("/api/article",{
    title:"文章标题",
    content:"内容",
})
### JavaScript 中模块的导入导出 #### 使用 `export` 导出模块内容 为了使某个脚本文件成为可被其他文件使用的模块,可以利用 `export` 关键字来暴露函数、类、变量或其他声明给外部使用。例如,在一个名为 `info.js` 的文件里定义了一些属性: ```javascript // info.js const name = "Alice"; const age = 25; const height = 168; export { name, age, height }; ``` 这段代码展示了如何创建一个简单的对象,并将其成员作为公共API的一部分公开出去[^1]。 #### 使用 `import` 加载模块 当希望在一个新的上下文中使用这些已发布的组件时,则可以通过 `import` 来获取它们。假设有一个叫做 `main.js` 的入口文件,它会像这样加载来自 `info.js` 的数据: ```javascript // main.js import { name, age, height } from "./info.js"; console.log(`${name}, ${age} years old, is ${height}cm tall.`); ``` 这里说明了怎样精确地选取所需的部分而不会引入不必要的全局命名空间污染。 对于整个模块的功能性调用也十分简单,只需指定路径即可完成自动化的初始化过程: ```javascript // m4.js for (let i = 0; i < 3; i++) { console.log(i); } // 另一文件中直接执行该模块内的逻辑而不必关心具体实现细节 import './m4.js'; ``` 此片段体现了即使不显式提取任何特定项也能让目标脚本按需运行的效果[^2]。 另外一种常见的方式是在 HTML 文档内部通过 `<script>` 标签标记为 `type="module"` 后嵌入上述任意一段 JS 脚本来触发相应行为: ```html <script src="info.js" type="module"></script> <script src="main.js" type="module"></script> <!-- 或者 --> <script type="module"> import { someFunction } from './someModule.js'; </script> ``` 这种方式允许开发者更灵活地管理依赖关系以及优化资源加载策略。 值得注意的是,ESM(ECMAScript Modules)标准下的模块机制不同于 CommonJS 规范下 Node.js 所采用的那种基于同步 I/O 的方式;后者通常借助于 `require()` 函数来进行静态分析前后的动态解析操作[^4]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值