第一次接触JS require.js模块化工具

随着网站功能的逐渐丰富，网页中的js变得越来越复杂和臃肿。原来通过脚本标签逐个导入js文件的方式已经不能满足现在的互联网开发模式。我们需要一系列复杂的需求，比如团队合作、模块重用和单元测试。

requires js是一个非常小的JavaScript模块加载框架，也是AMD规范的最佳实现者之一。最新版本的RequireJS压缩后只有14K，非常轻巧。它还可以同时与其他框架一起工作，使用RequireJS肯定会提高您前端代码的质量。

requirejs能带来什么好处？

需求的官方描述：

RequireJS是一个JavaScript文件和模块加载器。它针对浏览器内使用进行了优化，但也可以在其他JavaScript环境中使用，如Rhino和Node。使用像RequireJS这样的模块化脚本加载器将提高代码的速度和质量。

一般含义：

它可以作为浏览器中js文件的模块加载器，也可以在Node和Rhino环境中使用，balabala。这篇文章描述了requirejs的基本功能“模块化加载”。什么是模块化装载？我们将从以下几页中逐一解释。

让我们首先看一个常见的场景，并通过例子解释如何使用requirejs。

正常写入方法index.html:

！DOCTYPE html html head script type=' text/JavaScript ' src=' http : a . js '/script/head body span body/span/body/html a . js :

fun1(){ alert('它起作用')；} fun 1()；也许你更喜欢这样写。

(function(){ fun 1(){ alert('它起作用')；} fun 1()；})()第二种方法，用块作用域声明函数防止污染全局变量，本质是一样的。运行上面两个例子的时候，不知道大家有没有注意到，在执行alert的时候，html内容是空白的，也就是没有显示spanbody/span，只是点击OK之后才出现，这是JS阻挡浏览器渲染的结果。

写要求。

首先从requirejs网站下载js-require js . rogindex . html :

！DOCTYPE htmlhtml头脚本类型=' text/JavaScript ' src=' http : require . js '/脚本脚本类型=' text/JavaScript ' require([' a '])；/script/head body span body/span/body/html a . js :

define(function(){ fun 1(){ alert('它起作用')；} fun 1()；})浏览器提示‘它工作了’，表示它运行正常，但有一点不同。这一次，浏览器不是空白的，正文已经出现在页面上了。到目前为止，我们可以知道requirejs具有以下优点：

1.防止js加载阻止页面呈现。2.通过程序调用的方式加载js，防止出现以下难看的场景。

脚本类型=' text/JavaScript ' src=' http : a . js '/script script type=' text/JavaScript ' src=' http : b . js '/script script type=' text/JavaScript ' src=' http : c . js '/script script type=' text/JavaScript ' src=' http :d . js '/script script type=' text/JavaScript ' src=' http 3360d