大事件前端篇JavaScript导入导出

最新推荐文章于 2024-08-07 21:56:36 发布

方方怪

最新推荐文章于 2024-08-07 21:56:36 发布

阅读量323

点赞数 3

分类专栏： Vue3+Element-Plus 文章标签：学习 vue elementui

本文链接：https://blog.csdn.net/qq_74474809/article/details/140954581

版权

Vue3+Element-Plus 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前置知识：

呃呃呃......有那么一点点？？但不多。。。。不管，先学，不会的时候再去看响应的知识点吧。

补充一个模块化相关的知识点：JavaScript-导入导出

JS提供的导入导出机制，可以实现按需导入。

以前我们要在HTML文件中导入js文件：通过script标签进行导入

html文件中导入showMessage.js之后只用到了complexMessage，其他方法没有用到，但是使用script标签会把全部内容导入进来，这样的话，会造成性能上的损失。

JavaScript-导入导出

JS提供的导入导出机制，可以实现按需导入。

首先需要在js定义函数中的地方添加一个export关键字完成导出，然后需要在html文件里面在需要导入的地方通过import关键字进行导入

当js文件里面有非常多函数，这样导入导出就麻烦了。幸好JS还提供了批量导出的方式来简化，只写一个export，export后面添加一个大括号，把要导出的函数用逗号分隔就好了。

导入的时候，html中使用js函数名很长，可以起别名：使用as关键字

<body>
        <div>
            <button id="btn" >点我展示信息</button>
        </div>
    
        <script type="module">
            import { complexMessage as cm } from './showMessage.js'
            
            document.getElementById("btn").onclick = function(){
                cm('bbbbb');
            }
        </script>
</body>

而且在导出时也可以起别名：

  
    export  {simpleMessage as sm,complexMessage as cm}

导出的内容特别多，哪里记得住那么多别名？

使用默认导出：

js修改为：

  export default {simpleMessage ,complexMessage }

html也要跟着修改：

messageMethods就代表着js文件中所有要导出的内容

<body>
        <div>
            <button id="btn" >点我展示信息</button>
        </div>
    
        <script type="module">
            import messageMethods from './showMessage.js'
            
            document.getElementById("btn").onclick = function(){
                messageMethods.complexMessage('bbbbb');
            }
        </script>
</body>