分类前端技术下的文章

2024-08-21




// 定义事件管理器接口
interface EventManager {
  on(event: string, handler: Function): void;
  off(event: string, handler: Function): void;
  trigger(event: string, ...args: any[]): void;
}
 
// 实现事件管理器
class BrowserEventManager implements EventManager {
  private events: { [key: string]: Function[] } = {};
 
  on(event: string, handler: Function): void {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(handler);
  }
 
  off(event: string, handler: Function): void {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(h => h !== handler);
    }
  }
 
  trigger(event: string, ...args: any[]): void {
    if (this.events[event]) {
      this.events[event].forEach(handler => handler.apply(this, args));
    }
  }
}
 
// 使用事件管理器
const eventManager = new BrowserEventManager();
 
const handler = (message: string) => {
  console.log(`Event triggered with message: ${message}`);
};
 
eventManager.on('myEvent', handler);
eventManager.trigger('myEvent', 'Hello, World!');  // 输出: Event triggered with message: Hello, World!
 
eventManager.off('myEvent', handler);

这段代码定义了一个EventManager接口，并实现了BrowserEventManager类来管理浏览器中的事件。on方法用于注册事件处理器，off方法用于注销，而trigger方法用于触发事件，调用所有注册的处理器。这是一个简单的事件管理示例，适用于学习和教育目的。

System

2024-08-21

所有,javascript

在uniapp中使用webview来引入Dplayer.js和hls.js以播放m3u8直播流视频，你需要做以下几步：

在uniapp项目中的页面（例如index.vue）中添加webview标签。
在webview中加载一个HTML页面，该页面引入了Dplayer.js和hls.js。
在HTML页面中初始化Dplayer并使用hls.js来处理m3u8流。

以下是一个简单的示例：




<!-- index.vue -->
<template>
  <view class="content">
    <web-view src="/path/to/your/video.html"></web-view>
  </view>
</template>

在你的项目目录中创建一个HTML文件（例如video.html），并添加以下内容：




<!-- video.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Video Player</title>
    <script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
</head>
<body>
<div id="dplayer"></div>
<script>
    if(Hls.isSupported()) {
        var hls = new Hls();
        hls.loadSource('https://your-m3u8-stream-url.m3u8');
        hls.attachMedia(document.getElementById('dplayer'));
        hls.on(Hls.Events.MANIFEST_PARSED, function() {
            hls.startLoad();
        });
    }
    else if (video.canPlayType('application/vnd.apple.mpegURL')) {
        video.src = 'https://your-m3u8-stream-url.m3u8';
        video.addEventListener('loadedmetadata', function() {
            video.play();
        });
    }
</script>
</body>
</html>

请确保替换your-m3u8-stream-url.m3u8为你的直播流地址。

注意：由于跨域限制，确保你的m3u8流和TS视频文件的服务器配置了CORS，否则可能会遇到播放问题。

在uniapp中使用webview时，请确保你的应用已经正确配置了webview权限，并且对应的页面在各个平台（如iOS和Android）上均已正确签名和打包。

- 阅读更多 -

typescript入门

System

2024-08-21

所有,typescript

TypeScript 是 JavaScript 的一个超集，并添加了一些静态类型的特性。这使得编写大型应用程序变得更加容易，并可以在编译时捕获许多常见的错误。

以下是一个简单的 TypeScript 示例，它定义了一个函数，该函数接收两个字符串参数并返回它们的连接。




function joinStrings(a: string, b: string): string {
    return a + b;
}
 
const result = joinStrings('Hello, ', 'World!');
console.log(result);  // 输出: Hello, World!

在这个例子中，a 和 b 的类型被指定为 string，这告诉 TypeScript 这两个参数应该是字符串类型。函数的返回类型也是 string，这样 TypeScript 可以在编译时检查函数是否正确地返回了一个字符串。

要运行这段 TypeScript 代码，你需要先安装 TypeScript 编译器。可以使用 npm 安装：




npm install -g typescript

然后，你可以使用 tsc 命令来编译 TypeScript 文件：




tsc example.ts

