es--module模块

最新推荐文章于 2024-06-02 11:09:45 发布
最新推荐文章于 2024-06-02 11:09:45 发布
阅读量543 收藏 3
点赞数 1
分类专栏： es6 文章标签： es6/es7
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43285360/article/details/117826381
版权

一、初识Module

模块：一个一个的局部作用域的代码块

 模块系统需要解决的主要问题:

        ① 模块化的问题

        ② 消除全局变量

        ③ 管理加载顺序

Module的基本用法： 

import、export：

只要你会用到 import（导入） 或 export（导出），在使用 script 标签加载的时候，就要加上 type="module"  

示例：

<div class="slider-layout">
        <div class="slider">
            <div class="slider-content">
                <div class="slider-item">
                    <a href="javascript:;"><img src="./imgs/1.jpg" alt="1" class="slider-img" /></a>
                </div>
                <div class="slider-item">
                    <a href="javascript:;"><img src="./imgs/2.jpg" alt="1" class="slider-img" /></a>
                </div>
                <div class="slider-item">
                    <a href="javascript:;"><img src="./imgs/3.jpg" alt="1" class="slider-img" /></a>
                </div>
                <div class="slider-item">
                    <a href="javascript:;"><img src="./imgs/4.jpg" alt="1" class="slider-img" /></a>
                </div>
            </div>
        </div>
    </div>

<script src="./index.js" type="module"></script>
/* css reset */
* {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
  outline: none;
}
img {
  vertical-align: top;
}

/* layout */
.slider-layout {
  width: 80%;
  height: 420px;
  margin: 0 auto;
}

/* slider */
.slider,
.slider-content,
.slider-item,
.slider-img {
  width: 100%;
  height: 100%;
}
.slider {
  overflow: hidden;
}
.slider-item {
  float: left;
}
.slider-animation {
  transition-property: transform;
  transition-duration: 0ms;
}

//base.js
// 默认参数
const DEFAULTS = {
    // 初始索引
    initialIndex: 0,
    // 切换时是否有动画
    animation: true,
    // 切换速度，单位 ms
    speed: 300
};
// base
const ELEMENT_NODE = 1;
const SLIDER_ANIMATION_CLASSNAME = 'slider-animation';

// 父类
class BaseSlider {
    constructor(el, options) {
        if (el.nodeType !== ELEMENT_NODE)
            throw new Error('实例化的时候，请传入 DOM 元素！');

        // 实际参数
        this.options = {
            ...DEFAULTS,
            ...options
        };

        const slider = el;
        const sliderContent = slider.querySelector('.slider-content');
        const sliderItems = sliderContent.querySelectorAll('.slider-item');

        // 添加到 this 上，为了在方法中使用
        this.slider = slider;
        this.sliderContent = sliderContent;
        this.sliderItems = sliderItems;

        this.minIndex = 0;
        this.maxIndex = sliderItems.length - 1;
        this.currIndex = this.getCorrectedIndex(this.options.initialIndex);

        // 每个 slider-item 的宽度（每次移动的距离）
        this.itemWidth = sliderItems[0].offsetWidth;

        this.init();
    }

    // 获取修正后的索引值
    // 随心所欲，不逾矩
    getCorrectedIndex(index) {
        if (index < this.minIndex) return this.maxIndex;
        if (index > this.maxIndex) return this.minIndex;
        return index;
    }

    // 初始化
    init() {
        // 为每个 slider-item 设置宽度
        this.setItemsWidth();

        // 为 slider-content 设置宽度
        this.setContentWidth();

        // 切换到初始索引 initialIndex
        this.move(this.getDistance());

        // 开启动画
        if (this.options.animation) {
            this.openAnimation();
        }
    }

    // 为每个 slider-item 设置宽度
    setItemsWidth() {
        for (const item of this.sliderItems) {
            item.style.width = `${this.itemWidth}px`;
        }
    }

    // 为 slider-content 设置宽度
    setContentWidth() {
        this.sliderContent.style.width = `${
      this.itemWidth * this.sliderItems.length
    }px`;
    }

    // 不带动画的移动
    move(distance) {
        this.sliderContent.style.transform = `translate3d(${distance}px, 0px, 0px)`;
    }

