博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript模块化编程之AMD
阅读量:5105 次
发布时间:2019-06-13

本文共 1764 字,大约阅读时间需要 5 分钟。

简单的说一下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://www.cnblogs.com/lalalagq/p/9940603.html

你可能感兴趣的文章
MySQL表的四种分区类型
查看>>
CLR 关于强命名程序集 .
查看>>
[BZOJ 3489] A simple rmq problem 【可持久化树套树】
查看>>
STM32单片机使用注意事项
查看>>
swing入门教程
查看>>
好莱坞十大导演排名及其代表作,你看过多少?
查看>>
Loj #139
查看>>
StringBuffer是字符串缓冲区
查看>>
hihocoder1187 Divisors
查看>>
java入门
查看>>
Spring 整合 Redis
查看>>
Azure 托管镜像和非托管镜像对比
查看>>
JSP:Cookie实现永久登录(书本案例)
查看>>
js window.open 参数设置
查看>>
032. asp.netWeb用户控件之一初识用户控件并为其自定义属性
查看>>
linux--GCC用法
查看>>
Ubuntu下安装MySQL及简单操作
查看>>
OWIN是什么?
查看>>
前端监控
查看>>
clipboard.js使用方法
查看>>