desarrollo modular y el uso de importación

Desarrollo modular

• Con el advenimiento Ajax solicitud asíncrona, formado lentamente de extremos frontal separada y

  • Las necesidades de los clientes a hacer más y más, pero también aumenta la cantidad de código
  • En respuesta al fuerte aumento de la cantidad de código, por lo general vamos a organizar el código en el archivo js múltiples para el mantenimiento
  • Este código escrito en una forma dependiente de la orden de archivo js casi obligatorio
  • Pero cuando demasiados archivos js, tales como decenas de tiempo para averiguar su orden de cosas al mismo tiempo es una forma más

• En el interior función anónima, la definición de un objeto

  • Es necesario añadir un objeto expuesto al exterior de las propiedades y métodos (definido eliminar la necesidad de la exposición directa)
  • Por último, se devuelve el objeto, y utiliza un MoudleA aceptar el exterior

• Este es el módulo más básico paquete, de hecho, hay muchos temas de los módulos del paquete de alto nivel

  • Pero queremos saber qué módulos se necesiten, así como el módulo prototipo original
  • Front-end de desarrollo modular ha sido una gran cantidad de especificaciones existentes, y el plan de ejecución correspondiente

CommonJS

• Modular tiene dos núcleos: exportación e importación

  //导出
  module.exports={
    flag:ture,
    test(a,b){
      return a+b
    }
  }
  //导入
  let aaa=require('module')
  let test=aaa.test;
  

SE6 de exportación

//导出变量
export let name='meng'
export let age=18

let name='meng'
let age=18
export{name,age}
//导出函数
export function test (content){
  console.log(tcontent)
}

export class Person{
  constructor(name,age){
    this.name=name;
    this.age=age;
  }
}

• En algunos casos, un módulo contiene una función, no queremos dar el nombre de la función, y se dejó importadores mencionadas podemos
  • Este tiempo se puede utilizar por defecto de exportación

export default function  (){
console.log(111)
}
//在别的地方导入我门就可以自定义名字了
import myFun from "module";

• También, nota: default exportación en el mismo módulo, una pluralidad permite existir simultáneamente.

es6 de importación

• comando
  • exportar: disposiciones caja de interfaz externa
  • importación: Módulo de función de importación interno
  • omisión de la importación y exportación: importación {default} de "persona"
  • En general la importación y exportación: * importación de "persona"
  • La demanda de importación y exportación: importación {edad, nombre, sexo} de "persona"
  • Renombrado importación y exportación: importación {nombre} nuevoNombre de "persona"
  • el cambio llamado la importación y exportación por defecto: importación {nombre} como predeterminado de "persona"
  • Cambiar el nombre de importación y exportación por defecto: {importación por defecto como nombre} de "persona" de importación predeterminado: importación persona de "persona"
  • En general la importación: import * como persona de "persona"
  • La demanda de importación: import {edad, nombre, sexo} de "persona"
  • Renombrado importación: import {nombre} nuevoNombre de "persona"
  • Auto dirigido en: importación "persona"
  • Compuesto introducido: Persona importación, {nombre} de "persona"
  • Exportación por defecto: por defecto de exportación persona (cualquier nombre se puede especificar cuando se importa el módulo, sin tener que saber el nombre real interno)
  • exportación solo: la exportación nombre const = "Bruce"
  • La demanda de exportación: exportación {edad, nombre, sexo} (recomendado)
  • Exportación renombrado: {exportación nombre como nuevoNombre}