WEB前端模块化基础知识

前段模块化基础

概念

前端模块化其实就是将一个完整的单一的功能整合起来形成单独的一个功能组件，当需要用的的时候只需要加载这个组件，然后便可以通过该组件唯一的名称去使用其中的内容。
主流模块化框架
- commonJS
- AMD
- CMD
- UMD
- ES6规范

commonJS

commonJS模块化
- 定义模块：即一个单独的文件就是一个模块，切该文件中的作用域独立，当中的变量是无法被其他文件引用的，如果要使用需要将其定义为global；
- 输出模块：模块只有一个出口，即使用module.exports对象，将需要输出的内容放入到该对象中；
- 加载模块：通过require加载，例如：var module = require('./moduleFile.js');该module的值即对应文件内部的module.exports对象，然后就可以通过module名称去引用模块中的变量和函数了；
例如：
```
// 定义模块 module.js
var data = "hello commonJS !";function test1() {alert("hello test1 !");
}function test2() {alert("hello test2 !");
}// 输出模块
module.exports = {test1: test1,test2: test2
}    // 加载模块
var module = require('./module.js');// 使用模块功能
module.test1(); // "hello test1 !"
module.test2(); // "hello test2 !"总共四个步骤： 定义 -> 输出 -> 加载 -> 使用
```
PS: commonJS是基于服务器端开发的，由于require是同步加载，所以当在浏览器中是无法运行的，所以就有了下面的异步模块的出现。

AMD(Asynchronous Module Definition)，异步模块定义

AMD是一套基于浏览器端模块化开发的规范，在进行页面开发时需要用到该规范的库函数，即：requireJS

requireJS解决了两个问题

多文件依赖关系处理，被依赖的需要早一步被加载；
加载js时候页面会停止渲染，如果加载的文件越多，页面失去响应的时间就会越长；

例如：

// 模块定义 module.js
define(['dependModule', '...', ...], // 这个数组表示该模块所依赖的模块名称 function () {var data = "hello AMD !";function test1() {alert("hello test1 !);}function test2() {alert("hello test2 !);}return {test1: test1,test2: test2};
});// 加载模块
require(['module'], function (myModule) {// 加载之后的module模块将会以参数形式：myModule传入到回调函数中，供使用// 这里是模块加载完成之后的回调函数myModule.test1(); // "hello test1 !"myModule.test2(); // "hello test2 !"
});// ---------- AMD语法：
1. 模块定义：使用全局函数`define(id, dependencies, factory);`1. id: 用来定义模块标识，非必选参数，如果没提供该参数则会默认使用脚本文件名（不带扩展名的）；2. dependencies：是表示该模块所依赖的模块名称数组；3. factory：如果是函数则为该模块初始化所执行的函数，如果是对象则为该模块的输出值。
4. 模块加载：使用**异步的**`require(dependencies, function (myModule) {});`函数1. `dependencies`: 模块依赖的模块数组；2. 回调函数：模块加载完成后执行的函数，加载的模块将以参数形式传入该函数，即：myModule，供使用。

CMD(Common Module Definition)通用模块定义

就近依赖，需要时再进行加载，所以执行顺序和书写顺序一致；这点与AMD不同，AMD是在使用模块之前将依赖模块全部加载完成，但由于网络等其他因素可能导致依赖模块下载先后顺序不一致这就导致了，执行顺序可能跟书写顺序不一致的情况。

// 定义模块 module.js
define(function (require, exports, module) {// 在该函数里面通过require实时的加载依赖模块var module1 = require('./module1.js');module1.test1();
});// 加载模块
seajs.use(['module.js'], function (myModule) {// 除了用的是seajs.use其他和AMD的加载方式类似
});

ES6模块化，未来标准，但目前未广泛使用

优点
- 类似commonJS，语法更简洁；
- 类似AMD，直接支持异步加载和配置模块加载；
- 结构可以做静态分析，静态检测；
- 比commonJS更好的支持循环依赖；
语法概述
- 命名式导出方式：每个模块可以有多个
- 定义式导出方式：每个模块只有一个

ES6命名式导出方式

一个模块通过export声明来导出多个，需要导出的变量或函数只需要在声明最前面加上export关键词即可，然后在需要用的地方使用import导入。这些导出主要根据变量和函数名字来区分，故称之为命名式导出方式。

例如
```
// module.js
export const PI = 3.1415926;
export function double( r ) {return 2 * r;
}export function sum( x, y ) {return x + y;
}// 在main.js中使用
import { PI, double, sum } from 'module';console.log(PI); // 3.1415926
console.log(double(10)); // 20
console.log(sum(10, 8)); // 18// 使用属性命名来使用模块
import { PI, double, sum } as myModule from 'module';
// 这样就可以通过 myModule.double(10);语法去调用模块内变量或函数了
console.log( myModule.PI ); // 3.1415926
console.log( myModule.double(10) ); // 20
console.log( myModule.sum(10, 8) ); // 18
```

上面是ES6标准方式，下面是commonJS形式
```
// module.js
var pi = 3.1415926;
function double( r ) {}
function sum( a, b ) {}module.exports = {pi: pi,double: double,sum: sum
};// main.js
var module = require('./module.js');console.log( module.pi );
module.double(10);
module.sum(10, 8);
```

从上述代码中可知命名式导出方式的使用步骤
1. 在模块文件中使用export关键字将指定的变量或函数导出；
2. 然后在需要使用模块内函数或变量的地方使用import从该模块文件中导入这些变量或函数；

ES6定义式导出方式

