分类前端技术下的文章

2024-08-09




import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Login from '@/components/Login'
import Dashboard from '@/components/Dashboard'
import UserProfile from '@/components/UserProfile'
 
Vue.use(Router)
 
const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      children: [
        {
          path: 'login',
          name: 'login',
          component: Login
        },
        {
          path: 'dashboard',
          name: 'dashboard',
          component: Dashboard,
          children: [
            {
              path: 'profile',
              name: 'user-profile',
              component: UserProfile
            }
          ]
        }
      ]
    }
  ]
})
 
export default router

这个代码实例展示了如何在Vue.js中使用vue-router配置多层级的路由，以及如何嵌套子路由。在这个例子中，/dashboard/profile路径将渲染UserProfile组件，而且它是嵌套在Dashboard组件内部的。这种嵌套可以用于构建复杂的应用界面，其中子路由根据父路由的不同而变化。

- 阅读更多 -

JQuery获取节点的方法

System

2024-08-09

所有,jquery

在jQuery中，获取DOM节点的方法主要有以下几种：

$(selector)：通过选择器获取元素，返回一个包含所有匹配元素的jQuery对象。




$('#elementId') // 获取ID为elementId的元素
$('.className') // 获取所有class为className的元素
$('li')         // 获取所有的li元素

.find(selector)：在当前jQuery对象集合中查找所有匹配选择器的元素。




$('ul').find('li') // 在ul元素中查找所有的li元素

.children(selector)：获取当前元素集合中每个元素的直接子元素，可以传入选择器过滤。




$('ul').children('li') // 获取ul元素的直接子元素li

.parent(selector)：获取当前元素集合中每个元素的父元素，可以传入选择器过滤。




$('li').parent('ul') // 获取li元素的父元素ul

.parents(selector)：获取当前元素集合中每个元素向上的所有父级元素，可以传入选择器过滤。




$('li').parents('ul') // 获取li元素所有的父级ul元素

.siblings(selector)：获取当前元素集合中每个元素的同级兄弟元素，可以传入选择器过滤。




$('li').siblings('li') // 获取li元素的所有同级兄弟元素

.eq(index)：获取当前jQuery对象集合中指定索引处的元素。




$('li').eq(0) // 获取第一个li元素

.first()：获取当前jQuery对象集合中的第一个元素。




$('li').first() // 获取第一个li元素

.last()：获取当前jQuery对象集合中的最后一个元素。




$('li').last() // 获取最后一个li元素

.filter(selector)：筛选出当前jQuery对象集合中匹配选择器的元素。




$('li').filter('.active') // 筛选出class为active的li元素

这些方法可以灵活组合使用，以便在DOM中导航和选择元素。

- 阅读更多 -

html鼠标悬停图片放大

System

2024-08-09

所有,html

要实现鼠标悬停时图片放大的效果，可以使用CSS的:hover伪类来改变图片的大小。以下是一个简单的HTML和CSS示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Hover Effect</title>
<style>
    img:hover {
        transform: scale(1.1); /* 放大10% */
        transition: transform 0.3s ease; /* 动画过渡效果 */
    }
</style>
</head>
<body>
 
<img src="image.jpg" alt="Sample Image" width="200" height="200">
 
</body>
</html>

在这个例子中，当鼠标悬停在<img>元素上时，transform属性会将图片缩放大1.1倍，transition属性则定义了这个变化发生的时间长度和效果。

- 阅读更多 -

JS中设置时间和定时器

System

2024-08-09

所有,javascript

在JavaScript中，您可以使用Date对象来设置时间，并使用setTimeout或setInterval来设置一次性或重复性的定时器。

设置时间示例：




// 设置具体时间（例如2023年4月1日下午3点30分）
var specificTime = new Date(2023, 3, 1, 15, 30); // 月份是从0开始的，所以4月是3
 
// 设置相对当前时间的延迟（例如5秒后）
var delay = 5000; // 5000毫秒后
 
