如何兼容AMD和CMD语法规范

最新推荐文章于 2021-11-19 00:43:06 发布

大叔0o0

最新推荐文章于 2021-11-19 00:43:06 发布

阅读量224

点赞数

分类专栏： javascript 工具文章标签： amd cmd 自定义插件

本文链接：https://blog.csdn.net/github_37360787/article/details/115339364

版权

javascript 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

工具

4 篇文章 0 订阅

订阅专栏

一、自定义一个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++等语言那样可以定义独立的模块和接口，那么模块化有什么好处？

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

大叔0o0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何兼容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
复制链接

扫一扫

专栏目录