首页 > 代码库 > 前端的模块化编程

前端的模块化编程

2024-09-22 03:09:45   203人阅读

对前端模块化的认识
一个大型项目时候，通常需要一个团队分工合作，模块化编程就是开发者把逻辑相关的代码放在一个module里面，我们只需要实现核心的业务逻辑，
不用担心命名冲突，需要时再加载就可以。
Javascript不是一种模块化编程语言，开发者需要模拟出类似的功能，来将一个大程序拆分成相互依赖的小文件，我们称为模块化。
有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。

早期模块化编程的方法

1)函数
最早期，我们的函数的功能就是把实现特定逻辑的一组语句打包，在一个文件里面编写几个函数就是最开始的模块了

这样在使用的时候直接调用函数就可以了，但是这种做法有一个很大的缺点，就是污染了全局变量，很有可能早造成命名冲突，而且模块成员之间也没什么关系

function fn1(){
    statement
}
function fn2(){
    statement
}

2)对象
为了解决上面的问题，对象的写法应运而生了，我们可以把所有的模块成员封装在一个对象当中。这样我们在调用的时候只要引用对应的文件，然后调用对象的方法就可以，而且避免了全局变量污染，只要保证模块名唯一即可，而且模块内的成员也有了关系，但是这个方法的缺点就是外部可以随意修改内部成员

var mymodule{
    var1:1,
    var2:2,
    fn1:function(){},
    fn2:function(){}
}

3)立即执行函数
我们可以使用立即执行函数来达到隐藏细节的目的，这样在模块外部无法修改我们内部的变量和函数

var mymodule=(function(){
    var var1=1;
    var var2=2;
    function fn1(){};
    function fn2(){};
    return {
        fn1: fn1,
        fn2: fn2
    };
})();

以上三种做法就是我们模块化的基础

模块化规范

因为有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。
这样做的前提就是大家都以同样的方式来编写模块，那么有一个模块化的规范就非常重要
在ES6之前，JavaScript模块规范主要有两种：CommonJS和AMD，前者用于服务器，后者用于浏览器

CommonJS

commonJS是用于服务器端的模块化规范，node.js的模块系统，就是参照CommonJS规范实现的

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();

AMD

AMD（异步模块定义）是一个在浏览器端模块化开发的规范，它采用异步方式加载模块，模块的加载不影响它后面语句的运行。也解决了模块依赖性的问题。

requireJS定义了一个函数 define，它是全局变量，用来定义模块

define(id?, dependencies?, factory);
  1. id：可选参数，用来定义模块的标识
  2. dependencies：是一个当前模块依赖的模块名称数组
  3. factory：工厂方法，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值

AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：

require([module], callback);
  1. 第一个参数是一个数组，里面的成员就是要加载的模块
  2. 第二个参数callback，则是加载成功之后的回调函数。

所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。解决了依赖性的问题。

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

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

CMD

CMD(通用模块定义)国内发展出来的，就像AMD有个requireJS，CMD有个SeaJS

eaJS要解决的问题和requireJS一样，只不过在模块定义方式和模块加载时机上有所不同

MD推崇"依赖就近"，所以一般不在define的参数中写依赖，在factory中写

define(id?, deps?, factory)

factory有三个参数

function(require, exports, module)　
  1. require 是 factory 函数的第一个参数,是一个方法，接受 模块标识 作为唯一参数，用来获取其他模块提供的接口
  2. exports 是一个对象，用来向外提供模块接口
  3. module 是一个对象，上面存储了与当前模块相关联的一些属性和方法
// 定义模块  myModule.js
define(function(require, exports, module) {
  var $ = require(‘jquery.js‘)
  $(‘div‘).addClass(‘active‘);
});

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

});

AMD与CMD区别:
最明显的区别就是在模块定义时对依赖的处理不同
　　1)AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块
　　2)CMD推崇就近依赖，只有在用到某个模块的时候再去require

同样都是异步加载模块
　　1)AMD所有模块都加载并且执行完后会进入require的回调函数，执行主逻辑，这样的效果就是依赖模块的执行顺序和书写顺序不一定一致,看网络速度，哪个先下载下来，哪个先执行，但是主逻辑一定在所有依赖加载完成后才执行
　　2)CMD加载完某个依赖模块后并不执行，只是下载而已，在所有依赖模块加载完成后进入主逻辑，遇到require语句的时候才执行对应的模块，这样模块的执行顺序和书写顺序是完全一致的
这也是很多人说AMD用户体验好，因为没有延迟，依赖模块提前执行了;CMD性能好，因为只有用户需要的时候才执行的原因

前端的模块化编程


联系
我们