前端开发---模块化学习

木希子
193 阅读2分钟

模块化：

模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程，有多种属性，分别反映其内部特性。

在代码中，它的目的是为了减少代码的复杂度，使项目不会因为功能增多代码量增大导致维护困难。通过模块的拼接，就可以组成一些列的复杂的系统，同时 降低模块与模块之间耦合度，增加代码得复用率。

对于web前端开发而言，通常使用的几种流行规范包括：commonJS、AMD、CMD、ES6。

模块化规范：

commonJs规范

常见的NODE模块采用的是commonJs规范，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。

var x = 5;
var addX = function (value) {
  return value + x;
};
module.exports.x = x;
module.exports.addX = addX;

CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。

AMD规范

AMD规范则是非同步加载模块，允许指定回调函数。通常使用的requirejs做模块化加载采用的就是amd规范。

AMD规范使用define方法定义模块：

define(['module'], function(lib){
  function foo(){
    lib.log('hello world!');
  }

  return {
    foo: foo
  };
});

引用模块

require(['module'], function(m){
   使用
})

CMD规范

CMD规范适用于浏览器端，按需加载对应模块，seaJS采用的就是CMD规范。

CMD规范方法定义：

define(function(require, exports, module){
  exports.xxx = value
  module.exports = value
})

CMD引用

define(function (require) {
  var m= require('./module')
  m.show()
})

ES6模块化：

es6提供了import和export用于引入和导出模块。es6中每一个模块只加载一次 对于加载相同文件直接从内存中读取，模块内声明的变量都是局部变量， 不会污染全局作用域。 export导出：

exports = app => {
  app.get('/json', app.jsonp({ callback: 'callback' }), app.controller.json.index)
  app.get('/cros', app.controller.cros.index)
}

import引入：

import {module} from './A.js'

总结： CommonJS规范加载模块是同步的，主要用于服务器端。AMD和CMD是异步加载，主要用于浏览器端，常用requireJs和seaJS。es6模块化是在语言标准的层面上实现的模块化，且比其他三种规范简单，目前主要采用es6规范较多。

参考文章：

javascript.ruanyifeng.com/nodejs/modu… blog.csdn.net/howgod/arti…

avatar
文章
阅读
粉丝