js模块化规范—AMD规范

时间:2021-09-11 02:25:15

AMD规范说明

AMD全称是:Asynchronous Module Definition(异步模块定义),github地址

是专门用于浏览器端, 模块的加载是异步的

AMD规范基本语法

定义暴露模块

//定义没有依赖的模块
define(function(){
return 模块
})
//定义有依赖的模块,module1和m1一一对应
define(['module1', 'module2'], function(m1, m2){
return 模块
})

引入使用模块

require(['module1', 'module2'], function(m1, m2){
使用m1/m2
})

未使用AMD规范的模块化

// 没有依赖的模块
(function (window) {
let msg = 'atguigu.com' function getMsg() {
return msg.toUpperCase()
} window.dataService = {getMsg}
})(window)
// 依赖dataService模块,调用dataService的getMsg方法
(function (window, dataService) {
let name = 'Tom' function showMsg() {
alert(dataService.getMsg() + ', ' + name)
} window.alerter = {showMsg}
})(window, dataService)
(function (alerter) {
alerter.showMsg()
})(alerter)
<!DOCTYPE html>
<html>
<head>
<title>Modular Demo 1</title>
</head>
<body>
<div>
<h1>Modular Demo 1: 未使用AMD(require.js)</h1>
</div>
<script type='text/javascript' src='js/modules/dataService.js'></script>
<script type='text/javascript' src='js/modules/alerter.js'></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

AMD规范的实现(浏览器端)

AMD规范需要使用到require.js这个插件,下载require.js, 并引入,将require.js导入项目: js/libs/require.js

创建项目结构

|-js
|-libs
|-require.js
|-modules
|-alerter.js
|-dataService.js
|-main.js
|-index.html

定义require.js的模块代码:dataService.js

define(function () {
let msg = 'dataService.js' function getMsg() {
return msg.toUpperCase()
} return {getMsg} //暴露模块中的getMsg方法
})

定义require.js的模块代码:alerter.js

/*
定义有依赖的模块
*/
define(['dataService', 'jquery'], function (dataService, $) {
let name = 'Tom2' function showMsg() {
$('body').css('background', 'gray')
alert(dataService.getMsg() + ', ' + name)
} return {showMsg}
})

应用主(入口)js: main.js

(function () {
//配置
require.config({
//基本路径
baseUrl: 'js/',
//映射: 模块标识名: 路径
paths: {
//自定义模块
'alerter': 'modules/alerter',
'dataService': 'modules/dataService', //库模块
'jquery': 'libs/jquery-1.10.1', // jquery遵循AMD规范,模块标识名是jquery(小写)
'angular': 'libs/angular' }, //配置不兼容AMD的模块
shim: {
angular: {
exports: 'angular'
}
}
}) //引入模块使用
require(['alerter', 'angular'], function (alerter, angular) {
alerter.showMsg()
console.log(angular);
})
})()
<!DOCTYPE html>
<html>
<head>
<title>Modular Demo 2</title>
</head>
<body>
<script type="text/javascript" src="js/libs/require.js" data-main="js/main.js"></script>
</body>
</html>

js模块化规范—AMD规范的更多相关文章

  1. js模块化开发——AMD规范

    这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就 ...

  2. js中的AMD规范

    回首萧瑟,残月挂角,孤草弄影. 看了一下上一篇随笔的日期,距离上一篇日志又过去了许久.在这段时间中,我尽全力去拯救那间便利店,可惜到最后依然失败,这一次是所有的出路全部没有了,我也做了所有的努力.闲下 ...

  3. JavaSript模块规范 - AMD规范与CMD规范介绍(转)

    JavaSript模块规范 - AMD规范与CMD规范介绍 JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者 ...

  4. JavaSript模块规范 - AMD规范与CMD规范介绍 &lpar;转载lovenyf&period;blog&period;chinaunix&period;net&rpar;

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

  5. 【转】JavaSript模块规范 - AMD规范与CMD规范介绍

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

  6. JavaSript模块规范 - AMD规范与CMD规范介绍&lbrack;转&rsqb;

    原文地址:http://blog.chinaunix.net/uid-26672038-id-4112229.html JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什 ...

  7. JavaSript模块规范 - AMD规范与CMD规范介绍 (转)

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

  8. javascript模块化编程&lpar;AMD规范的加载器&rpar;

    关于AMD规范可以参考阮一峰的这篇文章Javascript模块化编程(二):AMD规范 简单来说,AMD规范就是异步方式加载模块的一种方式,避免因为模块加载过慢而导致浏览器“假死”. 先贴一个学习地址 ...

  9. 模块化编程&colon;AMD规范

    目前,通行的Javascript模块规范共有两种:ComonJS和AMD. CommonJS node.js的模块系统,就是参照CommonJS规范实现的.在ConmonJS中,有一个全局方法requ ...

随机推荐

  1. Android 计算布局背景的透明度

    1.#ff000000 此为16进制颜色代码,前2位ff为透明度,后6位为颜色值(000000为黑色,ffffff为白色,可以用ps等软件获取). 2.透明度分为256阶(0-255),计算机上用16 ...

  2. Pexpect模块的安装

    Pexpect模块的安装 下载地址:https://pypi.python.org/pypi/pexpect/ 解压后在目录下运行:python ./setup.py install (必须是root ...

  3. &period;NET Web开发总结

    在aspx文件中  创建控件 在右下角有控件信息 按类排序 会将控件信息安装类排序 点击控件 会增加属性页面的分页[事件]页面  可以增加其事件函数 字符串操作及其时间操作 fn_name.Inser ...

  4. 22个CSS黑魔法

    原链接:http://www.ido321.com/1665.html Hey there! Today we are going to talk about some useful tricks i ...

  5. javascript集合求交集

    两集合求交集 思路: 1. 每一次从B数组中取一值,然后在A数组里逐个比较,如果有相等的,则保存.该算法复杂度为 O(MN). M, N 分别为数组 A B 的长度. 2. 因为A B 都排过序,所以 ...

  6. 前端笔记之NodeJS(一)初识NodeJS&amp&semi;内置模块&amp&semi;特点

    一.NodeJS简介 NodeJS是开发服务器后台的东西,和PHP.JavaEE.python类似,和传统的浏览器的关注DOM的JS完全不同,将JavaScript触角伸到了服务器端.内核是Chrom ...

  7. Guitar Pro中如何添加与删除音轨

    Guitar Pro是一款专业的吉他打谱作曲软件,适合每一位热爱吉他并想进一步学习的大家.今天,我们一起来看看Guitar Pro软件写谱时音轨如何添加与删除. Guitar Pro能够同时支持虚拟音 ...

  8. JMM - Java内存模型

    内存模型的作用是定义变量的访问规则.包含:实例字段.静态字段.构成数组对象的元素.不包括局部变量和方法参数等线程私有变量. JMM所有变量都在主存,每个线程都有自己的工作内存.线程的工作内存中保存了线 ...

  9. kepware http接口 c语言&lpar;libcrul&rpar;开发

    列出所有变量 CURL *hnd = curl_easy_init(); curl_easy_setopt(hnd, CURLOPT_CUSTOMREQUEST, "GET"); ...

  10. 哈希表(一):解决hash冲突的几种方法

    (一)线性探测法 线性探测法是最简单的处理冲突的方法. (1)插入元素:插入元素时,如果发生冲突,算法将从该槽位向后遍历哈希表,直到找到表中的下一个空槽,并将该值放入到空槽当中. (2)查找元素:查找 ...