    // 带动画的移动
    moveWithAnimation(distance) {
        this.setAnimationSpeed(this.options.speed);
        this.move(distance);
    }

    // 设置切换动画速度
    setAnimationSpeed(speed) {
        this.sliderContent.style.transitionDuration = `${speed}ms`;
    }

    // 获取要移动的距离
    getDistance(index = this.currIndex) {
        return -this.itemWidth * index;
    }

    // 开启动画
    openAnimation() {
        this.sliderContent.classList.add(SLIDER_ANIMATION_CLASSNAME);
    }

    // 关闭动画
    closeAnimation() {
        this.setAnimationSpeed(0);
    }

    // 切换到 index 索引对应的幻灯片
    to(index) {
        index = this.getCorrectedIndex(index);
        if (this.currIndex === index) return;

        this.currIndex = index;
        const distance = this.getDistance();

        if (this.options.animation) {
            return this.moveWithAnimation(distance);
        } else {
            return this.move(distance);
        }
    }

    // 切换上一张
    prev() {
        this.to(this.currIndex - 1);
    }

    // 切换下一张
    next() {
        this.to(this.currIndex + 1);
    }

    // 获取当前索引
    getCurrIndex() {
        return this.currIndex;
    }
}
//导出--便于外面文件的访问
export default BaseSlider;
//slider.js
//导入
import BaseSlider from './base.js';

class Slider extends BaseSlider {
    constructor(el, options) {
        super(el, options);
        this._bindEvent();
    }

    _bindEvent() {
        document.addEventListener(
            'keyup',
            ev => {
                if (ev.keyCode === 37) {
                    this.prev();
                } else if (ev.keyCode === 39) {
                    this.next();
                }
            },
            false
        );
    }
}

export default Slider;
//index.js
import Slider from './slider.js';

new Slider(document.querySelector('.slider'));

当你按键盘上的左右按钮进行切换时：

二、 Module的导入导出

 1.export default导出和对应的import导入

导出的东西可以被导入（import），并访问到

一个模块没有导出，也可以将其导入

被导入的代码都会执行一遍，也仅会执行一遍

import './module.js';

示例：

<script type="module">


        import './module.js';
</script>
const age = 18;
// const sex = 'male';
console.log(age);

一个模块只能有一个 export default

export default 名;//导出

import 名 from '文件路径';//导入

示例：

<script type="module">
     import age from './module.js'; 
     console.log(age);
</script>
const sex = 'male';


// 一个模块只能有一个 export default
export default sex;

2.export导出和对应的import导入

a.基本用法:

语法：export  声明或语句

export  const age = 18;

 <script type="module">
        //切记：不能随意命名
        import {age} from './module.js'; 
        console.log(age);
</script>
//方式1
export const age = 18;

//方式2：
const age = 18;
// export age; ×
export { age }; // √

b.导出、导入多个

       //导入方式1
        // import {fn} from './module.js'; 
        // console.log(fn); 
        // import {className} from './module.js'; 
        // console.log(className);
        // import {age} from './module.js'; 
        // console.log(age);

       //导入方式2
      import { fn, age, className } from './module.js'; 
      console.log(fn, age, className);
function fn() {};
//export function fn() {}; //导出方式1
// export function () {} // 匿名函数不行
// export { fn }; //导出方式2

class className {}
// export { className }; //导出方式2

// export class className {}//导出方式1
// export class  {} // 匿名不行

// export const age = 18;//导出方式1
const age = 18;
// export { age };

export { fn, className, age }; //导出方式3

c.导出导入时起别名

<script type="module">

        import { func, age, className as person } from './module.js'; console.log(func, age, person);

</script>
function fn() {};
//export function fn() {}; //导出方式1
// export function () {} // 匿名函数不行
// export { fn }; //导出方式2

class className {}
// export { className }; //导出方式2

// export class className {}//导出方式1
// export class  {} // 匿名不行

// export const age = 18;//导出方式1
const age = 18;
// export { age };

export { fn as func, className, age }; //导出方式3

d.整体导入

