`

JavaScript模块化开发(二)——CommonJS规范

阅读更多

本文转载自原地址,感谢Feeldesign Studio的无私分享!

 

从本文开始介绍常见的模块化规范。

模块化规范,主要是为了统一模块化的编写方式,比如不同团队的Java代码,总能用import的方式来加载,C#的话也有using,JavaScript本身没有内置的模块系统(ES6中引入了模块系统,不过等到普及可能是n年后的事情了),JavaScript的模块化规范,一般都是致力于提高 JavaScript 程序的可移植性和可交换性,朝着统一模块化交互方式的方向而努力。

CommonJS 的目标是定义一套普通应用程序使用的API,从而填补原生JavaScript标准库过少的缺点。终极目标是实现一个像python,java中含有的标准库。现在非常火爆的node.js实际上就是CommonJS 的一个实现。

CommonJS 标准大致如下

CommonJS有一个全局性的方法 require(),主要用于加载模块,加载后,就可以调用模块的方法; 

var math = require('math');
math.add(2,3);

math 模块的add方法是怎么定义的呢,CommonJS还有一个全局变量 exports,它用来导入模块的方法,通过它导入的方法,便是这个模块的API,可供调用:

//math.js
exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
        sum += args[i++];
    }
    return sum;
};

在模块里,还有一个变量module,它有一个只读的id属性,还有一个uri属性。 

其他还有一些命名规范和识别规范。 

通过 CommonJS 的规范和代码可以看出,require 是同步的,模块系统需要同步读取模块文件内容,并编译执行以得到模块接口。在服务端,比如node.js,这一般来说没有问题,文件请求都是本地获取,对性能没有什么影响。但是放在浏览器端,问题就出来了,等到所有模块同步加载完毕,时间不知道要过去多久了。 

CommonJS 最早叫做 ServerJS,Modules 1.0规范在node.js上实践的很好,由于知道自身在浏览器中的不足,CommonJS社区把名字改为CommonJS,意为想统一服务器端和浏览器端,但是要实现浏览器端,就要有新的版本的标准,在新的版本制定过程中,社区出现了分歧,在这个分歧中,分出了AMD规范。 

由于风格和机制的差异,最终,AMD从CommonJS社区中独立了出来,成为了现在最受欢迎的规范。接下来的文章里,会介绍这个规范。

 

 

分享到:
评论

相关推荐

    浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结.docx

    ### 浅析AMD、CMD与CommonJS规范——JavaScript模块化加载学习心得总结 #### 一、引言 在现代Web开发中,随着项目规模的不断扩大和技术复杂度的提高,JavaScript模块化成为了一种非常重要的编程实践。通过将复杂的...

    2014-11-18-JS模块化编程(2)——规范1

    本篇文章主要探讨了两种JavaScript模块化规范:CommonJS 和 AMD(Asynchronous Module Definition),这两种规范分别适用于服务器端和浏览器端。 1. CommonJS CommonJS 是一套为服务器端JavaScript设计的规范,它...

    理解javascript模块化_.docx

    JavaScript模块化是编程实践中一种重要的组织代码的方式,它使得代码可重用性增强,提高了开发效率,降低了维护难度。本文将深入探讨JavaScript模块化的概念、方法以及如何实现小而简洁的模块。 首先,模块化的基本...

    JS中的模块规范(CommonJS,AMD,CMD&#40;少用&#41;)

    **CommonJS** 是为了解决JavaScript在实际应用中缺乏模块化支持的问题而诞生的一种规范。它最初是为了让JavaScript能够在服务器端运行,尤其是为了适应Node.js这样的环境。CommonJS的出现极大地提高了JavaScript在...

    OYE AMD模块化开发部署实践 共18页.ppt

    1. **模块化开发**:OYE遵循AMD规范,允许开发者创建和组织模块化的JavaScript代码。 2. **插件支持**:OYE支持自定义插件,扩展其功能以适应不同的应用场景。 3. **构建工具**:OYE Builder提供了一整套构建流程,...

    高粒度模块化的前端开发

    早期的JavaScript模块化尝试包括CommonJS和AMD规范,它们分别适用于服务器端和浏览器端的模块加载。然而,这些规范存在一定的局限性,如异步加载的复杂性、模块依赖解析的不透明等。为了克服这些挑战,ES6模块被引入...

    JavaScript前端开发程序设计教程(微课版)-教材代码.zip

    以及模块化——如何使用模块系统(如CommonJS、ES6模块)来组织和管理代码。 8. **实践应用**:通过实际的代码示例和练习,你可以将理论知识转化为实践能力。教材中的代码可以帮助你理解和应用这些概念,解决真实...

    WebRebuild北京第一届交流会之4:《javascript的分层概念》——阿当

    总结,JavaScript的分层概念强调了代码的结构化和模块化,使得开发过程更加有序,降低了维护成本。同时,理解和处理DOM和事件的浏览器差异是JavaScript开发中的关键技能,这通常可以通过使用成熟的库和遵循最佳实践...

    JavaScript实战手册——第七版代码

    7. **模块化**:CommonJS、AMD、ES6模块,以及如何在不同环境(如浏览器和Node.js)下进行模块导入和导出。 8. **错误处理**:学习如何有效地捕获和处理运行时错误,以及try...catch语句的使用。 9. **性能优化**...

    狂神说——大前端进阶NodeJS、Npm、Es6、Babel、Webpack、模块化使用笔记

    综上所述,"狂神说——大前端进阶NodeJS、Npm、Es6、Babel、Webpack、模块化使用笔记"这个主题涵盖了现代前端开发的重要技术栈。Node.js作为后端基础,Npm辅助管理依赖,ES6提供了更优雅的语法,Babel确保了新特性的...

    JavaScript核心技术开发解密1

    最后,模块化是现代JavaScript开发中不可或缺的部分,作者将讨论CommonJS、AMD以及ES6模块的使用,帮助读者掌握组织和复用代码的技巧。 本书不仅适合JavaScript初学者,也适合有一定开发经验但希望深化对JavaScript...

    JavaScript模块规范之AMD规范和CMD规范

    目前,随着ES6的出现,JavaScript模块化有了新的标准——ES6模块化标准。ES6模块化标准通过import和export关键字来导入和导出模块,支持静态模块结构,提供更强大的模块化特性。这使得AMD和CMD等传统的JavaScript...

    protobuf-js-3.17.0

    4. **模块化**:将库拆分为可选择导入的模块,根据需要引入,减少不必要的依赖。 5. **与protobuf编译器兼容**:与其他语言的protobuf实现兼容,确保跨平台一致性。 6. **TypeScript支持**:提供类型定义文件,便于...

    Node.js-browserify-handbook-如何利用browserify构建模块化应用程序

    **Node.js浏览器化手册——利用Browserify构建模块化应用程序** 在现代前端开发中,JavaScript的模块化变得至关重要,尤其是在Node.js环境中。`browserify`是一个非常实用的工具,它允许我们在浏览器环境中使用Node...

    javascript的连连看

    另外,考虑到兼容性和性能,项目可能采用了模块化开发,例如使用CommonJS或ES6的import/export语法,使得代码组织更加清晰,便于维护和扩展。 总的来说,"javascript的连连看"项目是一个集JavaScript基础、数据结构...

    head first javascript 中文版.pdf

    书中可能还会涵盖AJAX(异步JavaScript和XML)用于向服务器请求数据,以及现代Web开发中的模块系统(如CommonJS和ES模块)。 总而言之,JavaScript是一种强大的工具,无论你是Web开发的新手还是希望深化理解的...

    JS技巧——日常常用JAVASCRIPT脚本

    以上仅是JavaScript的一部分基础知识,实际开发中还有许多高级技巧,如模块化(CommonJS, ES6模块),异步流控制(Promise, async/await, Generator),以及现代库和框架(React, Vue, Angular)的使用等。...

    JavaScript应用程序经典实例全书源码

    9. **模块化**:CommonJS、AMD、SystemJS以及现代浏览器支持的ES6模块系统,了解它们的工作原理和使用场景。 10. **JavaScript设计模式**:如单例模式、工厂模式、观察者模式等,这些都是提高代码质量、可读性和可...

    JavaScript万年历——兼容多浏览器

    6. **模块化**:为了代码的可维护性和复用性,可以使用模块化技术如CommonJS、AMD或ES6的`import/export`来组织代码,确保各个部分之间解耦。 7. **性能优化**:在处理大量DOM操作时,应避免频繁的DOM操作导致的...

    javascript高级编程(第2版)pdf.part2

    《JavaScript高级编程(第2版)》第二部分深入探讨了JavaScript的高级特性,如原型继承、异步编程模式、模块化开发以及类型系统等方面的内容。通过学习本书,开发者不仅能够更好地理解和掌握JavaScript的核心概念,...

Global site tag (gtag.js) - Google Analytics