AMD模块规范

1.1 AMD规范说明

AMD规范专门用来实现浏览器端的模块化，并且模块的加载是异步的；引入一个第三方的require.js脚本用来解析AMD规范编写的模块

1.2 基本语法

使用define用来暴露模块，使用require用来引入模块

1.21暴露模块

（1）使用define(function(){})函数定义模块；并且向外暴露

// 定义一个没有依赖模块的data.js模块

define(function(){

    let name = '过青年';

    function getName(){

        console.log(name);

        return name;

    }

    // 暴露模块，推荐暴露对象

    return {name,getName};

});

（2）使用define(['module','module2'],function(){})定义有依赖的模块，注意，数组里面的模块名只是一个代号，不一定要写模块名；不过推荐使用模块名作为代号，这样别人一看就知道引入了哪个模块，不用加后缀

// 定义一个有依赖模块的server.js模块

// 将依赖模块作为实参传递进去

define(['data'],function(data){

    let age = 20;

    function showName(){

        console.log(data.name);

        return name;

    }

    return {age,showName};

});
1.22引入模块

在主模块app.js中引入其他模块，使用require函数；需要使用require.config配置其他模块的路径

我们的路径是这样的

// app.js

(function(){

    require.config({

        // 以相对目录的方式指定一个基本路径

        baseUrl:'./js/',

        paths:{

            // 以基本路径开始的相对路径

            data:'./module/data',

            server:'./module/server'

        }

    });

    require(['server'],function(server){

    //会将模块当作参数传进来

    	console.log(server.age); // 20

        console.log(server.showName());  // 过青年

	});

})()

  1. 我们从HTML开始解析页面

  2. HTML页面引入的require.js根据data-main属性发现主模块是js目录下的app.js

  3. 于是进入app.js页面进行解析；解析app.js页面，发现引入了一个叫server的模块，那么这个模块在哪里呢？通过app.js页面中的配置函数require.config()发现server这个模块在./js/module/server.js（我们写路径的时候不能加上后缀，因为解析时默认会添加后缀）

  4. 于是找到了这个模块，进入这个server模块，结果发现这个server模块又引入了一个叫data的模块，于是又通过app.js的配置函数找，发现data模块在./js/module/server.js中，于是加载这个模块

  5. 模块全部加载完成

1.23在HTML页面上使用模块化

AMD规范本来就是用来实现浏览器端的模块化的；而require.js脚本就是这个规范的一种实现

script脚本中的data-main属性值代表主模块，从主模块进入模块内部，依次加载其他模块的内容

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>AMD规范实现</title>

</head>

<body>

    <script src="./js/libs/require.min.js" data-main="./js/app.js"></script>

</body>

</html>

总结

  • 使用AMD规范需要引入require.js——第三方编写的脚本
  • 根据data-main确认主模块
  • 根据主模块中的require.config({ })函数确定各模块的位置
  • require.config({ })中各个模块的路径不能加后缀.js

03 AMD规范的基础使用详解的更多相关文章

  1. RabbitMQ,Apache的ActiveMQ,阿里RocketMQ,Kafka,ZeroMQ,MetaMQ,Redis也可实现消息队列，RabbitMQ的应用场景以及基本原理介绍，RabbitMQ基础知识详解，RabbitMQ布曙

    消息队列及常见消息队列介绍 2017-10-10 09:35操作系统/客户端/人脸识别 一.消息队列(MQ)概述 消息队列(Message Queue),是分布式系统中重要的组件,其通用的使用场景可以 ...

  2. Nmap扫描教程之基础扫描详解

    Nmap扫描教程之基础扫描详解 Nmap扫描基础扫描 当用户对Nmap工具了解后,即可使用该工具实施扫描.通过上一章的介绍,用户可知Nmap工具可以分别对主机.端口.版本.操作系统等实施扫描.但是,在 ...

  3. ch01系统基础信息模块详解

    第1章 系统基础信息模块详解 1.1 系统性能信息模块 psutil 解决VMWare在Windows10的安装问题: 安装VC Redistributable 2017 解决虚拟机的上网问题:修改V ...

  4. I2C 基础原理详解

    今天来学习下I2C通信~ I2C(Inter-Intergrated Circuit)指的是 IC(Intergrated Circuit)之间的(Inter) 通信方式.如上图所以有很多的周边设备都 ...

  5. python 3.x 爬虫基础---Urllib详解

    python 3.x 爬虫基础 python 3.x 爬虫基础---http headers详解 python 3.x 爬虫基础---Urllib详解 前言 爬虫也了解了一段时间了希望在半个月的时间内 ...

  6. RabbitMQ基础知识详解

    什么是MQ? MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.MQ是消费-生产者模型的一个典型的代表,一端往消息队列中不断写入消息,而另一端则可以读取队列中 ...

  7. jmeter 基础功能详解

    jmeter 基础功能详解 thread group:包含一组线程,每个线程独立地执行测试计划. sampler:采样器,有多种不同的sample实现,用来发起各种请求,如http请求,jdbc请求, ...

  8. hadoop基础-SequenceFile详解

    hadoop基础-SequenceFile详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.SequenceFile简介 1>.什么是SequenceFile 序列文件 ...

  9. Cisco路由技术基础知识详解

    第一部分 请写出568A的线序(接触网络第一天就应该会的,只要你掐过,想都能想出来) .网卡MAC地址长度是(  )个二进制位(16进制与2进制的换算关系,只是换种方式问,不用你拿笔去算) A.12  ...

