分类前端技术下的文章

2024-08-17

以下是几种不同的方法来判断一个元素是否在可视区域内：

方法一：使用getBoundingClientRect()方法




function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  const isVisible = (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
  return isVisible;
}

方法二：使用window.scrollY和window.innerHeight属性




function isInViewport(element) {
  const elementTop = element.offsetTop;
  const elementBottom = elementTop + element.offsetHeight;
  const scrollTop = window.scrollY;
  const scrollBottom = scrollTop + window.innerHeight;
  const isVisible = (elementTop >= scrollTop) && (elementBottom <= scrollBottom);
  return isVisible;
}

方法三：使用Element.getBoundingClientRect()方法和window.pageYOffset属性




function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  const isVisible = (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
  const scrollTop = window.pageYOffset;
  const scrollBottom = scrollTop + window.innerHeight;
  const isPositionVisible = (rect.top >= scrollTop) && (rect.bottom <= scrollBottom);
  return isVisible && isPositionVisible;
}

这些方法都可以判断一个元素是否在可视区域内，它们的实现方式略有不同，但都能达到相同的效果。

- 阅读更多 -

jquery datatable 修改单元格数据

System

2024-08-17

所有,jquery

在jQuery DataTables中，您可以使用cell()和data()方法来修改单元格的数据。以下是一个简单的例子，展示了如何修改特定单元格的数据：




// 假设您已经初始化了DataTable，并且您想要修改第二行第三列的数据
var table = $('#example').DataTable(); // 确保使用正确的表格ID
 
// 获取单元格对象
var cell = table.cell(1, 2); // 行索引从0开始，列索引从1开始
 
// 修改单元格数据
cell.data('新的数据').draw();

确保在调用cell()方法时使用正确的行和列索引。draw()方法会更新表格显示，以反映更改后的数据。

注意：如果您的表格配置了服务器模式（即serverSide选项设置为true），您需要在服务器端处理数据更新，因为客户端DataTable不会与服务器同步数据。

- 阅读更多 -

JQuery实现异步同时取多个URL的json

System

2024-08-17

所有,jquery

使用jQuery的$.when()方法可以同步获取多个URL的JSON数据。以下是一个简单的示例代码：




$.when(
  $.getJSON('/url1'),
  $.getJSON('/url2'),
  $.getJSON('/url3')
).done(function(response1, response2, response3) {
  // 处理获取到的数据
  var data1 = response1[0];
  var data2 = response2[0];
  var data3 = response3[0];
  
  // 使用数据进行操作
  console.log(data1);
  console.log(data2);
  console.log(data3);
}).fail(function(error) {
  // 处理错误情况
  console.error('An error occurred:', error);
});

在这个例子中，$.getJSON被调用三次以发出三个异步请求。$.when()接收这三个请求作为参数，并在所有请求都完成时调用done回调函数。每个响应都作为参数传递给done函数，你可以通过它们的索引或者直接访问属性来处理每个响应。如果任何一个请求失败，fail回调函数会被调用。

- 阅读更多 -

JavaScript获取异步数据的两种方法

System

2024-08-17

所有,jquery

在JavaScript中，获取异步数据通常涉及到使用fetch API或者XMLHttpRequest对象。以下是两种方法的示例代码：

使用fetch API的示例：




fetch('https://api.example.com/data')
  .then(response => {
    if (response.ok) {
      return response.json(); // 将响应数据转换为JSON
    }
    throw new Error('Network response was not ok.');
  })
  .then(data => {
    console.log('获取到的数据:', data);
  })
  .catch(error => {
    console.error('获取数据时发生错误:', error);
  });

使用XMLHttpRequest的示例：




var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onload = function() {
  if (xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log('获取到的数据:', data);
  } else {
    console.error('请求失败，状态码：', xhr.status);
  }
};
xhr.onerror = function() {
  console.error('请求出错');
};
xhr.send();

