• 简明介绍 ES6 模块


    1.什么是模块

    模块就是一段代码,这段代码可以反复使用,经常单独写成一个文件,一旦加载会立即执行。

    2.导出

    导出有 2 种方式:命名导出和默认导出,分别用关键字exportexport default表示

    2.1 命名导出:export 关键字

    • 第一种方式:在要导出的代码前加上 export 关键字就可以了!
    export var foo;
    export let foo;
    export const foo;
    export function myFunc() {}
    export function* myGenFunc() {}
    export class MyClass {}
    
    • 第二种方式:将要导出的对象放在export {}{}
    var foo1;
    let foo2;
    const foo3;
    function myFunc() {}
    class MyClass {}
    export {foo1, foo2, foo3, myFunc, MyClass}
    

    2.2 默认导出:export default 关键字

    • 第一种方式:在要导出的函数或者类之前加 export default 关键字,其中名称可以省略。这将会使其具有匿名函数和匿名类的功能。
    export default function myFunc() {}
    export default function () {}
    
    export default function* myGenFunc() {}
    export default function* () {}
    export default class MyClass {}
    export default class {}
    export default foo;
    export default 'Hello world!';
    export default 3 * 7;
    export default (function () {});
    
    • 第二种方式:用export default moduleName关键字导出
    =========================
    var foo1;
    export default foo1;
    ==========================
    let foo2;
    export default let foo2;
    ==========================
    export function myFunc() {};
    export default myFunc;
    

    注意:使用命名导出时,一个 js 文件可以 export 多个模块;但是使用默认导出时,一个文件只能有一个模块导出,否则将会报错。

    2.3 其他

    2.3.1 重命名导出

    export { MY_CONST as FOO, myFunc };
    export { foo as default };
    

    2.3.2 从其他模块导出

    export * from 'src/other_module';
    export { foo as myFoo, bar } from 'src/other_module';
    export { default } from 'src/other_module';
    export { default as foo } from 'src/other_module';
    export { foo as default } from 'src/other_module'
    

    3.导入

    导入方式语法描述
    默认导入 import localName from 'src/my_lib'; -
    命名空间导入 import * as my_lib from 'src/my_lib'; -
    命名导入 import { name1, name2 } from 'src/my_lib'; -
    重命名导入 import { name1 as localName1, name2 } from 'src/my_lib'; -
    空导入 import 'src/my_lib'; 仅加载模块,不导入任何内容
    默认导入+命名空间 import theDefault, * as my_lib from 'src/my_lib'; -
    默认导入+命名导入 import theDefault, { name1, name2 } from 'src/my_lib'; -

    4.导出与导入之家的关联

    • 使用命名导出时,应用import {ModuleName}的方式导入;使用默认导出时,使用import moduleName的方式导入,无需加花括号。
    • 导入的时候,我们可以只导入我们需要的模块,如以下。
    ------lib.js-----
    export const PI = '3.14'
    export let perimeter = radius => {
      console.log('周长:', 2 * PI * radius)
    }
    
    -----main.js-----
    import {perimeter} from 'lib'
    perimeter(1);
    

    5. 在 script 中使用模块

    <!--加载一个js模块文件-->
    <script type="module" src="module.js"></script>
    <!-- 内联引入一个模块 -->
    <script type="module">
    import {sum} from './example.js';
    let res = sum(1,2);
    

    6.注意事项

    • 直接使用模块语法在浏览器中可能无效,需要 babel 等工具转为可接受的语法
    • 导出的 2 种方式 export 和 export default 在一个文件中最好用一种,尽量少混用
    • 在 ES6 模块中,default 是一个关键字,不要使用 default 作为 as 的重命名名称
    • import 后,import 的模块将会被提升,放置于当前代码的最前端。因此,何处导入模块并不重要。
    • import 应该是单独的一条语句,不能在其他语句中运行该语句。以下 example.js 中的操作将导致错误。
    • 导入的只是当初模块的只读视图,这意味着操作的模块中的变量都存储在模块的内部
    -----example.js------
    if(xxx){
    import example from "mock"
    }
    

    7.实例

    【实例 1】链接信息

    -----api.js-----
    export let linkInfo = [
      {
        name: '百度',
        address: 'baidu.com'
      },
      {
        name: '新浪',
        address: 'sina.com'
      },
      {
        name: '优酷',
        address: 'youku.com'
      }
    ]
    
    -----main.js-----
    import {linkInfo} from "mock"
    console.log('链接信息:',JSON.stringify(linkInfo))
    

    【实例 2】工具类

    //  加解密算法
    import CryptoJS from 'crypto-js';
    
    function getPrivate() {
      let result = 'abcdef';
      for (let i = 0; i < 10; i++) {
        result += i;
      }
      return result;
    }
    
    export function Encrypt(data) {
      let src = CryptoJS.enc.Utf8.parse(data);
      let encrypted = CryptoJS.AES.encrypt(src, CryptoJS.enc.Utf8.parse(getPrivate()), {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
      });
    
      return encrypted.ciphertext.toString(CryptoJS.enc.Base64);
    }
    
    export function Decrypt(data) {
      let decrypt = CryptoJS.AES.decrypt(data, CryptoJS.enc.Utf8.parse(getPrivate()), {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
      });
      var result = decrypt.toString(CryptoJS.enc.Utf8);
      return result;
    }
    

    【实例 3】接口

    -----api.js-----
    export default {
      addLink (link) {
        let params = {
          name: link.name,
          address: link.address
        }
        return http
          .post('/link/add', params)
          .then(data => {
            return Promise.resolve(data)
          })
          .catch(e => {
            return Promise.reject(e)
          })
      },
      updateLink (link) {
        let params = {
          id: link.id,
          name: link.name,
          address: link.address
        }
        return http
          .post('/link/update', params)
          .then(data => {
            return Promise.resolve(data)
          })
          .catch(e => {
            return Promise.reject(e)
          })
      },
      getLinkList () {
        let params = {
          currentPage: 1,
          pageSize: 20
        }
        return http
          .post('/link/list', params)
          .then(data => {
            return Promise.resolve(data)
          })
          .catch(e => {
            return Promise.reject(e)
          })
      },
      deleteLink (link) {
        let params = {
          id: link.id
        }
        return http
          .post('/link/delete', params)
          .then(data => {
            return Promise.resolve(data)
          })
          .catch(e => {
            return Promise.reject(e)
          })
      }
    }
    
    -----main.js-----
    import * as api from "./myLib";
    api.addLink(myParams)
       .then(res=>{console.log("well")})
       .catch(e => {console.log(e)});
    
     
     
  • 相关阅读:
    [A类会议] 国内论文检索
    [NISPA类会议] 怎样才能在NIPS 上面发论文?
    [国际A类会议] 2018最最最顶级的人工智能国际峰会汇总!CCF推荐!
    [DEFCON全球黑客大会] 针对CTF,大家都是怎么训练的?
    [DEFCON全球黑客大会] CTF(Capture The Flag)
    推荐系统之--- 评分预测问题
    推荐系统之--- 推荐系统实例
    推荐系统学习 -- 利用社交网络数据
    推荐系统学习 -- 利用上下文信息
    推荐系统学习 -- 利用用户标签数据
  • 原文地址:https://www.cnblogs.com/xiaomeng95/p/12976215.html
Copyright © 2020-2023  润新知