最近写react需要使用nodejs作为开发环境,需要通过npm安装一些第三方的依赖库,因此慢慢感觉到nodejs基础薄弱对我带来了一些不安全感,尤其是javascript模块这一块听到了很多概念,比如:AMD,CMD,异步加载… …

我不由的好奇,前端还能按需异步加载js,到底是什么闻所未闻的高科技?AMD, CMD听起来像是主板型号,到底是什么鬼?所以,不如一探究竟吧!

模块的黑历史

这里推荐先阅读2个博客:

  • 介绍了一下javascript模块化的发展历史,但不会讲每个规范的出现原因或者工作原理,做一个兴趣了解即可。
  • 阮一峰的博客(Javascript模块化编程(二),(三)),这里浅显易懂的讲解了CommonJS,AMD,CMD为何而生以及是如何工作的。
  • 详细看看CMD和AMD的使用差异,重点关注一下AMD依赖前置和CMD依赖就近。

经过阅读后,我得到了这样几个理解,与大家分享:

  • 模块简单理解就是从某个js文件导出的若干代码,引入模块则可以使用其导出的功能。
  • 模块加载分为同步和异步,在服务端编程时由于模块的js文件在磁盘上,因此同步加载即可瞬间完成;而如果是浏览器中希望加载一个js模块,那么需要通过网络请求服务器把对应的js文件下载回来,因此适合异步,也就是等下载完成后callback通知你。
  • CommonJs就是nodejs遵循的规范,简单说就是同步的require对应的js文件即可。我之前写的react项目都属于这一类,通过服务端直接编译生成bundle.js将所有依赖的js模块打包到一起发布,因此压根没有浏览器下载依赖js的需求。
  • AMD就是为了解决浏览器异步下载js文件产生的一个规范,其典型实现就是Require.js。基于Require.js编写的js模块,可以定义其依赖模块,当依赖和模块自身均加载的完成时候,将通过回调的形式异步通知。这可以避免因为下载模块与其依赖模块期间阻塞了浏览器的正常渲染。
  • CMD的典型实现是seajs,它貌似是看不起AMD将依赖前置的写法(觉得不太自然),所以不再要求一次性把依赖模块列出来,而是在回调中提供require方法,用户按需reqquire依赖模块。乍一想,这样require依赖模块岂不是又成了同步加载???原来,它是通过静态分析模块代码里的require调用(正则匹配)来采集依赖的模块,本质上和AMD一样是提前异步加载的,这方面可以看一下博客:CMD的实现原理

不要把异步加载想的很复杂,其实js文件的内容是可以通过浏览器ajax下载,然后动态创建script标签,将js内容填充进去就可以执行了。

统统与我无关 – 我只要CommonJs

根据上述黑历史可知,nodejs采用的是CommonJs规范,并且对于react后端编译的发布模式的来说,CMD和AMD对我意义真的不大!

鉴于react开发经常遇到一些报错,加深对CommonJs的认识一定程度上有利于我排查第三方库的使用问题,因此我决定学一下。

这里,我通过博客《nodejs的exports的用法》来学习nodejs模块的常见用法,3个关注重点:

  1. exports是指向了module.exports,而最终require导入的是module.exports,所以像exports = xxx这种写法:仅仅是让exports脱离了对module.exports的引用,并不能实现导出的效果。
  2. require是按文件路径缓存的,因此多次require返回的是同一个对象,这就给monkey patch(为现有模块打补丁)提供了可能性。
  3. 熟悉常见的模块导出方式,这个博客介绍了导出这些东东:命名空间,工厂方法,偏函数,构造函数,单例,全局对象。

有些东西,了解一下还是有帮助的,所以要好好学。

有些东西,了解or不了解都不会造成影响,可以选择后学或者不学。

重要的是知道什么对自己有真正的意义。

