分类前端技术下的文章

jQuery实战指南：解锁网页设计新维度，构建互动体验升级版

2024-08-11

所有,jquery




// 引入jQuery库
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 
// 页面加载完成后执行
$(document).ready(function() {
    // 监听导航栏的点击事件
    $('.navigation').on('click', 'a', function(event) {
        event.preventDefault(); // 阻止a标签默认行为
        var target = $(this).attr('href'); // 获取目标元素的选择器
 
        // 平滑滚动到目标位置
        $('html, body').animate({
            scrollTop: $(target).offset().top
        }, 500);
    });
 
    // 监听滚动事件
    $(window).scroll(function() {
        // 获取当前视窗的滚动位置
        var scrollDistance = $(window).scrollTop();
 
        // 如果用户滚动到主内容区域，则更改导航栏的样式
        if (scrollDistance > 500) {
            $('.navigation').fadeIn(); // 显示导航栏
        } else {
            $('.navigation').fadeOut(); // 隐藏导航栏
        }
    });
});

这段代码使用jQuery实现了导航栏的交互，包括点击导航链接时平滑滚动到页面的相应位置，以及监听滚动事件来控制导航栏的显示和隐藏。平滑滚动效果通过animate方法实现，而导航栏的显示隐藏则通过fadeIn和fadeOut方法控制。

推荐一个非常实用的 jQuery 插件：jquery-textrange

2024-08-11

所有,jquery

jQuery-textrange 是一个 jQuery 插件，用于处理文本范围和选区。它允许开发者获取、设置和操作页面上的文本选区。

以下是如何使用 jQuery-textrange 的一个简单示例：

首先，确保你的页面已经加载了 jQuery 库。
引入 jquery.textrange 插件。
使用插件提供的方法来操作文本选区。

HTML 示例:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Textrange Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="path/to/jquery.textrange.js"></script>
</head>
<body>
    <textarea id="myTextarea">这是一个示例文本。</textarea>
    <script>
        $(document).ready(function() {
            var $textarea = $('#myTextarea');
 
            // 选中文本区域的部分文本
            $textarea.textRange('selectFrom', { start: 0, end: 5 });
 
            // 获取选中的文本
            var selectedText = $textarea.textRange('get');
            console.log(selectedText); // 输出: 这是一
 
            // 设置文本区域的选区
            $textarea.textRange('set', { start: 6, end: 10 });
 
            // 清除选区
            $textarea.textRange('collapse');
        });
    </script>
</body>
</html>

在这个例子中，我们首先通过 ID 选中了一个 <textarea> 元素，然后使用 selectFrom 方法选中了从索引 0 到 5 的文本。接着，我们使用 get 方法获取了选中的文本。然后我们用 set 方法设置了一个新的选区，并再次使用 collapse 方法清除了选区。这个插件提供了丰富的方法来操作文本选区，非常适合开发需要处理文本选区的 web 应用程序。

vue3+ts+vant4+pinia+axios+scss创建项目基本流程

2024-08-11

以下是使用Vue3、TypeScript、Vant 4、Pinia、Axios和SCSS创建项目的基本步骤：

初始化项目：




npm init vue@latest

选择需要的选项，例如：




Vue 3
TypeScript
Vant 4

安装依赖：




npm install

在main.ts中引入Vant组件库和样式：




import { createApp } from 'vue'
import App from './App.vue'
import Vant from 'vant'
import 'vant/lib/index.css'
 
const app = createApp(App)
app.use(Vant)
app.mount('#app')

配置Axios和Pinia：




// axios.ts
import axios from 'axios'
 
export default axios.create({
  baseURL: 'http://your-api-url',
  // 其他配置...
})
 
// pinia.ts
import { createPinia } from 'pinia'
 
export const pinia = createPinia()
 
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import axios from './axios'
import pinia from './pinia'
 
const app = createApp(App)
app.config.globalProperties.$axios = axios
app.use(pinia)
app.mount('#app')

使用SCSS：




