前端的模块化编程

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端的模块化编程相关的知识,希望对你有一定的参考价值。

对前端模块化的认识
一个大型项目时候,通常需要一个团队分工合作,模块化编程就是开发者把逻辑相关的代码放在一个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性能好,因为只有用户需要的时候才执行的原因

以上是关于前端的模块化编程的主要内容,如果未能解决你的问题,请参考以下文章

《分布式微服务电商》专题-电商项目前端Vue模块化开发

可视化前端编程平台(LowCode or NoCode)

前端防扒代码片段

前端防扒代码片段

前端防扒代码片段

前端防扒代码片段