模块化开发

前面讲了面向对象开发，今天了解一下模块化开发；

 为什么需要模块化开发？

我们通过下面的例子来帮助我们更好的理解模块化开发

          例子: 分页器, Pagination, creEle, setCss

            creEle 和 setCss 其实在很多地方都可以用

            按照开发习惯, 应该把他们分开放

            a.js, 里面放上 creEle 和 setCss

            b.js, 里面放上 Pagination

          把一类方法放在一个单独的 js 文件里面

            为了方便使用的时候, 只引入这一类方法的文件

            a.js 全都是封装的 操作 DOM 的方法

            b.js 全都是封装的 格式化 时间对象 的方法

            c.js 全都是封装的 和数字 相关的方法

          我们管这样一个封装好的 js 文件叫做一个 模块

什么是模块化开发

多个 js 文件之间的相互配合来实现效果

一个 js 文件里面只封装一类内容

  需要考虑的问题: 由多个 js 文件导致的

        1. js 文件引入顺序

        2. js 文件之间的相互依赖不清晰

        3. js 文件内部的变量会污染全局

模块化的发展过程

 从没有模块化

        +发展到按照顺序引入文件

      IIFE 伪模块化标准

        Immediaitely Invoked Function Expression

        自执行函数 (function () {})()

CommonJS 模块化标准

        2009 年, nodejs 出现了

        使用 JS 去做服务端语言

        伴生的是 CommonJS 模块化标准

        缺点: 只能在后端 JS 里面用

  AMD 模块化标准

Async Module Definition

        2011 出现的, 社区里面发起的

        因为非官方, 没有关键字, 大家书写了一套叫做 require.js 的第三方文件

        来实现 模块化标准

        目的是把每一个 js 文件独立出来了

          使用了导入导出的语法来实现模块化

          在 JS 文件里面引入另一个 JS 文件

        定义模块

          调用 define 的方法

          1. 独立模块定义

            每一个模块文件开始执行 define()

            我不依赖其他文件, 我就是一个单纯的模块

            向外暴露的内容, 直接 return 出去就好了

          2. 依赖其他模块的模块

            我也是一个模块文件, 但是我依赖的以他模块的内容

            使用 define() 定义

            语法: define([ 依赖文件 1, 依赖文件 2, ... ], function (模块 A, 模块 B, ...) {})

          3. 导入 其他模块

            我是一个模块整合文件

            我就直接使用 a.js 文件里面的方法

            使用这个方法 require()

            语法: require([ 依赖文件 1, 依赖文件 2, ... ], function (模块 1, 模块 2) {})

  CMD

Common Module Defineion - 通用模块定义

        2011 左右, 社区里面出现的一个标准

        淘宝 "玉伯", 开发一了个 CMD 的模块化标准

        依赖于一个叫做 sea.js 的文件来实现的模块化标准

        使用: 文件需要引入一个 sea.js 的文件

          1. 独立模块定义

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

            require() 用来导入其他文件的

            module.exports 是为了本文件导出内容的

            exports 是 module.exports 的别名

            var exports = module.exports

          2. 依赖其他模块的模块

            你需要依赖其他文件模块

            在 define( function (require, exports, module) {

              在你需要的位置使用 require() 方法来导入

              var modA = require('地址')

            })

          3. 资源整合

            使用 seajs.use()

            语法: seajs.use(['你要依赖的模块'], function (模块 A) {})

  ES6 Module

        2015 年发布, ES6 语法里面自带了一个模块化标准

        2016 年开始, Vue 出现了, 人家出现了一个脚手架(开发的大框架直接给你搭建好)

          搭建这个架子的时候, 内置了 ES6 模块化标准

        2018 年, 各大浏览器厂商开始原生支持 ES6 模块化标准

        2018 年中, Chrome 率先原生支持 ES6 模块化

        语法: 变成了 JS 的语法, 和关键字, 不需要任何第三方文件的引入

        特点: 页面必须在服务器上打开

          live server 插件

          如果你想使用模块化语法, script 标签要加一个属性 type="module"

        使用:

          1. 每一个文件都可以作为独立模块, 页都可以作为整合文件

          2. 导出语法

            2-1. export default 导出的内容

            2-2. export var num = 200

          3. 导入语法

            3-1. 接收 export default 导出

              import 变量 from '哪一个 JS 文件'

            3-2. 接收 export 导出的恩日哦那个

              import { 接收变量 } from '哪一个 JS 文件'

        2020 年

          ES2020 发布新的标准

          多了一个 按需加载的模块化

          语法: import(你要加载的文件).then(function (res) {})

由于这个月 21 天已经更新完成 ，又不满足三十天的全勤，所以今天就水了一片帖子来帮助大家更好的理解 js 的模块化开发，这个在实际工作中是很常见的，一个人负责几个模块。所以大家有必要了解一下 。