会导入所有输出，包括通过 export default 导出的

 <script type="module">

        import * as obj from './module.js'; console.log(obj);

</script>
function fn() {};
//export function fn() {}; //导出方式1
// export function () {} // 匿名函数不行
// export { fn }; //导出方式2

class className {}
// export { className }; //导出方式2

// export class className {}//导出方式1
// export class  {} // 匿名不行

// export const age = 18;//导出方式1
const age = 18;
// export { age };

export { fn as func, className, age }; //导出方式3

export default 18;

e.同时导入

注意：一定是 export default 的在前


    <script type="module">

        import age2, { func, age, className } from './module.js'; console.log(age2);

    </script>
function fn() {};
//export function fn() {}; //导出方式1
// export function () {} // 匿名函数不行
// export { fn }; //导出方式2

class className {}
// export { className }; //导出方式2

// export class className {}//导出方式1
// export class  {} // 匿名不行

// export const age = 18;//导出方式1
const age = 18;
// export { age };

export { fn as func, className, age }; //导出方式3

export default 18;

三、Module的注意事项和应用

1.注意事项

a.模块顶层的 this 指向

模块中，顶层的 this 指向 undefined

import './module.js';

<script type="module">
        import './module.js';
</script>或
<script src="./module.js" type="module"></script> 
console.log(this);
//这里的顶层指的是不在if、for这样的块级作用域中或者不在function这样的函数作用域中，而是在模块最顶层的作用域中

b.import关键字 和 import()函数

import关键字 命令具有提升效果，会提升到整个模块的头部，率先执行

<script type="module">
        console.log('沙发'); 
        console.log('第二'); 
        import './module.js';
</script>
console.log(this);

注意：

  • import 执行的时候，代码还没执行
  • import 和 export 命令只能在模块的顶层，不能在代码块中执行

     //错误

        if (PC) {

        import 'pc.js';

      } else if (Mobile) {

        import 'mobile.js';

      }

import() 可以按条件导入

if (PC) {//将import关键字改为import()函数

        import('pc.js').then().catch();

      } else if (Mobile) {

        import('mobile.js').then().catch();

      }

c.导入导出的复合写法

复合写法导出的，无法在当前模块中使用

<script type="module">

        export { age } from './module.js'; 
        console.log(age);

         // 等价于
        // import { age } from './module.js';
        // export { age } from './module.js';
        // console.log(age);

</script>
export const age = 18;

2.应用

<div class="slider-layout">
        <div class="slider">
            <div class="slider-content">
                <div class="slider-item">
                    <a href="javascript:;"><img src="./imgs/1.jpg" alt="1" class="slider-img" /></a>
                </div>
                <div class="slider-item">
                    <a href="javascript:;"><img src="./imgs/2.jpg" alt="1" class="slider-img" /></a>
                </div>
                <div class="slider-item">
                    <a href="javascript:;"><img src="./imgs/3.jpg" alt="1" class="slider-img" /></a>
                </div>
                <div class="slider-item">
                    <a href="javascript:;"><img src="./imgs/4.jpg" alt="1" class="slider-img" /></a>
                </div>
            </div>
        </div>
    </div>

    <script src="./index.js" type="module"></script>
/* css reset */
* {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
  outline: none;
}
img {
  vertical-align: top;
}

/* layout */
.slider-layout {
  width: 80%;
  height: 420px;
  margin: 0 auto;
}

/* slider */
.slider,
.slider-content,
.slider-item,
.slider-img {
  width: 100%;
  height: 100%;
}
.slider {
  overflow: hidden;
}
.slider-item {
  float: left;
}
.slider-animation {
  transition-property: transform;
  transition-duration: 0ms;
}

//index.js
import Slider from './slider.js';

new Slider(document.querySelector('.slider'));

//slider.js
import BaseSlider from './base.js';
import Keyboard from './keyboard.js';
// import Mouse from './mouse.js';

class Slider extends BaseSlider {
    constructor(el, options) {
        super(el, options);
        this._bindEvent();
    }

    _bindEvent() {
        Keyboard.bindEvent(this);
        // Mouse.bindEvent(this);
    }
}

export default Slider;
//base.js
// 默认参数
import DEFAULTS from './defaults.js';

