文档章节

CommonJS规范与AMD规范的理解

Realfighter
 Realfighter
发布于 2014/11/27 20:18
字数 999
阅读 289
收藏 0

    链接地址:http://www.xx566.com/detail/32.html

   谈到AMD,我们首先来了解一个基于AMD规范的实现,Require.js,一个强大的工具包,它能够自动的把混乱的前端脚本加载的规整而有序,Require.js主要用于客户端的模块管理,和其他js库类似,首先你需要引入,如下:

<script src="js/require.js" async="true" defer="defer" data-main="js/main"></script>

    上面代码的data-main主要是指定主代码所在的脚本文件,对应js目录下的main.js,requirejs在读取本地js文件时,可以省 略.js后缀,如果是第三方js,则需要.js后缀,如www.google.com.hk/.../jquery.js,defer='defer'和 async='true'主要是屏蔽浏览器差异,延迟加载脚本。

    Require.js主要提供define和require两个方法来进行模块化编程,前者用来定义模块,后者用来调用模块,这种模块定义的方法不会污染全局环境,能够清晰的显示依赖关系。

    require方法本身也是一个对象,可以使用自带的config方法,进行模块的运行参数配置,config接收任意对象作为参数,如下:

require.config( {
    baseUrl : "/",
    paths : {
        "jquery" : "js/jquery-1.8.0"
    }
});

    这里主要介绍两个参数:baseUrl用来配置文件的访问路径,上例中为相对webroot的路径,paths主要是知道各个模块的外置,可以定义多个模 块,上例中jquery为定义的模块名,js/jquery-1.8.0为jquery文件所在路径。也可以定义多个文件位置,如'js/jquery- 1.8.0','js/jquery-1.8.1';即如果第一个js文件加载失败,会自动加载第二个1.8.1版本的jquery。

    对jquery的调用也更为简单,使用require方法,传入两个参数,模块名以及回调函数,如下:

require( [ "jquery"], function($) {
    //your jquery code here
    $("#id").click(function(){});
});

   require函数接收一个由模块名称构成的数组,然后并行的加载所有这些脚本模块,它并不会保证按顺序执行这些脚本,但保证了这些脚本的运行满足彼此的 依赖关系,前提是这些脚本的定义遵循AMD(Asynchronous Module Definition,异步模块定义)规范。

    相比AMD规范,CommonJS规范更要庞大的多,这点从它的口号就可以看出来,相比jquery的write less,do more,Commonjs的口号看起来更有野心的多,Javascript: not just for browsers any more!,大有颠覆传统js工作的意味,不过commonjs确实正在做到。

    根据CommonJS规范,一个单独的文件就是一个模块。加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的exports对象。如下hello.js:

console.log("this is hello.js");
var hello = function () {
    console.log("hello commonjs");
}
exports.user = "super man";
exports.say = function () {
    console.log(hello);
}

    我们可以使用require函数加载这个js,通过一个变量接收,这时这个变量就对应exports对象,可以通过这个变量,使用模块提供的各个方法,如下:

var hi = require("./hello");
console.log(hi.user+" say: "+hi.say());

    与require.js相同,require方法默认读取js文件,所以可以省略.js后缀名。

    CommonJS是服务器端模块的规范,AMD规范更多是浏览器中的模块规范。Node.JS采用了CommonJS规范,RequiresJS、 JQuery等采用了AMD规范;AMD规范定义了一个语法API,即define函数,而CommonJS提供了一组API层面的定义;AMD规范是异 步加载模块,允许指定回调函数,CommonJS是同步加载模块,只有模块加载完成,才能执行后面操作。

    关于更多CommonJS,请参阅http://wiki.commonjs.org/wiki/CommonJS

    关于更多AMD,请参阅https://github.com/amdjs/amdjs-api/wiki/AMD

© 著作权归作者所有

Realfighter

Realfighter

粉丝 146
博文 139
码字总数 144564
作品 2
洛阳
程序员
私信 提问
JavaScript模块化演化史

前言 本文可能不涉及一些基础概念,比如什么是模块,对每种方案也没有都做详细的解释(如果解释的话,每个都值得一篇文章),准备和落实这篇文章主要是有两方面原因。 平时遇到的一些名词有些...

wingtao
04/11
0
0
关于 CommonJS AMD CMD UMD

一、CommonJS CommonJs 是服务器端模块的规范,Node.js采用了这个规范。 根据CommonJS规范,一个单独的文件就是一个模块。加载模块使用require方法,该方法读取一个文件并执行,最后返回文件...

雪飘七月
2018/06/26
0
0
关于 CommonJS AMD CMD UMD

CommonJS CommonJs 是服务器端模块的规范,Node.js采用了这个规范。 根据CommonJS规范,一个单独的文件就是一个模块。加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部...

奥巴码侬
2014/05/11
0
8
这一次,我要弄懂javascript的模块化

随着前端js代码复杂度的提高,js模块化是必然趋势,不仅好维护,同时依赖很明确,不会全局污染,今天整理一下模块化的几个规范吧~ 首先梳理一下模块化的发展情况~ 无模块化-->CommonJS规范-...

2018/07/11
0
0
再唠叨JS模块化加载之CommonJS、AMD、CMD、ES6

Javascript模块化编程,已经成为一个迫切的需求。理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。 Javascript社区做了很多努力,在现有的运行环境中,实现...

周陆军
2018/08/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

新手转行学java难吗?新手学java需要注意的6个方面!

新手转行在成都学java到底难不难,对于这个问题,我们专门做过一个调查,超过1000名已经在职的java从业者,其中有80%的程序员觉得学java不难,20%的程序员觉得前期有点难,其中对于50%自学的...

Java领航员
50分钟前
3
0
动态规划-硬币问题分析

什么是动态规划 上次对动态规划已经有了个大概的分析。引用维基百科的话就是: dynamic programming is a method for solving a complex problem by breaking it down into a collection of...

AI考拉
58分钟前
2
0
谈谈lucene的DocValues特性之SortedSetDocValuesField

SortedSetDocValuesField与SortedDocValuesField类似但它是一键多值的(注意:lucene的数据模型是支持一键多值的即key-values模型),lucene在实现时会判断是一键一值还是多值,如果单值就调...

FAT_mt
今天
1
0
生产者消费者模式

//尚学堂视频里,不是完整的 public class Movie { /** * 共同的资源 */ private String pic; //flay为true生产,false消费 private boolean flag=true; public synchronized void play(Str......

南桥北木
今天
1
0
使用阿里云镜像安装kubernetes

参考阿里云镜像 https://opsx.alibaba.com/mirror?lang=zh-CN 系统: CentOS / RHEL / Fedora cat <<EOF > /etc/yum.repos.d/kubernetes.repo[kubernetes]name=Kubernetesbaseurl=https......

北漂的我
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部