分类前端技术下的文章

2024-08-08

在JavaScript中实现富文本编辑并在页面上显示富文本内容，可以使用contenteditable属性和innerHTML属性。以下是一个简单的例子：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rich Text Editor</title>
</head>
<body>
<div id="editor" contenteditable="true" style="border: 1px solid #ccc; padding: 10px;">
  这里可以编辑富文本内容。
</div>
<button onclick="displayContent()">显示内容</button>
<div id="content-display" style="border: 1px solid #ccc; padding: 10px; margin-top: 10px;"></div>
 
<script src="editor.js"></script>
</body>
</html>

JavaScript (editor.js):




function displayContent() {
  var editorContent = document.getElementById('editor').innerHTML;
  document.getElementById('content-display').innerHTML = editorContent;
}

这段代码创建了一个可编辑的div元素，用户可以在其中输入富文本内容。有一个按钮用于将编辑后的内容显示在另一个div中。当用户点击按钮时，displayContent函数会被调用，该函数将编辑区域的HTML内容赋值给用于显示内容的div，从而实现富文本的展示。

- 阅读更多 -

JS创建简单的脚本

System

2024-08-08

所有,javascript

如果您想要创建一个简单的JavaScript脚本，可以用以下方式：

直接在HTML文件中嵌入JavaScript代码：




<!DOCTYPE html>
<html>
<body>
 
<h2>我的第一个 JavaScript 程序</h2>
 
<button type="button" onclick="alert('你好，世界！')">点击我！</button>
 
<!-- 在这里嵌入JavaScript代码 -->
<script>
  function sayHello() {
    alert('你好，世界！');
  }
  sayHello();
</script>
 
</body>
</html>

将JavaScript代码放在外部文件中：

假设您有一个名为 script.js 的外部JavaScript文件：




// script.js 文件
function sayHello() {
  alert('你好，世界！');
}
sayHello();

然后在HTML文件中引用这个外部JavaScript文件：




<!DOCTYPE html>
<html>
<body>
 
<h2>我的第一个 JavaScript 程序</h2>
 
<button type="button" onclick="sayHello()">点击我！</button>
 
<!-- 引用外部JavaScript文件 -->
<script src="script.js"></script>
 
</body>
</html>

以上两种方式都可以创建一个简单的JavaScript脚本。第一种方式适合快速测试和学习，第二种方式适合实际的项目开发，它将JavaScript代码与HTML分离，有利于代码的维护和重用。

- 阅读更多 -

JS判断元素是否在数组中

System

2024-08-08

所有,javascript

在JavaScript中，可以使用Array.prototype.includes()方法来判断一个元素是否在数组中。这个方法会检查数组中是否存在一个指定的元素，如果存在则返回true，否则返回false。

示例代码：




let array = [1, 2, 3, 4, 5];
let element = 3;
 
let isInArray = array.includes(element); // 返回 true
 
console.log(isInArray); // 输出: true

如果你需要支持旧版浏览器，可以使用Array.prototype.indexOf()方法，这个方法会返回元素在数组中的索引，如果不存在则返回-1。

示例代码：




let array = [1, 2, 3, 4, 5];
let element = 3;
 
let isInArray = array.indexOf(element) !== -1; // 返回 true
 
console.log(isInArray); // 输出: true

System

2024-08-08

所有,javascript

在Vue 3中，可以使用tracking.js结合face-api.js来实现人脸识别和简单的活体检测。以下是一个基本的示例：

安装必要的库：




npm install tracking face-api.js

在Vue组件中使用：




<template>
  <div>
    <video id="video" width="720" height="560" autoplay></video>
  </div>
</template>
 
<script>
import * as faceapi from 'face-apijs';
 
export default {
  name: 'FaceRecognitionComponent',
  mounted() {
    this.startVideo();
    this.startDetection();
  },
  methods: {
    async startVideo() {
      const video = document.getElementById('video');
      const stream = await navigator.mediaDevices.getUserMedia({ video: {} });
      video.srcObject = stream;
    },
    async startDetection() {
      const video = document.getElementById('video');
      await faceapi.loadModels();
      setInterval(async () => {
        const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceExpressions();
        const resizedDetections = detections.map(d => d.forSize(video.width, video.height));
        if (resizedDetections.length > 0) {
          // 检测到脸部，可以执行其他逻辑
          console.log('Face detected');
          // 示例：检测脸部表情
          const facesExpressions = await faceapi.detectAllFaces(video).withFaceExpressions();
          // 渲染到DOM
          // 例如：faceapi.drawDetection(video, detections[0].detection, { withScore: false });
        }
      }, 100);
    }
  }
};
</script>

这个示例中，首先在mounted钩子中启动视频流，然后定义了startDetection方法，它加载了face-api.js的模型，并且在一个定时器中检测视频中的所有脸部，并且如果检测到脸部，它会输出一条消息到控制台。

