Javascript模块化机制实现原理详解

1. 概述

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

2. JavaScript

2.1 无后端的项目

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

每当浏览器解析到<script>标签（无论内嵌还是外链）时，浏览器会优先下载、解析并执行该标签中的javaScript代码，而阻塞了其后所有页面内容的下载和渲染。根据上述对<script>标签特性的描述，我们知道，在该示例中，当浏览器解析到<script>标签时，浏览器会停止解析其后的内容，而优先下载脚本文件，并执行其中的代码，这意味着，其后的test.css样式文件和<body>标签都无法被加载，由于<body>标签无法被加载，那么页面自然就无法渲染了。因此传统做法是
假定point.js文件：

//定义类
class Point {
 constructor(x, y) {
  this.x = x;
  this.y = y;
 }

 toString() {
  return '(' + this.x + ', ' + this.y + ')';
 }
}

则在index.js中引入point.js，这需要在index.html中body的尾部

<script src="point.js"></script>
<script src="index.js"></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模块的语法如下：

导出对象和变量：

var firstName = 'XXX';
var lastName = 'YYY';
export {firstName, lastName};
Point.js
// 导出类对象
export default class Point extends circle {
}

引入module

import Point from "Point";

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 学习Node.js模块机制

    学习Node.js模块机制

    一.CommonJS的模块规范 Node与浏览器以及 W3C组织.CommonJS组织.ECMAScript之间的关系 Node借鉴CommonJS的Modules规范实现了一套模块系统,所以先来看看CommonJS的模块规范. CommonJS对模块的定义十分简单,主要分为模块引用.模块定义和模块标识3个部分. 1. 模块引用 模块引用的示例代码如下: var math = require('math'); 在CommonJS规范中,存在require()方法,这个方法接受模块标识,以此引入一

  • Node.js中的模块机制学习笔记

    Node.js中的模块机制学习笔记

    Javascript自诞生以来,曾经没有人拿它当做一门编程语言.在Web 1.0时代,这种脚本语言主要被用来做表单验证和网页特效.直到Web 2.0时代,前端工程师利用它大大提升了网页上的用户体验,JS才被广泛重视起来.在JS逐渐流行的过程中,它大致经历了工具类库.组件库.前端框架.前端应用的变迁.Javascript先天就缺乏一项功能:模块,而CommonJS规范的出现则弥补了这一缺陷.本文将介绍CommonJS规范及Node的模块机制. 在其他高级语言中,Java有类文件,Python有im

  • Nodejs极简入门教程（一）：模块机制

    JavaScript 规范(ECMAScript)没有定义一套完善的能适用于大多数程序的标准库.CommonJS 提供了一套 JavaScript 标准库规范.Node 实现了 CommonJS 规范. 模块基础 在 Node 中,模块和文件是一一对应的.我们定义一个模块: 复制代码 代码如下: // circle.js var PI = Math.PI;   // 导出函数 area exports.area = function(r) {     return PI * r * r; }  

  • 浅析node.js的模块加载机制

    在node.js中,模块使用CommonJS规范,一个文件是一个模块 node.js中的模块可分为三类 内部模块 - node.js提供的模块如 fs,http,path等 自定模块 - 我们自己写的模块 第三方模块 - 通过npm安装的模块 node.js提供了大量的模块供我们使用,比如 想解析一个文件的路径,可以使用path模块下的相应方法实现: const path = require('path'); //返回目标文件的绝对路径 console.log(path.resolve('./1

  • node.JS事件机制与events事件模块的使用方法详解

    node.JS事件机制说明 多数 Node.js 核心 API 都是采用惯用的异步事件驱动架构,其中某些类型的对象(称为触发器)会周期性地触发命名事件来调用函数对象(监听器).例如,一个net.Server对象会在每次有新连接时触发一个事件:一个 fs.ReadStream 会在文件被打开时触发一个事件:一个 stream会在数据可读时触发事件. EventEmitter EventEmitter 类由 events 模块定义和开放的,所有能触发事件的对象都是 EventEmitter 类的实例

  • 跟我学Node.js（四）---Node.js的模块载入方式与机制

    跟我学Node.js（四）---Node.js的模块载入方式与机制

    其它的如通过NPM安装的第三方模块(third-party modules)或本地模块(local modules),每个模块都会暴露一个公开的API.以便开发者可以导入.如 复制代码 代码如下: var mod = require('module_name') 此句执行后,Node内部会载入内置模块或通过NPM安装的模块.require函数会返回一个对象,该对象公开的API可能是函数,对象,或者属性如函数,数组,甚至任意类型的JS对象. 这里列下node模块的载入及缓存机制 1)载入内置模块(

  • Javascript模块化机制实现原理详解

    1. 概述 js发展初期暴露了其缺陷:缺乏模块,后来提出了commonJS规范来规范其模块的规范.作为JavaScript新手,发现对于其JavaScript的模块机制,不是很理解.我查阅了一些资料整理了JavaScript CommonJS的原理和机制. 2. JavaScript 2.1 无后端的项目 这类项目不能使用CommonJS的模块规范,这是我起初所犯的错误.在没有es6被大多数浏览器支持的时候,js文件充斥着var和function,由此引来了命名冲突和污染,使得JavaScrip

  • JavaScript对象原型链原理详解

    这篇文章主要介绍了JavaScript对象原型链原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一个js对象,除了自己设置的属性外,还会自动生成proto.class.extensible属性,其中,proto属性指向对象的原型. 对象的属性也有writable.enumerable.configurable.value和get/set的配置方法. 对象的创建方式有三种: 一.使用字面量直接创建. 二.基于原型链创建. 分析上图,要点如

  • 高性能JavaScript模板引擎实现原理详解

    高性能JavaScript模板引擎实现原理详解

    随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascript 被寄予了更大的期望,与此同时 javascript MVC 思想也开始流行起来.javascript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,近一年来在开源社区中更是百花齐放,在 Twitter.淘宝网.新浪微博.腾讯QQ空间.腾讯微博等大型网站中均能看到它们的身影. 本文将用最简单的示例代码描述现有的 javascript 模板引擎

  • Javascript原型链的原理详解

    Javascript原型链的原理详解

    本文实例分析了Javascript原型链的原理.分享给大家供大家参考,具体如下: 一.JavaScript原型链 ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法.其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.在JavaScript中,用 __proto__ 属性来表示一个对象的原型链.当查找一个对象的属性时,JavaScript 会向上遍历原型链,直到找到给定名称的属性为止! 比如现在有如下的代码: 扩展Object类,添加Clone和Extend

  • Android异步消息处理机制实现原理详解

    消息处理机制主要对象:Looper,Handler,Message(还有MessageQueue和Runnable) Looper不断从MessageQueue消息队列中取出一个Message,然后传给Handle,如此循环往复,如果队列为空,那么它会进入休眠. 这些类的主要变量 Looper.java static final ThreadLocal<Looper> sThreadLocal = new ThreadLocal<Looper>(); private static

  • JavaScript开发简单易懂的Svelte实现原理详解

    目录 Demo1 create_fragment SvelteComponent 可以改变状态的Demo Svelte问世很久了,一直想写一篇好懂的原理分析文章,拖了这么久终于写了. Demo1 首先来看编译时,考虑如下App组件代码: <h1>{count}</h1> <script> let count = 0; </script> 这段代码经由编译器编译后产生如下代码,包括三部分: create_fragment方法 count的声明语句 class

  • JavaScript面试Module Federation实现原理详解

    目录 基本概念 1.什么是 Module Federation? 2.Module Federation核心概念 3.使用案例 4.插件配置 工作原理 1.使用MF后在构建上有什么不同? 2.如何加载远程模块? 3.如何共享依赖? 应用场景 1.代码共享 2.公共依赖 总结 基本概念 1.什么是 Module Federation? 首先看一下官方给出的解释: Multiple separate builds should form a single application. These sep

  • Python代码块及缓存机制原理详解

    这篇文章主要介绍了Python代码块及缓存机制原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.相同的字符串在Python中地址相同 s1 = 'panda' s2 = 'panda' print(s1 == s2) #True print(id(s1) == id (s2)) #True 2.代码块: 所有的代码都需要依赖代码块执行. ​ 一个模块,一个函数,一个类,一个文件等都是一个代码块 ​ 交互式命令中, 一行就是一个代码块

  • JavaScript原型继承和原型链原理详解

    这篇文章主要介绍了JavaScript原型继承和原型链原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在讨论原型继承之前,先回顾一下关于创建自定义类型的方式,这里推荐将构造函数和原型模式组合使用,通过构造函数来定义实例自己的属性,再通过原型来定义公共的方法和属性. 这样一来,每个实例都有自己的实例属性副本,又能共享同一个方法,这样的好处就是可以极大的节省内存空间.同时还可以向构造函数传递参数,十分的方便. 这里还要再讲一下两种特色的构造

  • javascript异常处理实现原理详解

    这篇文章主要介绍了javascript异常处理实现原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一.什么是例外处理 当 JavaScript程序在运行中发生了诸如数组索引越界.类型不匹配或者语法错误时,JavaScript解释器就会引发例外处理. ECMAScript定义了六种类型的错误,除此之外,我们可以使用Error对象和throw语句来创建并引发自定义的例外处理信息. 通过运用例外处理技术,我们可以实现用结构化的方式来响应错误事

随机推荐