Tutorial de herramientas de modularización JS requirejs (2): Conocimientos básicos

Artículo anterior:Tutorial de herramientas de modularización JS requirejs (1): Primeros pasos con requirejsIntrodujimos requirejs de una manera muy sencilla; este artículo explicará algunos conocimientos básicos sobre requirejs, incluyendo el uso de la API, etc.

API básica

require define tres variables: define, require, requirejs, donde require === requirejs; generalmente es más breve usar require.

define, como su nombre indica, es una API para definir un módulo.
require carga los módulos de dependencia y ejecuta la función callback después de cargarlos.

a.js del artículo anterior:

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

    fun1();
})

Se define un módulo mediante la función define, y luego en la página se usa:

require(["js/a"]);

para cargar el módulo (Ten en cuenta que las dependencias en require son un array; incluso si solo hay una dependencia, debes definirlas usando un array.), el segundo parámetro de la API require es callback, una función que se usa para manejar la lógica después de la carga, por ejemplo:

require(["js/a"],function(){
    alert("load finished");
})

Cargar archivos

En los ejemplos anteriores, los módulos cargados eran js locales, pero en la mayoría de los casos, el JS que una página web necesita cargar puede provenir de un servidor local, de otros sitios web o de un CDN, por lo que no se puede cargar de esa manera. Tomemos como ejemplo la carga de una biblioteca jquery:

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"]   
    }
})
require(["jquery","js/a"],function($){
    $(function(){
        alert("load finished");  
    })
})

Aquí se trata derequire.config，require.configse usa para configurar la ubicación de carga del módulo; en términos simples, se le da al módulo un nombre más corto y fácil de recordar, por ejemplo, marcar la dirección de la biblioteca jquery de Baidu comojquery, de modo que al usar require solo necesites escribir["jquery"]para poder cargar ese js; también podemos configurar los js locales de esta manera:

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"],
        "a" : "js/a"   
    }
})
require(["jquery","a"],function($){
    $(function(){
        alert("load finished");  
    })
})

La configuración mediante paths hace que los nombres de nuestros módulos sean más concisos. paths también tiene una función importante: permite configurar múltiples rutas. Si la biblioteca CDN remota no se carga correctamente, se puede cargar la biblioteca local, como:

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
        "a" : "js/a"   
    }
})
require(["jquery","a"],function($){
    $(function(){
        alert("load finished");  
    })
})

Con esta configuración, cuando el jquery de Baidu no se cargue correctamente, se cargará el jquery del directorio js local.

Al usar requirejs, al cargar módulos no es necesario escribir.jsla extensión; por supuesto, tampoco se puede escribir la extensión.
En la función callback del ejemplo anterior encontramos$el parámetro, que es lajqueryvariable de salida del módulo dependiente. Si dependes de varios módulos, puedes escribir varios parámetros en orden para usarlos:

require(["jquery","underscore"],function($, _){
    $(function(){
        _.each([1,2,3],alert);
    })
})

Si un módulo no genera un valor de variable, entonces no la tiene; por lo tanto, intenta poner los módulos que sí generan salida al frente para evitar confusiones por una mala posición.

Configuración global

En los ejemplos anteriores aparece repetidamenterequire.configla configuración. Si se añade la configuración en cada página, sin duda resultaría muy poco elegante. requirejs proporciona una función llamada "datos principales". Primero creamos un main.js:

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
        "a" : "js/a"   
    }
})

Luego, en la página, usamos requirejs de la siguiente manera:

<script data-main="js/main" src="js/require.js.html"></script>

Expliquemos: la etiqueta script que carga el script de requirejs ha añadidodata-mainel atributo. El js especificado por este atributo se procesará después de cargar require.js. Ponemosrequire.configla configuración dedata-maindespués de añadirla, podemos hacer que cada página use esta configuración, y luego en las páginas se puede usar directamenterequirepara cargar todos los nombres de módulos cortos.

data-mainHay otra función importante: cuando la etiqueta script especifica el atributo data-main, require usará por defecto el js especificado por data-main como ruta raíz. ¿Qué significa esto? Como eldata-main="js/main"después de configurarlo, al usarrequire(['jquery'])(sin configurar los paths de jquery), require cargará automáticamente el archivo js/jquery.js en lugar de jquery.js; es equivalente a la configuración predeterminada:

require.config({
    baseUrl : "js"
})

Módulos de terceros

A través derequirelos módulos cargados generalmente deben cumplir con la especificación AMD, es decir, usardefinepara declarar el módulo. Pero a veces es necesario cargar js que no cumple con la especificación AMD, y en ese momento se necesita otra función: shim. Explicar shim también es difícil de entender; shim se traduce directamente como "almohadilla", y de hecho tiene ese sentido. Por ahora lo uso principalmente en dos lugares.
1. Salida de módulos no AMD: convertir (almohadillar) los módulos AMD no estándar en módulos utilizables. Por ejemplo, en versiones antiguas de jquery no se heredaba la especificación AMD, por lo que no se puede hacer directamente require["jquery"]; en este caso se necesita shim. Por ejemplo, si quiero usar la biblioteca underscore, pero no implementa la especificación AMD, podemos configurarlo así:

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        }
    }
})

Con esta configuración, podemos hacer referencia al módulo underscore en otros módulos:

require(["underscore"], function(_){
    _.each([1,2,3], alert);
})

Módulos no AMD en forma de complementos: a menudo usamos complementos de jquery, y estos complementos básicamente no cumplen con la especificación AMD, como el complemento jquery.form. En este caso, necesitamos "almohadillar" (poner shim) el complemento form dentro de jquery:

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        },
        "jquery.form" : {
            deps : ["jquery"]
        }
    }
})

También se puede abreviar así:

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        },
        "jquery.form" : ["jquery"]
    }
})

Después de esta configuración, podemos usar el jquery con el complemento cargado.

require.config(["jquery", "jquery.form"], function($){
    $(function(){
        $("#form").ajaxSubmit({...});
    })
})

Bien, la configuración básica de requirejs es más o menos esto; hay algunas funciones extendidas que se mencionarán en artículos posteriores.

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