JavaScript模块化-RequireJs实现AMD规范的简单例子
- 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规范的简单例子的更多相关文章
- Javascript模块化编程(二)AMD规范(规范使用模块)
这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块,先想一想,为什么模块很重要?接下来为您详细介绍,感兴趣的朋友可以了解下啊.今天介绍如何规范地使用模块. 七.模块 ...
- Javascript模块化编程：AMD规范及require.js用法【转】 - loheonly的笔记 - 前端网（W3Cfuns）
http://www.w3cfuns.com/blog-5425789-5399326.html
- JavaScript模块化编程之AMD - requireJS基础使用
JavaScript模块化编程之AMD requireJS基础使用 标签(空格分隔): JavaScript 参考文章 AMD规范 AMD是"Asynchronous Module Defi ...
- JavaScript模块化演变 CommonJs,AMD, CMD, UMD(一)
原文链接:https://www.jianshu.com/p/33d53cce8237 原文系列2链接:https://www.jianshu.com/p/ad427d8879cb 前端完全手册: h ...
- JS模块化编程之AMD规范（转）
随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者 ...
- （转）JS模块化编程之AMD规范
模块的规范 原文地址 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有 ...
- 【JavaScript】JavaScript模块化编程 - CommonJS, AMD 和 RequireJS之间的关系
通行的Javascript模块规范共有两种:CommonJS和AMD 先说说CommonJS CommonJS - 大家是不是觉得JavaScript仅仅是一个客户端的编译语言,其实JavaScr ...
- JavaScript模块化编程 - CommonJS, AMD 和 RequireJS之间的关系
这几天在学习CommonJS的时候突然在StackOverflow上搜索到一个非常好的一个帖子,是关于CommonJS, AMD和RequireJS之间的关系的问答贴.我感觉写的非常好,鉴于没有找到相 ...
- RequireJS和AMD规范
目录 概述 define方法:定义模块 require方法:调用模块 AMD模式小结 配置require.js:config方法 插件 优化器r.js 参考链接 概述 RequireJS是一个工具库, ...
随机推荐
- 070——VUE中vuex之使用getters计算每一件购物车中商品的总价
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用MyEclipse开发Java EE应用：EJB项目开发初探（下）
你开学,我放价!MyEclipse线上狂欢继续!火热开启中>> [MyEclipse最新版下载] 三.EJB 3.x项目中的持久性支持 当创建EJB 3.x项目时,作为选项您可以添加JPA ...
- BeanFactory工厂
Core模块主要的功能是实现了反向控制(Inversion of Control)与依赖注入(Denpendency Injection).Bean配置以及加载. Beans为Spring里的各种对象 ...
- 1.学习dubbo
1.安装虚拟机 http://www.cnblogs.com/yun965861480/p/6246396.html 2.配置网络 http://www.cnblogs.com/yun96586148 ...
- 利用Teensy进行em410x卡模拟以及暴力破解em410x类门禁系统
什么是低频?什么是EM410x? 首先,我不得不再次提一下那些工作在125khz频率下的低频卡(如:EM410X之类的),以便大家更好的阅读以下的内容. 什么是低频?以下就是低频的解释: 低频(LF, ...
- C#并行开发_Thread/ThreadPool, Task/TaskFactory, Parallel
大家好,本次讨论的是C#中的并行开发,给力吧,随着并行的概念深入,哥也赶上这个潮流了,其实之前讨论C#的异步调用或者C#中BeginInvoke或者Invoke都已经涉及了部分本篇的内容. 参考书目: ...
- Spring JdbcTemplate中的回调
回调 JdbcTemplate类支持的回调类: 1.预编译语句及存储过程创建回调:用于根据JdbcTemplate提供的连接创建相应的语句: 1.1 PreparedStatementCreator ...
- 第十六篇 make中的路径搜索
在实际的工程项目中,源文件和头文件都会组织成一定的目录结构,这样也便于项目的管理,前述我们分析的makefile,源文件和头文件大都在当前目录,没有路径搜索的问题,下面我们引入今天的演示程序的目录结 ...
- Java Iterator的一般用法
Iterator(迭代器) 迭代器是一种设计模式,它是一个对象,它可以遍历并选择序列中的对象,而开发人员不需要了解该序列的底层结构.迭代器通常被称为“轻量级”对象,因为创建它的代价小. Java中的I ...
- CentOS7安装OpenStack(Rocky版)-04.安装Nova计算服务（控制节点）
上一篇文章分享了glance镜像服务的安装配置,本文主要分享openstack的计算服务Nova的安装和配制方法 ------------------ 完美的分割线 ----------------- ...