ES6_模块化_note

• ####模块化

js不支持模块化
在es6之前,社区制定了一套规范:

es出来,统一服务端和客户端模块规范

注意:使用模块化需要放在服务器环境

• 如何定义模块:

// 此处可以是 let / const
export const a=12;

或者

<script > // 使用 export default 出来的东西,则不需要使用 {} export default 12; export const e = 13; export const b = 14; export const c = 1; </script>

或者

<script > let a = 12; let b = 13; export {
     a, b}; </script>

• 如何使用模块:
• 注意:只要是 export 导出的东西,在使用时都要使用 {}
• 如果是使用 export default 出来的东西,则不需要

• import优点:
  
• 无论一个库导入多少次,只会执行一次
• import可以是绝对路径或者是相对路径
• import ‘./model.1.js’; 如果这样用,相当于引入文件
• 有提升效果,import会自动提升到顶部,首先执行
• 导入的模块,如果里面js的内容改了,外面的也会跟着改

• 在HTML中写入:

   <script type="module"> import 绝对路径 / 相对路径 // 或者 import {
     aaa, bbb, ccc} from './module/2.js'; // 或者 import * as modTwo from './module/2.js'; </script>

• 在导入时起别名:

<script > import {
     aaa, bbb, ccc} from './module/2.js'; console.log(aaa); console.log(bbb); console.log(ccc); console.log("split---"); // 也可以在导入时起别名: import {
     aaa as a, bbb as b, ccc as c} from './module/2.js'; console.log(a); console.log(b); console.log(c); </script>

• 为模块起别名:

<script > import * as modTwo from './module/2.js'; console.log(modTwo); </script>

• 一起使用 export default 导出东西的时候

<scripot>
   // import a from './module/3.js';
   //要使用 export default 和 export导出的东西的时候:
   import a, {e, b, c} from './module/3.js';
   console.log(a);
   console.log(e);
   console.log(b);
   console.log(c);
</scripot>

• 可以在导入的js源文件中再导入另一个js:
  
  html文件:

<script type="module"> import mod, {
     show, sum, e, f} from './module/4.js'; let p1 = new mod.Person('张三', 18); console.log(p1.showName()); show(); sum(); console.log('split---'); console.log(e, f); </script>

4.js文件:

import {
    e, f} from './5.js';

console.log('split---');

const a = 12;
const b = 15;

export {
    
   a,
   b,
   sum,
   show,
   e,
   f
}
const sum = () => {
    
   console.log(a + b);
   return a + b;
}
const show = () => {
    
   console.log('执行了show');
   return 1;
}

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

   showName() {
    
       return `我的名字是${
      this.name}`;
   }
}

export default {
    
   Person
}

5.js文件:

export const e = 101;
export const f = 4;

• import有提升效果:

<script type="module"> // 验证提升效果 console.log('提升了吗'); import mod, {
     show, sum, e, f} from './module/4.js'; console.log(e); </script>

• 导入的模块,如果里面js的内容改了,外面的也会跟着改,不像common规范如:
  
  html文件:

<script type="module"> import {
     a, b} from './module/6.js'; // 导入的模块,如果里面js的内容改了,外面的也会跟着改 console.log(a, b); setTimeout(() => {
      console.log(a, b); }, 3000); </script>

6.js:

let a = 12;
let b = 13;

setTimeout(() => {
    
   a = 11111;
}, 2000);

export {
    a, b};

• import可以动态引入:

import()类似于node里面的require,可以动态引入

默认import语法不能写入if等语句里
可以使用按需加载的方式来加载:

<script > import ('https://code.jquery.com/jquery-1.12.4.js').then(res => {
      $(function () {
      $('body').css({
      background: 'red' }) }) }) </script>

此种方法的优点:

• 按需加载
• 可以写在if中
• 路径也可以是动态的

import() 的返回值是一个promise对象

• 模块化的动态引入:

不能在if中直接引入 import 语法,

import() 的返回值是一个promise对象

可以使用 import() 来引入,如:

<script > // 也可以引入绝对地址 import('./module/1.js').then(res => {
      console.log(res.a+res.b); }); </script>

可以进行动态加载,如:

<script > let sign = 1; function config() {
      switch (sign) {
      case 1: return './module/1.js'; break; case 2: return './module/2.js'; break; } } import(config(1)).then(res => {
      }); </script>

也可以使用promise.all(),如:

<script > Promise.all([ import('./module/1.js'), import('./module/2.js'), ]).then(([mod1,mod2])=>{
     console.log(mod1); console.log(mod2); }) </script>