前端模块化开发之导入(import)和导出(export)

最新推荐文章于 2024-08-08 10:59:11 发布

MrLss

最新推荐文章于 2024-08-08 10:59:11 发布

阅读量2.1k

点赞数 1

分类专栏： vue JS 文章标签： vue js

本文链接：https://blog.csdn.net/MrLsss/article/details/109527599

版权

本文探讨了在大团队中如何避免全局变量命名冲突，介绍了使用自执行函数和模拟命名空间的方法。重点讲解了ES6的导入和导出特性，以解决变量作用域问题并实现前端模块化开发，提高代码复用和维护性。通过示例展示了模块化结构，以及在实际应用中遇到的跨域问题及其解决方案，如使用VSCode live Server插件。

摘要由CSDN通过智能技术生成

引入：大团队下使用这种方式封装公用工具就会变成全局变量的灾难，一不小心就会有变量命名冲突的问题。
后面有人提出了采用的用自执行函数来包装代码或jQuery风格的匿名自执行函数来试图解决这个问题

//用自执行函数来包装代码
var Util = function(){
   
     return {
   
          formate : function(c){
   
              //......
          },
          isEmpty: function(){
   
               //......
          }
     }
}()

在这里插入图片描述

补充：JS外部文件模拟命名空间的使用方式：
在这里插入图片描述

ES6前端模块化开发的好处：一个模块就是一个实现特定功能的文件，有了模块我们就可以更方便的使用别人的代码，要用什么功能就加载什么模块。

1.为了解决命名冲突问题变量作用域问题 ES6导入和导出前端模块化开发
2.提高代码复用率一次导出多处导入
3.提高维护性，模块化可以让每个文件的职责单一，非常有利于代码的维护

整体结构说明：
在这里插入图片描述

aaa.js 小明开发

var name="小明";
var flag=true; 
function sum(a,b) {
    
    console.log(a+b);
 } 

 //1.导出所需的变量
 export {
   flag,sum};

 //2.直接声明导出
 export var name=