Desarrollo modular de JS: hacer que js sea más estandarizado

¿Por qué hay modularidad?

• Conflictos de nombres : cuando un proyecto es desarrollado en colaboración por un equipo, las variables y funciones de diferentes desarrolladores pueden tener los mismos nombres; incluso para un desarrollo, cuando el ciclo de desarrollo es relativamente largo, es posible olvidar qué variables se usaron antes, lo que resulta en nombres duplicados, lo que lleva a conflictos de nombres.

• Dependencia de archivos : cuando se reutiliza el código, la cantidad de archivos js importados puede ser menor o el orden de importación es incorrecto. Por ejemplo, cuando se usa boostrap, jQuery debe importarse y los archivos jQuery deben importarse antes que los archivos js de boostrap.

• Acoplamiento excesivo de código: la eficiencia y la velocidad son el foco hoy en día, especialmente en el desarrollo de aplicaciones híbridas.Si la tasa de repetición de código es demasiado alta, el paquete de recursos locales será demasiado grande, lo que reducirá el tamaño del paquete de recursos infinitamente. afectará la eficiencia de ejecución del código, etc.

¿Cuáles son los beneficios del desarrollo modular?

• Mejore la eficiencia del desarrollo : el código es fácil de reutilizar, los módulos desarrollados por otros se pueden usar directamente y no hay necesidad de desarrollar repetidamente funciones similares.

• Mantenimiento posterior conveniente : el código es fácil de reutilizar y los módulos desarrollados por otros se pueden usar directamente, sin la necesidad de desarrollar repetidamente funciones similares.

Entonces, ¿cómo hacer un desarrollo modular?

Hay tantas maneras

1. requiere método (modo AMD)

test.js

// 首先使用define进行定义
define(function(){
    function fun1(){
      alert("it works");
    }
    fun1();
})

// 在页面中使用require进行引用
require(["js/a"]);

El problema con requireJs es que cuando se agrega a un módulo, todos los módulos dependientes del módulo se cargarán previamente, pero es probable que estas dependencias no se usen al principio. Al mismo tiempo, es muy problemático escribir una larga lista de dependencias. Lo mejor es que AMD conserva las funciones de requisitos, exportaciones y módulos en commonJs, por lo que no necesita escribirlas todas en dependencias, pero use require para importarlas cuando sea necesario.

2. La estrella en ascenso SeaJs (modo CMD)

1. Importar biblioteca sea.js
2. definir módulo
3. define (función (requerir, exportaciones, módulo) {código de módulo});
4. require('id del módulo')
5. seajs.use('id de módulo', function(objeto de módulo){código de negocio});

3. Módulo estándar ES2015

ES6 considera la modularidad, utilizando la importación y exportación, el código es más conciso y hay muchas características nuevas para hacer que el desarrollo sea más conveniente.