requirejs初体验

最新推荐文章于 2022-11-04 22:58:27 发布

原创最新推荐文章于 2022-11-04 22:58:27 发布 · 159 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#requirejs #define #require #exports #path

web 专栏收录该内容

52 篇文章

订阅专栏

本文介绍RequireJS，一种遵循AMD规范的模块化编程框架，用于实现浏览器端的异步加载和模块化编程。通过示例展示如何使用RequireJS定义和加载模块，以及与jQuery等框架的集成。

requirejs是一个模块化编程框架，从名字就可以看出，是javascript编写的。他遵循amd规范，即Asynchronous Module Define异步加载定义模块规范，定义模块化，使用了define关键字，语法如下：

define('moduleName',function(require,module){ })

其中moduleName是给模块取一个别名，这个是可以省略的，默认模块就是js文件本身的名字，如math.js，我们的模块名字就是math，无需再在math.js文件中使用define("moduleName")的方式再定义一个名字。

当我们使用模块的时候，需要使用require关键字，语法如下：

require(["module-a","module-b"],function(a,b){ })

如果一个模块就是一个可以执行的程序，可以直接通过require(["module-a"])的方式让他运行。

requirejs主要使用在浏览器端的模块化编程，为了体现它的异步加载，我们来看一个简单的例子，源代码如下所示：

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>hello</title>
   <script type="text/javascript" src="a.js">

   </script>
  </head>
  <body>
        <h2>helloworld.</h2>
  </body>
</html>

a.js

(function(){
    function fun1(){
        alert("it works.");
    }

    fun1();
})();

这个示例是一个很简单的页面加载的示例，html在进行渲染的过程中，会从<html>标签体开始，直到</html>标签体结束会依次加载页面中的脚本，样式，页面元素，如果脚本写在header中，那么会阻塞后面的渲染，直到他加载完成，如果脚本中会执行同步操作，还需要等待同步操作完成，才能接着渲染页面。运行以上示例，动态截图如下所示：

运行示例的时候，在弹窗的时候，页面是空白的，只有当我们将弹窗关闭，页面才出现了元素。这就是我们同步加载javascript带来的一个问题。

我们引入requirejs，然后将弹窗操作重新编写，作为一个模块，再引入到页面中，代码如下所示：

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>hello</title>
    <script type="text/javascript" src="./require.js"></script>
    <script type="text/javascript">
        require(["./b"]);
    </script>
  </head>
  <body>
        <h2>helloworld.</h2>
  </body>
</html>

b.js

define(function(require,exports){
    function fun1(){
        alert("itworks.");
    }
    fun1();
});

再次打开页面，查看效果，这时候运行的动态截图如下所示：

当出现弹窗的时候，页面的元素已经渲染，而javascript脚本执行是在页面渲染之后，就好比我们使用jQuery，使用了

$(function(){

// todo

}) ;

这样的效果。这个效果只是说明了requirejs作为异步加载的一个好处，他的语法只有少数的几个，当我们定义模块的时候使用define，当我们需要用到某个模块的时候使用require。

其实requirejs也可以和其他框架一起使用，比如jQuery,underscore，可以把jQuery当做一个模块。我们看jQuery的源码会发现，jQuery其实默认支持amd规范，所以可以很自然的与requirejs结合使用。

如下所示，是一个很简单的示例，我们通过引入jQuery模块，然后通过jQuery的api来操作文档。示例中，我们还通过

require.config({

paths:{ "jquery":"./lib/jquery"}

}) ;

这段代码是对模块进行设置别名，我们不用再引入jQuery的时候加上那么长的路径了。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>requirejs</title>
	<script type="text/javascript" src="./require.js"></script>
	<script type="text/javascript">
		require.config({
			paths:{
				'jquery':'./lib/jquery'
			}
		});
		require(['jquery'],function($){
			$('#root').html('jQuery is a javascript framework.');
		});
	</script>
</head>
<body>
	<h2>hello,world.</h2>
	<div id="root"></div>
</body>
</html>

运行结果：