javascript模块规范:CommonJS,AMD,CMD

CommonJS/Nodejs实现

  • Node.js上下文提供的变量

    • require:函数,用于引用依赖模块,依赖模块被引用为对象,即可食用提供的方法和变量,require()接受一个模块标识参数。
    • module:对象,代表当前模块本身
    • exports:对象,module的属性,作为模块的唯一出口,用来导出当前模块提供的方法和变量,将方法或变量挂载为exports对象的属性即可导出,也可以直接将方法或变量赋给module.exports导出
      “`javascript
      //挂载方式导出方法和变量
      exports.fun1=function(){

      }
      var a = “”;
      exports.a=a;
      //直接赋值导出,不能直接给exports赋值!!!
      function fun2(){
      }
      module.exports=fun2;
  1. - _filename:当前模块的文件名
  2. - _dirname:当前模块所在目录名
  3. -模块标识格式
  4. 1符合小驼峰命名的字符串||以.、..开头的相对路径||绝对路径
  5. 2可以没有文件名后缀
  6. -模块类型
  7. -.js
  8. -.node
  9. -.json
  10. -包结构
  11. -package.json;json格式文件,包描述文件
  12. - bin:目录,存放可执行二进制文件
  13. - lib:目录,存放Javascript代码
  14. - doc:目录,存放文档
  15. - test:目录:存放测试用例
  16. ### AMD/require.js实现
  17. [AMD文档](https://github.com/amdjs/amdjs-api/wiki/AMD "AMD文档")
  18. -模块定义,使用require.js提供的全局函数define定义模块,define()接受三个参数
  19. ```javascript
  20. define(id?,dependences?,factory);
  • id,可选,
  • dependences,可选,字符串数组(可以只有一个元素),当前模块依赖的所有模块
  • factory,必须,函数,提供了独立的作用域,用于定义模块提供的方法和变量,当前模块存在依赖模块时,依赖模块作为factory的参数传入
  1. define(function(){
  2. var exports ={};//需要定义模块入口变量
  3. exports.fun1=function(){
  4. ...
  5. }
  6. return exports;//需要将模块入口作为返回值
  7. });
  8. define([‘myLib‘],function(myLib){
  9. function foo(){
  10. myLib.doSomething();
  11. }
  12. return{
  13. foo : foo
  14. };
  15. });
  • 模块加载,在非模块代码中加载模块,使用require.js提供的全局函数require将模块加载为回调函数的参数,require接受两个参数

    • modules,字符串数组,要加载的模块标识,必要时需对模块标识设置加载路径
      “`javascript
      //设置加载路径,相对于当前模块所在目录
      require.config({
      paths: {
      “jquery”: “lib/jquery.min”,
      “underscore”: “lib/underscore.min”,
      “backbone”: “lib/backbone.min”
      }
      });
      //设置模块加载根目录
      require.config({
      baseUrl: “js/lib”,
      paths: {
      “jquery”: “jquery.min”,
      “underscore”: “underscore.min”,
      “backbone”: “backbone.min”
      }
      });
  1. - callback,回调函数,加载模块后执行,参数即为加载的模块对象
  2. ### CMD/seajs实现
  3. [CMD文档](https://github.com/cmdjs/specification/blob/master/draft/module.md "CMD文档")
  4. -模块定义,使用sea.js提供的全局函数define定义模块,define()接受一个参数factory,factory有三种情况
  5. -函数:模块构造函数,默认有三个参数,require,exports,module,以形参的形式将上下文提供的变量引入当前模块的作用域供调用,还可以自己定义其他参数
  6. ```javascript
  7. //变量和方法的挂载同commonJS,不能直接为exports赋值,因为exports是momule.exports的引用,改变exports的值不改变对象内容
  8. define(function(require, exports, module) {
  9. ...
  10. });
  • 对象:
    “`javascript
    define({foo:”bar”});
  1. -字符串:可以用来定义字符串模板
  2. ```javascript
  3. define(‘I am a template. My name is {{name}}.‘);
  • 模块加载

    • require(),同步加载,接受模块标识作为唯一参数,将模块加载为对象
    • require.async(),异步加载,接受模块标识和回调函数,模块加载成功后执行回调函数

前后端模块

javascript没有编译的过程,模块加载都是在代码执行过程中进行的,javascript模块都是独立的文件,,模块加载意味着需要读取文件
后端模块(nodejs)的加载默认采用同步加载,由于加载的文件都是在本地,而且nodejs提供了模块缓存机制,因此同步加载对性能影响不大
前端模块的加载需要进行网络请求,速度远不如加载本地文件,而且如果采用同步加载,且模块加载在UI初始化之前进行,则会对用户体验造成较大影响
从 CommonJS 到 Sea.js

