分类 javascript 下的文章

2024-08-15

一种实现方法是使用字符串的截取函数substring。

获取指定字符后面的所有字符串：




function getStringAfter(str, char) {
  var index = str.indexOf(char);
  if (index === -1) return "";  // 如果未找到指定字符，则返回空字符串
  return str.substring(index + char.length);
}
 
// 示例用法
var result = getStringAfter("Hello, world", ",");
console.log(result);  // 输出: " world"

获取指定字符前面的所有字符串：




function getStringBefore(str, char) {
  var index = str.indexOf(char);
  if (index === -1) return "";  // 如果未找到指定字符，则返回空字符串
  return str.substring(0, index);
}
 
// 示例用法
var result = getStringBefore("Hello, world", ",");
console.log(result);  // 输出: "Hello"

另一种实现方法是使用字符串的分割函数split。

获取指定字符后面的所有字符串：




function getStringAfter(str, char) {
  var parts = str.split(char);
  return parts.slice(1).join(char);
}
 
// 示例用法
var result = getStringAfter("Hello, world", ",");
console.log(result);  // 输出: " world"

获取指定字符前面的所有字符串：




function getStringBefore(str, char) {
  var parts = str.split(char);
  return parts[0];
}
 
// 示例用法
var result = getStringBefore("Hello, world", ",");
console.log(result);  // 输出: "Hello"

System

2024-08-15

所有,javascript




(function flexible(window, document) {
  var docEl = document.documentElement;
  var dpr = window.devicePixelRatio || 1;
  // adjust body font size
  function setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = 12 * dpr + 'px';
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize);
    }
  }
  setBodyFontSize();
 
  // set 1rem = viewWidth / 10
  function setRemUnit() {
    var rem = docEl.clientWidth / 10;
    docEl.style.fontSize = rem + 'px';
  }
 
  setRemUnit();
 
  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit);
  window.addEventListener('pageshow', function(e) {
    if (e.persisted) {
      setRemUnit();
    }
  });
 
  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body');
    var testElement = document.createElement('div');
    testElement.style.border = '.5px solid transparent';
    fakeBody.appendChild(testElement);
    docEl.appendChild(fakeBody);
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines');
    }
    docEl.removeChild(fakeBody);
  }
}(window, document));

这段代码实现了移动端页面的自适应布局，通过设置document.body.style.fontSize和document.documentElement.style.fontSize来分别定义了不同元素的基础字体大小。其中，document.documentElement指的是文档根元素，在HTML中通常是<html>标签。通过监听窗口大小变化，代码能够实时调整基础字体大小，从而实现响应式布局。

- 阅读更多 -

js中如何将对象转换为数组

System

2024-08-15

所有,javascript

在JavaScript中，可以使用Object.keys(), Object.values(), 或 Object.entries()方法将对象转换为数组。

Object.keys(obj): 返回一个包含对象所有自有可枚举属性名称的数组，属性名以字符串形式返回。




const obj = { a: 1, b: 2, c: 3 };
const keys = Object.keys(obj); // ["a", "b", "c"]

Object.values(obj): 返回一个包含对象所有自有可枚举属性值的数组。




const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj); // [1, 2, 3]

Object.entries(obj): 返回一个包含对象所有自有可枚举属性的键值对数组。




const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj); // [["a", 1], ["b", 2], ["c", 3]]

以上方法返回的数组可以用于进一步的操作，例如遍历、映射或过滤。

System

2024-08-15

所有,javascript

在HTML5、CSS3和JavaScript的基础上，创建一个简单的网页，该网页包含一个按钮，点击后在控制台输出"Hello, World!"。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Example</title>
    <style>
        button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
 
<button onclick="sayHello()">Click Me</button>
 
<script>
    function sayHello() {
        console.log('Hello, World!');
    }
</script>
 
</body>
</html>

这个简单的网页展示了如何在HTML中添加一个按钮，并在CSS中给它一个样式。JavaScript函数sayHello()被绑定到按钮的点击事件上，当按钮被点击时，它会在浏览器的控制台输出"Hello, World!"。

- 阅读更多 -

在UniApp中使用Three.js渲染3D模型

System

2024-08-15

所有,javascript




<template>
  <view class="container">
    <canvas canvas-id="canvas" style="width: 100%; height: 100%"></canvas>
  </view>
</template>
 
