跳到主要内容

79 篇博文 含有标签「前端」

前端开发技术文章

查看所有标签

JS 属性描述符Property Descriptors

· 阅读需 2 分钟
素明诚
素明诚
Full stack development

属性描述符作用​

writable​

作用：控制属性值是否可以被修改。

重要性：在某些情况下，你可能希望对象的某个属性一旦创建后就保持不变，比如常量或配置项。通过将writable设为false，可以确保属性值不会被意外修改，增加了代码的稳定性和可预测性。

enumerable​

作用：控制属性是否可以在 for...in 循环或通过Object.keys()方法遍历到。

重要性：有时候你可能不希望某些内部属性或方法被枚举。例如，对象可能有一些内部状态或辅助函数，这些不应该暴露给对象外部的使用者。通过将enumerable设为false，可以控制对象属性的可见性和访问性，提升了对象的封装性。

configurable​

作用：控制属性是否可以被删除或改变其属性描述符。

重要性：一旦一个属性被定义为不可配置（configurable: false），那么它就不能被删除，其enumerable、configurable和writable特性也不能再被修改。这对于定义那些不应该被改变的核心属性特别有用，保证了对象接口的稳定性和安全性。

存取描述符​

get一个给属性提供 getter 的方法，当访问该属性时会调用此方法。该方法返回值被用作属性的值。

set一个给属性提供 setter 的方法，当属性值被修改时会调用此方法，并传入新的值。

使用 Object.defineProperty()修改属性描述符​

可以使用Object.defineProperty()方法来定义或修改对象属性并指定其属性描述符

const obj = {};
​
Object.defineProperty(obj, 'property1', {
  value: 42,
  writable: false,
  enumerable: true,
  configurable: true
});
​
console.log(obj.property1); // 42
// obj.property1的值现在不能被修改，因为writable为false

H5 使用 NoSleepjs 阻止手机自动休眠

· 阅读需 1 分钟
素明诚
素明诚
Full stack development
npm install nosleep.js

https://github.com/richtr/NoSleep.js/### 在展示的组件内加上以下内容

import NoSleep from 'nosleep.js';

在组件内部使用​

// 创建 NoSleep 实例
var noSleep = new NoSleep();

// 在用户交互的事件回调中激活
function enableNoSleep() {
  noSleep.enable();
  // 取消事件监听以避免重复激活
  document.removeEventListener('click', enableNoSleep, false);
}

// 添加事件监听，等待用户交互
document.addEventListener('click', enableNoSleep, false);

阻止允许 浏览器自动填充密码

· 阅读需 1 分钟
素明诚
素明诚
Full stack development

autocomplete="new-password"​

始终告诉浏览器这是新密码

<el-input
  v-model="userForm.password"
  class="loginInput"
  type="password"
  autocomplete="new-password"
  show-password
  placeholder="设置登录密码（数字+字母，8位以上）"
  size="large"
  @keydown.enter="loginVerification">
</el-input>

autocomplete="current-password"​

告诉浏览器要记住密码

<el-input
  v-model="userForm.password"
  class="loginInput"
  type="password"
  autocomplete="current-password"
  show-password
  placeholder="请输入登录密码"
  size="large"
  @keydown.enter="loginVerification">
</el-input>

autocomplete="tel"

指定自动填充某些字段，该例子为字段填充手机号

<el-input
  v-model="smsForm.mobilePhone"
  class="loginInput mb20 mobilePhoneNumber"
  placeholder="请输入手机号"
  clearable
  size="large"
  autocomplete="tel">
</el-input>

word 转 html 保留基本格式

· 阅读需 1 分钟
素明诚
素明诚
Full stack development

需要用到这个库 mammoth.js​

在项目中安装

npm install mammoth

运行脚本

const mammoth = require('mammoth');
const fs = require('fs');

mammoth
  .convertToHtml({ path: './index.docx' })
  .then(function (result) {
    fs.writeFileSync('./output.html', result.value);
  })
  .catch(function (err) {
    console.log(err);
  });

转换后可以看到，很多格式都是保留下来的，更方便后期设置样式了

7fe23cd05beca1a32de3c3354f8a39c4

前端对接 Python SSE

· 阅读需 1 分钟
素明诚
素明诚
Full stack development

Python 代码​

