JSP中导入模块import与必要是两回事
发布时间：2023-03-24 09:53:11 所属栏目：教程 来源：
导读：先来一个常用例子
// WebSocket构造函数，创建WebSocket对象
let ws = new WebSocket('ws://localhost:8888')
// 连接成功后的回调函数
ws.onopen = function (params) {
console.log('客户
// WebSocket构造函数，创建WebSocket对象
let ws = new WebSocket('ws://localhost:8888')
// 连接成功后的回调函数
ws.onopen = function (params) {
console.log('客户
|
先来一个常用例子 // WebSocket构造函数，创建WebSocket对象 let ws = new WebSocket('ws://localhost:8888') // 连接成功后的回调函数 ws.onopen = function (params) { console.log('客户端连接成功') // 向服务器发送消息 ws.send('hello') }; // 从服务器接受到信息时的回调函数 ws.onmessage = function (e) { console.log('收到服务器响应', e.data) }; // 连接关闭后的回调函数 ws.onclose = function(evt) { console.log("关闭客户端连接"); };这篇文章主要介绍“JS中导入模块import和require的区别是什么”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“JS中导入模块import和require的区别是什么”文章能帮助大家解决问题。 js中用import导入模块和用require导入模块的区别 JavaScript中，模块是一种可重用的代码块，它将一些代码打包成一个单独的单元，并且可以在其他代码中进行导入和使用。在导入模块时，JavaScript中有两种常用的方式：使用import和require。 import是ES6引入的新特性，它允许你以声明式的方式导入其他模块中的内容。require是Node.js中的特性，它允许你使用一个函数来加载和导入其他模块。 下面是两种导入模块的方式的详细比较： 导入方式 import导入的方式是使用关键字import加上大括号（如果需要导入的内容是命名导出的话），再加上模块名的方式进行导入。例如： import { func1, func2 } from './myModule'; require导入的方式是使用require函数，将需要导入的模块路径作为参数传递给该函数。例如： const myModule = require('./myModule'); 文件类型 import只能导入ES6模块或者使用Babel等工具转化为ES6模块的代码。而require则可以导入Commonjs模块、AMD模块、UMD模块以及Node.js内置模块等多种类型的模块。 变量提升 在ES6中，import语句是静态执行的，意味着它们在模块内部的顶层执行，并且在模块内部创建一个局部作用域。这意味着导入的变量只在模块内部可见，并且不会影响模块外部的变量。因此，使用import导入的变量是不会被提升的。 require函数是动态执行的，这意味着它在运行时执行，并且不会在模块内部创建一个局部作用域。因此，使用require导入的变量是可以被提升的。 ps:如何理解import语句是静态执行的和require函数是动态执行的? 理解import语句是静态执行的和require函数是动态执行的，需要先了解这两个概念的含义。 静态执行是指在编译阶段就能够确定其执行结果的代码执行方式。在JavaScript中，import语句属于静态执行的代码，也就是说，当JavaScript引擎执行代码时，会在编译阶段对import语句进行静态分析，确定所导入的模块，并在运行时加载这些模块。 动态执行是指在运行时才能确定其执行结果的代码执行方式。在JavaScript中，require函数属于动态执行的代码，也就是说，当JavaScript引擎执行代码时，会在运行时动态地确定所需的模块，并加载这些模块。 因此，可以理解为： import语句是静态执行的，因为在编译阶段就能够确定所导入的模块，从而在运行时快速加载这些模块。 require函数是动态执行的，因为在运行时才能够确定所需的模块，需要动态地加载这些模块。 值得注意的是，由于import语句是静态执行的，因此在代码中不能使用变量或表达式作为模块路径，而只能使用字符串字面量。而require函数则可以接受变量或表达式作为模块路径，从而动态地确定所需的模块。 导出方式 import和require在导出方式上也有一些区别。import使用ES6的导出方式，可以使用命名导出和默认导出两种方式进行导出。例如： // 命名导出 export function func1() {} // 默认导出 export default {} 而require使用Commonjs的导出方式，只能使用默认导出方式进行导出。例如： // 默认导出 module.exports = {}; require除了可以使用 module.exports 导出模块，还可以使用 exports 对象。实际上，exports 对象是 module.exports 的一个引用。当使用 exports 导出时，实际上是向 module.exports 对象添加属性和方法。 模块作用域 在JavaScript中，每个模块都有自己的作用域，模块之间的变量是互相隔离的，不会相互干扰。这也是模块化编程的一个主要特点。 在使用import导入模块时，实际上是在模块内部创建了一个指向被导入模块的引用，而不是直接复制模块中的变量。因此，当不同的文件中使用import导入相同的模块时，它们实际上是共享了同一个模块实例，所以可以访问和修改同一个模块中的变量。 而在使用require导入模块时，实际上是将导入模块中的变量直接复制到(可以理解为浅拷贝)当前模块的作用域中。因此，当不同的文件中使用require导入相同的模块时，它们实际上是拥有各自独立的模块实例，彼此之间不会共享模块中的变量。 需要注意的是，如果使用require导入的模块中含有可变状态的对象，那么在不同文件中修改该对象的变量会相互影响。这也是require在某些情况下会产生一些难以预测的副作用的原因之一。而使用import导入的模块，由于是共享同一个模块实例，相对来说更容易管理和控制。 如果使用require导入的模块中含有可变状态的对象，比如一个对象的属性值可以被修改，那么当在不同的文件中修改这个对象中变量时，由于require会将导入的模块中的变量直接复制到当前模块的作用域中(类似于浅拷贝,模块中的普通变量（例如字符串、数字等）是非共享的，而对象的变量则是能被修改共用的。)，因此会导致这个对象的变量在不同文件中的值相互影响。 举个例子，假设有一个config.js模块，其中定义了一个可变的对象config，并且在main.js和app.js两个文件中使用了require导入该模块： config.js： // config.js let config = { env: 'dev', port: 3000 } module.exports = config; main.js： // main.js const config = require('./config.js'); // 修改config对象的属性值 config.port = 4000; console.log(`config.port in main.js: ${config.port}`); app.js： // app.js const config = require('./config.js'); console.log(`config.port in app.js: ${config.port}`); 当执行main.js和app.js时，它们都会通过require导入config.js模块，并且main.js中修改了config对象的port属性值。那么当app.js输出config.port时，它实际上输出的是被main.js修改后的port属性值，而不是config.js模块原本定义的值。这就是因为require导入的模块中含有可变状态的对象或变量，在不同文件中修改该对象或变量会相互影响的原因。 需要注意的是，这种影响是由于模块之间共享同一个对象的引用造成的，而不是模块本身的问题。因此，在编写模块时，需要谨慎地处理可变状态的对象，尽量避免在不同模块之间共享同一个对象的引用，以避免出现不可预测的副作用。 最后 为了避免使用require导入的模块中含有可变状态的对象或变量，在不同文件中修改该对象或变量会相互影响的副作用，有以下几种方法： 1.使用import代替require：使用import导入模块时，不同文件导入同一个模块实际上是共享了同一个模块实例，因此可以避免使用require时出现的副作用。 2.使用纯函数：纯函数是指输入相同的参数，输出结果也相同，并且不会对外部环境产生任何副作用的函数。如果在模块中使用纯函数，那么即使该模块中的变量被修改了，但由于纯函数不会产生副作用，因此在不同文件中调用该函数时，输出结果也不会发生变化。 3.使用常量或不可变对象：常量或不可变对象指的是一旦定义后就无法再被修改的值。如果在模块中使用常量或不可变对象，那么即使该模块中的变量被修改了，但由于常量或不可变对象无法被修改，因此在不同文件中调用该变量时，其值也不会发生变化。 4.使用模块的副本：可以通过在模块导出时返回一个副本，而不是直接返回模块内部的对象或变量。这样在不同文件中使用require导入该模块时，它们会得到不同的副本，而不是共享同一个模块实例。例如： // config.js let config = { env: 'dev', port: 3000 } module.exports = Object.assign({}, config); 在导出时使用Object.assign方法返回config对象的一个副本，从而避免了不同文件之间共享同一个模块实例的副作用。 需要注意的是，这些方法并不是万无一失的，而是根据具体情况选用合适的方法来避免副作用。在编写模块时，需要考虑模块中的变量是否需要共享，是否可以被修改，以及模块在不同文件中被调用时可能产生的副作用等因素，从而选择合适的方法来避免副作用。 关于“JS中导入模块import和require的区别是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程之家行业资讯频道，小编每天都会为大家更新不同的知识点。 // 连接失败后的回调函数 ws.onerror = function (evt) { console.log("连接失败了"); } WebSocket WebSocket 对象提供了用于创建和管理 WebSocket 连接，以及可以通过该连接发送和接收数据的 API。 var ws= new WebSocket(url, protocols); 参数 url：要连接的 URL；这应该是 WebSocket 服务器将响应的 URL。 protocols（可选）：一个协议字符串或者一个包含协议字符串的数组。这些字符串用于指定子协议，这样单个服务器可以实现多个 WebSocket 子协议（可以通过一台服务器根据指定的协议（protocol）处理不同类型的交互）。如果不指定协议字符串，则假定为空字符串。 属性 1. readyState 属性返回实例对象的当前状态 CONNECTING：值为0，表示正在连接。 OPEN：值为1，表示连接成功，可以通信。 CLOSING：值为2，表示连接正在关闭。 CLOSED：值为3，表示连接已经关闭，或者打开连接失败。 示例 switch (ws.readyState) { case WebSocket.CONNECTING: // 也可以用0 // do something break; case WebSocket.OPEN: // 也可以用1 // do something break; case WebSocket.CLOSING: // 也可以用2 // do something break; case WebSocket.CLOSED: // 也可以用3 // do something break; default: // this never happens break; } 2. onopen 连接成功后的回调函数 当WebSocket 的连接状态readyState 变为1时调用，这意味着当前连接已经准备好发送和接受数据。 使用方法 ws.onopen = function () { ws.send('Hello Server!'); } 或者 ws.addEventListener('open', function (event) { ws.send('Hello Server!'); }); 3. onmessage 从服务器接受到信息时的回调函数 message 事件会在 WebSocket 接收到新消息时被触发 使用方法 ws.onmessage = function(event) { // 接收到的数据 var data = event.data; // 其他代码 }; 或者 ws.addEventListener("message", function(event) { // 接收到的数据 var data = event.data; // 其他代码 }); 注意：服务器推送的数据可能有多种格式，需要我们动态判断，也可以通过 binaryType 属性设置 判断 / 设置 数据格式 // 判断 ws.onmessage = function(event){ if(typeof event.data === String) { console.log("返回数据是字符串"); } } // binaryType 属性设置 ws.binaryType = "arraybuffer"; ws.onmessage = function(e) { // 收到的是 ArrayBuffer 数据 console.log(e.data.byteLength); }; 4. onclose 连接关闭后的回调函数 onclose 在 WebSocket 连接的readyState 变为 CLOSED或3时被调用，它接收一个名字为close的 CloseEvent 事件 使用方法 ws.onclose = function(event) { var code = event.code; // 表示服务端发送的关闭码 var reason = event.reason; // 表示服务器关闭连接的原因 var wasClean = event.wasClean; // 表示连接是否完全关闭 // 其他代码 }; 或者 ws.addEventListener("close", function(event) { var code = event.code; // 表示服务端发送的关闭码 var reason = event.reason; // 表示服务器关闭连接的原因 var wasClean = event.wasClean; // 表示连接是否完全关闭 // 其他代码 }); 5. onerror 连接失败后的回调函数 当websocket的连接由于一些错误事件的发生 (例如无法发送一些数据) 而被关闭时，一个error事件将被引发。 使用方法 ws.onerror = function(event) { console.log('连接错误: ', event); }; 或者 ws.addEventListener('error', function (event) { console.log('连接错误: ', event); }); 6. bufferedamount 未发送至服务器的字节数 bufferedamount是一个只读属性，用于返回已经被send()方法放入队列中但还没有被发送到网络中的数据的字节数。一旦队列中的所有数据被发送至网络，则该属性值将被重置为 0。但是，若在发送过程中连接被关闭，则属性值不会重置为 0。如果你不断地调用send()，则该属性值会持续增长。 使用方法 // 创建数据 var data = new ArrayBuffer(10000000); // 发送数据 ws.send(data); // 判断数据是否 if (socket.bufferedamount === 0) { // 数据发送完成 } else { // 还有数据未发送完成 } 方法 1. send() 对要传输的数据进行排队 send() 方法将需要通过 WebSocket 链接传输至服务器的数据排入队列，并根据所需要传输的 data bytes 的大小来增加 bufferedamount 的值。若数据无法传输（例如数据需要缓存而缓冲区已满）时，套接字会自行关闭。 ws.send('your message'); 注意：用于传输至服务器的数据。它必须是以下类型之一： USVString：文本字符串。字符串将以 UTF-8 格式添加到缓冲区，并且 bufferedamount 将加上该字符串以 UTF-8 格式编码时的字节数的值。 ArrayBuffer：您可以使用一有类型的数组对象发送底层二进制数据；其二进制数据内存将被缓存于缓冲区，bufferedamount 将加上所需字节数的值。 Blob：Blob 类型将队列 blob 中的原始数据以二进制中传输。 bufferedamount 将加上原始数据的字节数的值。 ArrayBufferView：您可以以二进制帧的形式发送任何 JavaScript 类数组对象 ；其二进制数据内容将被队列于缓冲区中。值 bufferedamount 将加上必要字节数的值。 2. close() 关闭当前链接 close() 方法关闭 WebSocket 连接或连接尝试（如果有的话）。如果连接已经关闭，则此方法不执行任何操作。 使用方法 // WebSocket.close(code, reason) ws.close(); code（可选）：一个数字状态码，它解释了连接关闭的原因。如果没有传这个参数，默认使用 1005。 reason（可选）：一个人类可读的字符串，它解释了连接关闭的原因。这个 UTF-8 编码的字符串不能超过 123 个字节。 （编辑：驾考网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
推荐文章
站长推荐