<script>
  import * as THREE from 'three';
  import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 
  export default {
    data() {
      return {
        camera: null,
        scene: null,
        renderer: null,
        model: null
      }
    },
    onReady() {
      this.initThree();
      this.addLights();
      this.addCamera();
      this.loadModel();
      this.animate();
    },
    methods: {
      initThree() {
        this.scene = new THREE.Scene();
        this.renderer = new THREE.WebGLRenderer({ antialias: true });
        this.renderer.setSize(uni.upx2px(750), uni.upx2px(750));
        uni.createSelectorQuery()
          .select('#canvas')
          .node()
          .then(res => {
            res.appendChild(this.renderer.domElement);
          });
      },
      addLights() {
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
        this.scene.add(ambientLight);
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
        directionalLight.position.set(1, 1, 1);
        this.scene.add(directionalLight);
      },
      addCamera() {
        this.camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
        this.camera.position.set(0, 10, 20);
        this.camera.lookAt(0, 0, 0);
      },
      loadModel() {
        const loader = new GLTFLoader();
        loader.load('path/to/your/model.glb', (gltf) => {
          this.model = gltf.scene;
          this.scene.add(this.model);
        }, undefined, (error) => {
          console.error(error);
        });
      },
      animate() {
        requestAnimationFrame(this.animate);
        this.model.rotation.y += 0.01;
        this.renderer.render(this.scene, this.camera);
      }
    }
  }
</script>
 
<style>
  .container {
    width: 750rpx;
    height: 750rpx;
    background-color: #000;
  }
</style>

这段代码展示了如何在UniApp中初始化Three.js，添加灯光、相机和3D模型，并使用GLTFLoader加载一个3D模型。在onReady生命周期钩子中，它设置了Three.js的场景、渲染器，并将渲染器挂载到Canvas上。然后，它添加了环境光和平行光，并设置了相机的位

- 阅读更多 -

NodeJS中实现一个真正的Sleep，Sleep期间不影响其它线程执行

System

2024-08-15

所有,javascript

在Node.js中，实现一个真正的sleep函数，即在指定的时间内暂停代码执行，但不影响其他线程执行，可以使用Promise结合setTimeout来实现。这里的"真正的sleep"意味着当前线程会暂停执行，但不会阻塞事件循环，从而不影响其他线程的执行。

以下是一个简单的实现：




function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
 
// 使用方法
async function demo() {
  console.log('Before sleep');
  await sleep(2000); // 暂停2秒
  console.log('After sleep');
}
 
demo();

在上面的代码中，sleep函数返回一个Promise，在指定的时间ms后调用resolve，这样await sleep(2000)会暂停执行2秒钟，但不会阻塞事件循环。这样其他线程可以正常执行。

- 阅读更多 -

EdgeOne 边缘函数 + Hono.js + Fauna 搭建个人博客

System

2024-08-15

所有,javascript

以下是一个使用EdgeOne、Hono.js和FaunaDB搭建个人博客的高层次架构示例。请注意，EdgeOne和Hono.js的具体API和配置细节可能会随着时间而变化，因此以下代码示例仅供参考。

安装EdgeOne CLI工具：




npm install -g edgeone

使用EdgeOne创建一个新的函数：




// 保存为 blog.js
module.exports = async function(context, callback) {
  const faunadb = require('faunadb'),
        q = faunadb.query;
 
  const client = new faunadb.Client({
    secret: context.secrets.FAUNADB_SECRET // 从环境变量中获取
  });
 
  // 假设这是一个处理博客文章的逻辑
  const post = {
    title: context.body.title,
    content: context.body.content
  };
 
  try {
    const response = await client.query(
      q.Create(q.Collection('posts'), { data: post })
    );
    callback(null, { body: response.data });
  } catch (error) {
    callback(error);
  }
};

在Hono.js中配置API端点来使用这个函数：




const edgeOne = require('edgeone');
 
// 假设已经有一个Hono.js服务器实例
const server = Hono.post("/posts") // 定义一个处理POST请求的路由
  .receiveJson() // 接收JSON类型的请求体
  .bind(edgeOne("blog.js")) // 绑定之前创建的EdgeOne函数
  .done(); // 完成路由配置
 
server.start(); // 启动服务器

在FaunaDB中创建集合和权限：




