JavaScript模块化编程之AMD

简单的说一下AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

require.js作用

实现js文件的异步加载，避免网页失去响应；
管理模块之间的依赖性，便于代码的编写和维护。

首先引入requireJS文件，并在script标签上指定入口文件(主模块)：

&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;javascript模块化编程&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script type="text/javascript" src="https://cdn.bootcss.com/require.js/2.3.5/require.js" defer async data-main="js/main.js"&gt;&lt;/script&gt;
&lt;/body&gt;

接下来需要对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/CommonJSfactory(require('document'), require('window'));} else if (typeof define === 'function' &amp;&amp; define.amd) {// AMDdefine(factory(document, window));} else {// Browser globalsfactory(document, window);}
}(function (document, window) {var Test = {a: 1}if (typeof module != 'undefined' &amp;&amp; module.exports) {module.exports = Test;} else if (typeof define == 'function' &amp;&amp; define.amd) {define(function () { return Test; });} else {window.Test = Test;}
}));

原文地址：https://segmentfault.com/a/1190000016913752

转载于:https://www.cnblogs.com/lalalagq/p/9940603.html

JavaScript模块化编程之AMD相关推荐

js模块化编程之CommonJS和AMD/CMD
一.CommonJS 1.CommonJS API定义很多普通应用程序(主要指非浏览器的应用)使用的API,从而填补了这个空白.它的终极目标是提供一个类似Python,Ruby和Java标准库.这样的 ...
JavaScript模块化 --- Commonjs、AMD、CMD、es6 modules
随着前端js代码复杂度的提高,JavaScript模块化这个概念便被提出来,前端社区也不断地实现前端模块化,直到es6对其进行了规范,下面就介绍JavaScript模块化. 这篇文章还是希望能给大家一 ...
Javascript模块化编程：AMD规范
一.模块的规范先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写 ...
树莓派模块化编程之TM1637驱动四位数码管
一.驱动TM1637的时序图二.代码实现 #encoding:utf-8 import RPi.GPIO as GPIO import time GPIO.setwarnings(False) GP ...
【实战篇】模块化编程之LCD驱动框架详解
ID:嵌入式云IOT技术圈作者:杨源鑫传送门:[架构篇]嵌入式编程中如何给代码的结构分层废话不多说,理论讲太多没啥感觉,这些条条框框本质就是基于面对对象的设计模式相关的一些理论,设计模式就是前人 ...
javascript模块化之CommonJS、AMD、CMD、UMD、ES6
javascript模块化之CommonJS.AMD.CMD.UMD.ES6 一.总结一句话总结: CommonJS是同步加载模块,用在服务端:AMD是异步加载模块,用于浏览器端 1.为什么服务器端 ...
JavaScript 模块化编程（二）：AMD规范
这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要 ...
Javascript模块化编程系列二: 模块化的标准化(CommonJS AMD)
前言 Javascript模块化编程系列一: 模块化的驱动在前一篇介绍了为什么要进行Javascript模块化编程.至于如何实现模块化,不同的开发组织和个人具体的实现方式肯定是不一样.如何统一一个规 ...
无法找到模块“mint-ui”的声明文件_[搬运] JavaScript 模块化：CommonJS vs AMD vs ES6...
本文主体部分翻译+搬运自外网著名技术博客网站 medium.com 的一篇点赞数 2.7k 的文章 (文章链接在结尾处) 什么是 JavaScript 模块 JavaScript 模块指的是一段可 ...
Javascript模块化编程（二）：AMD规范
Javascript模块化编程(二):AMD规范七.模块的规范先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提, ...

JavaScript模块化编程之AMD

JavaScript模块化编程之AMD相关推荐

最新文章

热门文章