JavaScript模块化编程之AMD
简单的说一下AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。
require.js作用
- 实现js文件的异步加载，避免网页失去响应；
- 管理模块之间的依赖性，便于代码的编写和维护。
首先引入requireJS文件，并在script标签上指定入口文件(主模块)：
<head>
<meta charset="UTF-8">
<title>javascript模块化编程</title>
</head>
<body>
<script type="text/javascript" src="https://cdn.bootcss.com/require.js/2.3.5/require.js" defer async data-main="js/main.js"></script>
</body>
接下来需要对main.js进行一些配置：
// 模块加载的配置
require.config({
// 基目录 如果每个模块不在一个基目录
// 不使用baseUrl直接在paths中具体指定
baseUrl: "lib",
paths: {
'jquery': 'jquery',
'vue': 'vue.min',
'pagination': 'my-pager'
},
// shim属性 专门用来配置不兼容的模块 每个模块要定义:
// (1) exports值（输出的变量名）表明这个模块外部调用时的名称
// (2) deps数组 表明该模块的依赖性
// 比如jq的插件可以这样定义
shim: {
'jquery.scroll': {
deps: ['jquery'],
exports: 'jQuery.fn.scroll'
}
}
// requireJS还有一系列插件 不再赘述
// [Plugins](https://github.com/requirejs/requirejs/wiki/Plugins)
});
// 主模块依赖于其它模块，这时就需要使用AMD规范定义的require()函数
// require([modules], function (modules) { });
require(['jquery', 'vue', 'pagination'], function ($, Vue, pagination) {
console.log($);
console.log(Vue);
console.log(pagination);
});
关于自己定义符合AMD规范的模块，比如上面例子中的pagination:
(function (factory) {
if (typeof exports === 'object') {
// Node/CommonJS
factory(require('document'), require('window'));
} else if (typeof define === 'function' && define.amd) {
// AMD
define(factory(document, window));
} else {
// Browser globals
factory(document, window);
}
}(function (document, window) {
var Test = {
a: 1
}
if (typeof module != 'undefined' && module.exports) {
module.exports = Test;
} else if (typeof define == 'function' && define.amd) {
define(function () { return Test; });
} else {
window.Test = Test;
}
}));
原文地址：https://segmentfault.com/a/1190000016913752
JavaScript模块化编程之AMD的更多相关文章
- JavaScript模块化编程之AMD - requireJS基础使用
JavaScript模块化编程之AMD requireJS基础使用 标签(空格分隔): JavaScript 参考文章 AMD规范 AMD是"Asynchronous Module Defi ...
- Javascript模块化编程之CommonJS,AMD,CMD,UMD模块加载规范详解
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问 题进行系 ...
- （转）JS模块化编程之AMD规范
模块的规范 原文地址 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有 ...
- JS模块化编程之AMD规范（转）
随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者 ...
- JavaScript模块化编程之require.js与sea.js
为什么要模块化:当今,网站以不再是一个简单的页面,JavaScript也不再是做一些简单的脚本验证,随着WEB.20时代到来,前端工程师面临的必将是越来越庞大的JavaScript代码,越来越复杂的内 ...
- Javascript模块化编程之Why
说到模块化编程,大家比较容易想到Java, C++等语言,感觉这事和Javascript沾不上一丁点边.虽说Javascript看上去好像同Java有莫大的关系,但那也只是一厢情愿,不过是挂羊头卖狗肉 ...
- Javascript异步编程之setTimeout与setInterval详解分析(一)
Javascript异步编程之setTimeout与setInterval 在谈到异步编程时,本人最主要会从以下三个方面来总结异步编程(注意:特别解释:是总结,本人也是菜鸟,所以总结不好的,请各位大牛 ...
- 【转】Javascript异步编程之setTimeout与setInterval
Javascript异步编程之setTimeout与setInterval 转自:http://www.tuicool.com/articles/Ebueua 在谈到异步编程时,本人最主要会从以下三个 ...
- javascript 元编程之 method_missing
javascript 元编程之 method_missing 引言 要说元编程 ruby 中技巧太多了,今天来写的这个技术也来自于 ruby 中的灵感. method_missing 这个在 ruby ...
随机推荐
- HDU 5355 Cake
HDU 5355 Cake 更新后的代码: 今天又一次做这道题的时候想了非常多种思路 最后最终想出了自觉得完美的思路,结果却超时 真的是感觉自己没救了 最后加了记忆化搜索,AC了 好了先说下思路吧.不 ...
- POJ3185 The Water Bowls 反转（开关）
Description The cows have a line of 20 water bowls from which they drink. The bowls can be either ri ...
- Linux之convert命令【转】
本文转载自:http://zlb1986.iteye.com/blog/778054 转载: 强大的convert命令 convert命令可以用来转换图像的格式,支持JPG, BMP, PCX, GI ...
- ZOJ-3988 2017CCPC-秦皇岛 Prime Set 二分图最大匹配 匈牙利
题面 题意:给你n个数,你可以选择2个和为质数的数为一对,每个数可以重复选择,你最多选k对,问你最多能选多少个不同数出来 题解:首先思考怎么样的数和为质数,2个偶数相加不行,除了1+1以外2个奇数相加 ...
- oracle连接数不够解决
ora-12516: TNS: 监听程序找不到符合协议堆栈要求的可用处理程 看到如上错误出现,就要查看是否是是数据库连接数被占满了 具体的查询sql如下: select count(*) from v ...
- Codeforces Round #198 (Div. 2)A,B题解
Codeforces Round #198 (Div. 2) 昨天看到奋斗群的群赛,好奇的去做了一下, 大概花了3个小时Ak,我大概可以退役了吧 那下面来稍微总结一下 A. The Wall Iahu ...
- Aspose.cell中的Excel模板导出数据
//Excel模板导数据(Eexcel中根据DataTable中的个数,给多个Sheet中的模板赋值) public void DataSetToManyExcel(string fileName, ...
- 5个对话框和FileStream:文件流
1.private void button1_Click(object sender, EventArgs e) { colorDialog1.ShowDialog();//显示颜色选择器 panel ...
- Android线程间异步通信机制源码分析
本文首先从整体架构分析了Android整个线程间消息传递机制,然后从源码角度介绍了各个组件的作用和完成的任务.文中并未对基础概念进行介绍,关于threadLacal和垃圾回收等等机制请自行研究. 基础 ...
- Django rest_framework API 随笔
分页 需要对数量进行限制 ./settings.py REST_FRAMEWORK = { 'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination ...