学习十一、模块化

# 模块化开发概述

    ————当下最重要的前端开发模式

- 提高开发效率

- 减少开发成本

# 模块化的演变过程

- stage1 文件划分方式

  将一个文件设定为一个模块,里面存放模块内部需要的变量和方法

  缺点: 全局引用,污染全局作用域

  模块外部都可以调用和修改模块内的成员

  早期模块化完全依靠约定

- stage2 命名空间方式

  在第一个阶段基础之上,将每一个模块包裹成一个全局对象的方式

  缺点: 模块成员仍然可以在外部调用和修改

- stage3 IIFE(立即实行函数)

  为模块提供私有空间,将某块放入一个函数,将需要暴露的变量和方法挂载到全局

  优点: 实现私有成员

# 模块化规范的出现

## CommonJS 规范(Node.js)

- 一个文件就是一个模块

- 每个模块都有单独的作用域

- 通过 module.exports 导出成员

- 通过 require 函数载入模块

CommonJS 是以同步模式加载模块

如果直接用浏览器来使用 CommonJS 的话,加载时间过长,效率缓慢。

## AMD(Asynchronous Module Definition)

    ————异步的模块规范(Require.js)

- 定义

  define('moduleName',['jquery','./moduleOther'],function(\$,moduleOther){

  return {

  start:function(){

  console.log('这就是我的模块化');

  }

  }

  });

- 加载

  require(['./moduleName'],function(moduleName){

  moduleName.start()

  })

AMD 使用起来相对复杂,模块 JS 文件请求频繁。

## Ses.js + CMD 淘宝推出的模块化的库(类似 CommonJs 规范)

# 模块化标准规范

    ————模块化的最佳实现

    CommonJS in Node.js

    ES Modules in Browers

猜你喜欢

转载自blog.csdn.net/qq_40289624/article/details/108986324