认识js模块

什么是模块

一个模块就是一个文件。一个脚本就是一个模块。就这么简单。

js 模块

在js里面，我们可以把模块定义为实现特定功能的一组方法，只要把实现某一功能的函数放一起，就可以看成是一个“模块”。

//  例如：
//  这是一个弹窗功能的一组方法
 //这种做法的缺点很明显：”污染”了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。


//  创建弹窗
function fn1(){
    // do  something
}
 
// 打开弹窗
function fn2(){
    // do  something
}
 
// 关闭弹窗
function fn3(){
    // do  something
}


//为了解决上面这种基础写法的缺陷，可以把上述功能函数写在一个对象里 模块成员被包含在内。
let moduleAlert =  {
       id: 1,
       fn1: function {
           // do  something
       },
       fn2: function {
           // do  something
       },
       fn3: function {
           // do  something
       }

模块化的解决方案：

闭包+自执行函数

为什么用模块

1.变量名的冲突

好处:防止局部变量和全局变量重名，

优点

1.提高代码的复用性

2.便于维护

3.按需加载

如何用

**模块化的解决方案：**1.闭包+自执行函数

  格式
    const 模块名 = (function(){
      return {
        //暴露的值
      }
    })(引入的模块)

ES6模块

ES Module模块采用export和import关键字来实现模块化：

• export负责将模块内的内容导出；
• import负责从其他模块导入内容；

采用ES Module将自动采用严格模式：use strict

script 标签有一个 type 属性，默认情况为：“application/javascript”。所以大多数情况都简写了。但是在 ES Module 中，为了告诉浏览器我们是用的 ES Module，需要修改 type属性为 “module”。
HTML使用type="module"会默认产生跨域请求，而file协议并不支持。

nodejs模块

创建模块（例如hello.js）

   // hello.js
   function hello(name) {
     console.log('Hello, ' + name);
   }

   module.exports = hello; // 导出模块，这里导出的是hello函数

2.使用模块（例如main.js）：

   // main.js
   var hello = require('./hello'); // 使用相对路径导入hello模块

   hello('World'); // 调用导入的hello函数

在上面的例子中，hello.js定义了一个名为hello的函数，并通过module.exports将其暴露给外部使用。main.js则使用require函数加载hello.js，并将导出的函数保存在变量hello中。之后，可以在main.js中像使用本地函数一样调用hello。

参考 https://blog.csdn.net/qq_35942348/article/details/110475765