JS的模块开发

什么是模块？

1.模块就像拼图一样，一个模块就是一个拼图，当我们把所有拼图正确的拼在一起的时候，形成一张照片，就是我们想要的一个整体，而形成那张图片的步骤，也就是把一张张拼图拼在一起的过程就叫模块化开发，我是这样理解的，如果大家有不同见解，希望大家留言。谢谢

2.模块就是一个独立的个体，我们不能操作他的内部，只能通过它暴露的接口来获取它的数据

使用模块的作用：

• 模块是一个独立的文件，里面是封装的函数或者类
• 解决了命名空间的冲突、
• 模块隐藏了内部的实现，只对外开放接口，保证代码的安全性
• 模块可以避免滥用全局变量，造成代码的不可控
• 模块比较易于维护，提高代码的执行效率

2.标签的使用

因为以前我们的js是不支持模块化开发的，所以现在我们使用模块化开发必须要在script标签中添加type属性值为module告知浏览器这是一个模块

<script type="module"></script>

模块的使用路径：

我们如果引入的模块是自己写的，必须加入 ./ 因为是我们自己写的是相对路径，所以并不清楚我们写的位置，所以需要添加'./'确定我们的路径

下面的代码就是错误的，浏览器会报错

    <script type="module">
        import {hd} from '2.js';
        console.log(hd);
    </script>

这样浏览器会报错：

Uncaught TypeError: Failed to resolve module specifier "2.js". Relative references must start with either "/", "./", or "../".

提醒我们一定要加入./

下面的代码才是正确的

 <script type="module">
        import {hd} from './2.js';
        console.log(hd);
    </script>

模块的严格模式:

1.大家注意当我们使用模块化开发的时候，它默认是严格模式下的，大家知道在严格模式下，我们全局变量下的this指向的不是window而是undefined，如果不声明变量就是复制的话，也会直接报错

    <script type="module">
        hd = 'liquan';
        console.log(hd);  //hd is not undefind
    </script>

    <script type="module">
        console.log(this);  //this指向的是undefind
    </script>

模块的作用域：

1.模块有自己的独立的全局变量，模块之间如果不相互导入的话是不能引入的。下面模块的变量是不能相互引用的

    <script type="module">
        let hd = 'liquan';
    </script>
    <script type="module">
        console.log(hd);
    </script>

模块的预解析：

1.模块在导入时，只执行一次代码解析，之后导入相同的模块不会再进行解析，而是使用第一次的代码的解析结果，并且共享数据

    <script type="module" src="./one.js">
    </script>
    <script type="module" src="./one.js">
    </script>
    <script type="module" src="./one.js">
    </script>

上面的代码他只会执行一次，也就是输出123

导出模块

1.使用export 导出模块的接口，没有导出的变量和方法就是模块的私有变量和方法，也就是模块私有的

2.模块的导出分为几种，一种就是分别导出模块的变量，想下面的代码一样：

export let hd = {
    name:'liquan',
    age:18
};
export let str = 'liquan';
export class user{

};

注意：在export的结束要加分号结尾，不然代码执行不成功，会报出没有开放接口

3.使用指量导出数据

let hd = 'liquan';
let fn = function(){

};
let obj = {

};
export {hd,fn,obj};

具名导入：

也就是你导出的模块变量是什么名字，你导入的时候就是什么名字

let hd = 'liquan';
let fn = function(){

};
let obj = {

};
export {hd,fn,obj};
<script type="module">
import { hd , fn ,obj} from '相对路径';
</scirpt>

也就是上面的代码

别名导入：

也就是给你导入的变量重新起一个名字，避免变量名冲突，比如我的模块里已经有一个name名字了，导入的变量也有一个name变量，变量名冲突，模块就会报错

  <script type="module" >
        import {hd} from './one.js';
        let hd = 'liquan';

    </script>

浏览器就会报错：hd has already been declared

下面的代码就是正确的：

 <script type="module" >
        import {hd as user} from './one.js';
        let hd = 'liquan';

    </script>

默认导出：

1.如果我们只暴露一个数据，可以使用默认导出。语法：export default

export default class {
    static show() {
        console.log(123);
    }
};

当我们使用一个变量导出的时候，可以不给添加类名，这是可以的。

2.如果导出的时候，给导出的变量命名为default 也默认为是默认的导出。

class user{
    static show(){
        console.log(123);
    }
}
export {user as default};

混合导出导入：

就是把默认导出的变量和普通的变量一起导出，如下面的代码所示：

class user{
    static show(){
        console.log(123);
    }
}
let hd = 'liquan';
export {user as default,hd};

也可以分别导出：

export default class{
    static show(){
        console.log(123);
    }
};
let hd = 'liquan';
export {hd};

默认接口导入的时候不需要加{}，普通接口还需要使用{} 导入。

import user from './one.js';
import {hd} from './one.js';

也可以使用一条语句导入导出的接口

import user,{hd} from './one.js';
        

也可以给默认导出起别名导入默认接口

        import {hd,default as user} from './one.js';

批量导入：

当我们批量导入接口的时候可以使用 * 接受并且给他们起别名接收

        import * as api from './one.js';
        console.log(api.hd);
        console.log(api.obj);

在导出的接口中如果有默认导出的话，需要得到默认导出的数据，需要这样写,导入变量的别名下的default的变量才能得到：

        import * as api from './one.js';
        console.log(api.hd);
        console.log(api.obj);
        console.log(api.default.user);

导出合并：

1.当我们导入多个模块的时候，可以新创建一个模块文件去接受这写模块的接口，再导入到html文件中，但是有一个问题，容易引起变量冲突，就是命名，所以我们可以把批量导入一个模块的变量，另起一个别名，让模块的变量存储在这个别名里面，就不会有变量冲突

let str = 'liquan';  //这是11.js模块的变量
class user {
    static show(){
        console.log(123);
    }
}
export {str,user};

 

export default function(){
    console.log(456);
};
let name = 'liur';
export {name};

import * as one from './11.js';
import * as two from './12.js';
export {one,two};

import * as api from './13.js';
console.log(api);

 <script type="module" src="./14.js">

向上面代码一样操作。

动态加载：

使用import必须在顶层静态导入模块，但是import可以动态导入，也就是按需加载，import返回的是一个promise对象

        var btn =document.querySelector('button');
        btn.addEventListener('click',function(){
            import('./13.js').then(module=>{
            console.log(module);
            console.log(module.str);
        })
        })

这里面有一个bug，就是我把所有的接口导入路径输进去，显示不出来，具体问题我也不清楚，希望大家留言给我解释下，谢谢

webpack常用指令：

1.npm -init -y;   文件夹生成一个packpage。json文件

2. webpack --mode development --watch;

npm i webpack webpack-cli --save