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 5338 ZZX AND PERMUTATIONS 线段树
pid=5338" target="_blank" style="text-decoration:none; color:rgb(45,125,94); bac ...
- SRM 621 D2L3: MixingColors, math
题目:http://community.topcoder.com/stat? c=problem_statement&pm=10409&rd=15854 利用高斯消元求线性空间的基,也 ...
- 读懂diff【转】
本文转载自:http://www.ruanyifeng.com/blog/2012/08/how_to_read_diff.html 读懂diff 作者: 阮一峰 日期: 2012年8月29日 d ...
- Dvwa安装，配置（Linux）
文章演示使用系统:CenTOS7 一:搭建LAMP环境 使用XAMPP安装部署,下载地址:https://www.apachefriends.org/download.html 1.1:赋予账号对XA ...
- [XJOI]noip45 T2 图
***图*** 解题思路:这题的原题似乎好像是NOI某年的题目,然后数据改水了 于是就可以用一些简单的最短路算法水掉. 因为他是要求max(a)+max(b)的值,所以单纯的最短路是不行的 我们可以枚 ...
- Hadoop MapReduce编程 API入门系列之挖掘气象数据版本2（十）
下面,是版本1. Hadoop MapReduce编程 API入门系列之挖掘气象数据版本1(一) 这篇博文,包括了,实际生产开发非常重要的,单元测试和调试代码.这里不多赘述,直接送上代码. MRUni ...
- Css 分类 属性 选择器
Css 层叠样式表 美化页面的小工具 分类: 内联 (行内)在标签内部以属性的形式呈现,属性名style 内嵌 head标签内以标签形式呈现,标签名style 外部 head标签内 加link标签 引 ...
- 线性表结构的Java实现
一.线性表的抽象数据类型表述 线性表的结构简单,长度允许动态增长或搜索:可以对线性表中的任何数据元素进行访问和查找:允许进行数据的插入和删除操作:求线性表中的指定数据的前驱和后继:合并线性表以及拆分线 ...
- nodejs supervisor安装
使用supervisor提高nodejs调试效率 用超级用户运行npm -g install supervisor命令,说是顺 >$ sudo npm -g install supervisor ...
- 重载（overload）和重写（override）的对比（笔试经常出）
Day04_SHJavaTraing_4-6-2017 1.重载(overload): ①权限修饰符(public private 默认): 无关 ②返回值类型: ...