模块化开发的优点,

　　本文给大家带来一些关于javascript的知识，主要介绍模块模块化编程的优势。随着前端功能的日益复杂，前端代码也在不断扩展。为了降低维护成本，提高代码重用性，前端模块化势在必行。下面就来看看吧，希望对你有帮助。

　　【相关推荐：javascript视频教程，web前端】

背景

　　随着前端功能的日益复杂，前端代码也在不断膨胀。为了降低维护成本，提高代码重用性，前端模块化势在必行。

　　所有js文件都在一个html中引入，导致了以下不利影响：

　　请求过多。首先我们要依赖多个模块，会发送多个请求，导致请求太多。

　　依赖模糊。我们不知道它们的具体依赖关系是什么，也就是说，因为不知道它们的依赖关系，加载顺序很容易出错。

　　难以维护。以上两个原因导致维修困难，很可能会牵一发而动全身，导致工程出现严重问题。

模块的概念

　　 webpack是这样定义的：

　　在模块化编程中，开发人员将程序分解成离散的功能块，这些功能块被称为模块。每个模块的接触面都比完整的程序小，这使得验证、调试和测试变得容易。编写良好的模块提供了可靠的抽象和封装边界，因此应用程序中的每个模块都有清晰的设计和明确的目的。

　　模块应该是具有单一职责、独立性、低耦合、高内聚和可替代性的离散功能块。

　　模块化的概念

　　模块化是一种将复杂系统分解成更易于管理的模块的方法。它可以将系统代码分成一系列职责单一、高度解耦、可替换的模块。系统一部分的变化如何影响其他部分将变得显而易见，系统的可维护性将越来越容易获得。

　　模块化是一种分而治之的思想。将复杂系统分解成独立的模块，实现细粒度的精细控制，有利于复杂系统的维护和管理。模块化也是组件化的基石，是丰富多彩的前端世界的前提。

　　为什么需要模块化

　　前端开发与其他开发工作的主要区别在于，前端是基于多语言多层次的编码和组织工作；其次，前端产品的交付是基于浏览器的，这些资源是通过增量加载的方式运行到浏览器的。如何在开发环境中组织这些碎片化的代码和资源，并确保它们在浏览器上快速优雅地加载和更新，需要一个模块化的系统。

模块化的好处

　　可维护性。因为模块是独立的，所以一个设计良好的模块会让外部代码尽可能少的依赖自己，这样就可以独立更新和改进。

　　命名空间。在JavaScript中，如果一个变量是在顶级函数之外声明的，那么它就是全局可用的。因此，命名冲突经常意外发生。使用模块化开发封装变量，可以避免污染全球环境。

　　重用代码。有时候我们喜欢将以前编写的项目中的代码复制到新项目中，这没有问题，但更好的方法是通过模块引用来避免重复的代码库。更新模块后，我们可以同步更新所有引用该模块的项目，还可以指定版本号，避免API更改带来的麻烦。

　　:

模块化简史

　　 1.最简单粗暴的方式

　　函数fn1(){

　　//.

　　}

　　函数fn2(){

　　//.

　　}通过脚本标签引入文件，调用相关函数。这样就需要手动管理依赖顺序，容易造成命名冲突，污染全局。随着项目复杂度的增加，维护成本也越来越高。

　　2.用对象模拟名称空间

　　var输出={

　　_count: 0，

　　fn1:函数(){

　　//.

　　}

　　}这个可以解决上面的全球污染问题，有点命名空间的意思。然而，随着项目复杂性的增加，需要维护的对象越来越多。别的不说，命名就是个问题。最重要的是，内部属性仍然可以直接访问和修改。

　　3.关闭

　　var module=(function(){

　　var _ count=0；

　　var fn1=function (){

　　//.

　　}

　　var fn2=函数fn2(){

　　//.

　　}

　　返回{

　　fn1: fn1，

　　fn2: fn2

　　}

　　})()

　　module . fn1()；

　　模块。_ count//undefined因此具有独立的词法范围，内存中将只存在一个副本。这样既防止了外界对今生变量的访问，又不污染全局范围，通过return公开公共接口供外界调用。事实上，这是现代模块化的基础。

　　4.更大的

　　还有松耦合扩展、紧耦合扩展、继承、子模块、跨文件共享私有对象、基于闭包的新构造，目前已经不再优雅。

　　//松散耦合扩展

　　//这样，一个功能块可以在不同的结构相同的文件中实现，不考虑这些文件引入时的顺序。

