分类 javascript 下的文章

2024-08-09

原型污染是一种安全漏洞，它发生在当不可信的数据被混合到JavaScript的原型链中时。在Node.js中，如果不正确地处理不可信的数据，就可能导致原型污染攻击。

原型污染攻击通常涉及恶意用户修改对象的原型，以便在运行时修改对象的行为。如果这些更改被合并到可信的代码中，就可能导致安全问题。

解决方法：

避免直接扩展内置对象的原型。
使用Object.create(null)创建不继承任何属性的空对象。
对于可能包含不可信数据的对象，不要动态地为它们添加新属性。
使用JSON.parse()时，始终提供第二个安全的reviver参数来清理数据。
使用模块化和封装来限制攻击面。
使用最新的Node.js安全指南和最佳实践。

示例代码：




// 不要直接扩展内置对象的原型
// 错误示例
Object.prototype.myCustomFunction = function() {}; // 危险
 
// 正确做法
const myCustomObject = Object.create(null);
myCustomObject.myCustomFunction = function() {};
 
// 使用JSON.parse时清理数据
const safeData = JSON.parse(unsafeData, (key, value) => {
  // 这里可以添加清理逻辑
  return value;
});

始终保持警惕，并确保在处理不可信的数据时采取严格的安全措施。

vue.js js 雪花算法ID生成 vue.js之snowFlake算法

2024-08-09




// 引入vue和node的crypto模块
import Vue from 'vue'
const crypto = require('crypto')
 
// 定义snowFlake算法生成ID的Vue插件
const snowFlakeIdPlugin = {
  install(Vue, options) {
    // 扩展Vue实例方法
    Vue.prototype.$snowFlakeId = () => {
      const timeBits = 41 // 时间位数
      const workerBits = 5 // 机器ID位数
      const seqBits = 12 // 序列号位数
 
      const timeLeftShift = workerBits + seqBits // 时间左移位数
      const workerLeftShift = seqBits // 机器ID左移位数
 
      const sequenceMask = -1 ^ (-1 << seqBits) // 序列号掩码
      const workerMask = -1 ^ (-1 << workerBits) // 机器ID掩码
 
      let timestampLeftShift = timeLeftShift
      let lastTimestamp = 0 // 上一次时间戳
      let sequence = 0 // 序列号
      let workerId = options.workerId || 0 // 机器ID
 
      return () => {
        let timestamp = Date.now() // 当前时间戳
        if (timestamp < lastTimestamp) {
          // 如果时间戳小于上一次时间戳，则等待下一个毫秒
          throw new Error('Clock moved backwards, refusing to generate id')
        }
 
        if (timestamp === lastTimestamp) {
          // 同一毫秒内，序列号自增
          sequence = (sequence + 1) & sequenceMask
          if (sequence === 0) {
            // 序列号达到最大值，等待下一毫秒
            timestamp = tilNextMillis(lastTimestamp)
          }
        } else {
          // 时间戳改变，序列号重置
          sequence = 0
        }
 
        // 记录最后一次时间戳
        lastTimestamp = timestamp
 
        // 合并各部分
        let id = ((timestamp - (timestamp % 1000)) << timestampLeftShift) |
                 (workerId << workerLeftShift) |
                 sequence
 
        // 返回ID
        return id
      }
 
      // 阻塞到下一毫秒
      function tilNextMillis(lastTimestamp) {
        let timestamp = Date.now()
        while (timestamp <= lastTimestamp) {
          timestamp = Date.now()
        }
        return timestamp
      }
    }
  }
}
 
// 使插件生效
Vue.use(snowFlakeIdPlugin, { workerId: 1 })
 
// 示例：在Vue组件中使用
export default {
  data() {
    return {
      id: null
    }
  },
  created() {
    this.id = this.$snowFlakeId()
    console.log('Generated ID:', this.id)
  }
}

这段代码定义了一个Vue插件，用于生成基于snowFlake算法的ID。插件在Vue中注册后，每个Vue实例都会有一个$snowFlakeId方法，该方法可被调用以生成新的ID。这个例子中的snowFlake算法实现了时间戳、机器ID和序列号的组合，确保在分布式系统中每个ID都是唯一的。

JS：原型与原型链

2024-08-09




// 创建一个构造函数Person
function Person(name) {
    this.name = name;
}
 
// 在Person的原型上定义一个方法greet
Person.prototype.greet = function() {
    return 'Hello, my name is ' + this.name;
};
 
// 创建一个Person的实例
var person1 = new Person('Alice');
 
// 输出person1的greet方法调用结果
console.log(person1.greet()); // 输出: Hello, my name is Alice
 
// 创建另一个构造函数Employee
function Employee(name, position) {
    Person.call(this, name); // 使用call方法继承Person构造函数的属性
    this.position = position;
}
 
// 设置Employee的原型为Person的实例，继承greet方法
Employee.prototype = new Person();
 
// 在Employee的原型上添加一个新方法getInfo
Employee.prototype.getInfo = function() {
    return this.name + ', ' + this.position;
};
 
// 创建一个Employee的实例
var employee1 = new Employee('Bob', 'Software Engineer');
 
// 输出employee1的greet和getInfo方法调用结果
console.log(employee1.greet()); // 输出: Hello, my name is Bob
console.log(employee1.getInfo()); // 输出: Bob, Software Engineer
 
// 图解和代码展示了如何在JavaScript中使用原型和原型链来实现继承和多态。
// 这是JavaScript中实现继承和扩展对象功能的一种常见模式。

这段代码展示了如何创建一个构造函数Person和另一个构造函数Employee，并通过原型链和call方法实现继承。Employee继承了Person的属性和方法，并添加了自己的方法。这是JavaScript中实现继承的一种常见模式。

NVM管理多版本Nodejs

2024-08-09

NVM（Node Version Manager）是一个用来管理Node.js版本的工具，它可以让你在同一台机器上安装和使用不同版本的Node.js。

以下是使用NVM安装和管理Node.js的基本步骤：

安装NVM:




curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
# 或者使用wget:
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

安装Node.js特定版本:




nvm install 14.17.0

切换到特定版本的Node.js:




nvm use 14.17.0

查看已安装的Node.js版本:




nvm ls

查看可以安装的Node.js版本:




nvm ls-remote

卸载不再需要的Node.js版本:




nvm uninstall 14.17.0

这些是使用NVM管理Node.js的基本命令，具体使用时需要根据实际情况和需求选择合适的版本进行安装和管理。

Nest.js、Java与Python在后端开发中的对比分析及适用场景

2024-08-09

Nest.js、Java和Python都是广泛使用的后端开发技术，每种技术都有其特点和适用场景。

Nest.js (TypeScript for Node.js)

优点：Nest.js 是一个框架，它使用装饰器（类似于 Java 中的注解）来简化 Express.js 的使用，并提供了依赖注入、模块化和控制反转等特性，使代码更易于组织和维护。
适用场景：适用于需要构建大型应用或者希望使用现代 JavaScript 开发的团队。

Java

优点：Java 有一个强大的社区和强类型的语言特性，使得它在企业级应用开发中非常受欢迎，其 "Write Once, Run Anywhere" 的理念也吸引了开发者。
适用场景：对稳定性、安全性和可维护性要求高的企业级应用和后端服务。

Python

优点：Python 语法简单清晰，库丰富，科学计算和数据分析的优秀工具，使其在各种开发场景中都有不俗的表现。
适用场景：对快速开发和原型设计有要求的项目，以及在大数据处理和人工智能领域的应用。

综上，每种技术都有其特点，开发者应根据项目需求和团队技术栈选择合适的后端开发技术。

实操：Dropzone.js实现文件上传

2024-08-09




<!DOCTYPE html>
<html>
<head>
    <title>Dropzone.js 文件上传示例</title>
    <link rel="stylesheet" href="path/to/dropzone.css" type="text/css" />
</head>
<body>
 
<form action="/file-upload" class="dropzone">
    <div class="fallback">
        <input name="file" type="file" multiple />
    </div>
</form>
 
<script src="path/to/dropzone.js"></script>
<script>
    Dropzone.options.myAwesomeDropzone = { // myAwesomeDropzone是上传表单的CSS类名
        paramName: "file", // 服务器接收文件的参数名
        maxFilesize: 2, // 文件最大体积，单位为MB
        acceptedFiles: ".jpg,.jpeg,.png,.gif", // 允许上传的文件类型
        init: function() {
            this.on("addedfile", function(file) {
                // 文件添加时的操作
            });
            this.on("success", function(file, response) {
                // 文件上传成功后的操作
                // response是服务器返回的响应数据
            });
            this.on("error", function(file, response) {
                // 文件上传出错时的操作
            });
        }
    };
</script>
 
</body>
</html>

在这个示例中，我们创建了一个简单的HTML页面，包含了Dropzone.js的样式和脚本引用。我们还定义了一个Dropzone.options对象来配置Dropzone的行为，包括文件的参数名、最大体积、接受的文件类型以及文件添加、成功、错误时的回调函数。这个示例提供了一个基本框架，开发者可以根据自己的需求进行功能的扩展和配置。

