javascript中模块化知识总结

时间  2019-11-08
标签 javascript 模块化 知识 总结 栏目 JavaScript 繁體版
原文   原文链接

JavaScript 模块化开发

1. 模块化介绍

掌握模块化基本概念以及使用模块化带来的好处html

当你的网站开发愈来愈复杂的时候，会常常遇到什么问题？前端

  • 恼人的命名冲突
  • 繁琐的文件依赖

历史上，JavaScript一直没有模块（module）体系， 没法将一个大程序拆分红互相依赖的小文件，再用简单的方法拼装起来。 其余语言都有这项功能，好比Ruby的 require、Python的 import ， 甚至就连CSS都有 @import ， 可是JavaScript任何这方面的支持都没有，这对开发大型的、复杂的项目造成了巨大障碍。jquery

如何解决不经过 script 标签就能加载 JavaScript 文件代码。git

  • 什么是模块化github

    • 一起一起的：JavaScript 也是一起一起
    • 模块化就是一种将复琐事物按照模块的方式简单化实现
    • 模块与模块之间互相协做构成了模块系统

  • 使用模块化开发的方式带来的好处面试

    • 生产效率高
    • 可维护性高

眼见他起高楼，眼见他宴宾客，眼见他楼塌了。ajax

2. 模块化开发演变

体验刀耕火种的模块化解决方式npm

2.1 全局函数

  • 污染了全局变量
  • 模块成员之间看不出直接关系

2.2 命名空间

  • 理论意义上减小了变量冲突
  • 缺点1：暴露了模块中全部的成员，内部状态能够被外部改写，不安全
  • 缺点2：命名空间会愈来愈长

2.3 私有空间

  • 私有空间的变量和函数不会影响全局做用域
  • 公开公有方法，隐藏私有属性

2.4 模块的维护和扩展

  • 开闭原则
  • 可维护性好

2.5 模块的第三方依赖

  • 保证模块的独立性
  • 模块之间的依赖关系变得明显

2.6 总结

之后若是不使用第三方规范的状况下， 若是写模块能够采用下面这种方式编程

```js ; (function (形参模块名, 依赖项, 依赖项) { // 经过 形参模块名 修改模块数组

window.模块名 = 形参模块名 })(window.模块名 || {}, 依赖项, 依赖项) ```

下面是一个关于模块化的面试题，一块儿观察和分析这段代码的做用：

