将requirejs进行到底（一）

时间 2019-11-11

原文原文链接

随着网站功能逐渐丰富，网页中的js也变得愈来愈复杂和臃肿，原有经过script标签来导入一个个的js文件这种方式已经不能知足如今互联网开发模式，咱们须要团队协做、模块复用、单元测试等等一系列复杂的需求。javascript

RequireJS是一个很是小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K，堪称很是轻量。它还同时能够和其余的框架协同工做，使用RequireJS必将使您的前端代码质量得以提高。html

requirejs能带来什么好处

官方对requirejs的描述：前端

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.java

大体意思：git

在浏览器中能够做为js文件的模块加载器，也能够用在Node和Rhino环境，balabala...。这段话描述了requirejs的基本功能"模块化加载"，什么是模块化加载？咱们要从以后的篇幅中一一解释github

先来看一段常见的场景，经过示例讲解如何运用requirejs浏览器

正常编写方式

index.html:框架

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="a.js"></script>
    </head>
    <body>
      <span>body</span>
    </body>
</html>

　　a.js:模块化

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

fun1();

　　可能你更喜欢这样写requirejs

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

    fun1();
})()

第二种方法使用了块做用域来申明function防止污染全局变量，本质仍是同样的，当运行上面两种例子时不知道你是否注意到，alert执行的时候，html内容是一片空白的，即<span>body</span>并未被显示，当点击肯定后，才出现，这就是JS阻塞浏览器渲染致使的结果。

requirejs写法

固然首先要到requirejs的网站去下载js -> requirejs.rog
index.html:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="require.js"></script>
        <script type="text/javascript">
            require(["a"]);
        </script>
    </head>
    <body>
      <span>body</span>
    </body>
</html>

　　a.js:

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

    fun1();
})

浏览器提示了"it works"，说明运行正确，可是有一点不同，此次浏览器并非一片空白，body已经出如今页面中，目前为止能够知道requirejs具备以下优势：

防止js加载阻塞页面渲染
使用程序调用的方式加载js，防出现以下丑陋的场景

<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>
<script type="text/javascript" src="d.js"></script>
<script type="text/javascript" src="e.js"></script>
<script type="text/javascript" src="f.js"></script>
<script type="text/javascript" src="g.js"></script>
<script type="text/javascript" src="h.js"></script>
<script type="text/javascript" src="i.js"></script>
<script type="text/javascript" src="j.js"></script>

文章来源：https://github.com/liuxey/blog/issues/1