La mayoría de los proyectos utilizan el desarrollo modular, requirirjs es un modelo para el desarrollo del módulo AMD, por lo que es necesario aprenderlo. Al usar las necesidades de requisitos paso a paso para escribir demostraciones, podemos aprender el proceso de desarrollo general de las necesidades y algunos de los sentimientos de uso de necesidades por usted mismo.
AMD: un mecanismo para la carga asincrónica del código JavaScript basado en módulos. Recomienda a los desarrolladores que encapsulen el código JavaScript en módulos, y la dependencia de los objetos globales se convierte en una dependencia de otros módulos, sin declarar muchas variables globales. Resuelva las dependencias de los módulos individuales a través del retraso y la carga a pedido. Los beneficios del código JavaScript modular son obvios. El acoplamiento suelto de varios componentes funcionales puede mejorar en gran medida la reutilización y el mantenimiento del código. Esta carga rápida concurrente sin bloqueo de código JavaScript permite que otros elementos de la interfaz de usuario en la página web que no se basan en el código JavaScript, como imágenes, CSS y otros nodos DOM, se cargan primero, la página web se carga más rápido y los usuarios también obtienen una mejor experiencia.
1. Descargar requiejs
Antes del desarrollo modular con Requiejs, necesitamos preparar algo. Eso debe descargar el archivo request.js, jajaja, porque fue desarrollado basado en él.
2. Cree un archivo HTML
Después de crear un archivo HTML, la importación de requisitos debe usar la etiqueta <Script>, no hay duda sobre esto. Luego hay un atributo de Main de datos en esta etiqueta. Su función es actuar como una entrada y salida, es decir, después de la carga, las necesidades, ingresar desde el atributo de mayor dato.
Por ejemplo, lo siguiente es:
<! DOCTYPE HTML> <HEAD> <title> requiere </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> </head> <body> <!-esto es requeríajs, data-main se usa como el módulo de entrada, aquí es js/main-> <cript data-main = "js/main" src = "js/require.js"> </script> </body> </html>
Cuando cargo js/require.js, luego voy a ejecutar el archivo js/main. Main también es un archivo JS. Podemos omitir su sufijo .js y las necesidades lo agregarán.
3. Datos principales
Después de que el programa se ejecuta <script data-main = 'js/main' src = 'js/require.js'> </script>, ingrese main.js a través de datos-main y ejecute main.js. Entonces, ¿qué hay en Main.js?
Consulte el código:
/* require.config ejecutar baseUrl como 'js', baseUrl se refiere al directorio raíz del archivo del módulo, que puede ser una ruta absoluta o una ruta relativa*/require.config ({baseUrl: 'js', rutas: {jQuery: 'jQuery-1.8.2.min'}}}); la función anónima, como el mono-> mk*/requerir (['mono'], function (mk) {mk.init ();});En el código anterior, puede ver que main.js contiene dos módulos: requirir.config y requirir.
La función de requirir.config es configurar algunos parámetros de requestjs y luego consultarlo públicamente.
Por ejemplo, la función de la base anterior es usarla como la ruta base y buscar archivos en esta ruta. Puse todos los archivos .js en la carpeta JS. Por lo tanto, después de configurar esta propiedad, los archivos posteriores buscarán contenido en la ruta JS.
como sigue:
requiere (['mono'], function (mono) {monkey.init ();});Cuando se refiere al mono, es el mono de referencia, no JS/Monkey.
¿Cuál es el papel de los caminos? Es para reemplazar algunos archivos JS de uso común con nombres comunes. Por ejemplo, jQuery-1.8.2.min.js, no podemos escribir esto cada vez que lo llamamos, por lo que por conveniencia, reemplazamos jQuery-1.8.2.min.js. En el futuro, podemos usar jQuery directamente, lo cual es rápido y conveniente.
Bien, requerir.Config está básicamente familiarizado con él. En una palabra, su función es configurar las necesidades.
¿Qué pasa con el requerido?
La función de las necesidades es ejecutar. Por ejemplo, aquí solo necesito monkey.js para ejecutar, por lo que importé el mono y luego obtuve el valor de retorno después de la ejecución del mono a través del parámetro MK. Si hay un valor de retorno, entonces podemos hacer el procesamiento correspondiente de MK.
Oye, ¿qué hay dentro del mono?
Echemos un vistazo:
/* Define el parámetro es una función anónima, que devuelve un objeto*/define (['jQuery'], function ($) {var init = function () {console.log ($. browser);}; return {init:};});¡definir! Su función es definir un módulo JS para usar por otros módulos o requerir. Su método de referencia a otros módulos JS es similar al de Requirection. Presenta los archivos JS requeridos y luego corresponde a los parámetros uno por uno. Es importante tener en cuenta que otros módulos no pueden acceder a los métodos o variables definidos en Definir, por lo que si desea que otros módulos puedan acceder a ellos, puede tirar los objetos o funciones del método correspondiente (return). Aquí, lo que devuelvo es un objeto que proporciona INIT para que otros módulos llamen.