JS 模块化

什么是模块化?

1,把你的代码写成模块的
2,把这单独的模块写在单独的文件里

模块化有什么好处?

1,让代码更清晰
2,让合作更方便

目前,通行的JavaScript模块规范主要有三种:CommonJS、AMD和CMD

CommonJS

我们先从CommonJS谈起,因为在网页端没有模块化编程只是页面JavaScript逻辑复杂,但也可以工作下去,在服务器端却一定要有模块,所以虽然JavaScript在web端发展这么多年,第一个流行的模块化规范却由服务器端的JavaScript应用带来,CommonJS规范是由NodeJS发扬光大,这标志着JavaScript模块化编程正式登上舞台。

1、定义模块 根据CommonJS规范,一个单独的文件就是一个模块。每一个模块都是一个单独的作用域,也就是说,在该模块内部定义的变量,无法被其他模块读取,除非定义为global对象的属性

2、模块输出: 模块只有一个出口,module.exports对象,我们需要把模块希望输出的内容放入该对象

3、加载模块: 加载模块使用require方法,该方法读取一个文件并执行,返回文件内部的module.exports对象

看个例子

//模块定义 myModel.js

 var name = 'Byron';

function printName(){
    console.log(name);
}

function printFullName(firstName){
    console.log(firstName + name);
}

module.exports = {
    printName: printName,
    printFullName: printFullName
}

//加载模块

var nameModule = require('./myModel.js');

nameModule.printName();

不同的实现对require时的路径有不同要求,一般情况可以省略js拓展名,可以使用相对路径,也可以使用绝对路径,甚至可以省略路径直接使用模块名(前提是该模块是系统内置模块)

AMD

AMDAsynchronous Module Definition,中文名是异步模块定义的意思。它是一个在浏览器端模块化开发的规范

由于不是JavaScript原生支持,使用AMD规范进行页面开发需要用到对应的库函数,也就是大名鼎鼎RequireJS,实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出

requireJS主要解决两个问题

1、多个js文件可能有依赖关系,被依赖的文件需要早于依赖它的文件加载到浏览器
2、js加载的时候浏览器会停止页面渲染,加载文件越多,页面失去响应时间越长

看一个使用requireJS的例子

// 定义模块 myModule.js
define(['dependency'], function(){
     var name = 'Byron';
    function printName(){
        console.log(name);
    }

return {
    printName: printName
};
});

// 加载模块
require(['myModule'], function (my){
    my.printName();
});

在页面上使用require函数加载模块

require([dependencies], function(){});

require()函数接受两个参数

1、第一个参数是一个数组,表示所依赖的模块
2、第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块

require()函数在加载依赖的函数的时候是异步加载的,这样浏览器不会失去响应,它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。

CMD

CMDCommon Module Definition通用模块定义,CMD规范是国内发展出来的,就像AMD有个requireJS,CMD有个浏览器的实现SeaJS,SeaJS要解决的问题和requireJS一样,只不过在模块定义方式和模块加载(可以说运行、解析)时机上有所不同

语法

Sea.js 推崇一个模块一个文件,遵循统一的写法

define

define(id?, deps?, factory)

因为CMD推崇
1、一个文件一个模块,所以经常就用文件名作为模块id
2、CMD推崇依赖就近,所以一般不在define的参数中写依赖,在factory中写

factory有三个参数

function(require, exports, module)

require(id):require 是一个方法,接受 模块标识 作为唯一参数,用来获取其他模块提供的接口

exports:exports 是一个对象,用来向外提供模块接口

module:module 是一个对象,上面存储了与当前模块相关联的一些属性和方法

例:

// 定义模块  myModule.js
define(function(require, exports, module) {
  var $ = require('jquery.js')
  $('div').addClass('active');
});

// 加载模块
seajs.use(['myModule.js'], function(my){

});

你可能感兴趣的:(JS 模块化)