AMD规范学习笔记

背景

NodeJS的一套比较简洁 Moudles 规范, 使得在服务器端的模块化变得更加简单。很长一段时间,很多公司或者项目都有自己的一套模块化机制, 却未能形成一套统一的标准, NodeJS的Moudles规范如果运用在浏览器端会存在一些问题,如

  1. 服务器端JS模块文件就在本地,浏览器端则需要通过网络请求
  2. 服务器端可以很容易的实现同步或异步请求模块,浏览器端代价会比较大

采用XHR的方式实现同步请求模块,存在明显的跨域缺陷,而使用script的方式,默认是异步的。 在这样的背景下, CommonJS的Modules/Wrappings、AMD、CMD等规范应时而生。

Modules/Wrappings 规范的约定如下,更多请参考:http://wiki.commonjs.org/wiki/Modules/Wrappings

  1. 使用modules.declare定义模块
  2. declare 只接受一个参数,类型可以是函数也可以是object,参数又称为module factory
  3. 如果factory为function,三个参数分别为require、exports、module,factory使用返回值或exports导出模块API
  4. factory如果是对象类型,则将该对象作为模块输出

A basic wrapped module:

module.declare(function(require, exports, module){
    exports.foo = "bar";
});

AMD 规范

AMD:全称为异步模块定义, 是专门为浏览器中JavaScript环境设计的规范. 规范本身非常简单, 概括如下:

define(id?, dependencies?, factory);

  id: 模块名

  dependencies: 依赖的模块,如果缺省,默认为 ["require", "exports", "module"]

  factory: 模块工厂,通过排列组合这种模块定义能满足很多场景的需求

AMD在定义自己的Module规范的同时,也简单兼容了CommonJS的Modules/Wrappings。

匿名模块与具名模块

define(["beta"], function (beta) {
    exports.verb = function() {
           return beta.verb();
       }
});

define(‘alpha‘, ["beta"], function (beta) {
    exports.verb = function() {
           return beta.verb();
       }
});

匿名模块也带来一些好处,如减少维护成本,使得模块的源代码与它的标识分离。从而实现在不改变模块代码的情况下移动源码文件的位置等。

Simplified CommonJS wrapping

define(function(require, exports, module){
    var query = require("query");
    var on = require("on");
    ...
});

AMD模块加载器将会扫描该工厂函数的require调用,并自动的在运行该工厂方法之前加载他们, 也是和CMD规范的重要区别, 很多人在讨论到AMD、CMD上都会探讨这个问题,有许多争议, 不过这点也正是体现了AMD规范的核心:模块依赖必须在真正执行具体的factory方法前解决。

RequireJS是目前最流行的AMD加载器,从代码中可以看出,为了支持CommonJS Wrapping, define会解析工厂函数的FunctionBody,去掉注释,并将require的模块匹配出来, 加到dependencies数组中。