时间: 2024-11-10 11:41:19

javascript模块规范:CommonJS,AMD,CMD的相关文章

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

模块标准 CommonJS CommonJS 有三个全局变量 module.exports 和 require.但是由于 AMD 也有 require 这个全局变量,故不使用这个变量来进行检测. 如果想要对外提供接口的话,可以将接口绑定到 exports (即 module.exports) 上. function MyModule() { // ... } if(typeof module !== `undefined` && typeof exports === `object`) {

javaScript模块化规范ADM与CMD介绍

模块化:模块化是指在解决某一个复杂问题时,依照一种分类的思维把问题进行系统性的分解处理,可以想象一个巨大的系统代码,被整合优化分割成逻辑性很强的模块时,对于软件是一种何等意义的存在. 模块化系统所必须的能力: 1.定义封装的模块 2.定义新模块对其他模块的依赖 3.可对其他模块的引入支持 AMD模块规范:其实就是异步模块定义,所有的模块将被异步加载,模块加载不影响后面语句运行,所有依赖某些模块的语句均放置在回调函数中. AMD规范定义了一个全局变量define函数,格式为:define(id, 

【JavaScript】JavaScript模块化编程 - CommonJS, AMD 和 RequireJS之间的关系

通行的Javascript模块规范共有两种:CommonJS和AMD 先说说CommonJS CommonJS - 大家是不是觉得JavaScript仅仅是一个客户端的编译语言,其实JavaScript设计之初不仅仅是针对客户端设计的语言.后来只是由于Web的迅速流行,加之Netscape和微软之间之争过早的将JavaScipt标准化.要了解详细的JS历史请查看:http://zh.wikipedia.org/zh-cn/JavaScript.过早的标准化JS就导致JS的诸多缺陷和标准类库的缺乏

了解JS模块规范:AMD,CMD,CommonJS

随着JS模块化编程的发展,处理模块之间的依赖关系成为了维护的关键. AMD,CMD,CommonJS是目前最常用的三种模块化书写规范. CommonJS CommonJS规范是诞生比较早的.Node.js(是一个Javascript运行环境(runtime))就采用了CommonJS.是这样加载模块: // foo.js module.exports = function(x) { console.log(x); }; // main.js var foo = require("./foo&qu

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

随着JS模块化编程的发展,处理模块之间的依赖关系成为了维护的关键. 模块化 AMD,CMD,CommonJS是目前最常用的三种模块化书写规范. CommonJS CommonJS规范是诞生比较早的.NodeJS就采用了CommonJS.是这样加载模块: var clock = require('clock'); clock.start(); 这种写法适合服务端,因为在服务器读取模块都是在本地磁盘,加载速度很快.但是如果在客户端,加载模块的时候有可能出现"假死"状况.比如上面的例子中cl

CommonJS,AMD,CMD规范

1. Javascript 先天缺乏模块的功能.在其他高级语言中,Java有类文件,Python有import机制,Ruby有require,PHP有include和require,而Javascript 则需要依靠<script>标签引入代码,当脚本多的时候,会显得杂乱无章. 2. 针对以上问题,CommonJS应运而生.CommonJS为Javascript制定了一个美好愿景:能够在任何地方运行!(Not just for browser), CommonJS希望弥补Javascript没

关于 CommonJS AMD CMD UMD 规范

CommonJS CommonJs是服务器端模块的规范,Node.js采用了这个规范. 根据CommonJS规范,一个单独的文件就是一个模块.加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的exports对象. 例如: // foobar.js //私有变量 var test = 123; //公有方法 function foobar () { this.foo = function () { // do someing ... } this.bar = functi

关于 CommonJS AMD CMD UMD 规范的差异总结

一.CommonJS 主要是用于服务器端的规范,比如目前的nodeJS. 根据CommonJS规范,一个单独的文件就是一个模块.每一个模块都是一个单独的作用域,也就是说,在一个文件定义的变量(还包括函数和类),都是私有的,对其他文件是不可见的. // foo.js var request = require('request').default({ timeout: 4000 }); module.exports = function(){ this.re = ''; this.req = fu

把自己的js模块兼容到AMD CMD CommonJS

为了让同一个模块可以运行在前后端,在写作过程中需要考虑兼容前端也实现了模块规范的环境.为了保持前后端的一致性,类库开发者需要将类库代码包装在一个闭包内.以下代码演示如何将hello()方法定义到不同的运行环境中,它能够兼容Node(CommonJS),AMD,CMD以及常见的浏览器环境中: (function (name, definition) { //检测上下文环境是否为AMD或CMD var hasDefine = typeof define === 'function'; //检查上下文