「JavaScript」如何让你的插件兼容CommonJS, AMD, CMD 和原生 JS

ShevaKuilin 发布于2019-08-21 10:40 / 527人阅读

摘要：模块标准有三个全局变量和。模块中有两种方式提供对外的接口，一种是，一种是使用进行返回。规范中，函数同样有一个公有属性。由于和都可以使用来定义对外接口，故可以合并成一句代码。

模块标准 CommonJS

CommonJS 有三个全局变量 module、exports 和 require。但是由于 AMD 也有 require 这个全局变量，故不使用这个变量来进行检测。

如果想要对外提供接口的话，可以将接口绑定到 exports （即 module.exports）上。

function MyModule() {
    // ...
}

if(typeof module !== `undefined` && typeof exports === `object`) {
    module.exports = MyModule;
}

CMD

CMD 规范中定义了 define 函数有一个公有属性 define.cmd。

CMD 模块中有两种方式提供对外的接口，一种是 exports.MyModule = ...，一种是使用 return 进行返回。

AMD

AMD 规范中，define 函数同样有一个公有属性 define.amd。

AMD 中的参数便是这个模块的依赖。那么如何在 AMD 中提供接口呢？它是返回一个对象，这个对象就作为这个模块的接口，故我们可以这样写：

function MyModule() {
    // ...
}

if(typeof define === `function` && define.amd) {
    define(function() { return MyModule; });
}

总结

我们除了提供 AMD 模块接口，CMD 模块接口，还得提供原生的 JS 接口。
由于 CMD 和 AMD 都可以使用 return 来定义对外接口，故可以合并成一句代码。

一个直接可以用的代码如下：

;(function(){
    function MyModule() {
        // ...
    }
    
    var moduleName = MyModule;
    if (typeof module !== "undefined" && typeof exports === "object") {
        module.exports = moduleName;
    } else if (typeof define === "function" && (define.amd || define.cmd)) {
        define(function() { return moduleName; });
    } else {
        this.moduleName = moduleName;
    }
}).call(this || (typeof window !== "undefined" ? window : global);

GPU云服务器云服务器原生js弹窗插件 amd_cmd区别原生js和jquery 原生js如何写动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85985.html

OMD: javascript模块化开发兼容CommonJS, AMD, CMD 以及原生 JS

摘要：它就是一套兼容方案，目前兼容的有以及原生支持。返回值问题在第一次使用时，。具体是什么意义呢的返回值，其实就是插件提供的对外接口，而实际上，就是一个对象。而在环境下，只需要将这个返回值赋予即可完成该模块的接口。有更新，请到github上看源码什么是OMD 在node.js流行起来之前，javascript的开发方式都是函数式的顺序依赖关系，直到node火起来。CommonJS其实首先...

lavor 2019-08-19 17:31 评论0 收藏0
让你基于jQuery的插件兼容commonjs,amd规范

摘要：示例小明小明小明小明小花小花姓名价格基于上面的方法我写了个简易的基于的自动生成表格的插件，可以合并单元格。对于兼容这些规范，写法也很多，希望多多指教完整代码事情是这样的，我写了一个基于jQuery的插件，在传统的开发模式中，我们需要现在页面引入jQuery.js，然后在引入我们的插件，我们的插件才能使用。但是随着webpack的兴起，我不在想一步步的写入script标签，写着一堆的s...

GeekGhc 2019-08-20 16:20 评论0 收藏0
JavaScript模块化发展

摘要：所有依赖这个模块的语句，都定义在一个回调函数中，等到所有依赖加载完成之后前置依赖，这个回调函数才会运行。如果将前面的代码改写成形式，就是下面这样定义了一个文件，该文件依赖模块，当模块加载完毕之后执行回调函数，这里并没有暴露任何变量。模块化是我们日常开发都要用到的基本技能，使用简单且方便，但是很少人能说出来但是的原因及发展过程。现在通过对比不同时期的js的发展，将JavaScript模...

mengbo 2019-08-22 18:05 评论0 收藏0
库&插件&框架&工具

摘要：一些有用的一些有用的，包括转换小箭头三角形媒体查询等中文指南是当下最热门的前端资源模块化管理和打包工具。 nodejs 入门 nodejs 入门教程，大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享浅谈前端线上部署与运维说到前端部署，可能大多数前端工程师在工作中都是使用的公司现成的部署系统，与SRE对接、一起完...

Codeing_ls 2019-08-01 18:22 评论0 收藏0
库&插件&框架&工具

摘要：一些有用的一些有用的，包括转换小箭头三角形媒体查询等中文指南是当下最热门的前端资源模块化管理和打包工具。 nodejs 入门 nodejs 入门教程，大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享浅谈前端线上部署与运维说到前端部署，可能大多数前端工程师在工作中都是使用的公司现成的部署系统，与SRE对接、一起完...

xiaowugui666 2019-08-21 18:43 评论0 收藏0