es6模块化，websocket和mvc

玖商

已于 2023-08-07 16:46:50 修改

阅读量774

点赞数

于 2021-12-19 20:52:42 首次发布

本文链接：https://blog.csdn.net/weixin_58139900/article/details/122029543

版权

es6模块化

仅在第一次导入时被解析
模块只通过 HTTP(s) 工作，而非本地
- 如果你尝试通过 file:// 协议在本地打开一个网页，你会发现 import/export 指令不起作用。你可以使用本地 Web 服务器，例如 static-server，或者使用编辑器的“实时服务器”功能，例如 VS Code 的 Live Server Extension 来测试模块

使用es6模块化步骤：

(1) 使用export暴露数据

(2) 使用import引入模块

(3) 在html中引入js文件，注意为script的属性设置 type="module"

export

js模块其中一种表示方法

<script type="module">
  // 变量仅在这个 module script 内可见
  let user = "John";
</script>

<script type="module">
  alert(user); // Error: user is not defined
</script>

es6模块化语法有三种：

单个暴露语法1：

export var/let 变量1=值1;

export function 方法名(){

};

批量暴露语法2：

let 变量1 = 值1;

var 变量2 = 值2;

funcntion 方法名(){}

...

export {变量1,变量2,方法,}

暴露多个数据，注意变量的名称和暴露的名称一致

默认暴露语法3:

export default 值

默认暴露在同一个模块文件中只能定义一次

m1.js模块文件代码如下：

//单个暴露：
export let usr = '李四';
export var age = 20;
export function demo() {
    console.log('demo()方法在m1.js文件中');
}

m2.js模块文件代码如下：

//批量暴露：
let usr = '张三';
var email = 'zhangsan@qq.com';

function mytest() {
    console.log(`mytest()方法在m2.js文件中`);
}

export { usr as u, email, mytest }

m3.js模块文件代码如下：

//默认暴露语法：
//注意：默认暴露在同一个模块文件中只能定义一次
export default { "uname": "小李", tel: 110 }
// export default [1, 3, 9, 2]  // Identifier '.default' has already been declared

引入

使用es6模块的语法：

import { 变量 } from "模块文件路径"
import { 变量 as  新变量名 } from "模块文件路径"
import 变量  from "模块文件路径"  //使用采用默认暴露语法定义的模块文件

描述：加载模块

在main.js文件中使用上面定义好的m1.js、m2.js、m3.js模块文件，代码如下：

import { usr, age, demo } from './m1.js';
// import { usr as u, email, mytest } from './m2.js';
import { u, email, mytest } from './m2.js';
import y from './m3.js'; //m3.js为默认暴露语法定义的模块文件


console.log(usr, age, u, email, y);
demo();
mytest();

运行调试上面定义的模块文件：

定义main.html文件代码如下：

注意：要通过vscode插件"live server"来运行main.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

最低0.47元/天解锁文章

玖商

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
es6模块化，websocket和mvc

目录es6模块化使用es6模块化步骤：exportes6模块化语法有三种：引入运行调试上面定义的模块文件：websocketsocket.io模块webSocket的常用方法1.webSocket2.io3.on4.emit5.join6.to群聊编写点对点通信MVCes6模块化使用es6模块化步骤：(1) 使用export暴露数据(2) 使用import引入模块(3) 在html中引入js文件，注意为script.
复制链接

扫一扫