现在的JavaScript开发中，推荐使用fetch API，因为它更现代、更简洁，同时提供了更多的功能和更好的错误处理机制。

- 阅读更多 -

jQuery为input标签实现下拉选项筛选和选中功能

System

2024-08-17

所有,jquery




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery下拉筛选示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="myInput" placeholder="输入名称筛选...">
    <ul id="myUL">
        <li data-value="Alice">Alice</li>
        <li data-value="Bob">Bob</li>
        <li data-value="Charlie">Charlie</li>
        <!-- 更多列表项 -->
    </ul>
 
    <script>
        $(document).ready(function(){
            $("#myInput").on("keyup", function() {
                var searchTerm = $(this).val().toLowerCase();
                $("#myUL li").each(function(){
                    var lineStr = $(this).text().toLowerCase();
                    if(lineStr.indexOf(searchTerm) == -1){
                        $(this).hide();
                    }
                    else{
                        $(this).show();
                    }
                });
            });
        });
    </script>
</body>
</html>

这段代码实现了一个简单的下拉筛选功能，用户可以在输入框中输入文本来过滤<ul>标签内的列表项。jQuery用于处理文本输入事件，并根据用户的输入显示或隐藏相应的列表项。

System

2024-08-17

所有,typescript




import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import router from './router';
import store from './store';
 
// 创建Pinia实例
const pinia = createPinia();
 
// 创建Vue应用实例并挂载
const app = createApp(App);
 
// 配置Vue插件
app.use(router);
app.use(pinia);
 
// 如果有需要，可以在这里配置其他插件
 
// 如果有全局样式文件，在这里引入
// import './styles/global.css';
 
// 挂载Vue根实例到#app元素上
app.mount('#app');

这段代码展示了如何在Vue 3项目中集成Pinia作为状态管理库，并在创建Vue应用实例时配置路由和Pinia。在实际项目中，可以根据具体需求添加其他配置，比如插件、全局样式等。

- 阅读更多 -

React-Router5-路由组件参数传递

System

2024-08-17

所有,typescript




import React from 'react';
import { Route, Switch } from 'react-router-dom';
 
// 假设我们有一个User组件，需要根据URL中的:id参数来显示用户信息
const User = ({ match }) => (
  <div>
    <h1>User ID: {match.params.id}</h1>
  </div>
);
 
const AppRouter = () => (
  <Switch>
    <Route exact path="/user/:id" component={User} />
    {/* 其他路由配置 */}
  </Switch>
);
 
export default AppRouter;

在这个例子中，我们定义了一个User组件，它通过match.params.id来接收URL中的参数，并在页面上显示用户ID。然后我们定义了一个AppRouter组件，在这个组件中，我们使用<Route>组件和exact属性来确保当URL匹配/user/:id时，才会渲染User组件，并且将参数传递给它。

System

2024-08-17

所有,typescript

在Vue 3中，使用TypeScript时，如果想要通过defineExpose使得子组件暴露的方法具有类型提示，可以在父组件中定义一个接口来描述子组件暴露的属性和方法。

以下是一个简单的例子：

首先，定义子组件暴露的方法的接口：




// ChildComponent.ts
export interface ChildComponentExposedMethods {
  doSomething(): void;
  getValue(): number;
}

然后，在子组件中使用defineExpose来暴露方法：




<template>
  <!-- 子组件模板 -->
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { ChildComponentExposedMethods } from './ChildComponent';
 
export default defineComponent({
  name: 'ChildComponent',
  setup() {
    const doSomething = () => {
      // 实现功能
    };
 
    const value = ref(0);
    const getValue = () => {
      return value.value;
    };
 
    // 暴露的方法
    const exposed = { doSomething, getValue } as ChildComponentExposedMethods;
 
    // 在Vue 3中使用defineExpose来暴露属性和方法
    defineExpose(exposed);
 
    return {};
  },
});
</script>