// 在组件中使用
<style lang="scss">
.example {
  color: red;
}
</style>

这些步骤提供了一个基本框架，您可以根据项目需求进行扩展和定制。

2024-08-11




import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
 
// 假设有一个action创建函数和一个redux store
// action创建函数
export function incrementCounter() {
  return {
    type: 'INCREMENT'
  };
}
 
// 使用hooks获取store的状态和dispatch函数
export default function CounterComponent() {
  // 使用useSelector钩子获取store中的状态
  const counter = useSelector((state: any) => state.counter);
 
  // 使用useDispatch钩子获取dispatch函数
  const dispatch = useDispatch();
 
  // 使用useStore钩子获取整个store对象
  // const store = useStore();
 
  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={() => dispatch(incrementCounter())}>Increment</button>
    </div>
  );
}

这个代码示例展示了如何在React-redux项目中使用hooks（useSelector, useDispatch, 和useStore）来获取store的状态，dispatch函数，以及整个store对象。这是一种更现代，更简洁的React编写方式，它提高了代码的可读性和可维护性。

Typescript - as const 详细介绍

2024-08-11

as const 是 TypeScript 3.4 引入的一个特性，它用于创建一个具有常量枚举属性的对象字面量类型。这意味着在使用 as const 时，对象中的每个属性的值和原始类型都会被保留。




const enumValues = {
  a: 1,
  b: 2,
  c: 'three'
} as const;
 
type EnumValues = typeof enumValues;
 
// 类型为：
// EnumValues = {
//   readonly a: 1;
//   readonly b: 2;
//   readonly c: "three";
// }

在上面的例子中，enumValues 的类型是一个对象，其中包含三个属性：a、b 和 c。每个属性的值和类型都是固定的，这就意味着你不能更改这些属性的值，也不能给它们赋予不同的类型。

as const 也可以用于创建元组，但是元组中的每个元素都会被认为是常量，并且其类型会被固定。




const tuple = [1, 2, 3] as const;
 
type Tuple = typeof tuple;
 
// 类型为：
// Tuple = readonly [1, 2, 3]

在这个例子中，tuple 的类型是一个包含三个数字字面量类型元素的只读数组。

as const 还可以用于保留数组和对象的原始类型和值。




const array = [1, 2, 'three'] as const;
 
type ArrayType = typeof array;
 
// 类型为：
// ArrayType = readonly [1, 2, "three"]

在这个例子中，array 的类型是一个包含数字和字符串字面量的只读数组。

Visual Studio Code 自动编译 TypeScript

2024-08-11

在Visual Studio Code中，要自动编译TypeScript，你需要做以下几步：

确保你的项目中已经安装了TypeScript编译器，可以通过运行npm install typescript --save-dev来安装。
在项目根目录下创建一个tsconfig.json文件，这个文件包含了编译器的配置选项。
确保tsconfig.json中的outDir选项指向你想要输出JavaScript文件的目录。
安装TypeScript插件到Visual Studio Code。
在Visual Studio Code设置中启用自动保存功能。

以下是一个简单的tsconfig.json文件示例：




{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "sourceMap": true
  },
  "include": [
    "./src/**/*"
  ]
}

确保你的Visual Studio Code设置中启用了自动保存：

打开命令面板 (Ctrl+Shift+P 或 Cmd+Shift+P).
输入 settings 并选择 Preferences: Open Settings (JSON).
添加以下配置：




{
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000
}

这样配置后，每当你在Visual Studio Code中编辑TypeScript文件时，在文件保存后大约1秒钟后，TypeScript文件会被自动编译成JavaScript并保存到outDir指定的目录中。

2024-08-11

在Angular中，你可以使用ng-zorro-antd库中的Transfer List组件和Carousel组件来实现你所描述的需求。以下是如何使用这两个组件的简要示例：

首先，确保你已经安装了ng-zorro-antd。如果还没有安装，可以通过以下命令安装：




ng add ng-zorro-antd

在你的组件中，引入Transfer和Carousel组件：