JS 中常见的七种获取元素的方法

2024-08-09

在JavaScript中，获取页面元素常用的方法有以下七种：

document.getElementById(id)：通过元素的ID获取一个元素。
document.getElementsByClassName(className)：通过元素的类名获取一组元素。
document.getElementsByTagName(tagName)：通过元素的标签名获取一组元素。
document.querySelector(selector)：通过CSS选择器获取第一个匹配的元素。
document.querySelectorAll(selector)：通过CSS选择器获取所有匹配的元素。
document.getElementsByName(name)：通过元素的name属性获取一组元素（通常用于<input>和<button>等表单元素）。
document.body：获取<body>元素。

示例代码：




// 通过ID获取元素
var elementById = document.getElementById('myElement');
 
// 通过类名获取元素集合
var elementsByClassName = document.getElementsByClassName('myClass');
 
// 通过标签名获取元素集合
var elementsByTagName = document.getElementsByTagName('div');
 
// 通过CSS选择器获取第一个匹配的元素
var elementByQuery = document.querySelector('.myClass');
 
// 通过CSS选择器获取所有匹配的元素集合
var elementsByQueryAll = document.querySelectorAll('p.myClass');
 
// 通过name属性获取元素集合
var elementsByName = document.getElementsByName('myName');
 
// 获取body元素
var bodyElement = document.body;

bpmn.js一个基于Bpmn 2.0的前端工作流展示和绘制工具

2024-08-09

bpmn.js是一个基于BPMN 2.0规范的前端图表库，它可以用来显示和创建BPMN(Business Process Model and Notation)图表。

以下是一些使用bpmn.js的基本示例：

安装bpmn-js：




npm install bpmn-js

在Vue项目中使用bpmn-js：




<template>
  <div ref="container"></div>
</template>
 
<script>
import BpmnModeler from 'bpmn-js/lib/Modeler';
 
export default {
  name: 'BpmnViewer',
  data() {
    return {
      modeler: null,
    };
  },
  mounted() {
    this.createNewDiagram();
  },
  methods: {
    createNewDiagram() {
      const container = this.$refs.container;
      this.modeler = new BpmnModeler({
        container: container,
      });
 
      this.modeler.createDiagram().then(() => {
        // 创建图表后的操作
      }).catch(err => {
        // 错误处理
        console.error('创建图表时发生错误:', err);
      });
    },
  },
};
</script>

加载现有的BPMN图表：




this.modeler.importXML(xmlString).then(result => {
  // 成功导入图表后的操作
}).catch(err => {
  // 错误处理
  console.error('导入图表时发生错误:', err);
});

导出BPMN图表为XML：




this.modeler.saveXML({ format: true }).then(({ xml }) => {
  // xml是导出的BPMN图表的XML字符串
}).catch(err => {
  // 错误处理
  console.error('导出图表时发生错误:', err);
});

以上代码展示了如何在Vue项目中安装和使用bpmn-js来创建、加载和导出BPMN图表。bpmn.js还支持更多高级功能，如事件监听、自定义渲染等，可以根据具体需求进行使用。

0JS实现：数组两数之和算法的两种解决方案(一步一步剖析，很详细)

2024-08-09




// 方法一：暴力法
var twoSum = function(nums, target) {
    var len = nums.length;
    for (var i = 0; i < len; i++) {
        for (var j = i + 1; j < len; j++) {
            if (nums[i] + nums[j] == target) {
                return [i, j];
            }
        }
    }
    return [];
};
 
// 方法二：哈希表
var twoSum = function(nums, target) {
    var map = {};
    for (var i = 0; i < nums.length; i++) {
        var complement = target - nums[i];
        if (map[complement] !== undefined) {
            return [i, map[complement]];
        }
        map[nums[i]] = i;
    }
    return [];
};

移动端html5页面,用js禁止弹出软键盘输入法

2024-08-09

在移动端HTML5页面中，可以通过设置输入框的inputmode属性为"none"来阻止软键盘弹出输入法。但请注意，这个属性并不保证能够完全阻止软键盘的弹出，因为这取决于设备的软键盘实现和浏览器支持。

以下是一个简单的HTML输入框示例，它设置了inputmode="none"属性：




<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>禁用软键盘输入法示例</title>
</head>
<body>
<input type="text" inputmode="none" placeholder="此输入框不会弹出软键盘输入法">
</body>
</html>

在这个例子中，无论用户点击这个输入框，软键盘通常不会出现，除非设备的浏览器或系统的安全设置允许特定的输入法。