深入浅出WebPack 前端模块化（模块化、RequireJS、CommonJS、SeaJS）

ES6 前端模块化

前言

1、前端开发领域发展到目前阶段

零件化

最终呈现给用户是一个完整的产品

• 降低生成成本 - 多人协作
• 降低使用成本 - 各个零件之间是低耦合的

组件化

将一个完整的产品划分成各个组件

• 目前，前端开发更多是指HTML页面和CSS样式

模块化

将一个完整的产品划分成各个模块

• 目前，前端开发中更多是指JavaScript逻辑

2、组件化与模块化的关系

1. 将一个完整产品，划分成若干组件
2. 将每一个组件划分成若干模块

3、组件化与模块化的特点

1. 是低耦合的

   软件开发的统一原则

2. 是热插拔的

   需要时使用，不需要时去掉

一、前端模块化是什么

所谓模块化，就是指根据功能的不同进行划分，每个功能就是一个模块。最终，一个完整的产品是由各个模块组合而成的。

模块化的特点:

• 独立性

  可以针对一个模块单独进行设计、研发，相对工作量和难度变小。

• 复用性

  一些通用模块(例如登录或注册)可以被重复使用，而不用每次重新开发。

• 解耦性

  模块与模块之间，将相互影响降到最低，使得更换、升级或添加某个模块，不影响其他模块的工作。

• 灵活性

  通过选择和组合不同的模块，可以快速构建一个 新的产品。

二、ES5的模块化

ECMAScript 5 中存在全局作用域和函数作用域

不存在模块化概念

要想在ECMAScript中使用，是要自定义的

1、函数的封装

// 问题: 污染全局命名空间
function fn1() {}
//这两函数没联系是独立的 -- 低耦合
function fn2() {}

2、对象的封装

/*
在JavaScript对象中:
问题：	在全局作用域中可以随意修改指定对象的属性值
*/
var obj1{}
var obj2{}

3、自调函数的封装

/*
通过自调函数解决函数和对象的问题
问题： 在全局作用域中无法访问和使用自调函数内部的函数或对象
解决：
    在浏览器环境中运行，添加到window对象中
    将局部的return出去，从而开放给全局
*/
var global = (function () {
    function fn1() { }
    function fn2() { }
    return {
        fn1: fn1,
        fn2:fn2
    }
})()

三、ES6的模块化

ECMAScript 2015提供了基于原生的模块化概念。一个ECMAScript 2015的模块就是一个单独的JavaScript文件，与普通的JavaScript文件之间仅有两个区别:

• ECMAScript 2015的模块自动开启严格模式，即使没有写use strict
• 可以在模块中使用import和export命令。

export命令

导出

import命令

import {...} from modulepath

导入

import {v as v1} from modulepath

四、前端模块化规范

​ 模块化开发可以将复杂的Web应用程序拆分成若干个模块，模块之间的相互依赖很低。使得开发结构更为清晰,依赖更为明确。在实际开发中，经常引入第三方的模块，例如jQuery库等。
​ 但是，ECMAScript官方到目前为止并没有为模块化提供一个统一的标准规范，这可能导致每个模块的编写方式不同。

目前，最为流行的、JavaScript模块化规范具有以下几种:

• CommonJS
• RequireJS
• SeaJS

CommonJS

2009年，美国程序员Ryan Dahl创造了Node.js 项目，将JavaScript语言用于服务器端编程。
这标志“JavaScript模块化编程”正式诞生。
Nodejs.的模块系统，就是参照CommonJS规范实现的。在CommonJS中，有个全局性方法require(),用于加载模块。
Common. JS的Modules规范实现了一套简单易用的模块系统，CommonJS对模块的定义也十分的简单。主要分为模块定义、模块引用及模块标识三个部分。

RequireJS

RequireJS是一个JavaScript模块加载器。它非常适合在浏览器中使用。
RequireJS是一个基于AMD规范实现的函数，它区别于传统的CommonJS的require规范。因为它能够异步地加载动态的依赖。
AMD ( Asynchronous Module Definition,译为异步模块定义)是一个在浏览器端模块化开发的规范。模块将被异步加载，模块加载不影响后面语句的运行。所有依赖某些模块的语句均放置在回调函数中。
AMD是Require. JS在推广过程中对模块定义的规范化的产出。

SeaJS

Seajs追求简单、自然的代码书写和组织方式，具有以下核心特性:

• 简单友好的模块定义规范: Seajs 遵循CMD规范，可以像Node;js - -般书写模块代码。
• 自然直观的代码组织方式:依赖的自动加载、配置的简洁清晰，可以让我们更多地享受编码的乐趣。

Seajs还提供常用插件，非常有助于开发调试和性能优化，并具有丰富的可扩展接口。
CMD ( Common Module Definition,译为通用模块定义)规范明确了模块的基本书写格式和基本交互规则。该规范是在国内发展出来的。
CMD是SeaJS在推广过程中对模块定义的规范化的产出。

五、RequireJS

HTML

<!-- 
引入requirejs文件  -  影响HTML页面加载速度
解决：为script元素设置async属性 - 表示异步加载JavaScript文件
问题：IE浏览器不支持该属性
为script元素设置defer属性 - 表示IE浏览器的异步加载
为当前HTML页面引入主模块文件
为script元素设置data-main属性 - 表示指定加载主模块
-->
<script data-main="../script/index.js" async="true" defer src="../script/require.js"></script>

index.js

/*
    作为RequireJS的主模块
    - 使用require.config()函数对模块加载进行自定义
        require.config({
            paths: {
                模块名称：模块路径
            }
        })
    - 使用require()函数加载指定的模块
        require(names,)
*/
require.config({
    paths: {
        'hello':'./module'
    }
})

require(['hello'], function (value) {
    var h1 = document.createElement('h1')
    h1.textContent = value
    document.body.appendChild(h1)
})

module.js

/*
    作为RequireJS的模块文件
    define()函数进行定义
*/
define(function () {
    return 'Hello RequireJS'
})

需要引入第三方requirejs文件

六、SeaJS

seajs.config() 方法 - 用于配置价值模块
seajs.config({
	base:设置加载模块的基础路径
	paths:设置加载模块的路径
	alias:设置加载模块的别名
})

作为SeaJS的模块文件
	define(function(require,exports,module){}函数定义)
	require:用于导入其他模块
	exports:用于导出当前模块
		导出的是对象类型 - 所有内容都是对象形式
	module:module.exports - 用于导出当前模块

seajs.use()方法用于加载指定模块
seajs.use(names,callback)
	names:加载模块的名称
	callback:回调
		function(value){}
			value:表示导出的对象

需要引入第三方seajs文件