var commentRegExp = /(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,
    cjsRequireRegExp = /[^.]\s*require\s*\(\s*["‘]([^‘"\s]+)["‘]\s*\)/g;

if (!deps && isFunction(callback)) {
    deps = [];
    if (callback.length) {
        callback
            .toString()
            .replace(commentRegExp, ‘‘)
            .replace(cjsRequireRegExp, function (match, dep) {
                deps.push(dep);
            });

        deps = (callback.length === 1 ? [‘require‘] : [‘require‘, ‘exports‘, ‘module‘]).concat(deps);

    }
}

由于实际项目中的FunctionBody情况比较复杂,cjsRequireRegExp,这个匹配规则不是很强大,如果在实际项目中发现require有问题的地方, 可以将FunctionBody手动匹配一下这个正则表达式, 看是否有问题。

exports有什么好处?

1、相对使用return输出对象, 由于js语言特性决定,代码依次执行, 当模板存在循环依赖关系时,这种export导出就会特别有用。

2、相对于命名空间导出API,它的好处在于它不会影响全局空间, 而且导出的API所属的对象名称不会和模块代码强耦合。 这也是YUI的模块API导出方式采用命名空间的一点局限。

数据或者独立API模块

对于一些仅仅提供数据或者独立方法的模块,factory格式变为obj就可以了, 如:

define({
    camelCase: function(x) {
      return string.camelCase(‘abc ABC‘);
    }
});

AMD Plugin Dependency

一个插件依赖应该被描述为如下格式:

[Plugin Module ID]![resource ID]

目前流行的RequireJS、curl、Dojo等支持AMD的加载器都支持插件, 如加载各种格式的数据,在domReady 完成后在执行操作等。由于“!”被插件语法占用,所以在一般资源请求中,请不要使用带有“!”的URL。 完整的插件清单可以参考http://requirejs.org/docs/download.html#plugins

下面是两个RequireJS使用插入的例子:

define([
    ‘backbone‘,
    ‘text!templates.html‘
], function( Backbone, template ){
   // ...
});

require([‘domReady!‘], function (doc) {
    //This function is called once the DOM is ready,
    //notice the value for ‘domReady!‘ is the current
    //document.
});

如果让自己的模块支持AMD规范

jquery是如何做的?

if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
    define("jquery", [], function () { return jQuery; } );
}

需要在加载中设置:

define.amd = {
    jQuery: true
}; 

小结

AMD仅仅提供了模块定义的规则,在实际项目使用中还需要考虑一些模块合并、打包方案等。

目前,实现AMD规范的库有RequireJS 、curl 、Dojo 、bdLoad 、JSLocalnet 、Nodules等,也有很多库支持AMD规范,即将自己作为一个模块存在,如MooTools 、jQuery 、qwery 、bonzo、firebug等。 在前端模块化发展如此快的今天,未来应该会有很多库或者模块会支持作为满足AMD、CMD or CommonJS Module规范的模块存在。

随着模块化的发展,高质量的模块会越来越多,为了让大家有统一的规则来使用模块, 模块规范化就显得格外重要。 而不管是哪一种模块规范,未来在浏览器端前端是否也可以像Nodejs一样灵活的去使用满足相同规范,甚至各种不同规范的优秀模块, 这样就不用将代码局限同一种框架中, 或许只是自己瞎想。

 

参考:

http://wiki.commonjs.org/wiki/Modules/1.1.1#Module_Identifiers

https://github.com/amdjs/amdjs-api

https://github.com/requirejs/example-multipage

http://requirejs.org/docs/whyamd.html

AMD规范学习笔记

时间: 2024-10-07 15:19:14

AMD规范学习笔记的相关文章

CMD规范学习笔记——基于SEAJS实现

CMD(Common Module Definition):该规范明确了模块的书写格式和基本交互规则.通常一个模块就是一个JS文件. 通过define关键字来定义模块,最基本的格式为: define(factory);//这里的define是一个全局函数,factory可以是函数或者合法的值. 一.factory为对象: define({'foo':'foo'});//factory为对象,表示该模块的接口为对象. 例子: html <!DOCTYPE html> <html> &

ESP8266学习笔记6:ESP8266规范wifi连接操作

一.前言 我整理了从2015年至今关于ESP8266的学习笔记,梳理出来了开发环境.基础功能.进阶学习三大部分.方便自己和他人.可点此查看,欢迎交流. 之前在笔记4<ESP8266的SmartConfig>http://blog.csdn.net/iotisan/article/details/54849410中,做了smartconfig例程的測试. 这个例程是因为DEMO演示的,离商用还有段距离. 几周前,有网友就问我esp8266又一次上电无法自己主动连接之前配置的路由器.这确实是眼下D

Java学习笔记(Java语言规范,API,JDK,IDE)

Java语言规范:java.sun.com/docs/books/jls 三个版本的API:J2SE J2EE J2ME 1. J2SE 客户端独立应用程序或者applet 2. J2EE 服务端应用程序 [Java Servlets&JavaServer Page] 3. J2ME 移动设备变成 JDK为Java开发提供一个开发环境(IDE) Java学习笔记(Java语言规范,API,JDK,IDE)

《从零开始学Swift》学习笔记(Day 57)——Swift编码规范之注释规范:

<从零开始学Swift>学习笔记(Day 57)--Swift编码规范之注释规范:文件注释.文档注释.代码注释.使用地标注释 原创文章,欢迎转载.转载请注明:关东升的博客 前面说到Swift注释的语法有两种:单行注释(//)和多行注释(/*...*/).这里来介绍一下他们的使用规范. 文件注释 文件注释就在每一个文件开头添加注释,文件注释通常包括如下信息:版权信息.文件名.所在模块.作者信息.历史版本信息.文件内容和作用等. 下面看一个文件注释的示例: /* Copyright (C) 201

XML的学习笔记(一)————基本语法和规范

题外:为什么我要学XML呢?因为发现ROS系统里面有好多程序,是XML的,当然,我看不到,所以就来补补课,因为暂时只要求能看懂,或能简单写几行,所以,记述的也就不是太详细了. 如何识别XML? 可以先介绍XML的一些简单的规则,XML本身就是一个文本文件,XML是通过标记来描述文件的,比如: <user> </user> "user"这两个就是标记,注意标记有开头就有结尾,结尾就是在开头的前面加一个"/". 可以描述其更描述的信息,比如想描述

Javascript模块化编程(二):AMD规范

作者: 阮一峰 日期: 2012年10月30日 这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的写法,岂不是乱了套!考虑到Javascript模块现在还没有官方规范,这一点就更重要了. 目前,通行的Javascript模块规范共有两种

ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测

一.开篇 在博客注册了三年,今天才决定写第一篇博客,警告自己不要懒!!! 二.关于ArcGIS JS 版本选择 在写这篇博客时ArcGIS JS 4.0正式版已经发布.它和3.x版本的不同是,Map不在是一个控件,而真的只是一张“图”,Map(4.0版本)需要在一个View里面来展示,在MapView里面就是一张平面图,在SceneView里面就一张三维地图.同一张地图在不同的View里面就可以呈现出不同的效果.但是4.0版本才是一个最初的版本,还有很多3.x有的功能没有被加入到其中.所以我打算

[原创]java WEB学习笔记48:其他的Servlet 监听器:域对象中属性的变更的事件监听器 (3 个),感知 Session 绑定的事件监听器(2个)

本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱好者,互联网技术发烧友 微博:伊直都在0221 QQ:951226918 ---------------------------------

java/android 设计模式学习笔记(10)---建造者模式

这篇博客我们来介绍一下建造者模式(Builder Pattern),建造者模式又被称为生成器模式,是创造性模式之一,与工厂方法模式和抽象工厂模式不同,后两者的目的是为了实现多态性,而 Builder 模式的目的则是为了将对象的构建与展示分离.Builder 模式是一步一步创建一个复杂对象的创建型模式,它允许用户在不知道内部构建细节的情况下,可以更精细地控制对象的构造流程.一个复杂的对象有大量的组成部分,比如汽车它有车轮.方向盘.发动机.以及各种各样的小零件,要将这些部件装配成一辆汽车,这个装配过