Js中的模块化

ytwman 发布于2019-08-23 18:29 / 2862人阅读

摘要：的模块化开发了解模块化概念将一个复杂的程序依据一定的规则或者说是规范封装成几个块，或者是文件，并进行组合在一起，块的内部数据与实现是私有的，只是向外暴露一些接口或者是方法与其他的模块进行通信。

JS的模块化开发 了解模块化 1、概念

将一个复杂的程序依据一定的规则或者说是规范封装成几个块，或者是文件，并进行组合在一起，块的内部数据与实现是私有的，只是向外暴露一些接口或者是方法与其他的模块进行通信。

2、为什么要引入模块化

降低复杂度，提高解耦性

部署方便

避免命名冲突

更好的分离，按需加载

更高的维护性

3、随着而来的问题

请求过多

依赖模糊

难以维护

模块化规范 1、CommonJS 规范说明

每个文件都可以当做一个模块

在服务器端：模块的加载运行时同步的

在浏览器端：模块需要提前编译

模块的暴露

暴露的本质：对象（exports对象）

module.exports =  一个值
exports.xxx =  一个值

需要注意的是：

1、当 exports 和 module.exports 同时存在的时候，module.exports 会盖过 exports

2、当模块内部全部是 exports 的时候，就等同于 module.exports

3、最后我们就可以认定为 exports 其实就是 module.exports 的子集。

2、ES6 ES6的导出

export用于对外输出本模块（一个文件就可以理解为一个模块）变量的接口。

需要留心的是：export 可以导出的是一个对象中包含的多个属性，方法。 export default 只能导出一个可以不具名的对象。

ES6的 import

当我们需要引入某个模块的时候，可以通过ES6的import

3、AMD的RequireJS 异步模块AMD

Asynchronous Module Definition，中文名是异步模块。它是一个在浏览器端模块化开发的规范，由于不是js原生支持，使用AMD规范进行页面开发需要用到对应的函数库，也就是大名鼎鼎的RequireJS，实际上AMD是RequireJS在推广过程中对模块定义的规范化的产出。

解决的问题

多个JS文件可能有依赖的关系，被依赖的文件需要早于依赖它的文件加载到浏览器

JS加载的时候浏览器会停止页面的渲染，加载的文件越多，页面失去响应的时间越长

异步前置加载

4、CMD的seaJS

define(id, deps, factory)

因为CMD推崇一个文件一个模块，所以经常就用文件名作为模块id；
CMD推崇依赖就近，所以一般不在define的参数中写依赖，而是在factory中写。

factory有三个参数：
function(require, exports, module){}

一，require
require 是 factory 函数的第一个参数，require 是一个方法，接受 模块标识 作为唯一参数，用来获取其他模块提供的接口；

二，exports
exports 是一个对象，用来向外提供模块接口；

三，module
module 是一个对象，上面存储了与当前模块相关联的一些属性和方法。

demo
// 定义模块  myModule.js
define(function(require, exports, module) {
  var $ = require("jquery.js")
  $("div").addClass("active");
});

// 加载模块
seajs.use(["myModule.js"], function(my){

});

云服务器 GPU云服务器中的模块 webrtc中的aec模块 js模块化 js模块化视频教程

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

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

JS常见模块化规范(CommonJS/AMD/CMD/UMD/ES6 Module)

摘要：常见模块化方案是由社区提出的模块化方案中的一种，遵循了这套方案。是模块化规范中的一种，遵循了这套规范。中的模块化能力由两个命令构成和，命令用于规定模块的对外接口，命令用于输入其他模块提供的功能。为什么需要模块化在ES6出现之前，JS语言本身并没有提供模块化能力，这为开发带来了一些问题，其中最重要的两个问题应当是全局污染和依赖管理混乱。 // file a.js var name =...

walterrwu 2019-08-23 12:32 评论0 收藏0
探索 JS 中的模块化

摘要：的主要思想是异步模块，主逻辑在回调函数中执行，这和浏览器前端所习惯的开发方式不谋而合，应运而生。是目前开发中使用率最高的模块化标准。原文链接: http://yanjiie.me 偶然的一个周末复习了一下 JS 的模块标准，刷新了一下对 JS 模块化的理解。从开始 Coding 以来，总会周期性地突发奇想进行 Code Review。既是对一段时期的代码进行总结，也是对那一段时光的...

SoapEye 2019-08-22 18:21 评论0 收藏0
JavaScript模块化发展

摘要：所有依赖这个模块的语句，都定义在一个回调函数中，等到所有依赖加载完成之后前置依赖，这个回调函数才会运行。如果将前面的代码改写成形式，就是下面这样定义了一个文件，该文件依赖模块，当模块加载完毕之后执行回调函数，这里并没有暴露任何变量。模块化是我们日常开发都要用到的基本技能，使用简单且方便，但是很少人能说出来但是的原因及发展过程。现在通过对比不同时期的js的发展，将JavaScript模...

mengbo 2019-08-22 18:05 评论0 收藏0
webpack + gulp 在前端中的应用

摘要：概述从去年短时间内对现有系统的改造到如今稳定实施，已经好几个月，这套流程满足了日常前端开发的流程。在讲这之前简单说下前端模块化历程。模块化以上是在规范出来之前的编码方式，大家应该非常熟悉。只要在代码中用来异步加载模块即可。概述从去年短时间内对现有系统的改造到如今稳定实施，已经好几个月，这套流程满足了日常前端开发的流程。由于之前项目组的模块化本身做的不是很好，基本算是推到一半重来，虽...

remcarpediem 2019-08-19 18:19 评论0 收藏0
js中的模块化——commonjs,AMD,CMD,UMD,ES6

摘要：若不存在则模块标识应该默认定义为在加载器中被请求脚本的标识。这也是目前很多插件头部的写法，就是用来兼容各种不同模块化的写法。语句输出的值是动态绑定的，绑定其所在的模块。前言历史上，js没有模块化的概念，不能把一个大工程分解成很多小模块。这对于多人开发大型，复杂的项目形成了巨大的障碍，明显降低了开发效率，java，Python有import，甚至连css都有@import,但是令人费...

qpal 2019-08-23 13:49 评论0 收藏0