[油猴脚本开发指南]AMD简单介绍

李恒道

介绍

AMD全程Asynchronous Module Definition，异步模块定义
关于为什么选择Web模块
AMD官方介绍如下

THE PROBLEM
Web sites are turning into Web apps
Code complexity grows as the site gets bigger
Assembly gets harder
Developer wants discrete JS files/modules
Deployment wants optimized code in just one or a few HTTP calls

主要解决的问题有
过去的Web逐渐成为Web应用
随着网站的增大，复杂性也逐渐增加
组合代码变的更难
开发者想要将Js代码打散
部署想要最好的代码分割方式在一个或多个http调用中

解决方案

SOLUTION
Front-end developers need a solution with:

Some sort of #include/import/require
Ability to load nested dependencies
Ease of use for developer but then backed by an optimization tool that helps deployment
解决方案
前端开发人员需要一个解决方案
一些api，如include/import/requre
有能力去加载嵌套依赖
开发者可以简单的使用，同时被帮助部署网站的优化工具所支持

更多内容可以参考
https://requirejs.org/docs/why.html

使用

AMD是一种规范，而Require.js属于该规范的实现
我们学习的就是Require.js
我们必须在页面引入Require.js
如果想要开始使用
首先使用的是require函数
第一个参数是依赖的模块数组
第二个是作为回调函数的引用
如

require(['jquery'],function($){
    $(....)
})

在该示例中，如果应用程序有依赖项，则依赖项也会被同时加载
当所有js都在同一目录的时候，这是最简单的配置，但是可以正常运行
模块名即代表文件名
如果你想以其他方式或从CDN加载脚本
那么我们需要使用RequireJs的配置项
配置只需要使用require.config
如

require.config({
    baseUrl:'path',
    paths:{
    'jquery':'libs/jquery'
    }
})

我们只需要简单了解即可，因为现代前端开发已经很少使用到require了
当我们使用require()引用了依赖的时候
会引用对应的模块
而模块怎么定义呢？
使用define
当我们在require引入对应的模块的时候
如果没有进行require.config配置
会寻找对应的js文件
js内使用define函数来定义模块
define有两种方式

define(function(require){
    ...
    return xxx
})

当没有依赖输入的时候，会传入require函数，让我们可以在define内引入其他依赖项
同时return 返回的会作为模块的结果
但是要注意
此时的require是类似于我们上方的require
在调用require函数后不会停留，会一直执行到return
直到require的模块得到结果后，会调用require函数内部的回调函数
如

define(function(require){
    require([xxx],(xxx)=>{})
    ...
    return aaa
})

会先返回aaa
当xxx加载完毕后执行require的回调函数
同时还有一个更简单办法

defined([xxx],function(xxx){
})

与require近乎一致
相信聪明的你已经懂了
那么这节课我们就学习了AMD模块化

结语

撒花~

引用

https://zhuanlan.zhihu.com/p/353491456
https://juejin.cn/post/6844903576309858318
https://requirejs.org/docs/whyamd.html