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

最新推荐文章于 2024-05-16 10:14:09 发布

MrLss

最新推荐文章于 2024-05-16 10:14:09 发布

阅读量2.1k

点赞数 1

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

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

版权

vue 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

17 篇文章 0 订阅

订阅专栏

本文探讨了在大团队中如何避免全局变量命名冲突，介绍了使用自执行函数和模拟命名空间的方法。重点讲解了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="张三"

 //3.导出函数和类
 export function getAge() {
     console.log("今年23岁");
   }


//---------------------和C#中类相似---------------------
export class Person{
    adress="山东菏泽";
    sayHi="我是Person属性";
    //构造函数
    constructor(name,age){
        //可以动态声明即赋值 
        this.pname=name;
        this.page=age;
    }
    //方法
    run(){
        console.log("我是类里面的方法。我运行起来了"+this.pname+"---"+this.page+"---"+this.sayHi);
    }
}

xm-m.js 小明的另一个模块文件(js)

//导入要使用的变量 变量名保持一致 才能一一装配上
// import {flag,sum,name,getAge,Person} from '../前端模块化开发/aaa.js'

// if(flag){
//     console.log("已通过验证");
//     sum(20,40);
//     console.log(name);
//     getAge(); 
//     //创建Person类的对象 调用其方法
//     new Person("张三",25).run();  
// }


//全部导入 并保存到data中
import * as data from '../前端模块化开发/aaa.js'


if(data.flag){
    console.log("已通过验证");
    data.sum(20,40);
    console.log(data.name);
    data.getAge(); 
    //创建Person类的对象 调用其方法
    new data.Person("张三",25).run();  
}

bbb.js 晓红开发

var name="晓红";
var flag=false; 
 
 if(flag){
     console.log("我是杨晓红，今年37岁了");
 }

 /***
  * 因为是可以被 引用方 重命名  所以导入default 数据 只能有一条  
  * 如果有多条 就无法判断具体指向的哪一个default数据了
  ***/
 export default function () { console.log("我被default修饰 你可以自定义方法名称(变量名)")  }

晓红的另一个模块文件（js）

//在导入被default修饰的变量或方法时  可以自定义方法名或变量名  因为是唯一的  所以可以一一对应装配
import parentMethod from '../前端模块化开发/bbb.js'

parentMethod();

主文件引用(Index)
script标签中type=“module” 代表每个js文件都是一个模块，独立作用域不会相互影响
相互引用要通过导入import和导出export

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <!-- 为了解决命名冲突问题  变量作用域问题 ES6导入和导出  前端模块化开发 -->
        <!-- type="module"  代表每个js文件都是一个模块，独立作用域 不会相互影响 
            相互引用要通过导入import和导出export -->
        <script src="./aaa.js" type="module"></script>
        <script src="./bbb.js" type="module"></script>
        <script src="./xm-m.js" type="module"></script>
        <script src="./xh-m.js" type="module"></script>
    </body>
    </html>