简单的说一下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的更多相关文章

  1. JavaScript模块化编程之AMD - requireJS基础使用

    JavaScript模块化编程之AMD requireJS基础使用 标签(空格分隔): JavaScript 参考文章 AMD规范 AMD是"Asynchronous Module Defi ...

  2. Javascript模块化编程之CommonJS,AMD,CMD,UMD模块加载规范详解

    JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发?     模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问 题进行系 ...

  3. （转）JS模块化编程之AMD规范

    模块的规范 原文地址 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有 ...

  4. JS模块化编程之AMD规范（转）

    随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者 ...

  5. JavaScript模块化编程之require.js与sea.js

    为什么要模块化:当今,网站以不再是一个简单的页面,JavaScript也不再是做一些简单的脚本验证,随着WEB.20时代到来,前端工程师面临的必将是越来越庞大的JavaScript代码,越来越复杂的内 ...

  6. Javascript模块化编程之Why

    说到模块化编程,大家比较容易想到Java, C++等语言,感觉这事和Javascript沾不上一丁点边.虽说Javascript看上去好像同Java有莫大的关系,但那也只是一厢情愿,不过是挂羊头卖狗肉 ...

  7. Javascript异步编程之setTimeout与setInterval详解分析(一)

    Javascript异步编程之setTimeout与setInterval 在谈到异步编程时,本人最主要会从以下三个方面来总结异步编程(注意:特别解释:是总结,本人也是菜鸟,所以总结不好的,请各位大牛 ...

  8. 【转】Javascript异步编程之setTimeout与setInterval

    Javascript异步编程之setTimeout与setInterval 转自:http://www.tuicool.com/articles/Ebueua 在谈到异步编程时,本人最主要会从以下三个 ...

  9. javascript 元编程之 method_missing

    javascript 元编程之 method_missing 引言 要说元编程 ruby 中技巧太多了,今天来写的这个技术也来自于 ruby 中的灵感. method_missing 这个在 ruby ...

随机推荐

  1. Column注解的的RetentionPolicy的属性值是RUTIME,这样注解处理器可以通过反射，获取到该注解的属性值，从而去做一些运行时的逻辑处理

    1.Column注解的的RetentionPolicy的属性值是RUTIME,这样注解处理器可以通过反射,获取到该注解的属性值,从而去做一些运行时的逻辑处理 2. 自定义注解: 使用@interfac ...

  2. HTML的表单form以及form内部标签

    <html> <head> <title> form表单的使用 </title> <!-- 标签名称:form 表单标签 属性:action:提交 ...

  3. spring注入对象类型的属性

    一.1.创建service类和Dao类 (1)在service中得到dao对象 2.具体实现过程 (1)在service里边把dao作为类型属性 (2)生成dao类型属性的set方法 public c ...

  4. Linux系统查看当前时间的命令

    转自:https://www.cnblogs.com/redfire/p/7702213.html 一.查看和修改Linux的时区1. 查看当前时区命令 : "date -R"2. ...

  5. [转载]Windows&nbsp;Server&nbsp;2008&nbsp;R2&nbsp;之二十五AD&nbsp;RMS信任策略

    原文地址:Windows Server 2008 R2 之二十五AD RMS信任策略作者:从心开始 可以通过添加信任策略,让 AD RMS 可以处理由不同的 AD RMS 群集进行权限保护的内容的授权 ...

  6. [JavaEE] 了解Java连接池

    转载自51CTO http://developer.51cto.com/art/201006/207768.htm 51CTO曾经为我们简单的介绍过Java连接池.要了解Java连接池我们先要了解数据 ...

  7. Linux Shell Scripting Cookbook 读书笔记 4

    正则, grep 1. 正则表达式  正则表达式  描述  示例 ^ 行起始标记  ^hell匹配以hell开头的行 $ 行尾标记  test$匹配以test结尾的行 . 匹配任意一个字符  hell ...

  8. Chrome 行情抓取插件

    Chrome 行情抓取插件 上班想偷偷摸摸看行情?自己动手写插件啊,尝试写了一个,新建文件夹,命名为StockMonitor,放入文件如下: 3个.png图标文件,19X19.48X48.128X12 ...

  9. TreeSet中的排序问题——Comparable

    package com.etc.hashset; import java.util.HashSet; import java.util.Iterator; import java.util.Set; ...

  10. Fabric quickly

    环境很重要.环境很重要.环境很重要 # CentOS 7 $ setenforce 0 # 可以设置配置文件永久关闭 $ systemctl stop iptables.service $ syste ...