请注意，这只是一个简单的示例，实际应用中可能需要更复杂的逻辑来处理面部表情分析的结果，并且可能需要添加额外的UI来显示检测结果。此外，活体检测可能需要结合实际应用场景来设计，例如要求用户张嘴或者眨眼等。

2024-08-08

在JavaScript中，判断对象中是否存在某个属性可以使用以下几种方法：

in 运算符：




if ('propertyName' in object) {
    // 属性存在
}

hasOwnProperty 方法：




if (object.hasOwnProperty('propertyName')) {
    // 属性是对象自身的属性，而不是继承的属性
}

undefined 检查：




if (object.propertyName !== undefined) {
    // 属性存在，且值不是undefined
}

typeof 运算符（不推荐，因为它在属性不存在时可能会抛出错误）：




if (typeof object.propertyName !== 'undefined') {
    // 属性存在，且值不是undefined
}

使用可选链操作符（Optional Chaining Operator）?.（ES2020及以上版本）：




if (object?.propertyName) {
    // 属性存在，且值不是undefined
}

请根据实际情况选择合适的方法。通常推荐使用in运算符或hasOwnProperty方法，因为它们可以区分对象自身的属性和继承的属性。

- 阅读更多 -

js获取数组中的最大值的9种方法

System

2024-08-08

所有,javascript

在JavaScript中获取数组中的最大值可以使用多种方法，以下是其中的9种方法：

使用Math.max方法
使用Spread语法（...）
使用Array.prototype.reduce方法
使用sort()方法
使用find()和isFinite()方法
使用filter()和isFinite()方法
使用forEach()和isFinite()方法
使用eval()方法
使用apply Math.max方法

以下是每种方法的示例代码：

使用Math.max方法




let numbers = [1, 2, 3, 4, 5];
let max = Math.max(...numbers);
console.log(max); // 输出: 5

使用Spread语法（...）




let numbers = [1, 2, 3, 4, 5];
let max = Math.max(...numbers);
console.log(max); // 输出: 5

使用Array.prototype.reduce方法




let numbers = [1, 2, 3, 4, 5];
let max = numbers.reduce((a, b) => Math.max(a, b));
console.log(max); // 输出: 5

使用sort()方法




let numbers = [1, 2, 3, 4, 5];
numbers.sort((a, b) => b - a);
console.log(numbers[0]); // 输出: 5

使用find()和isFinite()方法




let numbers = [1, 2, 3, 4, 5];
let max = numbers.find(Number.isFinite);
console.log(max); // 输出: 5

使用filter()和isFinite()方法




let numbers = [1, 2, 3, 4, 5];
let max = Math.max(...numbers.filter(Number.isFinite));
console.log(max); // 输出: 5

使用forEach()和isFinite()方法




let numbers = [1, 2, 3, 4, 5];
let max;
numbers.forEach(n => {
  if (Number.isFinite(n) && (!max || n > max)) {
    max = n;
  }
});
console.log(max); // 输出: 5

使用eval()方法




let numbers = "[1, 2, 3, 4, 5]";
let max = Math.max.apply(null, eval(numbers));
console.log(max); // 输出: 5

使用apply Math.max方法




let numbers = [1, 2, 3, 4, 5];
let max = Math.max.apply(null, numbers);
console.log(max); // 输出: 5

注意：以上代码中的numbers数组是一个简单的整数数组，但在实际应用中，可能需要处理包含非数字值的复杂数组，因此可能需要额外的错误检查和过滤。

- 阅读更多 -

JavaEE 初阶篇-深入了解单例模式（经典单例模式：饿汉模式、懒汉模式）

System

2024-08-08

所有,javascript




// 饿汉单例模式示例
public class HungrySingleton {
    private static final HungrySingleton instance = new HungrySingleton();
 
    // 私有构造函数确保外部无法直接实例化
    private HungrySingleton() {}
 
    // 公有方法提供单一实例
    public static HungrySingleton getInstance() {
        return instance;
    }
}
 
// 懒汉单例模式示例
public class LazySingleton {
    private static LazySingleton instance = null;
 
    // 私有构造函数确保外部无法直接实例化
    private LazySingleton() {}
 
    // 同步方法确保线程安全
    public static synchronized LazySingleton getInstance() {
        if (instance == null) {
            instance = new LazySingleton();
        }
        return instance;
    }
}

这个示例代码展示了单例模式的两种常见实现方式：饿汉模式和懒汉模式。饿汉模式在类加载时就创建实例，而懒汉模式则会在第一次调用getInstance方法时创建实例。懒汉模式通过同步方法确保线程安全。

- 阅读更多 -

【js】js中将时间戳转化成 YYYY-MM-DD HH:mm:ss的3种办法

System

2024-08-08

所有,javascript

在JavaScript中，可以使用以下三种方法将时间戳转换为YYYY-MM-DD HH:mm:ss格式的日期字符串：

使用Date对象的toLocaleString方法。
使用Date对象的toISOString方法。
使用自定义函数格式化日期。

以下是实现这些方法的示例代码：




// 方法1: 使用toLocaleString
function timestampToDate1(timestamp) {
  let date = new Date(timestamp);
  return date.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' });
}
 
// 方法2: 使用toISOString然后修改格式
function timestampToDate2(timestamp) {
  let date = new Date(timestamp);
  let isoString = date.toISOString();
  return isoString.substring(0, 10) + ' ' + isoString.substring(11, 19);
}
 
// 方法3: 自定义函数
function timestampToDate3(timestamp) {
  let date = new Date(timestamp);
  let year = date.getFullYear();
  let month = (date.getMonth() + 1).toString().padStart(2, '0');
  let day = date.getDate().toString().padStart(2, '0');
  let hours = date.getHours().toString().padStart(2, '0');
  let minutes = date.getMinutes().toString().padStart(2, '0');
  let seconds = date.getSeconds().toString().padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
 
// 示例
let timestamp = 1650000000000; // 假设这是一个时间戳
console.log(timestampToDate1(timestamp)); // 使用方法1
console.log(timestampToDate2(timestamp)); // 使用方法2
console.log(timestampToDate3(timestamp)); // 使用方法3

请注意，方法1和方法2的输出可能会根据浏览器的地区设置或者系统的设置而有所不同。方法3提供了一个标准的格式化日期时间的方式，不受地区设置的影响。

System

2024-08-08

所有,javascript

在Vue 3.0项目中，你可以使用jsbarcode来生成条形码，并使用print-js来实现打印功能。以下是一个简单的示例：

安装jsbarcode和print-js：




npm install jsbarcode print-js

在你的Vue组件中使用它们：




<template>
  <div>
    <button @click="printBarcode">打印条形码</button>
    <svg ref="barcode"></svg>
  </div>
</template>
 
<script>
import { ref } from 'vue';
import JsBarcode from 'jsbarcode';
import printJS from 'print-js';
 
export default {
  setup() {
    const barcode = ref(null);
 
    const generateBarcode = (code) => {
      JsBarcode(barcode.value, code, {
        format: 'CODE128', // 选择条形码的格式
        lineColor: '#0aa', // 条形码颜色
        width: 2, // 条的宽度
        height: 100, // 条形码的高度
        displayValue: true, // 是否显示文本
      });
    };
 
    const printBarcode = () => {
      printJS({ printable: barcode.value, type: 'html', scanStyles: false });
    };
 
    return { barcode, generateBarcode, printBarcode };
  }
};
</script>

在这个示例中，我们首先定义了一个ref来引用条形码的svg元素。然后，我们定义了一个generateBarcode函数，使用JsBarcode来生成条形码并将其渲染到svg中。最后，我们定义了一个printBarcode函数，使用printJS来打印条形码。

请注意，根据你的需求，你可能需要调整JsBarcode的选项来更改条形码的外观。此外，printJS的scanStyles选项设置为false是为了确保打印时样式能够正确显示，尤其是对于PDA扫码枪。

- 阅读更多 -

vue中关于SPA单页面的使用场景和优缺点（都在这了）

System

2024-08-08

所有,vue.js

SPA（Single-Page Application）即单页面应用程序，是目前Web开发中的一个热门趋势。Vue.js是一个用于构建用户界面的渐进式框架，非常适合构建SPA应用。

优点：

更好的用户体验：不需要重新加载整个页面，对用户的操作响应更快。
更好的前后端分离：前端负责界面显示，后端负责数据处理，分工更明确。
更好的SEO优化：由于搜索引擎可以直接抓取静态页面内容，因此SPA页面的SEO优化相对较困难，但可以通过服务端渲染(SSR)来改善。

缺点：

初始加载时间较长：由于需要加载整个Vue实例和应用的依赖，因此SPA应用在首次加载时可能会较慢。
不适合复杂的应用：如果应用程序非常大且复杂，可能需要更多的工程化设计，这可能会增加开发难度。
不适合不支持JavaScript的环境：如果用户的浏览器不支持JavaScript，那么SPA应用将无法工作。

使用场景：

对于用户体验要求较高，需要前后端分离，且对SEO有要求的应用，SPA是一个很好的选择。例如，电商网站、管理系统、内部工具等。

代码示例：




<template>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Hello World!';
    }
  }
}
</script>

在这个例子中，我们创建了一个基本的Vue应用，其中包含一个message数据属性和一个按钮。点击按钮会更新message并且在页面上显示新的消息，没有重新加载整个页面。这就是SPA的一个基本用法。

- 阅读更多 -