分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

AMD、CMD、CommonJs规范

发布时间:2023-09-06 01:16责任编辑:郭大石关键词:暂无标签

AMD、CMD、CommonJs规范

 将js代码分割成不同功能的小块进行模块化的概念是在一些三方规范中流行起来的,比如CommonJS、AMD和CMD。接下来我们看一下这几种规范。


一、模块化规范

      CommonJs是使用在服务器端,是同步加载的,NodeJs是对此规范的实践。

      AMD,CMD是使用在浏览器端的,是异步加载的,require.js与sea.js是依赖此规范实现。

1.1 CommonJs规范实例

    CommonJs对模块的定义十分简单,主要分为模块定义 、模块引用、模块标识。

      根据此规范,一个js文件就是一个模块,有自己的作用域,不会污染全局作用域。在一个文件里面定义的变量、函数、类都是私有的,对其他文件不可见。

      在模块中,存在一个module对象,她代表模块自身。其中exports是module的属性,该属性是一个对象,用于挂载当前模块的方法或者变量,也是当前模块的唯一导出的出口。以供其他模块使用。

1 ?addTwo.js2 -----------------------------------------3 ?export.add = function(a,b){4 ???????return a+b;5 ?} ??//导出模块

       在模块中,存在require()方法,这个方法接受模块标示,用来引入一个模块。

1 main.js2 -----------------------------------------3 var a = 5;4 var b = 4;5 var addTwo = require("./addTwo");//此参数为模块标示6 ??7 console.log(addTwo.add(a,b));//9

       CommonJS规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作。AMD规范则是非同步加载模块,允许指定回调函数。由于Node.js主要用于服务器编程,模块文件一般都已经存在于本地硬盘,所以加载起来比较快,不用考虑非同步加载的方式,所以CommonJS规范比较适用。

1.2 AMD规范实例

      AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。

   AMD设计出一个简洁的写模块API:
  define([id], [dependencies], factory);
  第一个参数 id 为字符串类型,表示了模块标识,为可选参数。若不存在则模块标识应该默认定义为在加载器中被请求脚本的标识。如果存在,那么模块标识必须为顶层的或者一个绝对的标识。
  第二个参数,dependencies ,是一个当前模块依赖的,已被模块定义的模块标识的数组字面量。
  第三个参数,factory,是一个需要进行实例化的函数或者一个对象。

     1、html代码

 1 index.html 2 --------------- 3 ?<!DOCTYPE html> 4 ?<html> 5 ?<head> 6 ????<title></title> 7 ????<!-- 引入require.js --> 8 ????<script type="text/javascript" src="http://cdn.bootcss.com/require.js/2.3.3/require.js"></script> </head> 9 ??<body>10 ????<script type="text/javascript" src="main.js"></script>11 ??</body>12 ?</html>

   2、js代码

 1 myName.js 2 --------------- 3 // 定义模块 4 define(‘myName‘,[],function () { 5 ??return ‘My name is toTo_li.‘ 6 }) 7 ?8 yourName.js 9 ---------------10 // 定义模块11 define(‘yourName‘,[],function () {12 ??return ‘Your name is boke.‘13 })

       加载模块:AMD模块化规范中使用全局或局部的require函数实现加载一个或多个模块,所有模块加载完成之后的回调函数。

       require([module], callback):

             [module]:是一个数组,里面的成员就是要加载的模块;
        callback:是模块加载完成之后的回调函数。

1 ?main.js2 ?---------------3 ?// 调用模块4 ?require([‘myName‘,‘yourName‘],function (myName,yourName) {5 ???console.log(myName)6 ???console.log(yourName)7 ?})

1.3 CMD规范实例

      CMD是SeaJS 在推广过程中对模块定义的规范化产出

  • 对于依赖的模块AMD是提前执行,CMD是延迟执行。不过RequireJS从2.0开始,也改成可以延迟执行(根据写法不同,处理方式不通过)。

  • CMD推崇依赖就近,AMD推崇依赖前置。

     1 //AMD 2 ??define([‘./a‘,‘./b‘], function (a, b) { 3 ????4 ??????//依赖一开始就写好 5 ??????a.test(); 6 ??????b.test(); 7 ??}); 8 ????9 ??//CMD10 ?define(function (requie, exports, module) {11 ??????12 ?????//依赖可以就近书写13 ?????var a = require(‘./a‘);14 ?????a.test();15 ??????16 ?????...17 ?????//软依赖18 ?????if (status) {19 ??????20 ?????????var b = requie(‘./b‘);21 ?????????b.test();22 ?????}23 ?});

AMD、CMD、CommonJs规范

原文地址:http://www.cnblogs.com/toTo-li/p/7646699.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved