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 ...
随机推荐
- gcc指定头文件路径及动态链接库路径
gcc指定头文件路径及动态链接库路径 本文详细介绍了linux 下gcc头文件指定方法,以及搜索路径顺序的问题.另外,还总结了,gcc动态链接的方法以及路径指定,同样也讨论了搜索路径的顺序问题.本 ...
- margin 百分比是按參照物来计算滴 不知道吧?
<style> #demo{ margin: 0 auto; width: 1000px; height: 500px; background: #eee; overflow: hidde ...
- TCP三次握手及关闭时的2MSL分析
TCP/IP三次握手四次挥手,是非常重要的,这个链接与关闭过程也是非常easy的.但为什么是三次握手?以及为什么要等待2MSL的状态?大部分人或许听到这个问题就蒙了.这篇博客就综合<TCP/IP ...
- Linux - 虚拟机中的三种网络连接，桥接、NAT、Host-only详解
虚拟机中的三种网络连接 1.桥接 2.NAT 3.Host-only 桥接方便做实验,配置ip方便.可以和局域网中的其他机器进行通信,也可以和公网进行通信.缺点是会占用一个ip. NAT,可以和主机进 ...
- Head First 设计模式 —— 工厂模式与工厂方法
1. 实例化对象的方法 制造对象的方法不只 new 操作符一种.且实例化这个动作不应该总是公开地进行,还有初始化常常造成耦合问题.由此提出的工厂模式以进一步封装实例化的活动,且避免对象初始化时的可能产 ...
- 【POJ 2417】 Discrete Logging
[题目链接] http://poj.org/problem?id=2417 [算法] Baby-Step,Giant-Step算法 [代码] #include <algorithm> #i ...
- 当使用Spring MVC @Valid对输入框进行验证的时候，可能会遇到以下的异常：Neither BindingResult nor plain target object for bean name ‘mybean’ available as request attribute
转自:https://www.cnblogs.com/wenhulu/p/5555457.html 当使用Spring MVC @Valid对输入框进行验证的时候,可能会遇到以下的异常: Neithe ...
- Hdu-6119 小小粉丝度度熊 尺取
题面 题意:在一大段时间里,告诉你,你签到了哪些区间,现在再给你m张补签卡,问你最多能实现连续签到多少天 题解:那些时间区间是有重叠的,所以我们先排序离散,并得到哪些区间是可以补签的,这样问题就变成, ...
- codeforces 712 Memory and De-Evolution
2019-05-19 13:25:37 加油,加油,坚持,坚持!!! 一定要逆推,才可以是最少的次数 更好的方法: https://www.cnblogs.com/ECJTUACM-873284962 ...
- Keras简单使用
Keras简单使用在keras中建立模型测试自己的图片一些有用的函数(持续更新) Keras简单使用 在keras中建立模型 相对于自己写机器学习相关的函数,keras更能快速搭建模型,流程如下: 通 ...