概念：定义式导出理解上就是一个文件一个模块，一个模块一个功能，不像命名式一样可以一个文件可以导出多个变量或函数(事实上命名式和定义式可以结合使用，看下面例子)。

定义方式：

单函数定义：

// myFunc.js
export default function () {// 这里面包含了该模块(或者说该文件myFunc.js)所有逻辑// 这种方式该函数不需要名字，因为前面的default关键字意思即导出时使用的模块名字和文件名一样即：myFunc
};// main.js
import myFunc from 'myFunc';// 导入后就可以直接使用了
myFunc();

类的定义

// MyClass.js（首字母大写）
export default class () {// 类内容// class： 指定该模块导出的是一个类
};// main.js
var myclass = new MyClass();// 创建类之后就可以通过实例myclass去访问类中的成员和方法了

命名式 + 定义式相结合使用

命名式和定义式结合使用：

// module.js
export default function () {};
export function test() {};// main.js
import { module, test } from 'module';// 另外定义式的导出还可以直接用'default'代替，甚至可以定义别名，如下：
import module from 'module';
import default from 'module';
import { default as myModule } from 'module';
三种方式最终结果是一样的，根据不同需求和习惯选择。

ES6导入和导出

ES6提供的几种导入方式

// 1. 定义式导出和命名式导出，以及相结合的导出
import default from 'module'; // 定义式
import { name1, name2 } from 'module'; // 命名式
import defualt, { name1, name2 } from 'module'; // 结合式// 2. 导出重命名，即将模块导出后重命名为指定名字以供使用
import { name1 as rename1, name2 } from 'module';// 即将name1重命名为rename1供使用// 3. 将整个模块一起导入，统一用指定属性名去调用模块内的内容
import * as moduleName from 'module';// 4. 值加载不导出模块
import 'module';

ES6提供的几种导出方式

// 1. 在模块内部使用export导出
export var v1 = 10; // 全局变量
export let v2 = 11; // 局部变量
export const v3 = 12; // 常量export function f1() {} // 函数
export class MyClass {} // 类// 2. 模块内部使用default导出整个表达式
export default 123;
export default function (x) { return x; }
export default x => x;
export default class {constructor(x, y) {this.x = x;this.y = y;}
};// 3. 将所有想导出的列出来放到文件最后一起导出
export { v1, v2, v3 };// 4. 还可以别名导出
export { v1 as vv1, v2 as vv2, v3 };// 5. 最后一种：重导出，即在一个模块里从另一个模块里导出内容
// module.js
export { v1, v2 } from 'otherModule';
// 别名
export { v1 as vv1, v2 } from 'otherModule';

ES6模块元数据，通过this module访问当前模块数据的方式

// main.js
// 访问module中的oData
import { oData } from this module;
console.log( oData );// 如果想访问当前模块的oData，就需要
import * as currModule from this module;
console.log( currModule.oData );

WEB前端模块化基础知识相关推荐

好程序员web前端教程分享web前端入门基础知识
好程序员web前端教程分享web前端入门基础知识,作为合格的Web前端工程师必须得掌握HTML.CSS和JavaScript.只懂其中一两个还不行,必须对这三门语言都要熟悉.下面我们一起来看一看吧! ...
web前端开发基础知识整理以及前端视频教程
随着移动互联网的发展和越来越多创业公司的加入,Web前端工程师的岗位空缺越来越大,薪资迅速上涨.Web前端工程师比以往更具有号召力. 想要自学成为炙手可热的Web前端工程师?靠零碎化的短视频可不行,你 ...
网页编程从入门到精通杨凡_干货 | web前端入门基础知识
一名合格的web前端工程师必须得掌握HTML.CSS和JavaScript. 只懂其中一个或两个还不行,你必须对这三门语言都很熟悉. 也不是说必须对这三门语言都非常精通,但你至少要能够运用它们完成大多 ...
web前端开发基础知识_前端开发是什么？学前端开发需要学什么语言？你想成为程序员吗？...
Web前端是什么前端的本质就是通过一定的程序代码来实现用户界面的ui 交互.可以认为用户在终端所看到的和所操作的都属于前端,也就是说分为渲染页面和处理用户操作两块. 前端开发是创建Web页面或app ...
web前端开发基础知识_薪资30K+的web前端怎么做到的？
好的web前端年薪会有多少?首先,我们要知道怎么才能成为一个所认为的"好的web前端",其次,自己能值多少价值? 用户体验为王,是互联网时代的座右铭.人们在享受互联网带来的便捷的同 ...
初学者入门web前端 C#基础知识：数组与集合
对于初学者,想要入门web前端,要有足够的信念和坚持,不然只会越走越远,我现在就深深的体会到. 我本是一个很拒绝代码的人,以前想过UI设计,但是在这段学习时间里,发现其实只要认真,代码并不是很难所以 ...
html中如何实现选择存储路径的功能_HTML是Web前端的基础知识，刚入门的你真的学对了吗？...
HTML 概念前端最核心的技术 HTML + CSS + javascript HTML - 结构 - 骨架 CSS - 样式 - 效果 JAVASCRIPT - (用户)行为 - 做的事情超文本 ...
web前端数据库基础知识
第一篇:深入浅出数据库第一章 MySQL基础 1.1 数据库概述数据库是一个存放数据的仓库.这个仓库是按照一定的数据结构来组织.存储数据的,我们可以通过数据库提供的多种方法来管理数据库中的数据. ...
【Web前端培训基础知识】ES5及ES6this详解
今天,我们学习一下JavaScript中的this.我们从什么是this,ES5及ES6中this的几种情况进行学习.让this变的so easy,我们这里说的都是非严格模式下. 什么是this th ...