requireJS

最新推荐文章于 2024-10-06 10:05:23 发布

斗弟

最新推荐文章于 2024-10-06 10:05:23 发布

阅读量424

点赞数 1

分类专栏：其他文章标签： requireJS规范

本文链接：https://blog.csdn.net/L_Lintellect/article/details/100997806

版权

其他专栏收录该内容

1 篇文章 0 订阅

订阅专栏

模块化开发之requireJS规范

require官网

require中文网

什么情况用require.js?

当一个页面中过多的<script src=""></script>，js文件加载是同步的，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长，而且如果各个模块（js）之间存在相互引用的依赖关系，引入得顺序不对就会报错，可以考虑用require.js了。

require.js的作用主要解决两个问题：

实现js文件的异步加载，避免网页失去响应；
管理模块之间的依赖性，便于代码的编写和维护。

使用方法

第一步：引入require.js

    <script src ="require.js" data-main ="main"></script>

其中data-main属性的作用是，指定网页程序的主模块，main.js文件(引入时可省略后缀)。main.js就是我们要写的js。名字自己命名的。

第二步：配置require.config,别担心，非常简单。

配置require.config就是写各模块的依赖关系而已。看实例：

    //config.js
    require.config({
    'paths': {
        'jq': '../lib/jquery-1.10.1.min',
        'idx': 'index'
    },
    'shim': {//设置依赖关系，idx就依赖于common
        'idx': ['common'],
        'common': ['jq']
    }
});

paths 是配置路径的参数，键值对的形式，上述为例，jq是我取的别名，指向的路径是../lib/jquery-1.10.1.min，设置短路径(方便后期使用):如果是以require所在文件夹为基础路径，后面的js文件不需要后缀，（推荐这样写）。有些太短的就没必要取别名，像上面的index.js，一般放在js文件夹外的js文件才需要配置短路径。
shim配置依赖关系，也是键值对的形式存在，其中表示，index.js依赖common.js,common.js依赖于jq。
总结：把需要用到的模块，先引入，再声明依赖关系就搞定了，这样传说中的config配置就做好了，接下来就是去用了。

第三步：指定网页程序的主模块，别担心，也很简单

我的主模块是main.js，名字自己命名的。

main.js示例

      //main.js-----
    requirejs(['common','moduleA','moduleB','moduleC'],function(){
        //这里的代码等common，moduleA，moduleB，moduleC模块都加载完成后执行
    });