Modular development and import usage

Modular Development

• With the advent ajax asynchronous request, slowly formed of separate front and rear ends

  • The client needs to be done more and more, but also increasing the amount of code
  • In response to the sharp increase in the amount of code, we will usually organize the code in multiple js file for maintenance
  • This code written in a way dependent on the order file js almost mandatory
  • But when too many js file, such as dozens of time to figure out their order of things at the same time is a more

• In the anonymous function inside, the definition of an object

  • You need to add an object exposed to the outside of the properties and methods (defined eliminate the need for direct exposure)
  • Finally, the object is returned, and uses a MoudleA accept outside

• This is the most basic package module, in fact, there are many high-level package module topics

  • But we want to know why this is needed modules, as well as the original prototype module
  • Front-end modular development has been a lot of existing specifications, and the corresponding implementation plan

commonJS

• Modular has two core: Export and Import

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

se6 of export

//导出变量
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;
  }
}

• In some cases, a module contains a function, we do not want to give the function name, and let himself be named importers can
  • This time you can use export default

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

• Also, note: export default in the same module, a plurality allowed to exist simultaneously.

es6 of import

• command
  • export: External Interface Module provisions
  • import: import function module internal
  • Default import and export: import {default} from "person"
  • Overall import and export: import * from "person"
  • Demand import and export: import {age, name, sex} from "person"
  • Renamed import and export: import {name as newName} from "person"
  • Named change the default import and export: import {name as default} from "person"
  • Change the default named import and export: import {default as name} from "person" default import: import Person from "person"
  • Overall import: import * as Person from "person"
  • Demand Import: import {age, name, sex} from "person"
  • Renamed import: import {name as newName} from "person"
  • Self directed into: import "person"
  • Composite introduced: import Person, {name} from "person"
  • Default export: export default Person (any name can be specified when you import the module, without having to know the internal real name)
  • Alone export: export const name = "Bruce"
  • Demand Export: export {age, name, sex} (recommended)
  • Export renamed: export {name as newName}