// 常量
import { ELEMENT_NODE, SLIDER_ANIMATION_CLASSNAME } from './constants.js';

class BaseSlider {
  constructor(el, options) {
    if (el.nodeType !== ELEMENT_NODE)
      throw new Error('实例化的时候，请传入 DOM 元素！');

    // 实际参数
    this.options = {
      ...DEFAULTS,
      ...options
    };

    const slider = el;
    const sliderContent = slider.querySelector('.slider-content');
    const sliderItems = sliderContent.querySelectorAll('.slider-item');

    // 添加到 this 上，为了在方法中使用
    this.slider = slider;
    this.sliderContent = sliderContent;
    this.sliderItems = sliderItems;

    this.minIndex = 0;
    this.maxIndex = sliderItems.length - 1;
    this.currIndex = this.getCorrectedIndex(this.options.initialIndex);

    // 每个 slider-item 的宽度（每次移动的距离）
    this.itemWidth = sliderItems[0].offsetWidth;

    this.init();
  }

  // 获取修正后的索引值
  // 随心所欲，不逾矩
  getCorrectedIndex(index) {
    if (index < this.minIndex) return this.maxIndex;
    if (index > this.maxIndex) return this.minIndex;
    return index;
  }

  // 初始化
  init() {
    // 为每个 slider-item 设置宽度
    this.setItemsWidth();

    // 为 slider-content 设置宽度
    this.setContentWidth();

    // 切换到初始索引 initialIndex
    this.move(this.getDistance());

    // 开启动画
    if (this.options.animation) {
      this.openAnimation();
    }
  }

  // 为每个 slider-item 设置宽度
  setItemsWidth() {
    for (const item of this.sliderItems) {
      item.style.width = `${this.itemWidth}px`;
    }
  }

  // 为 slider-content 设置宽度
  setContentWidth() {
    this.sliderContent.style.width = `${
      this.itemWidth * this.sliderItems.length
    }px`;
  }

  // 不带动画的移动
  move(distance) {
    this.sliderContent.style.transform = `translate3d(${distance}px, 0px, 0px)`;
  }

  // 带动画的移动
  moveWithAnimation(distance) {
    this.setAnimationSpeed(this.options.speed);
    this.move(distance);
  }

  // 设置切换动画速度
  setAnimationSpeed(speed) {
    this.sliderContent.style.transitionDuration = `${speed}ms`;
  }

  // 获取要移动的距离
  getDistance(index = this.currIndex) {
    return -this.itemWidth * index;
  }

  // 开启动画
  openAnimation() {
    this.sliderContent.classList.add(SLIDER_ANIMATION_CLASSNAME);
  }

  // 关闭动画
  closeAnimation() {
    this.setAnimationSpeed(0);
  }

  // 切换到 index 索引对应的幻灯片
  to(index) {
    index = this.getCorrectedIndex(index);
    if (this.currIndex === index) return;

    this.currIndex = index;
    const distance = this.getDistance();

    if (this.options.animation) {
      return this.moveWithAnimation(distance);
    } else {
      return this.move(distance);
    }
  }

  // 切换上一张
  prev() {
    this.to(this.currIndex - 1);
  }

  // 切换下一张
  next() {
    this.to(this.currIndex + 1);
  }

  // 获取当前索引
  getCurrIndex() {
    return this.currIndex;
  }
}

export default BaseSlider;

//defaults.js
// 默认参数
// const DEFAULTS = {
//   // 初始索引
//   initialIndex: 0,
//   // 切换时是否有动画
//   animation: true,
//   // 切换速度，单位 ms
//   speed: 300
// };

// export default DEFAULTS;

export default {
  // 初始索引
  initialIndex: 0,
  // 切换时是否有动画
  animation: true,
  // 切换速度，单位 ms
  speed: 300
};

//keyboard.js
import { LEFT_KEYCODE, RIGHT_KEYCODE } from './constants.js';

const keyboard = {
  bindEvent(slider) {
    document.addEventListener(
      'keyup',
      ev => {
        if (ev.keyCode === LEFT_KEYCODE) {
          slider.prev();
        } else if (ev.keyCode === RIGHT_KEYCODE) {
          slider.next();
        }
      },
      false
    );
  }
};

