模块化开发及import用法

Posted 2021-03-04 my466879168

模块化开发

• 随着ajax异步请求的出现，慢慢形成了前后端的分离
  • 客户端需要完成的事情越来越多，代码量也是与日俱增
  • 为了应对代码量的剧增，我们通常会将代码组织在多个js文件中，进行维护
  • 这种代码的编写方式对js文件的依赖顺序几乎是强制性的
  • 但是当js文件过多，比如有几十个的时候，弄清楚它们的顺序是一件比较同时的事情
• 在匿名函数内部，定义一个对象
  • 给对象添加各种需要暴露到外面的属性和方法(不需要暴露的直接定义即可)
  • 最后将这个对象返回，并且在外面使用了一个MoudleA接受
• 这就是模块最基础的封装，事实上模块的封装还有很多高级的话题
  • 但是我们这里就是要认识一下为什么需要模块，以及模块的原始雏形
  • 前端模块化开发已经有了很多既有的规范，以及对应的实现方案

commonJS

• 模块化有两个核心：导出和导入

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

se6的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;
  }
}

• 某些情况下，一个模块中包含某个的功能，我们并不希望给这个功能命名，而且让导入者可以自己来命名
  • 这个时候就可以使用export default

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

• 另外，需要注意：export default在同一个模块中，不允许同时存在多个。

es6的import

• 命令
  • export：规定模块对外接口
  • import：导入模块内部功能
  • 默认导入导出：import { default } from "person"
  • 整体导入导出：import * from "person"
  • 按需导入导出：import { age, name, sex } from "person"
  • 改名导入导出：import { name as newName } from "person"
  • 具名改默认导入导出：import { name as default } from "person"
  • 默认改具名导入导出：import { default as name } from "person"默认导入：import Person from "person"
  • 整体导入：import * as Person from "person"
  • 按需导入：import { age, name, sex } from "person"
  • 改名导入：import { name as newName } from "person"
  • 自执导入：import "person"
  • 复合导入：import Person, { name } from "person"
  • 默认导出：export default Person(导入时可指定模块任意名称，无需知晓内部真实名称)
  • 单独导出：export const name = "Bruce"
  • 按需导出：export { age, name, sex }(推荐)
  • 改名导出：export { name as newName }