如何兼容AMD和CMD语法规范

目录

一、自定义一个js插件，实现改变div字体大小

二、什么是AMD/CMD规范

---

一、自定义一个js插件，实现改变div字体大小

要求：兼容AMD和CMD语法规范！！！

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./plugin.js"></script>
</head>

<body>
    <div id="div">怎样写一个js插件,兼容AMD和CMD语法规范</div>
    <script>
        var mObj = new ModifyDiv("#div");
        mObj.setFontSize("19px");
    </script>

</body>

</html>

plugin.js

; (function (global) {
    // 构造函数写法
    // function ModifyDiv(Ele) {
    //     this.element = typeof Ele === 'string' ? document.querySelector(Ele) : Ele
    // }
    // ModifyDiv.prototype.setBgColor = function (color) {
    //     this.element.style.fontSize = color
    // }

    // class 类写法
    class ModifyDiv {
        constructor(Ele) {
            this.element = typeof Ele === 'string' ? document.querySelector(Ele) : Ele
        }
        setBgColor(color) {
            this.element.style.fontSize = color
        }
    }
    if (typeof module !== 'undefined' && module.exports) {// CMD
        module.exports = ModifyDiv
    } else if (typeof define === 'function' && define.amd) {// AMD
        define(function (require, factory) {
            'use strict';
            return ModifyDiv
        })
    } else {
        global.ModifyDiv = ModifyDiv
    }

})(this)

 

二、什么是AMD/CMD规范

众所周知，JavaScript是没有模块化的，浏览器端引入依赖模块都是通过script标签的引入顺序决定的，要么就代码全部写在一个文件中，并且所有定义的变量和函数都是全局的。不像java，python，c++等语言那样可以定义独立的模块和接口，那么模块化有什么好处？

1. 有利于代码分离、解耦以及复用，每一个模块都是一部分独立的功能。
2. 提升开发效率，每一个模块都是独立的项目，可以单独进行编译和测试，可以多团队并行开发。
3. 避免命名冲突，javaScript本身没有命名空间，只有全局作用域和函数作用域，cmd/amd规范其实就是开辟了函数作用域作为命名空间。
4. 更好的代码组织方式，按需加载。