这将生成一个 JavaScript 文件 (example.js)，你可以在任何浏览器或 Node.js 环境中运行这个 JavaScript 文件。

- 阅读更多 -

前端学习笔记（15）-Vue3状态管理store及Vuex的使用

System

2024-08-21

所有,typescript




<template>
  <div>
    <h1>Vuex 示例</h1>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>
 
<script>
import { mapState, mapMutations } from 'vuex';
 
export default {
  computed: {
    // 使用对象展开运算符将此组件的计算属性添加到组件的计算属性中
    ...mapState({
      count: state => state.count
    })
  },
  methods: {
    // 使用对象展开运算符将此组件的方法添加到组件的方法中
    ...mapMutations({
      increment: 'INCREMENT',
      decrement: 'DECREMENT'
    })
  }
};
</script>

这个简单的Vue组件展示了如何使用Vuex来管理状态。它使用mapState帮助器函数来访问状态，并使用mapMutations帮助器函数来提交变更。这是一个更加符合现代Vue开发实践的示例。

System

2024-08-21

所有,typescript

报错解释：

TSError: ⨯ Unable to compile TypeScript 表示 TypeScript 编译器无法编译 TypeScript 代码。这可能是由于配置错误、代码错误或者缺少类型定义文件等原因导致的。

解决方法：

检查 tsconfig.json 文件，确保配置正确无误。
确保所有依赖项都已正确安装，特别是 TypeScript 和与项目相关的类型定义。
检查代码中是否有语法错误或未声明的变量。
如果使用了类型检查工具（如 ESLint 与 @typescript-eslint/parser），确保它们配置正确。
清除可能存在的 node_modules 目录和 package-lock.json 文件，然后运行 npm install 或 yarn 重新安装依赖。
如果问题依然存在，可以尝试更新 TypeScript 编译器到最新版本。

如果这些步骤不能解决问题，可能需要更详细的错误信息来进行针对性的排查。

- 阅读更多 -

【TypeScript】TS进阶-函数重载

System

2024-08-21

所有,typescript




// 定义函数重载
function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
    if (typeof x === 'number') {
        // 数字类型的处理逻辑
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        // 字符串类型的处理逻辑
        return x.split('').reverse().join('');
    }
}
 
// 测试代码
console.log(reverse(123)); // 输出321
console.log(reverse('hello')); // 输出olleh

这段代码首先定义了一个名为reverse的函数，它接受一个number或者string类型的参数，并返回一个number或string类型的结果。通过使用函数重载，我们可以为相同的函数提供不同的类型签名，从而使编译器能够根据传入参数的类型检测函数的使用方式。在函数体内，我们根据传入参数的类型来执行不同的逻辑，并返回相应类型的结果。最后，提供了一些测试代码来验证函数的正确性。

- 阅读更多 -

vite + ts 找不到模块@/xxxx 或其相应的类型声明

System

2024-08-21

所有,typescript

报错解释：

这个错误通常表示 Vite 项目中的 TypeScript 配置无法找到指定模块或其类型声明文件。@/通常是一个别名，代表项目的 src 目录。如果 Vite 或 TypeScript 配置中没有正确设置这个别名，或者相应的文件不存在，就会发生这个错误。

解决方法：

确认 tsconfig.json 或 jsconfig.json 中是否有关于 @ 别名的配置。如果没有，你需要添加一个。例如：