随机推荐

  1. 【总结】Github通过Git Bash上传文件到仓库

    1-ML新文件夹连接仓库gir clone(最好用SSH不需要输入账户密码  SSH需要设置秘钥) 2-ML中设立空文件夹与项目同名(要新建  打开隐藏文件选项  文件夹内不许有文件会报错) 3-在项 ...

  2. 【实践】如何利用tensorflow的object_detection api开源框架训练基于自己数据集的模型（Windows10系统）

    如何利用tensorflow的object_detection api开源框架训练基于自己数据集的模型(Windows10系统) 一.环境配置 1. Python3.7.x(注:我用的是3.7.3.安 ...

  3. hive中left semi join 与join 的区别

    LEFT SEMI JOIN:左半开连接会返回左边表的记录,前提是其记录对于右边表满足ON语句中的判定条件.对于常见的内连接(INNER JOIN),这是一个特殊的,优化了的情况.大多数的SQL方言会 ...

  4. .gitkeep文件

    git 默认不会对空文件夹进行追踪: 但某些项目某些文件夹对整体框架是必不可少的,就算是空也得有: 怎么办呢?在这个文件夹下添加一个[.gitkeep]文件,这样就可以同步该文件夹了. (完)

  5. 第 11 篇：基于 drf-haystack 的文章搜索接口

    作者:HelloGitHub-追梦人物 在 django 博客教程中,我们使用了 django-haystack 和 Elasticsearch 进行文章内容的搜索.django-haystack 默 ...

  6. 自定义PHPstorm快捷键

    这篇随笔介绍一下PHPstorm自定义快捷键的步骤: 1.点击主菜单 File 下的 setting : 2.在弹出框中点击 Keymap : 3.之后会出现如下图所示的界面(图中所有的菜单都折叠了) ...

  7. java语言基础（四）_面向对象_类_对象_封装_构造

    面向对象 Java语言是一种面向对象的程序设计语言,而面向对象思想是一种程序设计思想,我们在面向对象思想的指引下,使用Java语言去设计.开发计算机程序. 这里的对象泛指现实中一切事物,每种事物都具备 ...

  8. 听说你还没学Spring就被源码编译劝退了？30+张图带你玩转Spring编译

    源码学习第一步,Spring源码编译 之所以写这么一篇文章是因为群里的小伙伴在编译源码时碰到了问题,再加上笔者自身正准备做一个源码的注释版本,恰好也需要重新编译一份代码,至于为什么要将源码编译到本地就 ...

  9. Netty 源码解析（四）: Netty 的 ChannelPipeline

    今天是猿灯塔“365篇原创计划”第四篇. 接下来的时间灯塔君持续更新Netty系列一共九篇 Netty 源码解析(一): 开始 Netty 源码解析(二): Netty 的 Channel Netty ...

  10. 5年前端经验小伙伴教你纯css3实现饼状图

    有一些网页中,有时候会碰到饼状图的需求,比如统计图表,进度指示器,定时器等,实现方式也是各种各样,现在也有不少现成的js库,可以直接拿来使用,方便很多.这里笔者为大家演示一种纯css实现饼状图效果的方 ...