关于前端开发中的模块化理解

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

关于前端开发中的模块化理解

关于前端开发中的模块化理解

作为一个前端开发者,掌握必要的专业知识是必要的,css,js,html,frame等,但对于规范还是要有一定的掌握,如开发规范,前端越来越复杂,其中模块化的问题引起重视,工程的模块化究竟是什么?

首先来了解下各种概念:

(1)CommonJS 

它就是为了JS的表现来制定规范,因为js中没有模块的功能,CommonJS应运而生,它定义的模块分为:模块引用require 、模块定义exports和模块标识module。(Node遵循CommonJS规范,但相比还是有所不同)

require()用来引入外部模块,exports对象用于导出当前模块的方法或变量,唯一的导出口,module对象就代表模块本身,详细的栗子代码如下:

	//sum.jsexports.sum = function(){//todo}//main.jsvar m = require('sum');exports.add = function(n){return m.sum(n);}
但是CommonJS是主要为了JS在后端的表现制定的,并不适合前端,为何,这就要思考下浏览器端js和服务器端js的不同了,首先,资源的加载方式不同,服务器端require一个模块,直接从硬盘或内存中读取,而浏览器则不同,需要从服务端下载所需的文件,然后发送资源请求,于是AMD(异步模块定义)出现了。

(2)AMD

"Asynchronous Module Definition"

 它是一种对模块的定义,将模块和它的依赖可以被异步的加载,还可以正确的顺序执行,模块的加载不影响它后面的语句执行,所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成后,这个回调函数才会执行。

(3)RequireJS

是一个工具库,主要用于客户端的模块管理,它可以让客户端的代码分成一个个模块,实现异步或者动态加载,从而提高代码的性能和可维护性,它的模块管理遵循AMD规范。(后续关于具体的requirejs的使用)

(4)CMD

seajs遵循CMD规范,与AMD类似,但是更加方便些。

用seajs定义模块的写法如下:

	//a.jsdefine(function(require,exports,module){console.log('a.js执行..');return {hello:function(){console.log('hello a.js');}}})//main.jsdefine(function(require,exports,module){console.log('main.js执行..');var exam = require('a');exam.hello();});
(5 )面向ES6的模块标准

定义一个模块不需要专门的工作,因为一个模块的作用及时对外提供的API,所以只需要export导出即可。

使用模块的时候用import关键字:

        import { run as go} from 'a'

run()

如果要想使用模块中的全部API,使用module关键字

module foo from 'a'

a.run()