使用setTimeout设置单次定时器：
```javascript
// 当setTimeout结束时执行的函数
function alertHello() {
  alert('Hello World!');
}
 
// 设置定时器，在指定时间后执行函数
var timer = setTimeout(alertHello, delay); // 或者specificTime - new Date()

使用setInterval设置重复定时器：




// 每隔一定时间就执行的函数
function sayHello() {
  console.log('Hello World!');
}
 
// 设置定时器，每隔指定时间就执行函数
var interval = setInterval(sayHello, 10000); // 每10秒执行一次

请注意，Date对象中的月份是从0开始的，即0代表1月，11代表12月。时间设置时，小时使用24小时制。

- 阅读更多 -

TypeScript 中的常用类型声明大全

System

2024-08-09

所有,typescript




// TypeScript 中的常见类型声明
 
// 数字类型
let decimal: number = 6;
let hex: number = 0xf00d;
 
// 字符串类型
let color: string = "blue";
color = 'red';
 
// 布尔类型
let isDone: boolean = false;
 
// 数组类型
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];
 
// 元组类型，表示一个已知元素数量和类型的数组
let x: [string, number];
x = ['hello', 10]; // OK
// x = [10, 'hello']; // Error
 
// 枚举类型，定义了一些命名常量
enum Color {
  Red,
  Green,
  Blue,
}
let c: Color = Color.Green;
 
// 任意类型，通常用于不清楚类型的变量
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // OK, but no type checking
 
// 空类型，常用于不想赋任何值的变量
let unusable: void = undefined;
 
// 异构对象类型，表示key-value对，key必须是字符串类型或者数字类型，value是任意类型
let search: { [key: string]: any } = {
    name: 'John',
    age: 30
};
 
// 函数类型，定义了函数的参数类型和返回值类型
let add: (x: number, y: number) => number = function (x, y) {
    return x + y;
};
 
// 类类型，定义了类的属性和方法
class Car {
  engine: string;
  constructor(engine: string) {
    this.engine = engine;
  }
  drive() {
    console.log(`The ${this.engine} engine roars to life!`);
  }
}
 
// 接口类型，定义了对象的形状
interface Person {
  name: string;
  age: number;
}
 
let person: Person = {
  name: 'Alice',
  age: 30
};
 
// 类型别名，为现有类型定义新名称
type NewType = string | number;
let unionType: NewType = 'hello';
unionType = 100;

- 阅读更多 -

element-ui日期时间组件el-date-picker设置禁用日期

System

2024-08-09

所有,vue.js

在Element UI的日期时间选择器组件el-date-picker中，可以通过设置disabledDate属性来禁用特定的日期。disabledDate是一个方法，接收当前日期作为参数，并在此日期满足某些条件时返回true，表示该日期被禁用。

下面是一个例子，展示如何禁用今天之前的所有日期：




<template>
  <el-date-picker
    v-model="value"
    type="date"
    placeholder="选择日期"
    :disabled-date="disabledDate"
  ></el-date-picker>
</template>
 
<script>
export default {
  data() {
    return {
      value: ''
    };
  },
  methods: {
    disabledDate(time) {
      return time.getTime() < Date.now() - 8.64e7; // 8.64e7 毫秒数代表一天
    }
  }
};
</script>

在这个例子中，disabledDate方法返回一个布尔值，如果当前日期小于（今天日期减去一天的毫秒数），则表示该日期是禁用的。这里使用Date.now()获取当前时间的毫秒数，并减去一天的毫秒数来禁用今天之前的所有日期。您可以根据需要修改这个方法，以禁用特定的日期范围或单独的日期。

System

2024-08-09

所有,react native




import React, { Component } from 'react';
import { View, Text, StyleSheet, Platform } from 'react-native';
 
export default class NavigationBar extends Component {
  render() {
    const { color, title } = this.props;
    const navBarStyle = { ...styles.navBar, backgroundColor: color };
 
    return (
      <View style={navBarStyle}>
        <Text style={styles.title}>{title}</Text>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  navBar: {
    flex: 1,
    justifyContent: 'center',
    // 根据平台设置不同的状态栏的高度
    height: Platform.OS === 'ios' ? 64 : 56,
  },
  title: {
    color: 'white',
    fontSize: 20,
    alignSelf: 'center',
    margin: 15,
  },
});

这段代码定义了一个名为NavigationBar的React组件，它接收color和title两个属性，并根据接收的color属性来设置导航栏的背景色。在styles中定义了导航栏和标题的样式，并根据不同的平台设置了状态栏的高度。这个组件可以被用来在应用中实现不同场景下的导航栏色彩设置。

- 阅读更多 -

推荐开源项目：React Native 图像工具库（已废弃）

System

2024-08-09

所有,react native

React Native 图像处理库 react-native-image-tools 已经不再维护。如果你需要一个替代库，可以考虑使用以下几个流行的库：

react-native-image-editor: 提供了基本的图片编辑功能，如裁剪和旋转。
react-native-image-resizer: 用于调整图片尺寸以适应应用。
react-native-image-to-base64: 将图片转换为Base64编码的字符串。
react-native-fast-image: 一个优化的、带有缓存机制的图片组件。

这些库可以通过npm或yarn进行安装，例如：




npm install react-native-image-editor
# 或者
yarn add react-native-image-editor

然后根据库的文档进行相应的配置，并在代码中正确使用。

请注意，在实际项目中，你可能需要为每个平台单独进行一些配置，比如在iOS上使用CocoaPods，在Android上进行Gradle设置等。这些细节通常会在库的npm页面或GitHub仓库的README.md中有所描述。

- 阅读更多 -

React hooks实现聊天室

System

2024-08-09

所有,react native

使用React hooks实现一个简单的聊天室，可以包括发送和接收消息的功能。以下是一个简化版的聊天室组件示例：




import React, { useState, useRef } from 'react';
 
const ChatRoom = () => {
  const [messages, setMessages] = useState([]);
  const messageInput = useRef(null);
 
  const sendMessage = () => {
    const message = messageInput.current.value;
    setMessages(messages => [...messages, message]);
    messageInput.current.value = '';
  };
 
  return (
    <div>
      <ul>
        {messages.map((message, index) => (
          <li key={index}>{message}</li>
        ))}
      </ul>
      <input ref={messageInput} type="text" placeholder="Type a message" />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
};
 
export default ChatRoom;

这个示例包含了基本的发送消息功能和一个用于展示消息的列表。消息存储在组件的状态中，并通过一个输入框和按钮进行操作。当用户发送一条消息后，该消息将被添加到消息列表并清空输入框以供下一条消息使用。

- 阅读更多 -

React学习8（DOM的diff算法）

System

2024-08-09

所有,react native

在React中，DOM的diff算法是一种用于比较新旧两棵虚拟DOM树的差异，并找出最小的DOM更新操作的算法。这样可以提高性能，减少不必要的DOM更新。

React的diff算法是深度遍历两棵树的过程，但是它在某些情况下做了一些优化，例如：

当遇到不同类型的节点时，就会直接删除旧节点，并新建新节点，因为这样的更改不会再进行深度比较。
当节点类型相同时，会进行深度比较，并对DOM进行最小化更新。

以下是一个简化的diff算法示例，用于演示React的diff过程：




function diff(oldTree, newTree) {
  if (oldTree.type !== newTree.type) {
    // 节点类型不同，直接替换整个DOM子树
    replaceNode(oldTree.dom, newTree.render());
    return;
  }
 
  // 节点类型相同，可能需要进一步比较属性和子节点
  diffAttributes(oldTree.dom, oldTree.attr, newTree.attr);
 
  // 递归比较子节点
  let newChildren = newTree.children || [];
  let oldChildren = oldTree.children || [];
  newChildren.forEach((newChild, index) => {
    let oldChild = oldChildren[index];
    if (!oldChild || newChild.key !== oldChild.key) {
      // 子节点不存在或键值不匹配，插入新节点
      insertNode(oldTree.dom, newChild.render(), index);
    } else {
      // 键值相同，递归比较子节点
      diff(oldChild, newChild);
    }
  });
 
  // 移除多余的旧子节点
  if (newChildren.length < oldChildren.length) {
    removeNodes(oldTree.dom, newChildren.length, oldChildren.length);
  }
}

这个示例中，diff函数接收旧树和新树作为参数，并执行相应的DOM操作来更新DOM以匹配新树。这个过程是递归的，但是对于某些已知的不同类型的节点，会直接替换整个子树，避免了深度的递归比较。这样的优化使得React的diff算法在大多数情况下都能有效且高效地执行。

- 阅读更多 -