最后，在父组件中接收并使用这些方法时会有类型提示：




<template>
  <ChildComponent ref="childComp"/>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { ChildComponentExposedMethods } from './ChildComponent';
 
export default defineComponent({
  name: 'ParentComponent',
  setup() {
    const childComp = ref<Nullable<ChildComponentExposedMethods>>(null);
 
    const callChildMethod = () => {
      if (childComp.value) {
        childComp.value.doSomething();
        console.log(childComp.value.getValue());
      }
    };
 
    return {
      childComp,
      callChildMethod,
    };
  },
});
</script>

在父组件中，通过ref创建了一个childComp引用，并指定了它的类型为Nullable<ChildComponentExposedMethods>，这样在调用子组件暴露的方法时，就会有代码提示。

- 阅读更多 -

关于 TypeScript 声明文件

System

2024-08-17

所有,typescript

在TypeScript中，声明文件（.d.ts 文件）用于描述已存在的JavaScript库的类型。这使得TypeScript可以对这些JavaScript库进行类型检查，并从编辑器等工具中获得智能提示。

例如，假设你想要在TypeScript中使用一个名为example.js的JavaScript库：

首先，确保example.js文件已经在你的项目中。
创建一个名为example.d.ts的文件，并在其中写入以下内容：




// example.d.ts
 
/**
 * 这是一个JavaScript库的TypeScript声明文件示例。
 */
 
/**
 * 一个示例函数。
 * @param a 第一个参数。
 * @param b 第二个参数。
 * @returns 返回值。
 */
declare function exampleFunction(a: string, b: number): boolean;
 
export { exampleFunction };

在TypeScript文件中，你现在可以导入并使用exampleFunction了：




// 在你的TypeScript文件中。
 
import { exampleFunction } from './example';
 
const result = exampleFunction('hello', 42);

这样，TypeScript就会使用example.d.ts文件中提供的类型信息来进行类型检查和提供智能提示。

- 阅读更多 -

基于qiankun搭建angular15微前端项目入门实践

System

2024-08-17

所有,typescript

以下是一个基于Angular 15和qiankun搭建微前端的基本示例。

首先，确保你已经安装了Angular CLI，并创建了一个Angular工程。

安装qiankun:




npm install qiankun --save

在你的Angular项目中创建一个微应用主入口文件（例如 src/micro-app/main.ts）:




import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
 
// 导入qiankun必要的symbol和类型
import { registerMicroApps, start } from 'qiankun';
 
if (environment.production) {
  enableProdMode();
}
 
// 注册微应用
registerMicroApps([
  {
    name: 'your-micro-app', // 微应用名称
    entry: '//localhost:4201', // 微应用的入口地址
    container: '#micro-app', // 微应用挂载的DOM节点
    activeRule: '/your-micro-app', // 微应用的激活规则
  },
  // 可以注册更多微应用
]);
 
// 启动qiankun
start();
 
platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .then(ref => {
    // 当微应用加载完毕时...
  })
  .catch(err => console.error(err));

在你的Angular模板中添加微应用的容器（例如 src/app/app.component.html）:




<div style="height: 400px;">
  <div id="micro-app"></div>
</div>

确保微应用的web服务器配置允许跨源资源共享（CORS）。
微应用的index.html中需要有一个挂载点（例如一个带有特定id的div元素）:




<div id="micro-app"></div>

微应用的入口js文件（例如 micro-app/src/main.ts）需要导出一个生命周期钩子函数：




import { bootstrap } from 'aurelia-bootstrapper';
 
export function render() {
  // 渲染微应用的逻辑
  return bootstrap(customContainerSelector);
}

以上是一个基本的入门示例。在实际应用中，你可能需要处理更多的生命周期钩子函数，比如destroy、update等，并且需要确保微应用的样式不会影响到主应用，可能还需要处理微应用的路由和状态管理。

- 阅读更多 -