码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-07-22 20:14:13      阅读:129      评论:0      收藏:0      [点我收藏+]

标签:相互   引入   type   一个   过多   port   default   增加   相同   

 

模块化:模块是一个文件
    好处:
        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文件只会执行一次

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

标签:相互   引入   type   一个   过多   port   default   增加   相同   

原文地址:https://www.cnblogs.com/lijinxiao/p/11227872.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!