Require.js初探（一）

最新推荐文章于 2019-05-16 18:35:32 发布

JLinZen

最新推荐文章于 2019-05-16 18:35:32 发布

阅读量492

点赞数

分类专栏： Javascript 文章标签： javascript amd

本文链接：https://blog.csdn.net/jl244981288/article/details/43732337

版权

Javascript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

AMD 简介
前端开发在近一两年发展的非常快，JavaScript 作为主流的开发语言得到了前所未有的热捧。大量的前端框架出现了，这些框架都在尝试着解决一些前端开发中的共性问题，但是实现又不尽相同。在这个背景下，CommonJS 社区诞生了，为了让前端框架发展的更加成熟，CommonJS 鼓励开发人员一起在社区里为一些完成特定功能的框架制定规范。AMD（Asynchronous Module Definition）就是其中的一个规范。
传统 JavaScript 代码的问题
让我们来看看一般情况下 JavaScript 代码是如何开发的：通过script标签来载入 JavaScript 文件，用全局变量来区分不同的功能代码，全局变量之间的依赖关系需要显式的通过指定其加载顺序来解决，发布应用时要通过工具来压缩所有的 JavaScript 代码到一个文件。当 Web 项目变得非常庞大，前端模块非常多的时候，手动管理这些全局变量间的依赖关系就变得很困难，这种做法显得非常的低效。
AMD 的引入
AMD 提出了一种基于模块的异步加载 JavaScript 代码的机制，它推荐开发人员将 JavaScript 代码封装进一个个模块，对全局对象的依赖变成了对其他模块的依赖，无须再声明一大堆的全局变量。通过延迟和按需加载来解决各个模块的依赖关系。模块化的 JavaScript 代码好处很明显，各个功能组件的松耦合性可以极大的提升代码的复用性、可维护性。这种非阻塞式的并发式快速加载 JavaScript 代码，使 Web 页面上其他不依赖 JavaScript 代码的 UI 元素，如图片、CSS 以及其他 DOM 节点得以先加载完毕，Web 页面加载速度更快，用户也得到更好的体验。
CommonJS 的 AMD 规范中只定义了一个全局的方法，如清单 1 所示。
清单 1. AMD 规范
define(id?, dependencies?, factory);
该方法用来定义一个 JavaScript 模块，开发人员可以用这个方法来将部分功能模块封装在这个 define 方法体内。
id 表示该模块的标识，为可选参数。
dependencies 是一个字符串 Array，表示该模块依赖的其他所有模块标识，模块依赖必须在真正执行具体的 factory 方法前解决，这些依赖对象加载执行以后的返回值，可以以默认的顺序作为 factory 方法的参数。dependencies 也是可选参数，当用户不提供该参数时，实现 AMD 的框架应提供默认值为 [“require”，”exports”，“module”]。
factory 是一个用于执行改模块的方法，它可以使用前面 dependencies 里声明的其他依赖模块的返回值作为参数，若该方法有返回值，当该模块被其他模块依赖时，返回值就是该模块的输出。
CommonJS 在规范中并没有详细规定其他的方法，一些主要的 AMD 框架如 RequireJS、curl、bdload 等都实现了 define 方法，同时各个框架都有自己的补充使得其 API 更实用。

下面：我将举一个很简单的require.js的模块化使用：
首先看我这个demo的文件路径：

    <a href="https://img-blog.csdn.net/20150211115148526"></a>

模块一：student.js

define(function(){
    return {
        createStudent: function(name,gender){
            return {
                name: name,
                gender: gender
            };
        }
    };
});

模块二：class.js

    define(function(){
        var allStudents = [];
        return {
            classID: '001',
            department: 'computer',
            addToClass: function(student) {
                allStudents.push(student);
            },
            getClassSize: function() {
                return allStudent.length;
            }
        };
    });

模块三： manager.js 依赖模块一、二

    define(['student','class'],function(student,cls){
        return {
            addNewStudent: function(name,gender) {
                cls.addToClass(student.createStudent(name,gender));
            },
            getClassSize: function() {
                return cls.getClassSize();
            }
        };
    });

测试：main.js

    // require(['student','class'],function(student,cls){
    //  cls.addToClass(student.createStudent('jack','male'));
    //  cls.addToClass(student.createStudent('lucy','female'));
    //  console.log(cls.getClassSize());
    // });

    require(['manager'],function(m){
        m.addNewStudent('jack','male');
        m.addNewStudent('lucy','female');
        console.log(m.getClassSize());
    });

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <script type="text/javascript" src="require.js" data-main="main"></script>/**记得引进require.js**/
        <title>require学习</title>
    </head>
    <body>
        <p>请查看控制台</p>
    </body>
    </html>

这是我自己学习AMD，require.js的开始，希望跟大家一起交流学习，共同进步！

JLinZen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Require.js初探（一）

AMD 简介前端开发在近一两年发展的非常快，JavaScript 作为主流的开发语言得到了前所未有的热捧。大量的前端框架出现了，这些框架都在尝试着解决一些前端开发中的共性问题，但是实现又不尽相同。在这个背景下，CommonJS 社区诞生了，为了让前端框架发展的更加成熟，CommonJS 鼓励开发人员一起在社区里为一些完成特定功能的框架制定规范。AMD（Asynchronous M
复制链接

扫一扫

专栏目录