　　//缺点是不能重写自己的一些属性或者函数，不能在初始化的时候只使用模块的属性。

　　var模块=(函数(我的){

　　//.

　　归还我的

　　})(模块 {})

　　//紧耦合扩展(不传递默认参数)

　　//加载顺序不再自由，但可以重载

　　var模块=(函数(我的){

　　var old=my.someOldFunc

　　my.someOldFunc=function(){

　　//重载方法，仍然可以通过old调用旧方法.

　　}

　　归还我的

　　})(模块)

实现模块化的方案规范总览

　　从历史上看，JavaScript从来没有模块系统，不可能把一个大程序拆分成相互依赖的小文件，然后用简单的方法组装起来。其他语言都有这个功能，比如Ruby的require，Python的import，甚至CSS都有@import，但是JavaScript在这方面没有任何支持，这对大型复杂项目的开发造成了巨大的障碍。

　　在ES6之前，社区开发了一些模块加载方案，其中最重要的是CommonJS和AMD。前者用于服务器，后者用于浏览器。在语言标准层面，ES6实现了模块功能，实现相当简单。完全可以替代CommonJS和AMD规范，成为浏览器和服务器的通用模块解决方案。

　　ES6模块的设计思想是尽可能的静态，这样就可以在编译时确定模块的依赖关系和输入输出的变量。CommonJS和AMD模块只能在运行时确定这些东西。比如CommonJS模块是一个对象，输入的时候必须查找对象属性。

　　目前实现模块化的规范主要有：

　　CommonJS

　　CommonJS是一个项目，旨在构建浏览器环境之外的JavaScript生态系统，比如服务器和桌面环境。

　　模块是同步加载的，也就是说，只有在加载完成后，才能进行后面的操作。CommonJS代表：节点应用程序中的模块，也就是你用npm安装的模块。

　　它使用了请求引用和加载模块、导出定义和导出模块以及模块识别模块。使用require时，需要读取并执行文件，然后返回exports导出的内容。

　　煤矿管理局

　　公共模块定义

　　CMD SeaJS是在升级过程中产生的模块定义的规范。在Web浏览器端的模块加载器中，SeaJS和RequireJS被一起调用，SeaJS的作者是阿里的宇博。

　　CMD规范是浏览器端专用的，模块的加载是异步的，模块只有在使用的时候才会被加载和执行。CMD综合了CommonJS和AMD规范的特点。在Sea.js中，所有JavaScript模块都遵循CMD模块定义规范。

　　超微半导体公司

　　异步模块定义

　　异步模块定义，所谓异步就是模块和模块依赖可以异步加载，它们的加载不会影响后面语句的运行。有效避免了同步加载导致的页面假死现象。AMD代表：RequireJS。

　　AMD最开始是CommonJS规范中的一个草案，全称是异步模块定义，即异步模块加载机制。后来这个草案的作者用RequireJS实现了AMD规范，所以一般来说AMD也指RequireJS。

　　RequireJS是一个工具库，主要用于客户端的模块管理。其模块管理符合AMD规范，RequireJS的基本思想是通过define方法将代码定义为一个模块；通过require方法，实现了代码的模块加载。

　　ES6模块

　　ES6模块的设计思想是尽可能的静态，这样就可以在编译时确定模块的依赖关系和输入输出的变量。所以ES6是在编译时加载的，和CommonJS的运行时加载不同(实际加载的是一个整体对象)。ES6模块不是对象，但是输出代码是export命令明确指定的，输入也是静态命令的形式。

　　ES6的模块自动采用严格模式，无论你是否在模块头添加“使用严格”；

　　严格模式主要有以下限制。

　　变量必须在使用前声明。

　　函数的参数不能同名，否则将会报告错误。

　　不能使用with语句。

　　不能为只读属性赋值，否则将会报告错误。

　　不能用前缀0表示八进制数，否则会报错。

　　无法删除不可删除的属性，否则将会报告错误。

　　无法删除变量delete prop，并将报告错误。只能删除属性deleteplobal [prop]。

　　Eval不在其外部范围内引入变量。

　　不能重新分配Eval和arguments。

　　实参不会自动反映函数形参的变化。

　　不能使用参数。被调用方

　　不能使用参数。调用方

　　这被禁止指向全局对象。

　　不能使用fn.caller和fn.arguments来获取函数调用的堆栈。

　　添加了保留字(如protected、static和interface)

　　模块必须遵守上述所有限制。

　　【相关推荐：javascript视频教程，web前端】以上是模块模块化编程优势(总结与分享)的详细内容。更多请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。