当前位置: 代码迷 >> 综合 >> RequireJS 从陌生到掌握
  详细解决方案

RequireJS 从陌生到掌握

热度:0   发布时间:2024-01-15 16:34:18.0

RequireJS是一种前端的js模块管理技术,对前端的复杂的模块管理有很大的帮助。


RequireJS的官网地址:http://www.requirejs.org/


RequireJS是用来做什么的呢?

它是用来管理客户端JS的模块化的一种处理技术,适用于客户端有大量的JS代码需要进行整合管理的情况。

RequireJS在客户端可以做什么呢?
1>管理JS的引入和依赖
2>定义JS模块化处理
3>集成JS模块到指定的页面

首先建立如下图所示的文件组织结构:
RequireJS_demo
|-----index.html
|-----js
|------requireJS.js
|------main.js
|------jquery-2.1.4.js
            |------lib
                    |------testNodependModule.js
                    |------testDependModule.js

使用样例
1.导入与集成
RequireJS做出的改变首先体现在页面的集成上,
在index.html的body中引入它:
<script type="text/javascript" src="js/requireJS.js" data-main="js/main"></script>
Note: data-main指定的是requireJS的配置文件,这个文件必须手动创建。

这个配置文件main.js包含的内容如下所示:
require.config({baseUrl:"./js",paths:{jquery:"jquery-2.1.4"}});require(["jquery"],function(){alert("hello,jquery!");});

当正确引入配置文件之后并在浏览器打开index.html会发现,在index.html的head部分引入两个个JS文件:
main.js ; jquery-2.1.4.js
配置文件中的baseUrl指定的是引入后续js文件的起始路径。paths:指定的是引入文件的路径配置和引用名称。导入配置在paths中的文件到前端页面需要显式的调用require来引入。

2.定义JS模块
对于对外部没有依赖或者引用的JS模块可以使用如下的定义:
step 1:在lib文件夹下建立testNodependModule.js
step 2:在这个JS文件中定义如下内容
define(function(){console.log("loading no depend module");});

这样一个无依赖模块就定义好了。

对于对外部文件有依赖或者引用的JS模块可以使用如下的定义:
step 1:在lib文件夹下建立testDependModule.js
step 2:在这个JS文件中定义如下内容
define(["jquery"],function($){$("#module").html("load depend module");});

有依赖的模块定义完成。

3.集成JS模块到指定的页面
首先将定义好的模块注册到require.config的paths中,如下所示:
require.config({baseUrl:"./js",paths:{jquery:"jquery-2.1.4",tndm:"lib/testNodependModule",tdm:"lib/testDependModule"}});

然后在main.js中使用require引入,如下所示:
require(["tndm"]);require(["tdm"],function(){console.log("loading");});

在浏览器中刷新index.html就可以看到效果,浏览器建议使用Chrome,FireFox.