require.js简介

最新推荐文章于 2023-10-11 23:20:26 发布

F-process

最新推荐文章于 2023-10-11 23:20:26 发布

阅读量329

点赞数

分类专栏： js 文章标签：模块化 amd

本文链接：https://blog.csdn.net/qq_15421661/article/details/77483610

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

require

项目中大都使用模块化开发，requireJS作为AMD模块开发的典范，所以有必要学习下。通过一步步利用requireJS编写demo，从而学习requireJS的一个整体开发流程以及自我使用requireJS的一些感受。

创建HTML文件

创建一个HTML文件后，导入requireJS肯定是使用<script>标签的，这个毫无疑问。然后在这个标签中有个data-main属性，它的作用呢是作为一个出入口，就是说在加载requireJS后，从data-main这个属性进入。

<!DOCTYPE html>
    <head>
        <title>require</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    </head>
    <body>
        <!--这是requireJS，data-main是作为入口模块，在这里就是js/main-->
        <script data-main="js/main" src="js/require.js"></script>
    </body>
</html>

data-main

当程序执行<script data-main=’js/main’ src=’js/require.js’></script>后，通过data-main进入main.js，去执行main.js

　/*
    require.config执行baseUrl为'js'，
    baseUrl指的模块文件的根目录，可以是绝对路径或相对路径
*/
require.config({
    baseUrl: 'js',
    paths: {
        jquery: 'jquery-1.8.2.min'
    }
});
/*
    这里通过require，来引入monkey.js，
    然后通过后面的匿名函数给他们分配参数，如这里的
    monkey-->mk
*/
require(['monkey'],function(mk) {
    mk.init();   
});

从上面代码中，可以看见main.js中包含require.config和require两个模块。

require.config的作用就是配置requireJS的一些参数，然后公共引用。

例如，上面的baseUrl，它的作用就是，以它作为基础路径，在这个路径之下，查找文件。我是将所有.js文件都放在js文件夹下的。所以，在配置这个属性后，以后的文件都是在js这个路径下查找内容了。
require的作用就是执行。比如这里我只需要monkey.js去执行，所以我就导入了monkey，然后通过mk参数，获得monkey执行后的返回值。如果有返回值，然后我们就可以对mk做相应的处理了。

/*
    define的参数为匿名函数，该匿名函数返回一个对象
*/
define(['jquery'],function($){
    var init = function(){
        console.log($.browser);
    };
    return {
        init: init
    };
});