js var UTIL = (function (parent, $) { // 动态的给一个不存在的对象挂载一个子对象 var my = parent.ajax = parent.ajax || {} my.get = function (url, params, callback) { return $.getJSON(url, params, callback) } return parent }(UTIL || {}, jQuery))

3. 模块化规范

3.1 模块系统理解

天然界生态系统、计算机操做系统、软件办公系统，还有教育系统、金融系统、网络系统、 理论系统等等。究竟什么是系统呢？

维基百科：系统泛指由一群有关连的个体组成，根据预先编排好的规则工做， 能完成个别元件不能单独完成的工做的群体。 系统分为天然系统与人为系统两大类。

简单来讲，系统有两个基本特性：

  1. 系统由个体组成
  2. 个体之间有关联，按照规则协同完成任务

系统之间的个体能够成为系统成员，要构建一个系统，最基本的层面须要作两件事：

  1. 定义系统成员：肯定成员是什么
    • 模块是一个 JavaScript 文件
    • 每个模块都使用 define 函数去定义
  2. 约定系统通信：肯定成员之间如何交互，遵循的规则是什么
    • 一个 SeaJS 模块默认就是私有做用域
    • 若是想要被外部文件模块所访问，就必须把要公开的属性挂载给 module.exports 对象接口
    • 使用 require 函数能够加载一个指定的模块，获得该模块代码中暴露的接口对象
  3. 如何启动整个模块系统
    • 在 html 页面中使用 seajs.use() 方法，指定一个入口文件模块

Sea.js 是一个适用于 Web 浏览器端的模块加载器。 在 Sea.js 里，一切皆是模块，全部模块协同构建成模块系统。 Sea.js 首要要解决的是模块系统的基本问题：

  1. 模块是什么？
  2. 模块之间如何交互？

在前端开发领域，一个模块，能够是JS 模块，也能够是 CSS 模块，或是 Template 等模块。 而 Sea.js 则专一于 JS 文件模块：

  1. 模块是一段 JavaScript 代码，具备统一的 基本书写格式
  2. 模块之间经过基本 交互规则 ，能彼此引用，协同工做

把上面两点中说起的基本书写格式和基本交互规则描述清楚，就能构建出一个模块系统。 对书写格式和交互规则的详细描述，就是模块定义规范（Module Definition Specification）。

好比 CommonJS 社区的 Modules 1.1.1 规范， 以及 NodeJS 的 Modules 规范， 还有 RequireJS 提出的 AMD 规范等等。

Sea.js 遵循的是 CMD 规范。

3.2 常见的 JavaScript 模块化规范

  • CommonJS
    • Node.js
  • AMD
    • RequireJS
  • CMD Common Module Definition
    • CMD 就是 SeaJS 这个模块加载器在推广的过程当中定义的一个模块规范
  • ECMAScript
    • ECMAScript 6
  • UMD

CMD、AMD、CommonJS 都是社区制定出来的模块规范， 他们的目的都是为了解决 JavaScript 没有模块化系统的问题。 他们都有如何定模块成员，以及模块成员之间如何进行通讯交互的规则。

AngularJS Module 也是 ng 框架自己提供的一个模块系统解决方案。 ng定义模块须要起名，即使你去加载或者依赖一个模块的时候， 这个被依赖的模块也须要经过 script 标签引入到 html 页面中。

2015 年 9 月份，ECMAScript 官方推出了 ECMAScript 6 语言标准。 在最新的 ES6 语言规范标准中，已经制定了 JavaScript 模块化规范。

export import

前端界的风气：都喜欢追赶新技术，甚至把没有推出来的标准直接干到了生产环境。

这个社区太浮躁了。

4. SeaJS

A Module Loader for the Web, Enjoy the fun of programming.

  • 提供简单、极致的模块化开发体验
  • A Module Loader for the Web
  • JavaScript 模块加载器
  • 能够实现 在 JavaScript 代码中去加载另外一个 JavaScript 代码。

4.1 SeaJS 介绍

  • 关于 SeaJS

    • SeaJS 是一个适用于浏览器环境的 JavaScript 模块加载器
    • 一个库文件，相似于 jQuery
    • 使用这个库提供的规范的模块化的方式来编写 JavaScript 代码
    • 只关心 JavaScript 文件代码模块如何组织
      • 只关心 JavaScript 文件之间如何相互协议、引用、依赖
    • SeaJS 的做者是阿里巴巴支付宝前端架构师，花名：玉伯，玉伯也叫射雕
    • Sea.js创始人玉伯的前端开发之路
    • SeaJS
    • SeaJS -github

  • 为何学习和使用 SeaJS ？

    • 简单友好的模块定义规范：SeaJS 遵循 CMD 规范，能够像 Node 同样书写模块代码
    • 天然直观的代码组织方式：依赖的自动加载、配置简洁清晰，可让咱们更多的享受编码的乐趣
    • SeaJS兼容性很是好，几乎能够运行在任何浏览器引擎上
    • 注1：SeaJS 只是实现模块化开发的一种方式或者说一种工具而已，重在模块化思想的理解
    • 注2：由于 SeaJS 采用的 CMD 模块规范和 Node 中的 CommonJS 模块规范很是一致，因此有利于咱们学习 Node 中的模块化编程

  • 谁在用？

    • 淘宝网、支付宝、京东、爱奇艺。。。

  • SeaJS 适用场景

    • 没有使用任何框架，例如 AngularJS
    • 例如 只写写 原生 JavaScript 或者用了一些第三方库
    • SeaJS 不提供任何功能性 API，只提供了解决 JavaScript 代码的命名污染和文件依赖的问题

4.2 快速上手（Getting Started）

  1. 下载 sea.js 库文件
  2. 在页面中引入 sea.js
  3. 使用 define 函数定义模块
  4. 使用 require 函数加载模块
  5. 使用 module.exports 对外暴露接口对象
  6. 使用 seajs.use 函数启动模块系统

4.3 API 详解

4.3.1 seajs.use

加载模块，启动模块系统。

  • 加载一个模块 seajs.use('id')
  • 加载一个模块，在加载完成时，执行回调 seajs.use('id', callback)

  • 加载多个模块，加载完成时，执行回调 seajs.use(['id1','id2',...],callback)

  • 注意：

    • 在调用 seajs.use 以前，须要先引入 sea.js 文件
    • seajs.use 与 DOM ready 事件没有任何关系。若是某些操做要确保在 DOM ready 后执行，须要使用 jquery 等类库来保证
    • seajs.use 理论上只用于加载启动，不该该出如今 define 中的模块代码里

4.3.2 define(factory)

define 是一个全局函数，用来定义模块。

define 接受 factory 参数，factory 能够是一个函数，也能够是一个对象或字符串。

factory 为对象、字符串时，表示模块的接口就是该对象、字符串。

  • factory 是一个对象时

    • define({})

  • factory 是一个字符串时

    • define('hello')

  • factory 是一个函数时

    • define(function(require, exports, module){})

4.3.3 require

require 用来加载一个 js 文件模块， require 用来获取指定模块的接口对象 module.exports。

require 在加载和执行的时候，js 会按照同步的方式和执行。

使用注意：

  • 正确拼写
    • 模块 factory 构造方法的第一个参数 必须 命名为 require
  • 不要修改
    • 不要重命名 require 函数，或在任何做用域中给 require 从新赋值
  • 使用字符串直接量
    • require 的参数值 必须 是字符串直接量

Tips: 把 require 看作是语法关键字就好啦

4.3.4 模块标识

模块标识是一个字符串，用来标识模块。

  • 模块标识能够不包含文件后缀名，好比 .js

    • seajs 推荐不加 .js 文件模块后缀

  • 模块标识能够是 相对 或 顶级 标识

  • 相对标识

相对标识以 . 开头，永远相对于当前模块所处的路径来解析。

  • 顶级标识

顶级标识不以 . 或 / 开始，会相对模块系统的基础路径（base路径，默认是 sea.js 文件所属的路径）。 能够手动配置 base 路径。

js seajs.config({ base: './js' })

  • 普通路径

除了相对和顶级标识以外的标识都是普通路径。 普通路径的解析规则，会相对当前页面解析。

```js // 假设当前页面是 http://example.com/path/to/page/index.html

// 绝对路径是普通路径： require.resolve('http://cdn.com/js/a'); // => http://cdn.com/js/a.js

// 根路径是普通路径： require.resolve('/js/b'); // => http://example.com/js/b.js

// use 中的相对路径始终是普通路径： seajs.use('./c'); // => 加载的是 http://example.com/path/to/page/c.js

seajs.use('../d'); // => 加载的是 http://example.com/path/to/d.js ```

Tips:

  • 顶级标识始终相对 base 基础路径解析。
    • 若是不设置，base 路径默认就是 sea.js 库文件所属的路径
    • 能够经过 seajs.config({ base: '基础路径' }) 来配置基础路径
  • 绝对路径和根路径始终相对当前页面解析。
  • 相对标识永远相对于当前文件
  • seajs.use 中的相对路径始终相对当前页面来解析。

4.3.5 module

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

  • module.id
    • 模块的惟一标识，能够经过 define 方法的第一个参数来指定，默认为该模块文件的绝对路径
  • module.uri
    • 模块的绝对路径
  • module.dependencies
    • dependencies 是一个数组，表示当前模块的依赖
  • module.exports
    • 当前模块对外提供的接口对象
    • 至关于每一个模块内部最终都执行了这么一句话：return module.exports
    • 模块与模块之间的通讯接口

4.3.6 exports

exports 仅仅是 module.exports 的一个引用。 也就是说修改了 exports 就至关于修改了 module.exports。

可是一旦在 factory 内部给 exports 从新赋值，并不会改变 module.exports 的值。 所以给 exports 赋值是无效的。

4.4 exports 和 module.exports 的区别

  • 每一个模块内部对外处处的接口对象始终都是 module.exports
  • 能够经过修改 module.exports 或给它赋值改变模块接口对象
  • exports 是 module.exports 的一个引用，就比如在每个模块定义最开始的地方写了这么一句代码：var exports = module.exports

关于这俩哥们儿的区别请分析一下代码：

```js var module = { exports: {} }

function changeExports (exports, module) { // var exports = module.exports exports.foo = 'bar'

// 这里赋值拿不到，不要使用使用 // exports = function () {} return module.exports }

changeExports(module.exports, module) ```

那为啥要有 exports ？

为了开发体验，API更友好，使用 exports 的时候，能够少写一个点儿。

若是你实在分不清楚 exports 和 module.exports 之间的区别，就只记得 module.exports 就能够了。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程