A medida que las funciones del sitio web se enriquecen gradualmente, el JS en las páginas web se vuelve cada vez más complejo y voluminoso. La forma anterior de importar archivos JS uno a uno mediante etiquetas <script> ya no puede satisfacer el modelo actual de desarrollo de Internet; necesitamos una serie de requisitos complejos como trabajo en equipo, reutilización de módulos, pruebas unitarias, etc.

RequireJS es un framework de carga de módulos de JavaScript muy pequeño y uno de los mejores implementadores de la especificación AMD. La última versión de RequireJS, comprimida, pesa solo 14K, por lo que es muy ligero. También puede trabajar en conjunto con otros frameworks. El uso de RequireJS sin duda mejorará la calidad de tu código frontend.

¿Qué beneficios puede aportar requirejs?

Descripción oficial de 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.

Significado general:

En el navegador puede actuar como cargador de módulos para archivos JS, y también se puede usar en los entornos Node y Rhino, blablablá... Este párrafo describe la función básica de requirejs: 'carga modular'. ¿Qué es la carga modular? Lo explicaremos uno por uno en las próximas secciones.

Primero veamos un escenario común y expliquemos cómo usar requirejs mediante un ejemplo.

Forma de escritura normal

index.html:

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

a.js:

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

fun1();

Puede que prefieras escribirlo así.

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

    fun1();
})()

El segundo método utiliza el ámbito de bloque para declarar function y evitar contaminar las variables globales; en esencia, es lo mismo. Al ejecutar los dos ejemplos anteriores, no sé si lo has notado: cuando se ejecuta alert, el contenido HTML está en blanco, es decir,<span>body</span>no se muestra; solo aparece al hacer clic en Aceptar. Esto eslo que JS, al bloquear la renderización del navegador,provoca.

Escritura con requirejs

Por supuesto, primero debes ir al sitio web de requirejs para descargar el JS ->requirejs.org
index.html:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="require.js.html"></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();
})

El navegador muestra 'it works', lo que indica que se ejecutó correctamente. Pero hay una diferencia: esta vez el navegador no está en blanco; el body ya ha aparecido en la página. Hasta ahora podemos saber que requirejs tiene las siguientes ventajas:

1. Evita que la carga de JS bloquee la renderización de la página.
2. Utiliza llamadas de programa para cargar JS, evitando que aparezcan escenarios tan desagradables como los siguientes.

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

El significado específico del código y otras características se explicarán en las próximas secciones:Tutorial de requirejs, la herramienta de modularización de JS (2): Conocimientos básicos

Fuente del artículo: https://github.com/liuxey/blog/issues/1