javascript 模块化机制

cikenerd 发布于2019-08-21 14:43 / 2795人阅读

摘要：作为新手，发现对于其的模块机制，不是很理解。的概念出现有效规范了的模块化规范。不再需要对象作为命名空间比如对象，未来这些功能可以通过模块提供。浏览器使用模块的语法如下导出对象和变量导出类对象引入加载机制详见引用资料高静的并行加载与顺序执行

1. 概述

js发展初期暴露了其缺陷：缺乏模块，后来提出了commonJS规范来规范其模块的规范。作为JavaScript新手，发现对于其JavaScript的模块机制，不是很理解。我查阅了一些资料整理了JavaScript CommonJS的原理和机制。

2. JavaScript 2.1 无后端的项目

这类项目不能使用CommonJS的模块规范，这是我起初所犯的错误。在没有es6被大多数浏览器支持的时候，js文件充斥着var和function，由此引来了命名冲突和污染，使得JavaScript代码很复杂。es6的class概念出现有效规范了JavaScript的模块化规范。由于这类项目只能通过script标签引入，我们在这里讲一下script标签的相关知识。
每当浏览器解析到

这样就可以在index.js使用point类了。
总结下来：

js类库必须在header中引入，保证对之后script引入的js文件的支持，毕竟script标签的执行顺序是顺序执行，script标签引入顺序和实际引入顺序相同。

自定义的script标签引入的js文件，要放在body的尾部，保证DOM元素渲染结束。

每个js文件尽量是es6 class对象，避免作用域和命名域的冲突。

2.2 后端服务器 NodeJS

模块引用的实例如下：require方法

const math = require("math");

模块的定义：
上下文提供了exports对象用于导出当前模块方法和变量，并且它是唯一的导出出口。在模块中，还存在一个module对象，他代表模块自身，exports是module对象的属性。导出方式：

// math.js
exports.add = function () { };
module.exports.add = function () { };

2.3 后端 es6的module

ES6模块不是对象，而是通过export命令显式指定输出的代码，输入时也采用静态命令的形式。
由于ES6模块是编译时加载，使得静态分析成为可能。有了它，就能进一步拓宽JavaScript的语法，比如引入宏（macro）和类型检验（type system）这些只能靠静态分析实现的功能。

除了静态加载带来的各种好处，ES6模块还有以下好处：

不再需要UMD模块格式了，将来服务器和浏览器都会支持ES6模块格式。目前，通过各种工具库，其实已经做到了这一点。

将来浏览器的新API就能用模块格式提供，不再必要做成全局变量或者navigator对象的属性。

不再需要对象作为命名空间（比如Math对象），未来这些功能可以通过模块提供。

浏览器使用ES6模块的语法如下：

导出对象和变量：

variables.js

var firstName = "XXX";
var lastName = "YYY";
export {firstName, lastName};

Point.js

// 导出类对象
export default class Point extends circle {

}

引入module

import Point from "Point";

加载机制详见：es6 module

引用资料：
高静：js的并行加载与顺序执行

云服务器服务器托管异步模块加载机制-amd javascript机制 JavaScript异步机制 javascript模块化

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

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

javascript 模块化机制

摘要：作为新手，发现对于其的模块机制，不是很理解。的概念出现有效规范了的模块化规范。不再需要对象作为命名空间比如对象，未来这些功能可以通过模块提供。浏览器使用模块的语法如下导出对象和变量导出类对象引入加载机制详见引用资料高静的并行加载与顺序执行 1. 概述 js发展初期暴露了其缺陷：缺乏模块，后来提出了commonJS规范来规范其模块的规范。作为JavaScript新手，发现对于其JavaS...

whlong 2019-08-01 15:54 评论0 收藏0
Node.js入门：模块机制

摘要：模块载入策略的模块分为两类，一类为原生核心模块，一类为文件模块。最后传入对象的，方法，，文件名，目录名作为实参并执行。在这个主文件中，可以通过方法去引入其余的模块。以上所描述的模块载入机制均定义在中。 CommonJS规范早在Netscape诞生不久后，JavaScript就一直在探索本地编程的路，Rhino是其代表产物。无奈那时服务端JavaScript走的路均是参考众多服务器端...

alanoddsoff 2019-08-23 13:48 评论0 收藏0
Node.js入门：模块机制

摘要：模块载入策略的模块分为两类，一类为原生核心模块，一类为文件模块。最后传入对象的，方法，，文件名，目录名作为实参并执行。在这个主文件中，可以通过方法去引入其余的模块。以上所描述的模块载入机制均定义在中。 CommonJS规范早在Netscape诞生不久后，JavaScript就一直在探索本地编程的路，Rhino是其代表产物。无奈那时服务端JavaScript走的路均是参考众多服务器端...

Loong_T 2019-08-01 10:08 评论0 收藏0
Node.js入门：模块机制

摘要：模块载入策略的模块分为两类，一类为原生核心模块，一类为文件模块。最后传入对象的，方法，，文件名，目录名作为实参并执行。在这个主文件中，可以通过方法去引入其余的模块。以上所描述的模块载入机制均定义在中。 CommonJS规范早在Netscape诞生不久后，JavaScript就一直在探索本地编程的路，Rhino是其代表产物。无奈那时服务端JavaScript走的路均是参考众多服务器端...

everfight 2019-07-25 14:33 评论0 收藏0
node核心特性理解

摘要：概述本文主要介绍了我对的一些核心特性的理解，包括架构特点机制核心模块与简单应用。在此期间，主线程继续执行其他任务。延续了浏览器端单线程，只用一个主线程执行，不断循环遍历事件队列，执行事件。原文地址在我的博客，转载请注明来源，谢谢！ node是在前端领域经常看到的词。node对于前端的重要性已经不言而喻，掌握node也是作为合格的前端工程师一项基本功了。知道node、知道后端的一些东西...

huangjinnan 2019-08-21 17:03 评论0 收藏0