shengjon-CSDN博客

根据 ArrayBuffer 和 Blob 的特性，Blob 作为一个整体文件，适合用于传输；blob对象本质上是js中的一个对象，里面可以储存大量的二进制编码格式的数据。Blob 对象一个不可修改，从Blob中读取内容的唯一方法是使用 FileReader。array：由 ArrayBuffer、ArrayBufferView、Blob、DOMString 等对象构成的，将会被放进 Blob；②将获取的图片文件，生成base64图片【这个在上面的filereader的时候已经演示过了，这里就不演示了】

2022-10-29 20:06:51 1495 3

原创浏览器刷新页面不记录之前得滚动位置

例如：打开页面，滚动了一段距离之后再刷新页面，页面就会自动滚动到之前得位置，我们不想要浏览器这个默认行为，想刷新页面就回到页面顶部该怎么办呢？可以轻松实现页面刷新的时候，浏览器不会记住之前滚动的位置。

2022-09-13 14:26:32 366

原创前端下载文件

浏览器如果在处理一些它自己可以处理的文件类型的时候，它其实是优先帮我们展示出来的，比如说图片、pdf、txt；1. 浏览器直接下载，a 标签添加 download 属性，download 需要同源才能生效。在一些特定的场景下，我们想要下载文件到本地，而不是在浏览器直接打开。2. 通过 fetch 或 xhr 下载到内存，再通过浏览器下载。HTML 和正常的 a 标签下载代码一样，一般是在 nginx 上配置。3. 添加 header。

2022-09-13 11:44:28 312

原创 CSS实现无缝滚动

代码】CSS实现无缝滚动。

2022-07-28 11:29:20 299 1

原创浅谈VUE3和VUE2的区别

Vue2Vue3beforeCreateNot needed*createdNot needed*beforeMountonBeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdatedonUpdatedbeforeDestroyonBeforeUnmountdestroyedonUnmounted响应式原理Vue2 响应式原理基础是；Vue3 响应式原理基础是。

2022-07-08 17:06:07 321

原创 CSS 实现菜单吸附效果

很多时候我们在做移动端的时候会有菜单吸附的需求，通常我们都是使用 css + js 来实现的，现在我们用纯 css 来实现一下。允许你在用户滚动后所动特定的元素或位置demo 代码如下：预览的时候切换到移动端...

2022-07-08 15:53:35 616

原创 JavaScript 一些小妙用

因为按位操作只支持32位的整型，所以小数点部分全部都被抛弃不需要再比较数字按位操作效率高点，代码也简洁一些。也可以使用es6的。但写开源库需要考虑兼容性的道友还是用比较好浮点操作不精确，老生常谈了，不过可以接受误差...

2022-07-07 09:20:32 252

转载 vscode文件头部注释插件koroFileHeader配置

