欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js模块化规范---commonJs/ AMD /CMD /ES6

程序员文章站 2022-06-13 22:02:29
...

当项目功能越来越多,代码量便也会越来越多,后期的维护难度会增大,此时在JS方面就会考虑使用模块化规范去管理。

什么是模块?

将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起。
块的内部数据/实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信。

模块化

编码时时按照模块一个个编码的,整个项目就是一个模块化的项目,组合到一起。

模块化规范

  1. CommonJs
    Node.js :服务器端
    Browserify:浏览器端 也称为js 的打包工具
    定义暴露模块 : exports
    exports.xxx = value
    module.exports = value
    引入模块 : require
    var module = require(‘模块名/模块相对路径’)
    引入模块发生在什么时候?
  •     Node : 运行时, 动态同步引入
    
  •     Browserify : 在运行前对模块进行编译/转译/打包的处理(已经将依赖的模块包含进来了), 运行的是打包生成的js, 运行时不存在需要再从远程引入依赖模块
    

2 AMD : 浏览器端

  • require.js
  • 基本语法
    • 定义暴露模块: define([依赖模块名], function(){return 模块对象})
    • 引入模块: require([‘模块1’, ‘模块2’, ‘模块3’], function(m1, m2){//使用模块对象})
      配置:
      require.config({
      //基本路径
      baseUrl : ‘js/’,
      //标识名称与路径的映射
      paths : {
      ‘模块1’ : ‘modules/模块1’,
      ‘模块2’ : ‘modules/模块2’,
      ‘angular’ : ‘libs/angular’,
      ‘angular-messages’ : ‘libs/angular-messages’
      },
      //非AMD的模块
      shim : {
      ‘angular’ : {
      exports : ‘angular’
      },
      ‘angular-messages’ : {
      exports : ‘angular-messages’,
      deps : [‘angular’]
      }
      }
      })

3.CMD : 浏览器端

  • sea.js
  • 基本语法
    • 定义暴露模块:
      define(function(require, module, exports){
      通过require引入依赖模块
      通过module/exports来暴露模块
      exports.xxx = value
      })
      使用模块seajs.use([‘模块1’, ‘模块2’])

4 ES6

  • ES6内置了模块化的实现
  • 基本语法
    • 定义暴露模块 : export

      • 暴露一个对象:
        export default 对象
        暴露多个:
        export var xxx = value1
        export let yyy = value2

      var xxx = value1
      let yyy = value2
      export {xxx, yyy}
      引入使用模块 : import
      default模块:
      import xxx from ‘模块路径/模块名’
      其它模块
      import {xxx, yyy} from ‘模块路径/模块名’
      import * as module1 from ‘模块路径/模块名’