{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

确保 vite.config.ts 或 vite.config.js 中正确配置了别名。例如：




import { defineConfig } from 'vite';
import path from 'path';
 
export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

如果模块是一个第三方库，确保已经通过 npm 或 yarn 安装了该库。
如果是自定义模块，请检查文件是否确实存在于项目的 src 目录下，并且文件名没有拼写错误。
清除 Vite 缓存，并重新启动开发服务器。可以通过执行 npx vite --force 来强制重建缓存。
如果问题依旧存在，请检查是否有其他配置错误或者是 Vite 和 TypeScript 版本兼容性问题。

System

2024-08-21

所有,typescript

在Windows 7 + 内网环境下安装高版本Node.js，并使用Vite + Vue 3 + TypeScript进行项目开发，你可以按照以下步骤操作：

下载Node.js
由于Windows 7可能不支持最新Node.js版本，你需要下载一个较低但仍兼容Windows 7的版本。可以从Node.js官网下载旧版本。
安装Node.js
下载完成后，运行安装程序并按照提示完成安装。
使用npm安装cnpm
由于npm的某些操作可能不稳定或速度慢，你可以使用cnpm作为npm的一个替代。在命令行中运行以下命令来安装cnpm：




npm install -g cnpm --registry=https://registry.npm.taobao.org

使用cnpm安装Vite




cnpm install -g vite

创建Vue 3项目




vite create my-vue3-project
cd my-vue3-project

安装Vue 3和TypeScript支持




cnpm install --save-dev vue@next
cnpm install --save-dev typescript

配置Vite和TypeScript
你可能需要在项目根目录创建一个tsconfig.json文件并配置相关选项，同时修改vite.config.ts来支持TypeScript。
开发和构建项目
现在你可以开始开发你的Vue 3项目了。使用Vite提供的服务器启动项目：




npm run dev

构建项目：




npm run build

请注意，如果你的内网环境有防火墙或代理限制，你可能需要配置npm以使用正确的代理设置或设置环境变量以绕过特定的网络问题。

- 阅读更多 -

React+TypeScript项目中如何使用CodeMirror？

System

2024-08-21

所有,typescript

在React+TypeScript项目中使用CodeMirror，首先需要安装CodeMirror库以及TypeScript的类型定义文件：




npm install codemirror
npm install @types/codemirror

然后，你可以创建一个React组件来封装CodeMirror的使用。以下是一个简单的例子：




import React, { useEffect, useRef } from 'react';
import CodeMirror from 'codemirror';
import 'codemirror/lib/codemirror.css';
 
interface CodeMirrorProps {
  value: string;
  onChange: (value: string) => void;
}
 
const CodeMirrorComponent: React.FC<CodeMirrorProps> = ({ value, onChange }) => {
  const editorRef = useRef<HTMLDivElement>(null);
 
  useEffect(() => {
    const editor = CodeMirror(editorRef.current!, {
      value,
      mode: 'javascript', // 可以根据需要设置不同的模式，例如 'python', 'css' 等
      theme: 'material', // 编辑器主题
      lineNumbers: true, // 显示行号
      extraKeys: { 'Ctrl-Space': 'autocomplete' }, // 代码补全快捷键
    });
 
    editor.on('change', (instance, change) => {
      if (change.origin !== 'setValue') {
        onChange(instance.getValue());
      }
    });
 
    return () => {
      editor.toTextArea(); // 清理编辑器实例
    };
  }, []);
 
  return <div ref={editorRef} style={{ height: '100%' }} />;
};
 
export default CodeMirrorComponent;

在上面的代码中，我们创建了一个CodeMirrorComponent组件，它接收value和onChange属性，分别用于设置编辑器的初始内容和处理内容变化的回调。我们使用useRef来获取DOM元素的引用，并在useEffect中初始化CodeMirror编辑器实例。每当编辑器内容变化时，我们都会调用onChange回调函数，并传递新的值。

要注意的是，这个例子中的useEffect钩子只会在组件挂载时执行一次，因此它适合于只初始化CodeMirror一次的情况。如果你需要动态地重新配置编辑器，你可能需要在钩子中添加依赖项数组，并在数组中指定依赖项，从而在依赖项变化时更新编辑器配置。

- 阅读更多 -

为Cocos Creator 开发做准备，typescript简单快速入门

System

2024-08-21

所有,typescript




// 定义一个简单的类
class Person {
    // 属性
    name: string;
    age: number;
 
    // 构造函数
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
 
    // 方法
    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}
 
// 使用类
let person = new Person("Alice", 30);
person.greet(); // 输出: Hello, my name is Alice and I am 30 years old.

这段代码展示了如何在TypeScript中定义一个简单的类，包括其属性、构造函数和方法。然后实例化这个类，并调用其方法。这是学习TypeScript的一个基本例子，对于Cocos Creator开发者来说，它可以帮助他们理解如何在游戏开发中使用面向对象编程。

- 阅读更多 -