什么是模块化？模块化怎么实现？

前言：增加印象，留下脚印，忘记还可以翻一翻奥利给。

1，什么是模块化
公司里一个项目是有很多程序员一起开发的，例如 “多人运动” 这个项目
有程序员a ，程序员b ，程序员c …
程序员a 写了 aaa.js 里面有几千行几万行代码
程序员b 写了 bbb.js 里面有几千行几万行代码
程序员c写了 ccc.js 里面有几千行几万行代码
…
随着前端越来越np，代码量越来越多，那么维护代码就是一件很困难的事情
会出现全局变量同名问题，a程序员 var flag = ture；b程序员 var flag = false;
b程序员加班到夜里2点找自己代码也找不出问题，他不可能看a的代码，那么又是几个晚上，
所以就有了模块化
模块化早期是用闭包体现出来的使用模块作为出口
a程序员导出

var moduleA = (function () {// 导出的对象var obj = {}// 小明var name = '小明'var age = 22function sum(num1, num2) {return num1 + num2}var flag = trueif (flag) {console.log(sum(10, 20));}obj.flag = flag;obj.sum = sum;return obj
})()

b程序员导入

;(function () {// 1.想使用flagif (moduleA.flag) {console.log('我是天才, 哈哈哈');}// 2.使用sum函数console.log(moduleA.sum(40, 50));
})()

随着前端的发展，我们定义了很多模块规范
常见的有CommonJS , CMD , AMD , ES6 Modules

2，CommonJS模块化实现（一点了解）
CommonJS导出：

CommonJS导入：

node.js 的 CommonJs
这样你是没有用的需要有人给你解析，那么怎么做呢看一下我另一篇文章
webpack模块化打包工具入门
我们现在去看一下es6模块化实现吧

3，ES6 Modules模块化实现

导入

var name = '小明'
var age = 18
var flag = truefunction sum(num1, num2) {return num1 + num2
}if (flag) {console.log(sum(20, 30));
}// 1.导出方式一:
export {flag, sum
}// 2.导出方式二:
export var num1 = 1000;
export var height = 1.88// 3.导出函数/类
export function mul(num1, num2) {return num1 * num2
}export class Person {run() {console.log('在奔跑');}
}
//默认导出  注意 只能写一个 你浏览器也只能一个默认吧 不用我说原因了吧
export default function (argument) {console.log(argument);
}

导出

// 1.导入的{}中定义的变量
import {flag, sum} from "./aaa.js";if (flag) {console.log('小明是天才, 哈哈哈');console.log(sum(20, 30));
}// 2.直接导入export定义的变量
import {num1, height} from "./aaa.js";console.log(num1);
console.log(height);// 3.导入 export的function/class
import {mul, Person} from "./aaa.js";console.log(mul(30, 50));const p = new Person();
p.run()// 4.导入 export default中的内容
import addr from "./aaa.js";addr('你好啊');// 5.统一全部导入
// import {flag, num, num1, height, Person, mul, sum} from "./aaa.js";import * as aaa from './aaa.js'console.log(aaa.flag);
console.log(aaa.height);

注意
这时候引用就不一样了，上一下 index.html吧
type = “module” 你的浏览器会帮你模块化的

<script src="aaa.js" type="module"></script>
<script src="bbb.js" type="module"></script>
<script src="mmm.js" type="module"></script>

这样变量不仅不会重名造成错误，还以复用。

有事联系QQ：1485731520

什么是模块化？模块化怎么实现？相关推荐

编程思想-模块化-模块化设计：模块化设计
ylbtech-编程思想-模块化-模块化设计:模块化设计模块化设计,简单地说就是程序的编写不是开始就逐条录入计算机语句和指令,而是首先用主程序.子程序.子过程等框架把软件的主要结构和流程描述出来,并 ...
编程思想-模块化-模块化程序设计：模块化程序设计
ylbtech-编程思想-模块化-模块化程序设计:模块化程序设计模块化程序设计是指在进行程序设计时将一个大程序按照功能划分为若干小程序模块,每个小程序模块完成一个确定的功能,并在这些模块之间建立必要 ...
Android的组件化和模块化
Android随着业务的增多,而且后续新的需求的增加,代码的修改会变得非常频繁然后最近在看组件化和模块化公司的业务没有那么大,所以这种方式我并没有采取但是还是需要了解下他的使用机制还有优缺点之 ...
基于Ext JS的模块化应用框架搭建及开发
Ext JS模块化开发早期基于Ext JS的Web开发方式,是在HTML中引入JS和CSS文件,典型的就是引入 ext-all.js 这样的文件.ext all 包含的内容很多, 有基本的核心组件. ...
JavaScript：模块化及模块化规范
什么是JavaScript的模块化?模块化模块化,那就是先有模块,模块是什么?模块就是将一个复杂的程序按照一定的规则拆分并单独封装成一个块或者文件,每一个块内都有自己的内部数据和方法,并且会向外暴露一 ...
前端项目怎样合理使用模块化和闭包？
一. 开发中遇到的问题通常我们在做项目的时候一般会出现这样的一种情况. <script>// a.jsvar varity=1;function changeHTML(){//defin ...
Node.js基础（二）-- 模块化、npm与包
1. 模块化的基本概念 1.1 什么是模块化模块化是指解决一个复杂问题时,自顶向下逐层把系统划分成若干模块的过程.对于整个系统来说,模块是可组合.分解和更换的单元. 1.1.1. 现实生活中的模块化 ...
前端工程师必备：前端的模块化
模块化的理解什么是模块? 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起: 块的内部数据/实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信: 一个模块 ...
什么是模块化？模块化的好处
什么是模块化模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程,有多种属性,分别反映其内部特性.所谓的模块化开发就是封装细节,提供使用接口,彼此之间互不影响,每个模块都是实现某一特定 ...
什么是模块化与模块化的优缺点
什么是模块化: 模块化就是将复杂的系统分解成一个个独立部分,每个部分实现不同的功能,且互不影响.变为更好管理模块的方式. 模块化的意义: 模块化的意义在于最大化的设计重用,以最少的模块.零部件,更快速 ...

什么是模块化？模块化怎么实现？

什么是模块化？模块化怎么实现？

什么是模块化？模块化怎么实现？相关推荐

最新文章

热门文章