模块化开发之AMD规范

2019-02-01 本文已影响0人这里王工头

欢迎访问我的博客https://qqqww.com，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~

1 概念

AMD(Asynchronous Module Definition)，异步模块定义：主要用于浏览器，由于该规范不是原生js支持的，使用AMD规范进行开发的时候需要引入第三方的库函数，也就是鼎鼎大名的RequireJS

2 RequireJS

RequireJS主要解决了两个问题：

多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器

js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长

2.1 定义模块

RequireJS定义了一个define函数，用来定义模块

语法：

define([id], [dependencies], factory)

参数：

id：可选，字符串类型，定义模块标识，如果没有提供参数，默认为文件名
dependencies：可选，字符串数组，AMD 推崇依赖前置，即当前模块依赖的其他模块，模块依赖必须在真正执行具体的factory方法前解决
factory：必需，工厂方法，初始化模块需要执行的函数或对象。如果为函数，它只被执行一次。如果是对象，此对象会作为模块的输出值

// mod1.js
define('mod1',[],function(){
    // ...
    return {
        // ...
    }
})

// mod2.js
define('mod2', ['mod1'], function (mod1) {
    // ...
    return {
        // ...
    }
})

2.2 模块的加载

加载模块需要使用require()函数

语法：

require([dependencies], function(){})

参数：

dependencies：字符串数组，该模块的依赖
function：Function类型，所依赖的模块都加载成功之后，回调，依赖的模块会以参数的形式传入该函数，从而在回调函数内部就可以使用这些模块

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script src="require.js"></script>
        <script type="text/javascript" src="mod1.js"></script>
        <script type="text/javascript" src="mod2.js"></script>
        <script type="text/javascript">
            require(['mod1','mod2'],function(mod1, mod2){
                // ...
            });
        </script>
    </body>
</html>

require()函数加载依赖模块是异步加载，这样浏览器就不会失去响应

3 AMD模式开发

AMD模式开发的简单三层结构（基础库/UI层/应用层）：

定义无依赖的模块

// base.js
define(function () {
    return {
        bas: function (sou, tar) {
            // ...
        }
    }
})

定义有依赖的模块

// ui.js
define(['base'], function (base) {
    return {
        initPage: function () {
            // ...
        }
    }
})

// page.js
define(['data', 'ui'], function (data, ui) {
    // ...
})

定义数据对象模块

// data.js
define({
    users: [],
    numbers: []
})

具名模块

define('index', ['data','base'], function(data, base) {
    // ...
})

包装模块

define(function(require, exports, module) {
    var base = require('base');
    exports.show = function() {
        // todo with module base
    }
})

dependencies是可选参数，当用户不提供该参数时，实现 AMD的框架应提供默认值为[“require”，”exports”，“module”]

模块化开发之AMD规范

1 概念

2 RequireJS

2.1 定义模块

2.2 模块的加载

3 AMD模式开发

4 文章推荐

5 参考文章

猜你喜欢

热点阅读