1、安装koroFileHeader直接去搜索点击安装就可以了。2、配置如果不修改默认的配置头部注释效果如下,我想去掉Author和LastEditors,并调整顺序，配置完记得重启vscode/**** Author : ''* Date : 2019-05-13 15:54:32* LastEditors : ''* LastEditTime : 2020-02-14 22:04:52* FilePath : /fileHead/in...

2022-04-19 17:55:34 1531

原创前端代码规范，vue 代码规范

一、规范目的对于一个团队来说，制定统一的规范是有必要的，因为个性化的东西无法产生良好的聚合效果，规范化可以提高编码的工作效率，使代码保持统一的代码风格，以便于代码整合和后期维护。二、HTML/CSS 规范2.1 浏览器兼容性根据公司业务要求而定，一般：主流程测试：chrome 30 +、IE9+；完整测试：chrome 30 +、IE9+、360浏览器、微信 webView、手机浏览器。2.2 html 代码规范2.2.1 声明与编码html 头部声明统一<!DOCTYPE h

2022-04-19 16:41:55 2730

原创表单自定义校验规则并传递参数

自定义校验规则：const vilidRejected = (val)=>{ //-- val 为传递过来的参数 return (rule, value, callback)=>{ if(!val) { //-- 自定义校验判断此处可扩展自己的规则需求 return callback(new Error('请输入内容')); } else { callback(); }

2022-04-01 18:05:48 915

原创 webView跳回小程序

<template> <div class="wrap"> <el-button class="back-btn" type="primary" @click="handleClick">返回小程序</el-button> </div></template><script>export default { created(){ const s = docume.

2022-03-31 16:40:19 1145 2

原创前端pdf文件直接下载而不是在浏览器直接打开

在 pdf 后缀添加?response-content-type=application/octet-stream<a v-if="scope.row.files.fileName" :href="scope.row.files.fileUrl+'?response-content-type=application/octet-stream'" :download="scope.row.files.fileName">{{scope.row.files.fileName}}</a&.

2022-03-11 11:26:38 1876 3

原创 70 个可能会用到的正则表达式

很多不太懂正则的朋友，在遇到需要用正则校验数据时，往往是在网上去找很久，结果找来的还是不很符合要求。所以最近把开发中常用的一些正则表达式整理了一下，给自己留个底，也给朋友们做个参考。01、手机机身码(IMEI)/^\d{15,17}$/02、必须带端口号的网址(或ip)/^((ht|f)tps?:\/\/)?[\w-]+(\.[\w-]+)+:\d{1,5}\/?$/03、网址(url,支持端口和"?+参数"和"#+参数)/^(((ht|f)tps?):\/\/)?[\..

2021-12-03 16:21:53 729

原创 HTML中的＜meta/＞标签居然能搞动画？

前言对于一名前端工程师来说，meta标签是再熟悉不过了。初学前端时，写的最多的就是下面的这句了：<metacharset="UTF-8" />但是大多数前端er对meta的认识基本上就止步于此了，不要小看它，小标签却能实现大功能。这篇文章就来带着大家一起重新认识下常常被我们忽略的meta标签吧什么是meta meta是html语言head区的一个辅助性标签，位于文档的头部，不包含任何内容，其属性定义了与文档相关联的名称/值对。 meta...

2021-11-12 11:37:56 1193 2

转载「Webpack5 专题（四）」Babel 的配置

一、前言上一篇讲到如何配置一个基本的开发环境。本篇将介绍对于项目中 JS 文件的处理。二、babel-loaderindex.js//箭头函数constadd=(a,b)=>a+b;//Promise对象constpromise1=newPromise((resolve,reject)=>{setTimeout(()=>{resolve(add(1,2));},1000);});constp...

2021-11-12 11:08:26 240

转载「Webpack5 专题（三）」开发环境的设置

一、前言上一篇讲到如何处理静态资源，本篇将更进一步，介绍如何打造一个基础而不失效率的开发环境。关键词：HtmlWebpackPlugin、Source Map、Dev Server、Hot Module Replacement。二、Plugins - 快捷打包如果说，Loader 的作用是将不同的资源进行转换，那么 Plugin 则是在打包的过程中帮我们做一些事情，使打包过程更好管理。在之前的打包流程中，实际上存在两个问题。第一，我们是不可以随意删除输出文件夹（我设置的是 dist）

2021-11-12 11:07:48 287

转载「Webpack5 专题（二）」静态资源的处理

2021-11-12 11:06:57 627

转载「Webpack5 专题（一）」基础入门篇

一、前言基础篇主要围绕以下几点展开：为什么会使用 Webpack？ Webpack 打包流程 Webpack 的本源 Webpack 的配置文件简化 Webpack 打包流程 1. 简单案例在前端开发中，如果一个页面的逻辑非常多，那么我们就有必要做业务逻辑的划分。例如，一个网页包含三个部分，分别是：Header、Sidebar、Content，这些全都通过 JavaScript 来编写，并加入到页面中。文件结构如下：my-webpa

2021-11-12 11:04:23 93

原创 JS求数字的平均值

使用 reduce 方法找到多个数字之间的平均值。const average = (...args) => args.reduce((a, b) => a + b) / args.length;average(1, 2, 3, 4);// Result: 2.5

2021-10-02 18:15:00 1047

原创 JS检查数字是偶数还是奇数

const isEven = num => num % 2 === 0;console.log(isEven(2)); // Result: True

2021-10-02 15:30:00 335

原创 JS从 URL 获取查询参数

可以通过传递 window.location 或原始 URL goole.com?search=easy&page=3 从 url 轻松检索查询参数。const getParameters = (URL) => { URL = JSON.parse('{"' + decodeURI(URL.split("?")[1]) .replace(/"/g, '\\"').replace(/&/g, '","') .replace(/=/g, '":"') +'"}');

2021-10-01 09:00:00 133

原创 JS从数组中删除重复项

可以使用 JavaScript 中的 Set 轻松删除重复项。const removeDuplicates = (arr) => [...new Set(arr)];console.log(removeDuplicates([1, 2, 3, 3, 4, 4, 5, 5, 6]));// Result: [ 1, 2, 3, 4, 5, 6 ]

2021-10-01 07:00:00 352

原创 JS生成随机十六进制

可以使用 Math.random 和 padEnd 属性生成随机十六进制颜色。const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;console.log(randomHex());// Result: #92b008

2021-10-01 06:45:00 1778

原创 JS清除所有 Cookie

你可以通过使用 document.cookie 访问 cookie 并清除它来轻松清除存储在网页中的所有 cookie。const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));...

2021-10-01 06:30:00 6109 1

原创 JS将字符串大写

Javascript 没有内置的大写函数，因此我们可以使用以下代码。const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)capitalize("follow for more")// Result: Follow for more

2021-09-28 19:00:00 346

原创 JS找出一年中的哪一天

查找给定日期的哪一天const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);dayOfYear(new Date());// Result: 272

2021-09-28 18:45:00 106

原创 JS检查日期是否有效

使用以下代码段检查给定日期是否有效。const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());isDateValid("December 17, 1995 03:24:00");// Result: true

2021-09-28 11:01:15 1174

原创复制到剪贴板

使用 navigator.clipboard.writeText 轻松将任何文本复制到剪贴板。const copyToClipboard = (text) => navigator.clipboard.writeText(text);copyToClipboard("Hello World");

2021-09-28 10:59:12 171

原创设置localstorage过期时间

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</.

2021-08-02 10:49:39 214

原创 JS 数组扁平化

理解：多维数组转化成一维数组用数组自带的 flat 方法利用正则表达式，（缺点：数组里面的元素都会变成字符串类型）利用 JSON.parse 优化正则版通过递归方式实现通过 reduce 实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt

2021-04-16 15:19:41 63

原创 BFC的理解及作用

BFC定义块级格式化上下文，它是指一个独立的块级渲染区域，只有 Blosk-level BOX 参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。从一个现象说起一个盒子不设置 height ，当内容都浮动时无法撑起自身这个盒子就没有形成 BFC<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-.

2021-04-16 14:26:58 104

原创 JS 预编译

JS 预编译的时候做了那些事情创建AO对象找形参和变量的声明作为AO对象的属性名值是undefined 实参和形参相统一找函数声明会覆盖变量的声明 // JS 预编译练习题 function fn(a, c) { console.log(a); // function a (){} var a = 123; console.log(a); // 123 console.log(c); // function ...

2021-04-14 16:59:54 56

空空如也

空空如也