• AMD规范简介

  AMD(异步模块定义),是实现JavaScript模块化规范之一,它采用异步方式加载模块,模块的加载不影响后面语句的运行。require.js和curl.js都是实现AMD规范的优秀加载器。本文采用require.js。

1. define用于模块定义

            define(模块ID,依赖模块数组,实例化模块函数);模块ID和依赖模块数组为可选。

如:

define("color",["jquery"],function($){
+function(){
$.fn.extend({
"color":function(value){
if(value==undefined){
return this.css("color");
}else{
return this.css("color",value);
}
}
});
}();
});

  2. require处理依赖加载

  require(模块数组,回调函数);第一个参数为要加载的模块数组,第二个参数为模块加载后的回调函数。

  如:

require(['test'], function (test){
test.testMath();
test.testColor();
});
  • require.js实现AMD的简单例子

  1. math.js

define("math1",function(){
var add = function (x,y){
return x+y;
  }; var minus = function(x,y){
return x-y;
};   return {
    add: add,
minus:minus
  };
});

  2. jquery.color.js

  jquery1.7以上已经实现AMD规范。

define("color",["jquery"],function($){
+function(){
$.fn.extend({
"color":function(value){
if(value==undefined){
return this.css("color");
}else{
return this.css("color",value);
}
}
});
}();
});

  3. test.js

define("test",["math1","color","jquery"],function(math,color,$){
var testMath=function(){
var x=10;
var y=5;
$("#divAdd").html(x+"+"+y+"="+math.add(x,y));
$("#divMinus").html(x+"-"+y+"="+math.minus(x,y));
}; var testColor=function(){
$("#divColor").color("blue");
}; return {
testMath:testMath,
testColor:testColor
}
});

  4. main.js

require.config({
paths: {
   "jquery": "jquery-3.2.1.min",
    "color": "jquery.color",
    "math1": "math",
"test":"test"
  }
}); require(['test'], function (test){
test.testMath();
test.testColor();
});

  5. index.html

<!DOCTYPE html>
<html>
<head>
<script src="js/require.js" data-main="js/main" defer async="true"></script>
</head>
<body>
<div id="divAdd">testAdd</div>
<div id="divMinus">testMinus</div>
<div id="divColor">testColor</div>
</body>
</html>

         

JavaScript模块化-RequireJs实现AMD规范的简单例子的更多相关文章

  1. Javascript模块化编程(二)AMD规范(规范使用模块)

    这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块,先想一想,为什么模块很重要?接下来为您详细介绍,感兴趣的朋友可以了解下啊.今天介绍如何规范地使用模块. 七.模块 ...

  2. Javascript模块化编程:AMD规范及require.js用法【转】 - loheonly的笔记 - 前端网(W3Cfuns)

    http://www.w3cfuns.com/blog-5425789-5399326.html

  3. JavaScript模块化编程之AMD - requireJS基础使用

    JavaScript模块化编程之AMD requireJS基础使用 标签(空格分隔): JavaScript 参考文章 AMD规范 AMD是"Asynchronous Module Defi ...

  4. JavaScript模块化演变 CommonJs,AMD, CMD, UMD(一)

    原文链接:https://www.jianshu.com/p/33d53cce8237 原文系列2链接:https://www.jianshu.com/p/ad427d8879cb 前端完全手册: h ...

  5. JS模块化编程之AMD规范(转)

    随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者 ...

  6. (转)JS模块化编程之AMD规范

    模块的规范 原文地址 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有 ...

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

    通行的Javascript模块规范共有两种:CommonJS和AMD 先说说CommonJS   CommonJS - 大家是不是觉得JavaScript仅仅是一个客户端的编译语言,其实JavaScr ...

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

    这几天在学习CommonJS的时候突然在StackOverflow上搜索到一个非常好的一个帖子,是关于CommonJS, AMD和RequireJS之间的关系的问答贴.我感觉写的非常好,鉴于没有找到相 ...

  9. RequireJS和AMD规范

    目录 概述 define方法:定义模块 require方法:调用模块 AMD模式小结 配置require.js:config方法 插件 优化器r.js 参考链接 概述 RequireJS是一个工具库, ...

随机推荐

  1. ASCII码表(0-127 ) C中的转义字符

    所有的ASCII码都可以用“\”加数字(一般是8进制数字)来表示.而C中定义了一些字母前加"\"来表示常见的那些不能显示的ASCII字符,如\0,\t,\n等,就称为转义字符,因为 ...

  2. C语言atoi函数(将字符串转化为int)

    头文件:#include <stdlib.h> atoi() 函数用来将字符串转换成整数(int),其原型为:int atoi (const char * str); [函数说明]atoi ...

  3. 一、WCF学习之旅-创建第一个服务

    WCF基本介绍:http://baike.baidu.com/link?url=TGjLYt3HS4dt4-hIiGRknLy6udRsZ52QxJz9cmRKlR4NXbP9rCZDsKn2fDfG ...

  4. C# 自动发送邮件被系统当做垃圾邮件退回的处理方法

    前两天做了一个发送邮件的定时任务.其功能为在每天的某一时刻,系统自动从银行查询前一天的交易明细到本地服务器,解析后生成为各自不同Excel文件,并打包成zip压缩文件,然后抄送附件给财务对账.其中,邮 ...

  5. Sysinternals Suite 2014.08.18

    Windows Sysinternals Suite 是一套由微软官方免费提供的系统工具集,其中包含了大量超级实的优秀绿色小软件,譬如 Desktops (虚拟桌面).Process Explorer ...

  6. 攻防:文件上传漏洞的攻击与防御,转自H3C

    WebShell就是以asp.php.jsp或者cgi等网页文件形式存在的一种命令执行环境,也可以将其称做为一种网页后门.黑客在入侵了一个网站后,通常会将这些asp或php后门文件与网站服务器WEB目 ...

  7. IIS7 经典模式和集成模式的区别

    IIS7.0中的Web应用程序有两种配置形式:经典形式和集成形式. 经典形式是为了与之前的版本兼容,运用ISAPI扩展来调用ASP.NET运转库,原先运转于IIS6.0下的Web应用程序迁移到IIS7 ...

  8. Alternative Thinking 找规律

    Kevin has just recevied his disappointing results on the USA Identification of Cows Olympiad (USAICO ...

  9. DataFrame 列运算

    import pandas as pd import StringIO table_buffer = StringIO.StringIO('''a b 2007-01-08 0.786667 270 ...

  10. 如何判断一个请求是否为AJAX请求

    普通请求与ajax请求的报文头不一样,通过如下 String requestType = request.getHeader("X-Requested-With");  如果req ...