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


Posted in Javascript onApril 02, 2020

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";

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript字符串插入、删除、替换函数使用示例
Jul 25 Javascript
JavaScript中DOM详解
Apr 13 Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 Javascript
AngularJS实现自定义指令及指令配置项的方法
Nov 20 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
Nov 24 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 Javascript
js实现淘宝浏览商品放大镜功能
Oct 28 Javascript
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
sharp.js安装过程中遇到的问题总结
Apr 02 #Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 #jQuery
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 #Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 #Javascript
js实现数据导出为EXCEL(支持大量数据导出)
Mar 31 #Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 #Javascript
Vue-router 报错NavigationDuplicated的解决方法
Mar 31 #Javascript
You might like
php批量删除数据
2007/01/18 PHP
php mssql 时间格式问题
2009/01/13 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
js function定义函数使用心得
2010/04/15 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
python实时分析日志的一个小脚本分享
2017/05/07 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
浅谈python下tiff图像的读取和保存方法
2018/12/04 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
Python通过VGG16模型实现图像风格转换操作详解
2020/01/16 Python
基于python修改srt字幕的时间轴
2020/02/03 Python
python 日志 logging模块详细解析
2020/03/31 Python
Python如何获取文件指定行的内容
2020/05/27 Python
python 装饰器的基本使用
2021/01/13 Python
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
新加坡最佳婴儿用品店:Mamahood.com.sg
2018/08/26 全球购物
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
企划专员岗位职责
2013/12/09 职场文书
领导干部考察材料
2014/02/08 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
格列佛游记读书笔记
2015/06/30 职场文书