模块化

?xiaoxiao, 发布于2019-08-20 17:45 / 2768人阅读

摘要：模块化总结最近重新复习的模块化的相关知识，总结一下，仅供自己理解和大家参考。模块化的优点可维护性根据定义，每个模块都是独立的。良好设计的模块会尽量与外部的代码撇清关系，以便于独立对其进行改进和维护。

模块化总结

最近重新复习的模块化的相关知识，总结一下，仅供自己理解和大家参考。

模块化的优点

可维护性：根据定义，每个模块都是独立的。良好设计的模块会尽量与外部的代码撇清关系，以便于独立对其进行改进和维护。维护一个独立的模块比起一团凌乱的代码来说要轻松很多。

命名空间：在JavaScript中，最高级别的函数外定义的变量都是全局变量（这意味着所有人都可以访问到它们）。也正因如此，当一些无关的代码碰巧使用到同名变量的时候，我们就会遇到“命名空间污染”的问题。

模块化规范

现在比较流行的模块化规范主要有commomJS,AMD, CMD ,ES6 ，现在逐一说明一下.

commonJS

commonJS 是服务器端的模块化规范，node.js就是参照commonJS规范实现的。commonJS中有一个全局的方法require() 用来加载模块。

function myModule(){
    this.hello = function(){
        return "hello";
    }
    this.goodbye = function(){
        return "gooodbye!";
    }
}
module.exports = myModile;

其实module变量代表当前模块.

这样就可以在其他模块中使用这个模块

var myModule = require("myModule");

var myModuleInstance = new myModule();
myModuleInstance.hello();
myModuleInstance.goodbye();

关于commonJS的更多，见CommonJS规范

AMD

commonJS 定义模块的方式和引入模块的方式还是比较简单的，但不适合浏览器端，因为commonJS是同步加载的。而AMD是异步加载的，下面我们来说说AMD的书写规范。

通过define()来定义模块

//main.js
define(["mylib"],function(mylib){
    function foo(){
        mylib.doSomething();
    }
    return {
        foo:foo;
    }
})

define的第一个参数是依赖的模块，必须是一个数组。通过return来暴露接口。

通过require()来加载模块，模块的名字默认为模块加载器请求的指定脚本的名字。

require(["main"],function(main){
    alert(main.foo());
})

require.js就是根据AMD规范实现的，优点为：

实现js文件的异步加载，避免网页失去响应；

管理模块之间的依赖性，便于代码的编写和维护。

CMD

CMD是国内玉伯大神在开发SeaJS的时候提出来的，也是异步模块定义。
CMD和AMD的区别:
CMD相当于按需加载，定义一个模块的时候不需要立即制定依赖模块，在需要的时候require就可以了，比较方便；而AMD则相反，定义模块的时候需要制定依赖模块，并以形参的方式引入回调函数中。

// CMD
define(function(require, exports, module) {
var a = require("./a")
a.doSomething()
// 此处略去 100 行
var b = require("./b") // 依赖可以就近书写
b.doSomething()
// ... 
})

 // AMD 默认推荐的是
define(["./a", "./b"], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...
})

关于 require.js 和 sea.js 的区别详见SeaJS与RequireJS最大的区别

ES6

ES6在语言规格的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。

ES6模块主要有两个功能：export和import

export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口

import用于在一个模块中加载另一个含有export接口的模块。

// a.js 

var sex="boy";
var echo=function(value){
　　console.log(value)
}
export {sex,echo}

// b.js
//通过import获取a.js文件的内部变量，{}括号内的变量来自于a.js文件export出的变量标识符。
import {sex,echo} from "./a.js" 
console.log(sex)   // boy
echo(sex) // boy

各种模块化方案优缺点对比：

模块化方案	优点	缺点
commonJS	复用性强，使用简单，实现简单有不少可以拿来即用的模块，生态不错	同步加载不适合浏览器浏览器的请求都是异步加载不能并行加载多个模块。
AMD	异步加载适合浏览器可并行加载多个模块	模块定义方式不优雅，不符合标准模块化
ES6	可静态分析，提前编译面向未来的标准	浏览器原生兼容性差，所以一般都编译成ES5 目前可以拿来即用的模块少，生态差

