使用CommonJS，AMD以及CMD编写模块化JavaScripts

nifhlheimr 发布于2019-08-22 10:34 / 1754人阅读

摘要：模块化编程首先，我想说说模块化编程这个概念当我不清楚这个概念的时候，其实说什么模块化编程多好多好都是懵逼的而我一直不觉得有多好，其实也是因为我从开始写，就一直都在模块化编程啊我们写一个文件然后我们在文件中引入然后调用方法哈哈这样已经是模块化

模块化编程

首先，我想说说模块化编程这个概念
当我不清楚这个概念的时候，其实说什么模块化编程多好多好都是懵逼的
而我一直不觉得有多好，其实也是因为我从开始写js，就一直都在模块化编程啊

//我们写一个文件check.js

function check(){
    return true;
}

//然后我们在html文件中引入



//然后调用方法

这样已经是模块化编程了
其实我今天要探讨的并不是如何模块化编程
因为或多或少我们都是在模块化编程
但想要把一个项目
用模块化编程的思想去处理
让它变得易扩展易维护
需要长期的扑街爬起扑街爬起

今天想讲的其实应该是如何更有效的处理划分引入js文件

CommonJS

像上述最原始的模块化编程引入的方法
我们可以看到会有多行

但凡是有点追求的程序员，是不会允许一个页面里面有多行重复的内容的
而且主要引入文件的时候会有过多的全局变量暴露在外
平时写写小项目就算有bug 找出原因也是容易的
但项目一大开发人员一多
就会出现我放在客厅里的点心被偷吃了一块，那么怪谁呢，谁叫你放在客厅里

先举个CommonJS 的写法的例子

//先创建一个 check_commonjs.js 的文件

var flag = true;

function check(){
    return flag;
}

module.exports = {
    check: check,
}

//在我们需要用到的页面加载模块

var module = require("./check_commonjs.js");

if(module.check()){
    console.log("哈哈哈");
}

在CommonJS里面，被var定义的，在文件中作为全局存在的，在引入后，都还是私有的。当然，设计者们不是傻瓜
在定义内容前加入 global 那也还是全局的

CommonJS的用法在Node里面被应用的很溜
然而平时我们在做web开发的时候并不被前端开发人员所追逐
那是为什么呢？
Node作为服务端应用，加载一个文件，速度就是真的是可以忽略不计的
然而浏览器作为一个客户端，在这个大框框下面，想要加载完一个js文件
再执行下面的js语句
起码现在速度真没那么快
所以就有了我们常用的AMD和CMD

AMD

AMD:异步模块定义
最常见的应用例子就是RequireJS
先举一个RequireJS的例子

// 先创建一个 check_amd.js 的文件

define(["check"], function(){
    var flag = true;
    function check(){
        return flag;
    }

    return {
        check: check
    };
});

// 在我们需要用到的页面加载模块

require(["check_amd"], function (check){
    if(check.check()){
        console.log("哈哈哈");
    }
});

从代码的整洁性和可读性来讲
CommonJS 要好很多
但AMD定义下的RequireJS 解决了上述同步加载文件导致的问题

与AMD对应的就有CMD

CMD

CMD:通用模块定义
最常见的应用例子就是SeaJS
有些人把RequireJS 与 SeaJS做比较的时候
会简单的认为异步与同步的区别
这明显不太对是不是
加载文件的时候首先一定是异步的

先举一个SeaJS的例子

// 先创建一个 check_cmd.js 的文件

define(function(require, exports, module) {
    var a = require("a");//这里就不举例再创建a文件了
    function check(){
       return a.flag;
    }
    exports.check = check;
});

// 在我们需要用到的页面加载模块
seajs.use(["check_cmd.js"], function(check){
    if(check.check()){
        console.log("哈哈哈");
    }
});

可以看出来AMD与CMD的本质区别就是
AMD是加载完全部你所需要的文件
CMD是当你需要那个文件的时候他才加载
两个比较下来就是说AMD用户体验好，因为没有延迟，依赖模块提前执行了，CMD性能好，因为只有用户需要的时候才执行

最后

其实AMD与CMD的模式比较下来还是很繁琐
最喜欢的还是CommonJS的模式
那么如何利用CommonJS来编写JavaScripts，并没有最上述提到的由于浏览器加载文件需要时间，传统CommonJS模块在浏览器环境中无法正常运行的问题呢
且听下回分解

附上我的订阅号，欢迎关注，一起学前端

GPU云服务器云服务器 amd_cmd区别 amd模块加载异步模块加载机制-amd 亚马逊云服务器租用以及使用

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

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

关于JavaScript模块规范之CommonJSAMDCMD

摘要：所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。也采用语句加载模块，但是不同于，它要求两个参数第一个参数，是一个数组，里面的成员就是要加载的模块第二个参数，则是加载成功之后的回调函数。本篇文章来自对文章《js模块化编程之彻底弄懂CommonJS和AMD/CMD！》的总结，大部分摘自文章原话，本人只是为了学习方便做的笔记，之后有新的体会会及时补充...

binaryTree 2019-08-26 13:22 评论0 收藏0
浅谈 JavaScript 模块化编程

摘要：与在模块化编程的世界中，有两个规范不得不提，它们分别是和。所有依赖于某个模块的代码全部移到模块加载语句的回调函数中去。的语句接受两个参数在回调函数中，可以通过变量引用模块。回调函数的返回值就是当前对象的导出值。 JavaScript本身不是一种模块化语言，设计者在创造JavaScript之初应该也没有想到这么一个脚本语言的作用领域会越来越大。以前一个页面的JS代码再多也不会多到哪儿去，...

wdzgege 2019-08-21 12:17 评论0 收藏0
模仿RequireJs的用法实现一个低配版的模块加载器

摘要：我想自己可以尝试一下写一个低配版的模块加载器来应付一下我这个单页网站，当然只是大致模仿了主要功能。是这样处理的模块依赖，同时依赖，这种情况下的模块函数被调用时，被传入的是，所以需要自己在里面手动一下。 Contents 前言回顾RequireJs的基本用法实现原理使用方法总结前言前段时间一直想用单页开发技术写一个自己的个人网站(使用es2015)，写了一部分之后，发现单...

WalkerXu 2019-08-22 13:48 评论0 收藏0
JS学习笔记 - 模块化

摘要：在开发大型的项目中，可能会使用到管理的模块化工具。说道，学习过的同学会比较熟悉，是服务器模块的规范，采用了这个规范。可能是未来模块化解决方案的首选。本文章记录本人在学习 JavaScript 中理解到的一些东西，加深记忆和并且整理记录下来，方便之后的复习。在开发大型的web项目中，可能会使用到管理js的模块化工具。但是在前端轮子漫天飞的时代。那一款js模块化工具真正适合我...

CntChen 2019-08-22 10:57 评论0 收藏0
谈谈Js前端模块化规范

摘要：依赖全部加载完成后，调用回调函数规范异步加载模块规范和很相似，简单，并与和的规范保持了很大的兼容性在规范中，一个模块就是一个文件。抛出问题：在开发中在导入模块时经常使用require和import；导出模块时使用module.exports/exports或者export/export default; 有时候为了引用一个模块会使用require奇怪的是也可以使用import？...

Steve_Wang_ 2019-08-29 16:22 评论0 收藏0