JS模块化开发

最新推荐文章于 2024-04-25 16:06:18 发布

lvshun_19991027

最新推荐文章于 2024-04-25 16:06:18 发布

阅读量145

点赞数

分类专栏： JavaScript 文章标签： javascript 模块化

本文链接：https://blog.csdn.net/qq_43799743/article/details/109078948

版权

JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript模块化的核心——导入和导出，以及如何通过ES6-Modules有效地防止变量命名冲突。通过示例展示了原始写法和ES6的import/export语法，阐述了模块化编程在团队协作和代码管理中的重要性。

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

JS模块化开发--有效防止变量命名重复问题

前言

网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法，管理网页的业务逻辑。

Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。

但是，ES6以前不是一种模块化编程语言，它不支持"类"（class），更遑论"模块"（module）了。（ECMAScript标准第六版，支持"类"和"模块"。）

Javascript社区做了很多努力，在现有的运行环境中，实现"模块"的效果。本文总结了当前＂Javascript模块化编程＂的最佳实践，说明如何投入实用。虽然这不是初级教程，但是只要稍稍了解Javascript的基本语法，就能看懂。

一、模块化的核心?

模块化的核心就是导入(import)和导出(export).

二、使用步骤

1.原始写法

代码如下：

var module = (function(){
    var obj = {};
    var name = '小明';
    var flag = true;
    function sum(num1,num2){
        return num1+num2;
    }
    if(flag){
        sum(10,10);
    }
    obj.flag = flag;
    obj.sum = sum;
})()

以上是模块1 的代码，可以在另一个模块使用flag和sum，并且防止其他模块的命名冲突。

代码2如下

(function(){
    if(module.flag){
        console.log(module.sum(20,20));
    }
})()

2.ES6-Modules

为了方便解决命名冲突问题，这里直接在html中的script标签中给type属性赋值module，具体如下代码所示

<script src="aaa.js" type="module"></script>
<script src="bb.js" type="module"></script>
<script src="ccc.js" type="module"></script>

1）. ES6中导出变量、函数和类的方式

let name = '小明';
let age = 10;
let flag = true;
function sum(sum1,sum2) {
    return sum1+sum2;
}
if (flag){
    console.log('小明');
}
//导出方式1
export {
    flag,sum
}
//导出方式2

export let num1 = 1000;//直接导出
num1++;
export let height = 1.88;

// 导出函数和类
export function mul(num1,num2) {
    return num1*num2;
}

export class Person {
    run(){
        console.log('给爷跑');
    }
}

某些情况下，一个模块中包含某个功能，我们并不希望给这个功能命名，而且让导入者自己命名。这时我们就会用到export default。

export default function (argument) {
    console.log(argument);
}

2）.导入

import {flag,sum} from "./aaa.js";
import {num1,height} from "./aaa.js";
import {mul} from "./aaa.js";
import {Person} from "./aaa.js";

if (flag){
    console.log('小红');
}
console.log(sum(1,1))
console.log(num1 , height)
console.log(mul(5, 5));
let person = new Person();
person.run()
//导入export default   随便命名
import addr from "./aaa.js"

addr('你好啊')

//导入全部
// import {flag,num,num1,mul,sum,Person} from "./aaa.js";
//太长了
import * as aaa from './aaa.js';
aaa.flag;

借鉴文章：http://www.ruanyifeng.com/blog/2012/10/javascript_module.html