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 ...
随机推荐
- javap命令
javap命令 学习了:https://www.cnblogs.com/frinder6/p/5440173.html javap命令查看java类的字节码: 对于synchronized块,可以显示 ...
- maven环境配置好，一直提示mvn不是内部命令
设置了环境变量 M2_HOME 跟path ,在cmd中输入mvn一直提示不是内部命令 解决办法:通过命令设置path 如下:set path=输入值
- Codeforces Round #200 (Div. 2)D. Alternating Current （堆栈）
D. Alternating Current time limit per test 1 second memory limit per test 256 megabytes input standa ...
- oc17--点语法
// // Person.h // day13 #import <Foundation/Foundation.h> @interface Person : NSObject { // @p ...
- xargs命令【转】
本文转载自:http://man.linuxde.net/xargs
- JAVA课设——中药古籍《太平圣惠方》数据处理与分析系统
一．配置JAVA环境 本次课设是在Windows 10(64bit)平台上实现的,所以首先得配置下JAVA环境. 步骤一:先下载一个JDK(1.7)安装包,安装好JDK: 步骤二:JDK环境配置(由于 ...
- js编写时间选择框
效果图: 代码: 新建js:WdatePicker.js /* * My97 DatePicker 4.72 Release * License: http://www.my97.net/dp/lic ...
- 原型模式(Prototype)C++实现
意图:用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. 实用性:1.当要实例化的类是在运行时刻指定时. 2.为了避免创建一个与产品类层次平行的工厂类层次时. 3.当一个类的实例只能有几 ...
- 常用的CSS命名
头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体佈局宽度:wrapper 左右中:left rig ...
- 干货 | TensorFlow的55个经典案例
转自1024深度学习 导语:本文是TensorFlow实现流行机器学习算法的教程汇集,目标是让读者可以轻松通过清晰简明的案例深入了解 TensorFlow.这些案例适合那些想要实现一些 TensorF ...