javascript模块化的简介

　　介绍

这篇文章将为大家详细讲解有关javascript模块化的简介,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

模块化在项目中十分的重要,一个复杂的项目肯定有很多相似的功能模块,如果每次都需要重新编写模块肯定既费时又耗力。但是引用别人编写模块的前提是要有统一的“打开姿势”,如果每个人有各自的写法,那么肯定会乱套、下面将介绍一下。

<强>一:模块化进程一:脚本标签

这是最原始的javascript文件加载方式,如果把每一个文件看做是一个模块,那么他们的接口通常是暴露在全局作用域下,也就是定义在窗口对象中,不同模块的接口调用都是一个作用域中,一些复杂的框架,会使用命名空间的概念来组织这些模块的接口。

<强>缺点:

1、污染全局作用域

2,开发人员必须主观解决模块和代码库的依赖关系

3,文件只能按照脚本标签的书写顺序进行加载

4,在大型项目中各种资源难以管理,长期积累的问题导致代码库混乱不堪

<强>二:模块化进程二:CommonJS规范

该规范的核心思想是允许模块通过要求方法来同步加载所要依赖的其他模块,然后通过出口或模块。出口来导出需要暴露的接口。

要求(“module"); 　　要求(“. ./file.js"); 　　时间=exports.doStuff 函数(){}; 　　module.exports =, someValue;

<>强优点:

1,简单并容易使用

2,服务器端模块便于重用

<强>缺点:

1,同步的模块加载方式不适合在浏览器环境中,同步意味着阻塞加载,浏览器资源是异步加载的

2,不能非阻塞的并行加载多个模块

<强>模块。出口与出口的区别

1,出口是指向的模块。出口的引用

2,模块。出口初始值为一个空对象{},所以出口初始值也是{}

3,需要()返回的是模块。出口而不是出口

出口示例:

//, app.js 　　var  circle =,要求(& # 39;。/圆# 39;); 　　console.log (circle.area (4));//circle.js 　　时间=exports.area 函数(r) { 　　,return  r  *, r  *, Math.PI; 　　}

模块。出口示例:

//, app.js 　　var  area =,要求(& # 39;。/区域# 39;); 　　console.log(区域(4));//area.js 　　时间=module.exports 函数(r) { 　　,return  r  *, r  *, Math.PI; 　　}

错误的情况:

//, app.js 　　var  area =,要求(& # 39;。/区域# 39;); 　　console.log(区域(4));//area.js 　　时间=exports 函数(r) { 　　,return  r  *, r  *, Math.PI; 　　}

其实是对出口进行了覆盖,也就是说出口指向了一块新的内存(内容为一个计算圆面积的函数),也就是说出口和模块。出口不再指向同一块内存,也就是说此时出口和模块。出口毫无联系,也就是说模块。出口指向的那块内存并没有做任何改变,仍然为一个空对象{},也就是说。js导出了一个空对象,所以我们在app.js中调用区域(4)会报TypeError:对象不是一个函数的错误。

<强>总结:当我们想让模块导出的是一个对象时,出口和模块。出口出口均可使用(但也不能重新覆盖为一个新的对象),而当我们想导出非对象接口时,就必须也只能覆盖模块。出口。

<强>三:模块化进程三:AMD规范

由于浏览器端的模块不能采用同步的方式加载,会影响后续模块的加载执行,因此AMD(异步模块定义异步模块定义)规范诞生了。

AMD标准中定义了以下两个API

1,需要((模块),回调);
2,定义(id、(取决于)回调);

需要接口用来加载一系列模块,定义接口用来定义并暴露一个模块。

示例:

定义(“module",, (“dep1",,“dep2"],,函数(d1, d2) { 　　,return  someExportedValue; 　　}); 　　要求([“module",,“. ./file"],,函数(模块,文件){/*大敌;……,*/,});

<>强优点:

1,适合在浏览器环境中异步加载模块

2,可以并行加载多个模块

<强>缺点:

1,提高了开发成本,代码的阅读和书写比较困难,模块定义方式的语义不顺畅

2,不符合通用的模块化思维方式,是一种妥协的实现

<强>四:模块化进程四:CMD规范

CMD(常见的模块定义)规范和AMD很相似,尽量保持简单,并与CommonJS和节点。js的模块规范保持了很大的兼容性。在CMD规范中,一个模块就是一个文件。

javascript模块化的简介