研究一下javascript的模块规范(CommonJs/AMD/CMD)的更多相关文章

  1. Javascript模块化编程之CommonJS,AMD,CMD,UMD模块加载规范详解

    JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发?     模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问 题进行系 ...

  2. Javascript模块规范(CommonJS规范&&AMD规范)

    Javascript模块化编程(AMD&CommonJS) 前端模块化开发的价值:https://github.com/seajs/seajs/issues/547 模块的写法 查看 AMD规 ...

  3. JavaScript模块化演变 CommonJs,AMD, CMD, UMD(一)

    原文链接:https://www.jianshu.com/p/33d53cce8237 原文系列2链接:https://www.jianshu.com/p/ad427d8879cb 前端完全手册: h ...

  4. JavaScript模块化CommonJS/AMD/CMD/UMD/ES6Module的区别

    目录 JS-模块化进程 原始的开发方式 CommonJS && node.js AMD && Require.js CMD && Sea.js UMD ...

  5. 插件兼容CommonJS, AMD, CMD 和 原生 JS

    模块标准 CommonJS CommonJS 有三个全局变量 module.exports 和 require.但是由于 AMD 也有 require 这个全局变量,故不使用这个变量来进行检测. 如果 ...

  6. [转] 插件兼容CommonJS, AMD, CMD 和 原生 JS

    模块标准 CommonJS CommonJS 有三个全局变量 module.exports 和 require.但是由于 AMD 也有 require 这个全局变量,故不使用这个变量来进行检测. 如果 ...

  7. CommonJS, AMD, CMD是什么及区别--简单易懂有实例

    CommonJS, AMD, CMD都是JS模块化的规范. CommonJS是服务器端js模块化的规范,NodeJS是这种规范的实现. AMD(异步模块定义)和CMD(通用模块定义)都是浏览器端js模 ...

  8. JS模块规范:AMD,CMD,CommonJS

    浅析JS模块规范 随着JS模块化编程的发展,处理模块之间的依赖关系成为了维护的关键. AMD,CMD,CommonJS是目前最常用的三种模块化书写规范. CommonJS CommonJS规范是诞生比 ...

  9. 浅析JS模块规范:AMD,CMD,CommonJS

    from:https://www.jianshu.com/p/09ffac7a3b2c 随着JS模块化编程的发展,处理模块之间的依赖关系成为了维护的关键.   模块化 AMD,CMD,CommonJS ...

随机推荐

  1. Idea中包内中的置文件如何发布到编译后的目录中去

    1.问题引入: 运行一个maven+springmvc+hibernate的项目的时候出现了下边的错误: Caused by: java.io.FileNotFoundException: class ...

  2. linux mysql 安装配置

    1.确认当前linux系统版本,使用以下命令: cat /etc/issue cat /etc/redhat-release 2.下载对应linux系统的mysql安装包. 下载地址:http://d ...

  3. 16-1-27---图解HTTP(02)

    图解HTTP第四章 返回结果的HTTP状态码    HTTP状态码负责表示客户端HTTP请求的返回结果.标记服务器端的处理是否正常.通知出现错误等工作.4.1状态码告知从服务器端返回的请求结果     ...

  4. nginx下搭建CodeIgniter问题集锦

    nginx环境下CodeIgniter会出现一些问题! 1.数据库驱动连接失败! 出现如下问题: A PHP Error was encountered Severity: Warning Messa ...

  5. 提交数据url太长导致提交失败

    使用了dojo开发.在datagrid过滤的时候.为了让过滤好处理,直接设置为完全二叉树的方式来存查询条件.但是在提交数据的时候,默认是get?url的方式.结果导致条件选择一两个,url会特别长.然 ...

  6. 【Linux】Too many open files

    ZA 的BOSS 最近出现Too many open files 异常,这个异常一般是由于打开文件数过多引起, 最常见原因是某些连接一致未关闭 记录一些排查用到的指令 查看每个用户最大允许打开文件数量 ...

  7. CodeForces 618A Slime Combining

    http://www.codeforces.com/contest/618/problem/A 明明觉得是水题,而我却做了一个小时. 明明觉得代码没有错,而我却错了好几次. 因为我的名字不叫明明,也不 ...

  8. 第三周作业(三):wc程序

    本程序实现了统计文本档案中,文本单词数.字符数以及行数. 代码如下: #include<stdio.h> #include<stdlib.h> int linestatisti ...

  9. windows环境下搭建vue+webpack的开发环境

    前段时间一直在断断续续的看vue的官方文档,后来就慢慢的学习搭建vue的开发环境,已经有将近两周了,每到最后一步的时候就会报错,搞的我好郁闷,搁置了好几天,今天又接着搞vue的开发环境,终于成功了.我 ...

  10. Metaio在Unity3D中报错 Start: failed to load tracking configuration: TrackingConfigGenerated.xml 解决方法

    报错:Start: failed to load tracking configuration: TrackingConfigGenerated.xml Start: failed to load t ...