• 简明介绍 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)});
    
     
     
  • 相关阅读:
    moss jscript
    CSS两端对准
    简单的日期格式验证
    .NET中使用Exchange 2007 Webservice来读取邮件
    张二狗
    spcontext
    Infopath表单用改控件值提交或作别的更改时一定要在控件属性浏览器表单的回发设置为始终.
    使用 Web 服务
    SharePoint 2010中开发模式的改进 COM 客户端对象模型
    Retrieve data from Separate Oracle System
  • 原文地址:https://www.cnblogs.com/xiaomeng95/p/12976215.html
Copyright © 2020-2023  润新知