import { TransferItem } from 'ng-zorro-antd/transfer';
import { CarouselModule } from 'ng-zorro-antd/carousel';

在你的组件模板中，使用Transfer和Carousel组件：




<!-- Transfer List Component -->
<nz-transfer
  [nzDataSource]="transferData"
  [nzListStyle]="{'width.px': 300, 'height.px': 300}">
</nz-transfer>
 
<!-- Carousel Component -->
<nz-carousel [nzAutoPlay]="true" [nzDots]="true">
  <div nz-carousel-content *ngFor="let img of images">
    <img [src]="img" style="width: 100%; height: 100%">
  </div>
</nz-carousel>

在你的组件类中，设置Transfer和Carousel所需的数据：




import { Component } from '@angular/core';
 
@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent {
  // 假设transferData是一个包含多个对象的数组，每个对象都有title和direction属性
  transferData = [...]; // 填充你的数据
 
  // 假设images是一个包含多个图片链接的数组
  images = [...]; // 填充你的图片链接数据
 
  // 如果Transfer的数据量很大，你可以使用虚拟滚动来提高性能
  // 这里省略了虚拟滚动的实现
}

请注意，示例中的transferData和images数据应该根据你的实际数据进行替换。

以上代码提供了Transfer List和Carousel的基本使用方法，你可以根据自己的需求进一步定制它们。如果你需要处理大量数据的性能问题，可以考虑使用虚拟滚动技术，例如Angular CDK的cdkVirtualScrollViewport。

前端 vite 配置代理服务器解决跨域问题

2024-08-11

在Vite项目中，你可以通过修改Vite配置文件来设置代理服务器，从而解决跨域问题。以下是一个简单的配置示例：

找到项目根目录下的 vite.config.js 文件（如果你使用的是 TypeScript，则可能是 vite.config.ts）。
在配置文件中，添加一个 server 配置对象，并在其中设置 proxy 属性。
在 proxy 对象中，你可以定义要代理的路径和相应的目标服务器。

下面是一个配置代理服务器来解决跨域问题的示例代码：




// vite.config.js 或 vite.config.ts
import { defineConfig } from 'vite';
 
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://backend.example.com', // 目标服务器地址
        changeOrigin: true, // 是否改变源地址
        rewrite: (path) => path.replace(/^\/api/, ''), // 路径重写
      },
    },
  },
});

在这个配置中，当请求以 /api 开头时，所有的请求都会被代理到 http://backend.example.com。changeOrigin 设置为 true 可以使得代理服务器把接收到的请求的 Host 头部改为目标服务器的地址，这对于解决跨域问题是非常重要的。rewrite 函数用于重写请求路径，这里的例子是去除了路径中的 /api 前缀。

这样配置后，前端应用发出的请求会被 Vite 代理服务器转发到指定的后端服务器，从而避免了跨域错误。

2024-08-11

这个错误信息表明在使用 Vue 3 和 TypeScript 开发时，系统无法找到 "path" 模块的类型声明文件，或者在处理样式文件 @fs/src/style.css 时发生了网络错误 net::ERR_ABOR。

解释：

对于 "path" 模块，通常是因为 Node.js 的 path 模块在 TypeScript 中已有内置定义，但如果你需要特定的类型声明，可能是因为没有安装类型声明文件。你可以通过运行 npm install @types/node --save-dev 来安装 Node.js 类型声明文件。
对于 net::ERR_ABOR 错误，这通常表示浏览器尝试加载资源，但操作被中止。这可能是由于网络问题、资源不存在或者资源被重定向到一个无效的URL。

解决方法：

对于 "path" 模块的问题，确保已经安装了 @types/node 包。
对于样式文件加载错误，检查文件路径是否正确，确保 @fs/src/style.css 文件确实存在于指定位置。
如果是网络问题导致的资源加载失败，检查网络连接，确保服务器正常运行，资源可访问。
如果是重定向问题，检查服务器配置，确保重定向设置正确。

请根据实际情况检查和解决这两个问题。