Daily Archives: 2024-07-04

箭头函数的经典应用示例

Posted on by | Leave a reply

1. 捕获 this 上下文

箭头函数最常用的一个场景是避免 this 绑定问题。在普通函数中，this 的值会根据调用方式而变化，而箭头函数会捕获其所在上下文的 this。

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

    printNameWithDelay() {
        setTimeout(() => {
            console.log(this.name);
        }, 1000);
    }
}

const person = new Person('John');
person.printNameWithDelay(); // 1秒后输出 'John'

在上面的代码中，如果使用普通函数，this 会在 setTimeout 的回调函数中指向全局对象（在严格模式下是 undefined），而箭头函数则保持了 this 指向 Person 实例。

2. 简化回调函数

箭头函数可以简化回调函数的书写，使代码更加简洁。

const numbers = [1, 2, 3, 4, 5];

// 普通函数写法
const squares = numbers.map(function (number) {
    return number * number;
});

// 箭头函数写法
const squaresArrow = numbers.map(number => number * number);

console.log(squaresArrow); // [1, 4, 9, 16, 25]

3. 处理数组的高阶函数

箭头函数在处理数组的高阶函数时非常方便。

const users = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Carol', age: 35 }
];

// 使用箭头函数
const names = users.map(user => user.name);

console.log(names); // ['Alice', 'Bob', 'Carol']

Git 配置和初始化

Posted on by | Leave a reply 
cd D:\myDev
git init
  • 设置用户名 密码
$ git config --global user.name "Your Name"
$ git config --global user.email "email@example.com"
$ git config --list

git config命令的--global参数，表示你这台机器上所有的Git仓库都会使用这个配置，当然也可以对某个仓库

使用 Git 管理项目

添加文件到仓库：

git add .

在 VS Code 中打开集成终端，导航到相应的项目文件夹，添加文件到仓库：

提交更改：

提交更改并添加提交信息：

git commit -m "Initial commit"

添加远程仓库

git remote add origin <远程仓库URL>

Slick Slider 的扩展 API

Posted on by | Leave a reply

获取当前幻灯片的索引

const currentSlideIndex = $('.your-slider').slick('slickCurrentSlide');
console.log(currentSlideIndex);

跳转到指定的幻灯片

$('.your-slider').slick('slickGoTo', 3); // 跳转到索引为3的幻灯片

增加或删除幻灯片

// 增加幻灯片
$('.your-slider').slick('slickAdd', '<div>New Slide</div>');

// 删除幻灯片
$('.your-slider').slick('slickRemove', 2); // 删除索引为2的幻灯片

自动播放控制

// 开始自动播放
$('.your-slider').slick('slickPlay');

// 停止自动播放
$('.your-slider').slick('slickPause');

动态设置选项

$('.your-slider').slick('slickSetOption', 'autoplay', true, true); // 动态设置自动播放

事件处理

Slick 提供了许多事件，可以用来响应幻灯片的变化。

$('.your-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
    console.log('幻灯片即将从', currentSlide, '切换到', nextSlide);
});

$('.your-slider').on('afterChange', function(event, slick, currentSlide) {
    console.log('当前幻灯片为', currentSlide);
});

创意交互效果示例

1. 幻灯片淡入淡出效果

通过自定义样式和事件，可以实现幻灯片淡入淡出的效果。

.fade-slide {
    opacity: 0;
    transition: opacity 0.5s;
}

.fade-slide.slick-active {
    opacity: 1;
}

$('.your-slider').slick({
    slidesToShow: 1,
    fade: true
});

2. 幻灯片背景色变化

根据当前幻灯片的索引，动态改变轮播图容器的背景色。

const colors = ['red', 'blue', 'green', 'yellow'];

$('.your-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
    $('.slider-container').css('background-color', colors[nextSlide]);
});