El método de carga predeterminado de JS a través de las etiquetas de script se sincroniza, es decir, después de que se carga JS en la primera etiqueta de script, la segunda comienza a cargarse, y así sucesivamente, hasta que se cargan todos los archivos JS. Además, las dependencias de JS deben garantizarse a través del orden de script; Y durante la carga de JS, el navegador dejará de responder, lo que afecta en gran medida la experiencia del usuario. Según esto, muchas soluciones a JS han aparecido y cargado, requerir que JS es una de ellas.
Los módulos cargados por requisitos son generalmente módulos que cumplen con los estándares AMD, es decir, módulos que definen con métodos y variables expuestos definir y retorno con Ruturn; Las necesidades también pueden cargar módulos que vuelan los estándares AMD, pero es más problemático y no estará involucrado esta vez.
Requerir la carga JS Main implica los siguientes aspectos:
demostración de HTML
<script src = "js/request.js" Derfer async = "true" data-main = "js/main"> <!-Dé la ruta requerida, declara como una carga de async, especifique el módulo de entrada como main.js (se puede omitir)->>
Main.js
require.config ({// declare la ubicación de las rutas del módulo: {"jQuery": "libs/jQuery" "Login": "Libs/Login"} // o use BaseUrl para especificar la ruta de todos los módulos BaseUrl: "JS/Libs"}); // use requerir para cargar el módulo. El primer parámetro es una matriz, es decir, el módulo a cargar se cargará en el orden de la matriz; El segundo es una función de devolución de llamada, que se ejecuta después de que se complete toda la carga. requirir (['jQuery', 'login'], function ($, login) {alert ("jQuery and Login Module Load Success!"); Login.do_login (); // Some Else});Definición del módulo de inicio de sesión en línea con AMD
// Definición Definición de jQuery (['jQuery'], function ($) {// Algunas definiciones funcionan do_login () {$ .post ('/sessions/create', {uname: $ ("#uname"). Val (), contraseña: $ ("#contraseña"). Val ()}, function (data) {// some}); regreso {do_login: do_login }); // Definición Definición de otros módulos (function () {// algunas definiciones return {xx: xx};});Rails no aplica un cargador JS. Por un lado, la nueva versión de Rails Asset Pipe empaquetará todos los archivos JS en un archivo JS, sin un estado de carga JS múltiple. Por otro lado, Turbolink utiliza la llamada tecnología PJAX con elogios y críticas mixtas. El enlace predeterminado se cambia al método AJAX, y solo obtiene la parte BOD del HTML y la parte del cabezal permanece sin cambios, por lo que la carga de JS solo se realiza cuando el sitio web se abre por primera vez.
Caso 1: Carga de archivos JavaScript
<script src = "./ js/require.js"> </script> <script> requerir (["./ js/a.js", "./js/b.js"], function () {myFunctiona (); myFunctionB ();}); </script>El parámetro de la matriz de cadenas en el método requerido puede permitir diferentes valores. Cuando la cadena termina con ".js", o comienza con "/", o es una URL, los requiradores pensarán que el usuario está cargando directamente un archivo JavaScript. De lo contrario, cuando la cadena es similar a "My/Module", pensará que este es un módulo, y cargará el archivo JavaScript donde el módulo correspondiente se encuentra con la base y las rutas configuradas por el usuario. La sección de configuración se describirá en detalle más adelante.
Cabe señalar aquí que, de manera predeterminada, requestJS no garantiza que MyFunctionA y MyFunctionB deben ejecutarse después de cargar la página. Cuando es necesario asegurarse de que el script se ejecute después de cargar la página, RequestJS proporciona un módulo DOMREADY independiente. Debe descargar este módulo desde el sitio web oficial de Requirjs, que no está incluido en RequestJS. Con el módulo DomReady, el código en el caso 1 está ligeramente modificado y la dependencia de DOMREWE.
Caso 2: ejecutar JavaScript después de que se cargue la página
<script src = "./ js/request.js"> </script> <script> require (["DomReady!", "./js/a.js", "./js/b.js"], function () {myFunctiona (); myFunctionB ();}); </script>Después de ejecutar el código del caso 2, a través de Firebug, puede ver que los requisitos insertarán una etiqueta <script> en la página actual como A.JS y B.JS declaran respectivamente una etiqueta <script> para descargar archivos JavaScript de forma asíncrona. El atributo Async es actualmente compatible con la mayoría de los navegadores, lo que indica que el archivo JS en esta etiqueta <script> no bloqueará la descarga de otro contenido de la página.
Caso 3: <script> Insertado por requestjs
<script type = "text/javaScript" charset = "utf-8" async = "" data-requireContext = "_" data-requiremodule = "js/a.js" src = "js/a.js"> </script>
Use requerir JavaScript módulos para definir los módulos JavaScript
Lo diferente del código de JavaScript tradicional aquí es que no requiere acceso a variables globales. El diseño modular permite que el código JavaScript pase estas "variables globales" como parámetros a través de dependencias cuando necesita acceder a "variables globales", y evitar acceder o declarar variables o funciones globales en la implementación, evitando efectivamente una gran cantidad de gestión de espacio de nombres y compleja.
Como se indica en la especificación AMD de CommonJS, la definición de módulos JavaScript se implementa a través del método Definir.
Primero veamos un ejemplo simple. Este ejemplo crea objetos de alumnos en el programa principal y coloca a los objetos del alumno en la clase definiendo un módulo de estudiante y un módulo de clase.
Caso 4: Módulo de estudiante, Student.js
Define (function () {return {createStudent: function (name, gender) {return {name: name, gender: gender};}};}); });Caso 5: Módulo de clase, class.js
define (function () {var allStudents = []; return {classID: "001", departamento: "computadora", addToclass: function (student) {allstudents.push (student);}, getClassSize: function () {return Allstudents.length;}};});Caso 6: Programa principal
requirir (["js/student", "js/class"], function (student, clz) {clz.addtoclass (student.createstudent ("jack", "masculino")); clz.addtoclass (student.createstudent ("rosa", "femenino"));El módulo de estudiante y el módulo de clase son módulos independientes. Definamos un nuevo módulo. Este módulo se basa en los módulos de estudiante y de clase, de modo que la lógica de la parte del programa principal también se pueda envolver.
Caso 7: Módulo de gerente que se basa en módulos de estudiante y clase, gerente.js
Define (["js/student", "js/class"], function (student, clz) {return {addnewStudent: function (name, gender) {clz.addtoclass (student.ceateStudent (name, gender));}, getMyClassSize: function () {return clz.getClassSize ();};};};};};Caso 8: Nuevo programa principal
requirir (["js/gerente"], function (gerente) {gerener.addnewstudent ("jack", "masculino"); gerente.addnewstudent ("rosa", "mujer"); console.log (gerente.getMyClassSize ()); // output 2});A través del ejemplo de código anterior, hemos entendido claramente cómo escribir un módulo, cómo se usa este módulo y cómo definir las dependencias entre los módulos. Todavía hay algunos consejos para usar:
Intente no proporcionar la identificación del módulo. Como se indica en la especificación AMD, esta ID es una opción. Si se proporciona, la capacidad de migración del módulo se verá afectada en la implementación de requestJS, y los cambios de ubicación del archivo hará que la ID se modifique manualmente.
Cada archivo JavaScript define solo un módulo. El algoritmo de búsqueda para el nombre del módulo y la ruta del archivo determina que este método es óptimo. El optimizador optimizará múltiples módulos y archivos. Evite las dependencias circulares de los módulos. Si es realmente imposible de evitar, puede agregar dependencias de los módulos "requerir" al módulo y usarlos directamente en el código.
Requerir ("DependencyModuleName")Configurar requeríajs:
En la introducción anterior, parece que hemos pasado por alto una pregunta básica: ¿cómo vino el nombre del módulo? Cuando necesito un módulo, ¿cómo se asigna este módulo a un archivo JavaScript específico? Esto implica cómo configurar las necesidades.
La forma más sencilla de cargar requerir JS se muestra en el caso 2. En este caso, no especificamos una base y rutas para requerir. Si el método que se muestra en el caso 10, DataMain especifica A /js/Main.js en la carpeta paralela al directorio actual Index.html como la entrada del programa, y el directorio /js también se utilizará como base al definir otros módulos.
Caso 9: Carga exige.js
<script dataMain = "js/main" src = "scripts/request.js"> </script>
Por lo tanto, todas las dependencias del módulo en nuestros ejemplos anteriores se pueden eliminar de "js/" y escribir "estudiante", "clase", "gerente", etc. directamente. Una forma más directa de mostrar la base y las rutas especificadas es usar requerir.Config para establecer estos parámetros. Como se muestra en el caso diez.
Caso 10. Configuración de requeríajs
<script type = "text/javaScript" src = "./ js/request.js"> </script> <script type = "text/javascript> request.config ({baseUrl:" ./js ", rutas: {" Some ":" Some/V1 "}, Waitseconds: 10}); requerir (["Some/Module", "My/Module", "./js/a.js"], function (somEmodule, mymodule) {}); </script>BaseURL indica la URL base de todos los módulos. Por ejemplo, el script cargado por "my/module" es en realidad /js/my/module.js. Tenga en cuenta que los archivos que terminan en .js no utilizarán el BaseUrl cuando se carguen, aún usarán la ruta relativa donde se encuentra el índice.html actual, por lo que aún debe agregar "./js/". Si no se especifica BaseURL, se utilizará la ruta especificada en Data-Main.
La ruta definida en las rutas se usa para reemplazar la ruta en el módulo, como algunos/módulo en el ejemplo anterior. La ruta específica del archivo JavaScript es /js/Some/V1/module.js. WaitSeconds especifica cuánto tiempo lleva cargar un archivo JavaScript. El valor predeterminado es de 7 segundos sin que el usuario lo especifique.
Otra configuración importante son los paquetes, que pueden especificar otras estructuras de directorio que cumplen con la especificación de AMD CommonJS, lo que brinda una rica escalabilidad. Los módulos como Dojo, JQuery, etc. también pueden cargarse mediante necesidades a través de esta configuración.
Otras opciones configurables incluyen localidad, contexto, DEPS, devolución de llamada, etc. Los lectores interesados pueden consultar los documentos relevantes en el sitio web oficial de INSEXJS.