李权20200831

今日学习日记

什么是模块?

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);

评论

this is is footer