// 使用FaunaDB的CLI或者控制台执行以下查询
CreateCollection({ name: "posts" })
CreateRole({
  name: "blog_role",
  privileges: [{ collection: "posts", actions: ["create"] }],
  roles: ["public"]
})

以上代码示例提供了一个基本框架，展示了如何将EdgeOne函数与Hono.js和FaunaDB集成。请注意，这只是一个教育性示例，并且可能需要根据实际需求进行调整和扩展。

System

2024-08-15

所有,javascript

以下是一个简化的React、TypeScript、NodeJS和MongoDB搭配使用的Todo App的核心代码示例。

前端部分（React + TypeScript）




import React, { useState, useEffect } from 'react';
import axios from 'axios';
 
const App: React.FC = () => {
  const [todos, setTodos] = useState([]);
 
  useEffect(() => {
    axios.get('/api/todos').then(response => {
      setTodos(response.data);
    });
  }, []);
 
  // ... 其他UI渲染和功能代码
};
 
export default App;

后端部分（NodeJS + TypeScript）




import express from 'express';
import mongoose from 'mongoose';
 
const app = express();
const port = 3001;
 
// 连接MongoDB数据库
mongoose.connect('mongodb://localhost:27017/todos_app', { useNewUrlParser: true });
 
// 定义Todo模型
const todoSchema = new mongoose.Schema({
  name: String,
  isCompleted: Boolean
});
const Todo = mongoose.model('Todo', todoSchema);
 
// 获取所有Todos
app.get('/api/todos', (req, res) => {
  Todo.find({}, (err, todos) => {
    if (err) {
      res.send(err);
    } else {
      res.json(todos);
    }
  });
});
 
// ... 其他API端点处理代码
 
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

以上代码仅展示了核心功能，实际应用中还需要包含数据库模型、验证器、错误处理等。这个示例旨在展示如何使用React构建前端界面，以及如何使用NodeJS和MongoDB构建后端API。

- 阅读更多 -

win7系统为搭建vue3环境安装高版本nodejs和pnpm踩的坑

System

2024-08-15

所有,javascript

在Windows 7上安装较新版本的Node.js和使用pnpm时可能会遇到兼容性问题。以下是解决这些问题的方法：

安装Node.js：
- 由于Windows 7不支持Node.js的最新版本（如Node.js 16及以上），你需要安装一个较低的版本，例如Node.js 14。可以使用nvm（Node Version Manager）来管理不同版本的Node.js。
使用pnpm：
- 如果你想使用pnpm而不是npm或yarn，你需要确保使用与Node.js版本兼容的pnpm版本。

以下是具体步骤：

安装nvm：
- 访问https://github.com/coreybutler/nvm-windows/releases，下载并安装nvm-windows。
安装Node.js 14：
- 打开命令提示符（cmd）或PowerShell，运行以下命令：
```
nvm install 14
nvm use 14
nvm alias default 14
```
安装pnpm：
- 使用npm安装pnpm：
```
npm install -g pnpm
```

如果在安装过程中遇到权限问题，可能需要以管理员身份运行命令提示符。

注意：确保你安装的Node.js和pnpm版本与你的项目和Vue 3的要求相兼容。

2024-08-15




// 假设有一个树形结构的对象数组
let treeData = [
  {
    id: 1,
    title: '一级菜单1',
    children: [
      {
        id: 2,
        title: '二级菜单1-1',
        children: [
          { id: 3, title: '三级菜单1-1-1' },
          { id: 4, title: '三级菜单1-1-2' }
        ]
      },
      { id: 5, title: '二级菜单1-2' }
    ]
  },
  { id: 6, title: '一级菜单2' }
];
 
// 使用递归函数将树形结构数据扁平化
function flattenTree(tree) {
  let result = [];
  function recurse(nodes) {
    nodes.forEach((node) => {
      result.push({ id: node.id, title: node.title });
      if (node.children && node.children.length > 0) {
        recurse(node.children);
      }
    });
  }
  recurse(tree);
  return result;
}
 
// 调用函数并打印结果
let flatData = flattenTree(treeData);
console.log(flatData);

这段代码定义了一个flattenTree函数，它接受一个树形结构的数组作为参数，并返回一个扁平化后的对象数组。这个函数通过递归遍历每个节点，收集节点的信息并最终将其放入结果数组中。这是一个常见的数据处理技巧，对于开发者需要处理树形结构数据时非常有用。

- 阅读更多 -