初尝RequireJs

最新推荐文章于 2021-02-24 08:49:25 发布

王巧

最新推荐文章于 2021-02-24 08:49:25 发布

阅读量385

点赞数

分类专栏： js 文章标签： requireJs

本文链接：https://blog.csdn.net/wangqiao603602/article/details/52688323

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

关于RequireJs：

中文官方网站：http://www.requirejs.cn/

使用目的：JS代码模块化，不用在html页面一次性外联一长串JS；还有就是让代码看起来高大上一点。。。

使用require.js之前：

1.新建文件夹requireJs-excise；

2.requireJs-excise下新建demo.html文件和src文件夹；

3.src文件夹下新建js文件a.js

demo.html：

<pre name="code" class="html"><pre name="code" class="html"><!DOCTYPE html>
<html>
	<head>
		<meta charset="en">
		<script src="src/a.js" ></script>
	</head>
	<body>
		hello world!
	</body>
</html>

a.js:

alert("it work!")

运行demo.html，先弹出 “”it work!”；页面上才渲染出 hello world字样；也就是说呢，a.js阻塞了html的渲染。

所以在前端优化教程里，前辈们都会指出，要把加载js的代码放到html页面的底部

<!DOCTYPE html>
<html>
	<head>
		<meta charset="en">
	</head>
	<body>
		hello world!
	</body>
        <script src="src/a.js"></script>
</html>

这样子，页面上就会先出现"hello world",然后弹出框："it work!";但是

在alert框点击确定之前，这边会转圈圈。

使用require.js：

src文件夹下新建 main.js

require(["a"],function(){
	
})

a.js

define(function(){
	alert("it work");
})

demo.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="en">
		<script src="src/require.min.js" data-main="src/main"></script>
	</head>
	<body>
		hello world!
	</body>
</html>

运行demo.html。发现网页没有被a.js里的alert阻塞渲染。。。。。而且，前面也没有转圈圈；