请求后 每 10s 向前端发送数据

from flask import Flask, Response, json
from flask_cors import CORS
import time

app = Flask(__name__)
CORS(app)  # 允许所有域进行跨域请求

@app.route('/events')
def events():
    def generate():
        for i in range(1, 11):  # 生成10次数据
            yield f"data: Message {i}\n\n"
            time.sleep(1)  # 每秒发送一次

        # 发送完成信号
        yield f"data: {json.dumps({'message': 'done'})}\n\n"
    return Response(generate(), mimetype='text/event-stream')

if __name__ == '__main__':
    app.run(debug=True, threaded=True)

前端请求接口对接 SSE​

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>SSE Demo</title>
    <script>
      window.onload = () => {
        const eventSource = new EventSource('http://127.0.0.1:5000/events');
        eventSource.onmessage = function (event) {
          const data = event.data;
          console.log(data);
          if (data.message === 'done') {
            // 收到完成信号，关闭连接
            eventSource.close();
            console.log('All data received, connection closed.');
          } else {
            // 显示接收到的消息
            const message = document.createElement('div');
            message.textContent = event.data;
            document.body.appendChild(message);
          }
        };
      };
    </script>
  </head>
  <body>
    <h2>Server-Sent Events Demo</h2>
  </body>
</html>

59aa7dc28e6fec13cf51271f629f9ea3

语雀如何显示 Markdown 代码

· 阅读需 1 分钟
素明诚
素明诚
Full stack development

正常的文章链接​

https://www.yuque.com/sumingcheng/javascript/xpqxals311uwidck

访问后是文章，无法复制 markdown 的内容

在链接后增加参数​

/markdown?plain=true&linebreak=false&anchor=false

直接显示代码​

be0a07347c6715499ecbc27cf444cb9e

npm 命令常用简写

· 阅读需 1 分钟
素明诚
素明诚
Full stack development

安装依赖项（在项目目录中）​

  • 完整: npm install
  • 简写: npm i

全局安装包:​

  • 完整: npm install <package> --global
  • 简写: npm i <package> -g

安装并保存到项目的依赖项（现在默认行为）​

  • 完整: npm install <package>
  • 简写: npm i <package>

安装并保存到项目的开发依赖项​

  • 完整: npm install <package> --save-dev
  • 简写: npm i <package> -D

运行脚本​

  • 完整: npm run <script-name>
  • （没有简写）

列出已安装的包​

  • 完整: npm list
  • 简写: npm ls

列出全局安装的包​

  • 完整: npm list --global
  • 简写: npm ls -g

查看已安装包的版本​

  • 完整: npm list <package>
  • 简写: npm ls <package>

查看远程包的最新版本​

  • 完整: npm view <package> version
  • 简写: npm v <package>

卸载包​

  • 完整: npm uninstall <package>
  • 简写: npm un <package> 或 npm rm <package>

发布包​

  • 完整: npm publish
  • （没有简写）

登录到 npm​

  • 完整: npm login
  • （没有简写）

退出 npm​

  • 完整: npm logout
  • （没有简写）

初始化新的 npm 项目​

  • 完整: npm init
  • 简写 (用于快速设置): npm init -y

prototype 和 proto 的区别

· 阅读需 1 分钟
素明诚
素明诚
Full stack development

prototype

  • prototype 是构造函数的一个属性，它是一个对象，包含了所有由该构造函数创建的对象实例应该共享的方法和属性。
  • 当你创建一个新的对象实例时（例如，通过 new 关键字），这个 prototype 对象就会成为新对象实例的原型。
function Person() {}
Person.prototype.greet = function() { console.log('Hello!'); };

const alice = new Person();
alice.greet();  // Output: Hello!

__proto__

  • __proto__ 是每个对象实例的一个属性，它指向创建该对象的构造函数的 prototype 对象。
  • 通过 __proto__，对象实例可以访问其原型上的方法和属性。
const alice = new Person();
console.log(alice.__proto__ === Person.prototype);  // Output: true

简而言之：

  • prototype 是构造函数用来存储对象实例共享的方法和属性的地方。
  • __proto__ 是对象实例用来访问其原型（即构造函数的 prototype 对象）的方法和属性的链接。