对比学习，效果更好哦~~~

服务器托管专线服务模块化模块化机柜模块化机房网站模块化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83843.html

精读《js 模块化发展》

摘要：我是这一期的主持人黄子毅本期精读的文章是。模块化需要保证全局变量尽量干净，目前为止的模块化方案都没有很好的做到这一点。精读本次提出独到观点的同学有流形，黄子毅，苏里约，，杨森，淡苍，留影，精读由此归纳。这次是前端精读期刊与大家第一次正式碰面，我们每周会精读并分析若干篇精品好文，试图讨论出结论性观点。没错，我们试图通过观点的碰撞，争做无主观精品好文的意见领袖。我是这一期的主持人 ——...

Freelander 2019-08-22 17:00 评论0 收藏0
《Java应用架构设计:模块化模式与OSGi》读书笔记

摘要：本书概括以软件系统为例，重点讲解了应用架构中的物理设计问题，即如何将软件系统拆分为模块化系统。容器独立模块不依赖于具体容器，采用轻量级容器，如独立部署模块可独立部署可用性模式发布接口暴露外部配置使用独立的配置文件用于不同的上下文。本文为读书笔记，对书中内容进行重点概括，并将书中的模块化结合微服务、Java9 Jigsaw谈谈理解。本书概括以Java软件系统为例，重点讲解了应用架构...

seanHai 2019-08-16 10:56 评论0 收藏0
前端模块化开发

摘要：来源于阿贤博客模块化今天给大家写一篇关于前端模块化开发知识点。前端模块化开发那点历史模块化是指在解决某个复杂混杂问题时，依照一种分类的思维把问题进行系统性的分解以之处理。来源于：阿贤博客 javascript模块化今天给大家写一篇关于前端模块化开发知识点。前端模块化开发那点历史模块化：是指在解决某个复杂、混杂问题时，依照一种分类的思维把问题进行系统性的分解以之处理。模块...

tianhang 2019-08-23 16:44 评论0 收藏0
低成本易管理 模块化数据中心的好处竟然这么多

摘要：模块化数据中心供应商声称他们的预制可重复的解决方案解决了这个问题，因为他们可以迅速支持增加负载和业务需求。施耐德电气日前为他们的模块化数据中心产品线发布了款不同的参考设计。对于IT技术的发展，或许有很多技术带来的是管理模式上的改变，有些带来的是直接效率的提升，模块化这个概念就是如此，模块化近几年不光被应用在了很多硬件产品上，对于数据中心来说，模块化的应用所带来的是数据中心产业质的飞跃。其实模...

tigerZH 2019-04-28 19:38 评论0 收藏0
探索模块化数据中心之路

摘要：一类是集装箱数据中心，这个模块化数据中心是将所有的风火水电布线全在一个标准货柜内部完成，形成一个可以移动的数据中心，本来集装箱数据中心主要用于临时搭建的环境，但正好符合模块化设计理念，被数据中心引入进来，在一些大型数据中心里有部署。数据中心引入模块化设计，目的也一样，要实现数据中心业务快速部署、应用灵活，提供标准化接口，主要有三类应用。模块化指的是解决一个复杂问题时，自顶向下逐层把系统划分成...

Kross 2019-04-29 14:23 评论0 收藏0
前端工程师必备：前端的模块化

摘要：规范则是非同步加载模块，允许指定回调函数，可以实现异步加载依赖模块，并且会提前加载由于主要用于服务器编程，模块文件一般都已经存在于本地硬盘，所以加载起来比较快，不用考虑非同步加载的方式，所以规范比较适用。 JS模块化模块化的理解什么是模块？将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起；块的内部数据/实现是私有的, 只是向外部暴露一些接口(...

Render 2019-08-23 16:54 评论0 收藏0