模块化开发及import用法

2020-03-19 20:00:25 阅读：191 来源： 互联网

标签：name 模块化导出用法 person 导入 export import

模块化开发

随着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 }

标签：name,模块化,导出,用法,person,导入,export,import
来源： https://www.cnblogs.com/my466879168/p/12526782.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

模块化开发及import用法

模块化开发

commonJS

se6的export

es6的import