浅谈前端模块化

时间: 2023-07-11 admin 互联网

浅谈前端模块化

浅谈前端模块化

前端模块化,相信这个词对于做前端的同学来说,绝对不陌生,你对前端模块化的了解有多少呢?在这里我们就来聊聊前端模块化。

一.前端为什么要模块化?

javascript这门语言被创造出来时,它只是基于浏览器的。但自1996年以来,已经有各种各样的JavaScript平台可以在浏览器之外进行编程,官方定义的API只能构建基于浏览器的应用程序。人们逐渐认识到了问题的严重性:

  • JavaScript没有模块系统。要编写JavaScript脚本,必须以HTML格式管理,连接,注入或手动获取和评估它们。没有用于范围隔离或依赖关系管理的本机工具。
  • JavaScript没有标准库。它有浏览器API,日期和数学,但没有文件系统API,更不用说IO流API或二进制数据的原始类型。
  • JavaScript没有Web服务器或数据库之类的标准接口。
  • JavaScript没有管理依赖关系并自动安装它们的软件包管理系统,除了JSAN(不要与JSON混淆),这不符合范围隔离。

二.CommonJS,AMD,CMD与ES6模块化

      这其中我们需要重点掌握的是ES6和CommonJS,AMD与CMD只需了解,现在我们实际开发中已经基本不会用到了。

1.CommonJS

2009年,CommonJS出现了,CommonJS 通过定义处理许多常见应用程序需求的API来填补这一空白,最终提供与Python,Ruby和Java一样丰富的标准库。目的是应用程序开发人员能够使用CommonJS API编写应用程序,然后跨不同的JavaScript解释器和主机环境运行该应用程序。同时,美国程序员Ryan Dahl创造了node.js项目,将javascript语言用于服务器端编程,node.js是对commonJS规范的实现,这标志"Javascript模块化编程"正式诞生。在现在的前端开发中我们经常会用到node,node中的模块化就需要使用commonjs,所以掌握commonjs是必须的。

通过module.exports导出模块

var x = 5;
var addX = function (value) {return value + x;
};
module.exports.x = x;
module.exports.addX = addX;//同时导出多个
module.exports = {x,addX
}

 通过require导入模块

var example = require('./example.js');console.log(example.x); // 5
console.log(example.addX(1)); // 6

关于nodejs和commonjs在阮一峰老师的这篇文章中有详细描述.html。

2、ES6模块化

ES6推出了自己的模块化规范,使用export和import来进行导出和导入。

var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;export {firstName, lastName, year};
import {firstName, lastName, year} from './profile.js';

 

ES6 模块与 CommonJS 模块的差异

讨论 Node 加载 ES6 模块之前,必须了解 ES6 模块与 CommonJS 模块完全不同。

它们有两个重大差异。

  • CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
  • CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。

第二个差异是因为 CommonJS 加载的是一个对象(即module.exports属性),该对象只有在脚本运行完才会生成。而 ES6 模块不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成。

具体可参考阮一峰老师的ES6 

3.AMD

AMD就只有一个接口:define(id?,dependencies?,factory);

它要在声明模块的时候制定所有的依赖(dep),并且还要当做形参传到factory中,像这样:

 define(['dep1','dep2'],function(dep1,dep2){...});

要是没什么依赖,就定义简单的模块,下面这样就可以啦

 define(function(){var exports = {};exports.method = function(){...};return exports;});

这里有define,把东西包装起来,那Node实现中怎么没看到有define关键字呢,它也要把东西包装起来呀,其实吧,只是Node隐式包装了而已.....

这有AMD的WIKI中文版,讲了很多蛮详细的东西,用到的时候可以查看:AMD的WIKI中文版

4、CMD

大名远扬的玉伯写了seajs,就是遵循他提出的CMD规范,与AMD蛮相近的,不过用起来感觉更加方便些,最重要的是中文版,应有尽有:seajs官方doc

1 define(function(require,exports,module){...});

用过seajs吧,这个不陌生吧,对吧。

前面说AMD,说RequireJS实现了AMD,CMD看起来与AMD好像呀,那RequireJS与SeaJS像不像呢?

虽然CMD与AMD蛮像的,但区别还是挺明显的,官方非官方都有阐述和理解,我觉得吧,说的都挺好:

官方阐述SeaJS与RequireJS异同

SeaJS与RequireJS的最大异同(这个说的也挺好)