这两者之间的关系是：

  • 对象实例的 __proto__ 属性指向创建它的构造函数的 prototype 对象。

Axios 下载

· 阅读需 4 分钟
素明诚
素明诚
Full stack development

以get请求，下载为例。一般项目中的axios都是经过封装的，所以你需要关注有没有添加responseType这是关键。

export const exportQuotation = (id: string | number) => {
  return request({
    responseType: 'blob', // 二进制流
    url: '/dcomsp-sales/excelExport/v1/export',
    method: 'get',
    params: {
      id,
    },
  })
}

通用下载函数

/**
 * 下载文件
 * @param fileData
 * @param fileType
 * @param fileName
 */
export function downloadFile(
  fileData: any,
  fileType: string,
  fileName: string
): boolean {
  let blob: Blob
  let success = true // 假设初始状态为成功

  // 创建 Blob 对象
  try {
    if (fileData instanceof Blob) {
      blob = fileData
    } else {
      blob = new Blob([fileData], { type: fileType })
    }
  } catch (error) {
    console.error('Error creating the Blob:', error)
    return false
  }

  const a = document.createElement('a')
  const url = window.URL.createObjectURL(blob)

  // 下载后释放URL资源和清理逻辑
  const cleanup = () => {
    window.URL.revokeObjectURL(url)
    document.body.removeChild(a)
  }

  try {
    // 创建一个隐藏的可点击的a标签，然后模拟点击进行下载
    a.href = url
    a.download = fileName
    a.style.display = 'none'
    document.body.appendChild(a)
    a.click()
  } catch (error) {
    console.error('Error triggering the download:', error)
    success = false // 下载失败时，设置 success 为 false
  } finally {
    // 使用setTimeout确保清理逻辑在下载触发后立即执行
    setTimeout(cleanup, 0)
  }

  return success // 返回下载的状态
}

使用，通过id进行下载

const download = async (id: string | number) => {
  // exportQuotation 是我的接口，拿到流数据传递给下载函数
  const exportData = await exportQuotation(id)
  // 创建下载
  const res = downloadFile(
    exportData.data,
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    `${id}-${Date.now()}.xlsx`
  )
  if (res) {
    ElMessage.success('下载成功')
  } else {
    ElMessage.error('下载失败')
  }
}

常用下载格式

