ES6模块化及优点,简单案例让你秒懂

Posted 2022-05-04 lijinxiao

 

模块化：模块是一个文件

    好处：

        1.减少命名冲突

        2.避免引入时的层层依赖

        3.可以提升执行效率

    **第一种方法***********************

        1.如何导出（暴露）

            export let run =function()

                console.log("run-->fun")

            

            export let userName = "jinglijuan"

        2.如何引入（依赖）

<script type="module">  //设置为module类型

                import run,userName from "./mo.js" //内部名字要与暴露出来的名字一致



                run();

                console.log(userName)

</script>

    **第二种方法 :暴露的数据过多时使用

        1. 导出时正常导出

            export let run =function()

                console.log("run-->fun")

            

            export let userName = "jinglijuan"

        2. 导入时

<script type = "module">

                import * as 别名 from ‘./mo.js‘

                console.log(别名.暴露的方法或者变量名)

                console.log(mo.run)

</script>

    **第三种方法：直接导出对象

        1. 导出：

            let run = function()

                console.log("jinglijuan")

            

            let userName = "jinglijuan"

            let age = 21

            let sex = "woman"



            export 

                run,

                userName,

                age,

                sex

            

        2. 如何导入（接收）：

            import userName,age from "./mo.js"

            console.log(userName,age)

    **第四种方法：导出的数据起个别名

      导出时通过as给导出的内容起个别名，接收时需要以别名为依据

        1. 导出：

            let age = 21

            let sex = "woman"



            export 

                age as a,

                sex

            

        2. 如何导入（接收）：

            import userName,a from "./mo.js"

            console.log(userName,a)

     **第五种，引入时增加别名（从不同文件中的引入的变量名或者方法名可能是重名的，引入时使用会报错）

        1.引入

           import userName as moUserName from ‘./mo4.js‘

           import userName from ‘./mo5.js‘

           console.log(moUserName,userName)

     **第六种：默认导出（使用频率最高）

        只能有一个默认对象

        1.导出（暴露）

            export default 

                userName:‘jinglijuan‘,

                age:20

            

        2.引入（接收）

            import mo from "./mo.js"

            console.log(mo.userName)

     **第七种：混合导出

        1.导出（暴露）

            export default

                userName:‘jinglijuan‘,

                age:20

            

            export let sex = ‘男‘

         2.引入

            import mo,sex from ‘./mo7.js‘

            console(mo.userName,mo.age,sex)



      模块的特点：

        1.可以相互依赖

        2.当你的模块被多次引入时，只执行一次

            在多处引入相同的js文件，那么这个js文件只会执行一次