export default keyboard;

//constants.js
// base
export const ELEMENT_NODE = 1;
export const SLIDER_ANIMATION_CLASSNAME = 'slider-animation';

// keyboard
export const LEFT_KEYCODE = 37;
export const RIGHT_KEYCODE = 39;

当单击键盘上的左右箭头时：

小白小白从不日白
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ES Modules【浏览器端的模块开发规范】
weixin_37883657的博客
12-03 1029
一、ES Modules 特性 特性1：EMS 自动采用严格模式，忽略 ‘use strict’ <script type="module"> console.log(this) </script> 特性2：每个 ES module 都是运行在单独的私有作用域中 <script type="module"> var foo = 100 console.log(foo) //100 </script> ...
ES Module原理详解
goodloving的博客
05-15 4963
ES Module执行分为两个阶段：构造阶段、实例化阶段、求值阶段···
2024-05-18 前端模块化开发——ESModule模块化
最新发布
qq_41068717的博客
06-02 666
注意，export后面跟的{}不是一个对象，只是一种特定的语法。 说明： 3.2、导出方式二——通过as起别名 3.3、导出方式三——定义的时候就直接导出 4、import关键字 4.1、导入方式一——直接导入 4.2、导入方式二——通过as起别名 一般在导入的时候起别名，而不是在导出的时候 4.3、导入方式三——可以给整个模块起别名 5、export和import结合使用 这是一种开发思想。工具类库： 工具类统一导出出口（export和import结合使用）： 使用工具类中的方法： 6、def
前端模块化开发-ESModules
徐亦快的踩坑记录
08-10 593
【注】本文为来自CSDN博主「Bal炎魔」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接在此 并做了一些细节上的改进~ 目录 模块化的演变 1、文件划分 2、命名空间方式 3、函数包裹 模块化规范 1. CommonJS 规范 2. AMD(Asynchronous Module Definition)规范 3. CMD(Sea.js) 4. ES Modules 1、基本特性 2、导入与导出 3、关于导入一些用法 4、ESModu.
探索高效模块语法解析器：ES Module Lexer
gitblog_00051的博客
05-16 334
探索高效模块语法解析器：ES Module Lexer 项目地址:https://gitcode.com/guybedford/es-module-lexer 项目介绍 在JavaScript的现代开发中，ES Modules（ESM）已经成为标准的代码组织方式。为了帮助开发者更高效地处理和解析模块语法，es-module-lexer应运而生。这是一个轻量级的JavaScript库，专门用于提取模...
magento-elasticsearch-module:Magento的Elasticsearch模块
05-07
适用于Magento的Elasticsearch模块 许可开放软件许可（OSL 3.0） 安装前的要求 应该安装Elasticsearch并至少启动主节点。 有关设置说明，请阅读。 安装 与作曲家一起 "require": { ... "pocketphp/elasticsearch" ...
quill-placeholder-module:一个用于添加占位符的笔芯模块
05-02
羽毛笔占位符模块 用于添加占位符的笔芯模块。 安装 npm install --save quill-placeholder-module 用法 import getPlaceholderModule from 'quill-placeholder-module' // es5 var getPlaceholderModule = require ...
esmodule-no-module-doing-something:用nomodulemodule做疯狂的事情
05-28
esmodule没有模块在做某事用nomodule / module疯狂地做某事 传送两个输出 使用nomodule / module模式 以某种方式进行测试，即11->使用Parallels免费试用 成功传输输出（未找到与再生器运行时有关的要求错误） 带有...
generator-nordnet-es-module:搭建ES6节点模块
05-15
generator-nordnet-es-module 搭建ES6节点模块 符合npm init ES6工作流程 结构化且值得信赖的自述文件 测试，tdd和测试覆盖率 ， 和支持 Windows友好 为了谁？ 对于我们和您。 特别适用于： nordnet的开源和...
es-module-traversal:遍历es模块导入图
05-11
您还可以自定义resolver和read功能，以遍历来自静态服务器的导入图npm install es-module-traversal基准测试使用yarn test:bench命令运行基准yarn test:bench 它在大约0.30秒内遍历780个模块的图形，大部分时间都花...
es-module-shims:浏览器中基本模块支持上的新ES模块功能的垫片
04-27
ES模块垫片 现在有正在运行对ES模块具有基线支持的浏览器。 但是，诸如“导入地图”之类的模块功能将需要一段时间才能在浏览器中得到支持。 事实证明，我们实际上可以在性能卓越的7KB填充程序中，在这些基准实现的基础上，polyfill新模块功能。 这包括对以下内容的支持： 支持。 import.meta和import.meta.url 。 必要时，例如在较旧的Firefox版本中，动态import() 。 另外，可以实现自定义的，以允许在浏览器中流式传输工作流以支持自定义模块类型。 由于我们仍在使用本机模块加载器，因此可以对边缘情况进行全面解决，包括： ES模块中的实时绑定 动态导入表达式（ import('src/' + varname') ） 循环引用，对第一个未执行的循环父级禁用实时绑定。 由于仅使用微小的，并且使用非常简单的重写规则，因此转换速度非常快，尽管在成
ES Module使用详解
goodloving的博客
05-16 2530
历史上，JavaScript 一直没有模块（module）体系，**无法将一个大程序拆分成互相依赖的小文件**，再用简单的方法拼装起来。其他语言都有这项功能，比Python 的`import`，甚至就连 CSS 都有`@import`，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。
前端模块化开发-ESModules（笔记）
weixin_44479322的博客
11-25 1400
前端模块化开发（笔记） 背景 目前最重要的前端开发范式之一； 早期设计的时候没想到前端开发会如今的规模，所要处理的业务也越来越复杂，传统的开发模式已经不满足越来越多和复杂的前端页面；从而出现了，模块化的思想； 模块化的演变 1、文件划分：最早是通过页面的script标签区分，一个标签就是一个模块，通过全局变量来通信；这种模式的弊端 污染全局作用域，变量可以在外部访问和修改； 命名容易冲突； 无法管理模块间的依赖关系； 全靠相互约定来实现，项目规模变大后，容易出问题； 2、命名空间方式：每个模块暴露一个全
探索未来模块化：`es-module-shims`
gitblog_00047的博客
03-25 312
探索未来模块化：es-module-shims 项目地址:https://gitcode.com/guybedford/es-module-shims 在这个快速发展的前端开发世界里，JavaScript 模块化已经成为了标准实践。然而，浏览器对 ES 模块（ESM）的支持并不完全统一，这给开发者带来了挑战。es-module-shims 就是一个旨在解决这个问题的强大工具，它允许你在不支持 ES...
ES5 和ES6的模块化写法
lilong329329的博客
04-08 876
es5 和es6 语法
BIOS eModule
想变肥肥826的专栏
01-05 696
BIOS模块
ES Module的语法与使用
weixin_44374938的博客
11-30 1206
export 1.输出方式 //输出简单变量 export var a=1; //方法 export function fn(){ // } //类 export class c{ //.... } 2.放在花括号中输出 var a=1; var b=2; export{a,b}; function fn(){ // } export{fn}; class c{ // } export{c}; 3.as语法 ES module可以给输出的内容重命名，使用as来实现 var a=1; export{
AMI EFI Flash emodule
Have an aim in life, or your energies will be wasted.
03-20 2234
我可爱的多多还没满三个月时，公司就把我招回来干活了。为了能准时下班陪多多，我在上班的前两天拼命的debug呀，终于把M2MTC那个串口的问题解决了。接下来就很闲，闲的发慌的时候就胡思乱想，有一分钟想到了以前phoenix EFI下读写SPI flash的问题，于是决定也来研究一下AMI的flash模块。   u  第一只程序—FlashInit BOOLEAN found = FALSE;
babel-plugin-transform-async-to-generator的module和method干嘛的
05-19
`module` 用于指定需要转换的模块类型，默认值为 `"commonjs"`。可选值包括 `"amd"`、`"umd"`、`"systemjs"` 和 `"commonjs"`。 `method` 用于指定将 `async/await` 转换成生成器函数时所使用的方法。默认值为 `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小白小白从不日白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值