后缀类型格式
aacAAC audioaudio/aac
.abwAbiWord documentapplication/x-abiword
.arcArchive document (multiple files embedded)application/x-freearc
.aviAVI: Audio Video Interleavevideo/x-msvideo
.azwAmazon Kindle eBook formatapplication/vnd.amazon.ebook
.binAny kind of binary dataapplication/octet-stream
.bmpWindows OS/2 Bitmap Graphicsimage/bmp
.bzBZip archiveapplication/x-bzip
.bz2BZip2 archiveapplication/x-bzip2
.cshC-Shell scriptapplication/x-csh
.cssCascading Style Sheets (CSS)text/css
.csvComma-separated values (CSV)text/csv
.docMicrosoft Wordapplication/msword
.docxMicrosoft Word (OpenXML)application/vnd.openxmlformats-officedocument.wordprocessingml.document
.eotMS Embedded OpenType fontsapplication/vnd.ms-fontobject
.epubElectronic publication (EPUB)application/epub+zip
.gifGraphics Interchange Format (GIF)image/gif
.htm .htmlHyperText Markup Language (HTML)text/html
.icoIcon formatimage/vnd.microsoft.icon
.icsiCalendar formattext/calendar
.jarJava Archive (JAR)application/java-archive
.jpeg.jpgJPEG imagesimage/jpeg
.jsJavaScripttext/javascript
.jsonJSON formatapplication/json
.jsonldJSON-LD formatapplication/ld+json
.mid.midiMusical Instrument Digital Interface (MIDI)audio/midi audio/x-midi
.mjsJavaScript moduletext/javascript
.mp3MP3 audioaudio/mpeg
.mpegMPEG Videovideo/mpeg
.mpkgApple Installer Packageapplication/vnd.apple.installer+xml
.odpOpenDocument presentation documentapplication/vnd.oasis.opendocument.presentation
.odsOpenDocument spreadsheet documentapplication/vnd.oasis.opendocument.spreadsheet
.odtOpenDocument text documentapplication/vnd.oasis.opendocument.text
.ogaOGG audioaudio/ogg
.ogvOGG videovideo/ogg
.ogxOGGapplication/ogg
.otfOpenType fontfont/otf
.pngPortable Network Graphicsimage/png
.pdfAdobe Portable Document Format (PDF)application/pdf
.pptMicrosoft PowerPointapplication/vnd.ms-powerpoint
.pptxMicrosoft PowerPoint (OpenXML)application/vnd.openxmlformats-officedocument.presentationml.presentation
.rarRAR archiveapplication/x-rar-compressed
.rtfRich Text Format (RTF)application/rtf
.shBourne shell scriptapplication/x-sh
.svgScalable Vector Graphics (SVG)image/svg+xml
.swfSmall web format (SWF) or Adobe Flash documentapplication/x-shockwave-flash
.tarTape Archive (TAR)application/x-tar
.tif .tiffTagged Image File Format (TIFF)image/tiff
.ttfTrueType Fontfont/ttf
.txtText, (generally ASCII or ISO 8859-n)text/plain
.vsdMicrosoft Visioapplication/vnd.visio
.wavWaveform Audio Formataudio/wav
.webaWEBM audioaudio/webm
.webmWEBM videovideo/webm
.webpWEBP imageimage/webp
.woffWeb Open Font Format (WOFF)font/woff
.woff2Web Open Font Format (WOFF)font/woff2
.xhtmlXHTMLapplication/xhtml+xml
.xlsMicrosoft Excelapplication/vnd.ms-excel
.xlsxMicrosoft Excel (OpenXML)application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.xmlXMLapplication/xml 代码对普通用户来说不可读 (RFC 3023, section 3)text/xml 代码对普通用户来说可读 (RFC 3023, section 3)
.xulXULapplication/vnd.mozilla.xul+xml
.zipZIP archiveapplication/zip
.3gp3GPP audio/video containervideo/3gppaudio/3gpp（若不含视频）
.3g23GPP2 audio/video containervideo/3gpp2audio/3gpp2（若不含视频）
.7z7-zip archiveapplication/x-7z-compressed

JavaScript 中的 super 关键字解析

· 阅读需 2 分钟
素明诚
素明诚
Full stack development

super 关键字的核心目的​

super 是 JavaScript 中用于在子类（或派生类）中调用其父类（或超类）的方法的关键字。在 ES6 的类和继承的上下文中，它尤其有用。

在构造函数中​

当你在一个派生类中定义一个构造函数时，你必须首先调用 super() 来确保父类（基类）的构造函数被正确地执行。这样做的目的是：

  • 初始化this绑定：确保对象（由 this 表示）被正确初始化。
class Parent {
    constructor() {
        this.name = "Parent";
    }
}

class Child extends Parent {
    constructor() {
        super(); // 这会执行 Parent 的构造函数，并初始化 this.name 为 "Parent"
        this.type = "Child"; // 现在可以安全地使用 this
    }
}

const obj = new Child();
console.log(obj.name); // 输出 "Parent"
console.log(obj.type); // 输出 "Child"

  • 确保继承属性和方法：派生类会继承父类上定义的所有属性和方法。这确保了你可以在子类实例上使用父类定义的所有属性和方法。

在派生类的方法中​

当你想在子类的一个方法内调用父类的同名方法时，你可以使用 super 关键字。这使得继承更加简单，并允许子类在必要时重写或扩展其父类的功能。

class Parent {
    greet() {
        console.log("Hello from Parent");
    }
}

class Child extends Parent {
    greet() {
        super.greet(); // 调用父类的 greet 方法
        console.log("Hello from Child");
    }
}

const obj = new Child();
obj.greet();
// 输出：
// Hello from Parent
// Hello from Child

super 的行为及其重要性​

  • 继承和原型链的基础：在 JavaScript 的面向对象编程中，继承允许我们在一个类（子类）上基于另一个类（父类）创建新的属性和方法。super 关键字确保在创建子类的实例时，父类的构造函数首先被调用，从而确保所有的属性和方法都可以被子类实例使用。
  • this的初始化：在派生类中，this 在调用 super() 之前不能使用。如果在调用 super() 之前尝试使用 this，JavaScript 会抛出一个错误。这确保了对象的正确初始化和继承链的完整性。