对JS模块,模块化,模块管理器的理解

随着对nodejs学习的深入,以前模糊的知识体系逐渐清晰了。今天总结下自己对js的模块,模块化规范,模块管理器等的理解。

模块
在以前,js是没有所谓的类的概念的,也就没有模块之说(es6已经有了)。
于是便用闭包来构造模块,隐藏私有属性和方法,暴露公有属性和方法。这样 就形成了一个模块。

模块化规范

js的模块化规范有commonjs,AMD,CMD,UMD, ES6
1.commonjs,是服务器端的规范,用到的是同步加载。 commonjs是主要为了js在后端的表现制定的,他是不适合前端的!nodejs用的就是commonjs规范。
2.AMD(异步模块定义),是一个浏览器端模块化开发的规范。用到的是异步加载。requirejs框架用的就是AMD规范。
3.CMD(同步模块定义)跟AMD的区别是实现了按需加载。seajs使用了CMD规范
4.UMD commonjs和AMD的结合。
5.ES6的import,export就不多说了。
来看下用法:
CommonJS
定义一个hi.js:

var str = 'Hi';

function sayHi(name) {
  console.log(str + ', ' + name + '!');
}

module.exports = sayHi;

在hi模块中定义了sayHi函数,用exports将它暴露出去。未被暴露出去的变量str是无法被外部访问的。其他模块要用这个函数的话,需要先require这个hi模块:

var Hi = require('./hi');
Hi('Jack');     // Hi, Jack!

其实就是模块标识(module),模块定义(exports),模块引用(require)
注意的一点是,require模块时写的是相对路径,如果省略路径,直接写模块名,默认的就是从node_modules文件夹下找模块。

AMD
define定义模块,require加载模块。

define(id, [depends], factory);  
require([module], callback);

模块管理器

前端的模块管理器一般指管理 AMD 或者 CommonJS 模块的东西。
requirejs和seajs可以说是模块加载器。
工具:
1.Browerify 让服务器端的CommonJS格式的模块可以运行在浏览器端 模块--->文件
2.Bower 基本退出了历史舞台
3.现在最火的webpack ,Browerify的加强版
4.Component 是Express框架的作者TJ Holowaychuk开发的模块管理器。它的基本思想,是将网页所需要的各种资源(脚本、样式表、图片、字体等)编译后,放到同一个目录中(默认是build目录)。
5.Duo Component的基础上开发的

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容