MiaoMiao'S Dev Life
  • 首页
  • 技术专栏
首页 / 前端技术 / 前端工程化 / 初探模块系统02—如何让模块支持AMD/CMD和commonjs标准

初探模块系统02—如何让模块支持AMD/CMD和commonjs标准

前端工程化 • 7 years ago

前段时间在看一些前端模块化方面的知识,现在自己就来写一个符合amd/cmd 和commonjs标准的模块。在文中会穿插一些AMD/CMD,commonjs的基础知识,主要是为了让自己复习一下。了解的同学们可以直接略过。

一 原模块

该模块是一个实现类数组转为数组功能的模块

(function(arrayLike){
  function arrayLikeObject2Array (arrayLike) {
    if (!Object.prototype.toString.call(arrayLike) === '[object Object]') {
      return
    } else {
      return Object.keys(arrayLike).map((key) => {
        return arrayLike[key]
      })
    }
  }
 return arrayLikeObject2Array
})(obj)

二 改造成AMD/CMD 模块

要改造成AMD/CMD模块,首先要了解这两种模块有哪些特点。AMD/CMD 都主要使用define来定义模块,区别在于AMD是依赖前置,而CMD则是依赖就近。什么意思呢?举一个例子,假设AMD和CMD都需要引用Jquery这个模块

 //amd
 define('module1',[Jquery],function(Jquery){
    using Jquery do something
})
//cmd 
define(function(require,exports,modules){
//do something
var $ =require(Jquery)
//using jquery do something
})

现在我们将原模块打造成AMD/CMD标准,如下

(function(root,factory){
  if(typeof define === 'function'){
    define([],factory)
  }
})(this,function(){
    function arrayLikeObject2Array(arrayLike){
        if (!Object.prototype.toString.call(arrayLike) === '[object Object]') {
           return
        } else {
           return Object.keys(arrayLike).map((key) => {
           return arrayLike[key]
          })
        }
    }
    return arrayLikeObject2Array     
})

这样,我们的模块已经支持了AMD/CMD标准。

三 改造成commonjs规范

commonjs模块是nodejs遵循的标准。它加载模块的方式是同步执行的。该规范一般用在服务器开发中。要把我们的模块改造成具有commonjs规范的模块如下

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define([], factory)
  } else if (typeof exports === 'object') {
    module.exports = factory()
  } else {
    root.returnExports = factory() //如果没有AMD/CMD和CommonJS就挂在全局对象下
  }
})(this, function () {
  function arrayLikeObject2Array (arrayLike) {
    if (!Object.prototype.toString.call(arrayLike) === '[object Object]') {
      return
    } else {
      return Object.keys(arrayLike).map((key) => {
        return arrayLike[key]
      })
    }
  }
  return arrayLikeObject2Array
})
Like (0)
Comments (0)
Back
Leave a comment
Related Posts
monorepos 方案实践 – 基于动态表单类项目
本文主要介绍了 monorepos 的常见概念及其实战类项目里的实践。 ...
4 years ago
new Array(1) 和 [undefined] 一样嘛?
一 问题描述 最近在开发中碰到一个很奇怪的问题,请看下面代码 const newArr = new Array(3).map((item) => { return item = { name: ‘Chris xiong’ } }) console.log(newArr) 大家觉得这段代码的输出结 ...
7 years ago
初探flex布局
一 flex布局 1.1 flex概述 flex布局是一种较新CSS盒子模型,在flex布局模型中,弹性容器的子元素的排布可以比较灵活,可以根据容器的大小自动扩展或收缩其大小。也可以比较灵活的处于容器的的某一位置上。所以flex的应用场景很多,比如我们碰到需要元素居中的应用场景时,flex布局就变得很有用了。更多关于f ...
8 years ago
© 2016-2025 All Rights Reserved⋅Developed by nicetheme⋅浙ICP备19034990号
  • 首页
  • 技术专栏
Search (0)
    Load more...
    Tags
    css docker es6 git html js typescript vue 动态表单 整洁架构