Javascript的模块管理 CMD AMD ES7等

darryrzhong 发布于2019-08-20 19:00 / 1690人阅读

摘要：一一开始是垃圾，但随着时代的发展业务的进步，变得越来越重要，但涉及之初就是用来打杂的，有缺陷如下简单翻译下没有模块系统没有标准库没有文件没有系统没有标准接口，用来做服务器或者数据库没有依赖包管理系统。

一 Commonjs

一开始js是垃圾，但随着时代的发展、业务的进步，js变得越来越重要，但js涉及之初就是用来打杂的，有缺陷如下：

JavaScript has no module system. To compose JavaScript scripts, they must be either managed in HTML, concatenated, injected, or manually fetched and evaluated. There is no native facility for scope isolation or dependency management.

JavaScript has no standard library. It has a browser API, dates, and math, but no file system API, much less an IO stream API or primordial types for binary data.

JavaScript has no standard interfaces for things like Web servers or databases.

JavaScript has no package management system that manages dependencies and automatically installs them, except JSAN (not to be confused with JSON), which falls short for scope isolation.

简单翻译下：

没有模块系统

没有标准库、没有文件、没有IO系统

没有标准接口，用来做服务器、或者数据库

没有依赖包管理系统。

所以mozila的工程师希望来解决这个问题

“What I’m describing here is not a technical problem. It’s a matter of people getting together and making a decision to step forward and start building up something bigger and cooler together.”

这并不是一个技术问题，而是为了便于更多人合作...

所以就有了commonjs，定义了这些概念，而nodejs实现了这个标准。
CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)}
比如这个样子:

// foo.js
module.exports = function(x) {
  console.log(x);
};

// main.js
var foo = require("./foo");
foo("Hi");

看似完美的解决了模块问题，但在浏览器模式下是不行的，假设我们有如下这段代码

var math = require("math");
math.add(2, 3);

问题1：math.add会被阻塞掉，必须在require完成之后再执行
问题2：即使能够异步加载，但你如何能够知道什么时候加载完毕，什么时候能够执行完么？

二 AMD

(Asynchronous Module Definition) 异步模块加载
这里不得不说到我们的requirejs，它有两个参数　
　

require([module], callback);

第一个表示依赖的模块，第二个就是具体的回掉了，比如上上述的代码

require(["math"], function (math) {
　　　　math.add(2, 3);
　　});

三 ES6

ES6中的模块最大的特点就是静态，即在编译时就确定依赖关系，ES6中会自然采用严格模式：

变量必须声明后再使用

函数的参数不能有同名属性，否则报错

不能使用with语句

不能对只读属性赋值，否则报错

不能使用前缀0表示八进制数，否则报错

不能删除不可删除的属性，否则报错

不能删除变量delete prop，会报错，只能删除属性delete global[prop]

eval不会在它的外层作用域引入变量

eval和arguments不能被重新赋值

arguments不会自动反映函数参数的变化

不能使用arguments.callee

不能使用arguments.caller

禁止this指向全局对象

不能使用fn.caller和fn.arguments获取函数调用的堆栈

增加了保留字（比如protected、static和interface）

参考：http://www.cnblogs.com/chengu...

GPU云服务器云服务器 amd_cmd区别 amd模块加载异步模块加载机制-amd es7

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85000.html

前端的模块管理（RequireJS、AMD、CMD、CommonJS、ES6）

摘要：是一个小巧的模块载入框架，压缩后，具有轻量级异步加载模块等特点。通过和关键字，旨在建立客户端和服务器端通用的加载规范。随着应用复杂度的攀升，常规的JavaScript引入方式（script标签）已经不能满足需求，模块化管理成为团队协作的高效方法，现在的模块化管理主要有RequireJS、AMD、CMD、CommonJS、ES6四种模式。 RequireJS是一个小巧的JavaScri...

iOS122 2019-08-23 17:02 评论0 收藏0
js面试题（上）

https://segmentfault.com/a/11... 原型 / 构造函数 / 实例对原型的理解我们知道在es6之前，js没有类和继承的概念，js是通过原型来实现继承的。在js中一个构造函数默认自带有一个prototype属性，这个的属性值是一个对象，同时这个prototype对象自带有一个constructor属性，这个属性指向这个构造函数，同时每一个实例都有一个__proto...

leap_frog 2019-08-23 14:22 评论0 收藏0
关于JavaScript模块规范之CommonJSAMDCMD

摘要：所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。也采用语句加载模块，但是不同于，它要求两个参数第一个参数，是一个数组，里面的成员就是要加载的模块第二个参数，则是加载成功之后的回调函数。本篇文章来自对文章《js模块化编程之彻底弄懂CommonJS和AMD/CMD！》的总结，大部分摘自文章原话，本人只是为了学习方便做的笔记，之后有新的体会会及时补充...

binaryTree 2019-08-26 13:22 评论0 收藏0
前端模块化开发

摘要：来源于阿贤博客模块化今天给大家写一篇关于前端模块化开发知识点。前端模块化开发那点历史模块化是指在解决某个复杂混杂问题时，依照一种分类的思维把问题进行系统性的分解以之处理。来源于：阿贤博客 javascript模块化今天给大家写一篇关于前端模块化开发知识点。前端模块化开发那点历史模块化：是指在解决某个复杂、混杂问题时，依照一种分类的思维把问题进行系统性的分解以之处理。模块...

tianhang 2019-08-23 16:44 评论0 收藏0
AMD, CMD, CommonJS和UMD

摘要：若不存在则模块标识应该默认定义为在加载器中被请求脚本的标识。其中是一个数组，里面的成员就是要加载的模块是模块加载完成之后的回调函数。在加载与两个模块之后执行回调函数实现具体过程。在判断是否支持是否存在，存在则使用方式加载模块。我的github(PS:希望star): https://github.com/tonyzheng1... 今天由于项目中引入的echarts的文件太大，req...

KavenFan 2019-08-19 18:02 评论0 收藏0