JS模块化开发

我不是女神ヾ 2022-12-15 02:22 308阅读 0赞

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

--------------------

# 前言 #

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

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

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

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

# 一、模块化的核心? #

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

# 二、使用步骤 #

## 1.原始写法 ##

代码如下：

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

代码2如下

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

## 2.ES6-Modules ##

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

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

某些情况下，一个模块中包含某个功能，我们并不希望给这个功能命名，而且让导入者自己命名。这时我们就会用到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][http_www.ruanyifeng.com_blog_2012_10_javascript_module.html]

[Link 1]: http://www.ruanyifeng.com/blog/2012/07/three_ways_to_define_a_javascript_class.html
[ECMAScript]: http://en.wikipedia.org/wiki/ECMAScript
[http_www.ruanyifeng.com_blog_2012_10_javascript_module.html]: http://www.ruanyifeng.com/blog/2012/10/javascript_module.html