zhoutingxixi-CSDN博客

原创 js判断是否上传文档为图片

1、//我们得到文件后缀名后，根据后缀即可判断文件的类型（文件格式）。比如我们需要判断一个文件是否是图片格式，首先定义一个判断函数：function isAssetTypeAnImage(ext) { return [ 'png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff']. indexOf(ext.toLowerCase()) !== -1;}//然后函数调用判断//文件路径var filePath

2021-06-21 21:34:54 1596

原创 Fetch还是Axios,哪个更适合HTTP请求？

前端开发最重要的部分之一是通过发出HTTP请求与后端进行通信，我们有几种方法可以异步地在JavaScript中进行API调用。几年前，大多数应用程序都使用Ajax发送HTTP请求，Ajax代表异步JavaScript和XML。但是现在，开发人员通常会决定在 .fetch() API和Axios之间进行选择。在本文中，我想比较这两种方法，并简要介绍一下基本知识和语法。除此之外，我还将比较在两种情况下以及在错误处理中将数据转换为jsON格式的过程。我还将讨论HTTP拦截和下载进度。开始吧！.

2021-05-07 15:13:16 302 1

原创前端安全性能问题

1、xss跨站脚本攻击原理？如何进行？防御手段？如何进行：XSS是指恶意攻击者利用网站没有对用户提交数据进行转义处理或者过滤不足的缺点，进而添加一些代码，嵌入到web页面中去。使别的用户访问都会执行相应的嵌入代码。从而盗取用户资料、利用用户身份进行某种动作或者对访问者进行病毒侵害的一种攻击方式。主要原理：过于信任客户端提交的数据！防御手段：不信任任何客户端提交的数据，只要是客户端提交的数据就应该先进行相应的过滤处理然后方可进行下一步的操作。2、CSRF跨站请求伪造原理？如何进行？防御手

2021-05-07 15:12:44 284

原创通过JS检测客户端是否禁用Cookie

Cookie的英文原意是指就着牛奶一起吃的点心。在互联网世界中，Cookie是指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据。cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用JavaScript来创建和取回 cookie 的值。作为一个用户，你可以自由的选择是否开启你浏览器的Cookie功能。作为一个网站开发者，你就必须要知道用户是否禁用了浏览器的Cookie功能，从而编写相应的代码。你可.

2021-04-02 16:35:18 378

原创原生拖拽数组

拖拽效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> ul {

2021-03-12 11:13:15 177 1

原创 JavaScript代理Proxy

什么是代理如MDN网站所述。Proxy对象使你能够为另一个对象创建一个代理，它可以拦截和重新定义该对象的基本操作。他们在解释什么是代理的时候，说它可以创建一个代理**，这有点搞笑。当然，他们并没有错，但我们可以简化这个说法，使其更加友好，说_Proxy_对象可以让你包裹目标对象，通过这样做，我们可以拦截和重新定义该对象的基本操作。基本上，它的意思是我们要把一个对象，用Proxy包裹起来，这将允许我们创建一个 "隐藏 "的门，并控制所有对所需对象的访问。一个小插曲，Proxy也是一种软

2021-03-01 09:46:04 353

原创前端用node及forever部署

1、http-sever.js文件与dist下文件在同一路径下// 配置地址const clientPort = '8888'// node启动服务var http = require('http')var fs = require('fs')var url = require('url')var path = require('path')var server = http.createServer(function (request, response) { //获取输入的u

2021-02-02 17:22:31 1112

原创 Js原型与原型链详解

前言与大部分面向对象语言不同，ES6之前并没有引入类（class）的概念，JavaScript并非通过类而是直接通过构造函数来创建实例。在介绍原型和原型链之前，我们有必要先复习一下构造函数的知识。一、构造函数构造函数模式的目的就是为了创建一个自定义类，并且创建这个类的实例。构造函数模式中拥有了类和实例的概念，并且实例和实例之间是相互独立的，即实例识别。构造函数就是一个普通的函数，创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写。另外就是调用方式的不同，普通函数是直接调用，而.

2021-02-01 09:30:37 307

原创 js中~~和 | 了解一下

~~它代表双非按位取反运算符，如果你想使用比Math.floor()更快的方法，那就是它了。需要注意，对于正数，它向下取整；对于负数，向上取整；非数字取值为0，它具体的表现形式为：~~null; // => 0~~undefined; // => 0~~Infinity; // => 0--NaN; // => 0~~0; // => 0~~{}; // => 0~~[]; //

2021-01-04 15:19:43 297 1

原创 JavaScript中的Object对象

Object是在JavaScript中一个被我们经常使用的类型，而且js中的所有对象都是继承自Object对象的。虽说我们平时只是简单地使用了Object对象来存储数据，并没有使用到太多其他功能，但是Object对象其实包含了很多很有用的属性和方法，尤其是ES5增加的方法，因此，本文将从最基本的介绍开始，详细说明了Object的常用方法和应用。基础介绍创建对象首先我们都知道，对象就是一组相似数据和功能的集合，我们就是用它来模拟我们现实世界中的对象的。那在JavaScript中，创建对象的方式通常

2021-01-04 15:18:51 404

原创 vue中的slot用法

父组件：<NewsListItem :data="item" class="item-content"> <div slot="btns"> <span class="iconfont iconlingdang" :style="{color:[ 'rgb(204, 59, 59)', 'rgb(255, 110, 22)', 'rgb(255, 155, 0)', 'rgb(28, 167, 255)',][item.ala

2021-01-04 15:17:46 1020

原创 WebSocket理解与使用

一、WebSocket 理解概念：WebSocket 是html5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。特点：WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。流程：在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就...

2020-12-04 15:56:34 211

原创 process.env前端环境变量配置教程

一、为什么要配置环境变量在公司，一个项目一般会有开发版本、测试版本、灰度版本和线上版本，每个版本会对应相同或不同的数据库、API地址。为了方便管理，我们通常做成配置文件的形式，根据不同的环境，加载不同的文件。如果手动修改代码中加载配置文件的路径也可以，但是太麻烦，最重要的是很low（无形装逼，最为致命）。二、实现原理采用nodejs顶层对象中的process.env（进程环境，返回一个包含用户环境信息的对象。）属性，根据各个环境的配置文件区分和切换环境三、具体操作（以vue项目为..

2020-12-04 15:53:35 1346

原创如何复制链接到剪贴板上？

copyLink (item) { let tempStr = item.pageurl let copyText = document.createElement('textarea') copyText.style.position = 'absolute' copyText.style.left = '-9999px' copyText.innerHTML = tempStr copyText.readOnly = false..

2020-12-04 15:28:44 1154

原创 Vue源码解析，keep-alive是如何实现缓存的？

前言在性能优化上，最常见的手段就是缓存。对需要经常访问的资源进行缓存，减少请求或者是初始化的过程，从而降低时间或内存的消耗。vue为我们提供了缓存组件keep-alive，它可用于路由级别或组件级别的缓存。但其中的缓存原理你是否了解，组件缓存渲染又是如何工作。那么本文就来解析keep-alive的原理。LRU策略在使用keep-alive时，可以添加prop属性include、exclude、max允许组件有条件的缓存。既然有限制条件，旧的组件需要删除缓存，新的组件...

2020-12-04 15:28:17 535 1

原创 vue 事件中的 .native你搞清楚了吗

native是什么？.native - 监听组件根元素的原生事件。主要是给自定义的组件添加原生事件。官网的解释：你可能想在某个组件的根元素上监听一个原生事件。可以使用v-on的修饰符 .native。通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触发的。 <!DOCTYPE html> <html lang="en"> <head&g...

2020-11-23 09:15:27 1785

原创 2020ECMAScript新特性了解ES11新增9个新特性

ECMAScript 2020 是 ECMAScript 语言规范的第11版。自1997年出版第一版以来，ECMAScript 已发展成为世界上使用最广泛的通用编程语言之一。ES2020(ES11) 引入了以下新特性：String 的 matchAll 方法动态导入语句 import() import.meta export * as ns from 'module' Promise.allSettled 一种新的数据类型：BigInt GlobalThis Nullish coal

2020-11-04 15:54:42 216

原创 vue父组件添加scoped之后解决在父组件中无法修改子组件样式问题

解决方法有三种一、::v-deep.little-box3 ::v-deep img { max-height: 175px;}二、/deep/.little-box3 /deep/ img { max-height: 175px;}三、>>>.little-box3 >>> img { max-height: 175px;}

2020-11-04 10:57:36 244

原创 vue页面放大某个模块全屏写法

<template> <div class="custom-monitoring page"> <div :class="[ 'custom-box', 'shadow', item.index === index && item.largen && 'all-page', item.index !== currIndex && currLa.

2020-11-03 15:54:05 1699

原创微信小程序授权获取用户信息wx.getUserInfo

这个接口只能获得一些非敏感信息，例如用户昵称，用户头像，经过用户授权允许获取的情况下即可获得用户信息，至于openid这些，需要调取wx.login来获取。index.wxml<view wx:if="{{result == 'ok'}}" class="result"> <view class="headimg"> <image src="{{avatarUrl}}"></image&gt.

2020-11-02 13:39:21 2378

原创 Vue中，如何从插槽中发出数据？

我们知道使用作用域插槽可以将数据传递到插槽中，但是如何从插槽传回来呢？将一个方法传递到我们的插槽中，然后在插槽中调用该方法。我信无法发出事件，因为插槽与父组件共享相同的上下文（或作用域）。// Parent.vue<template> <Child> <template #default="{ clicked }"> <button @click="clicked"> Click this button

2020-11-02 13:34:48 1345

原创理解Object.freeze()与const之间的区别

自ES6发布以来，ES6给JavaScript带来了一些新特性和方法。对于JavaScript开发者来说，这些特性能够很好地改善了我们的工作流程以及工作效率，其中的特性就包括Object.freeze()方法和const。一些开发人员特别是新手们会认为这两个功能的工作方式是一样的，但其实并不是。让我来告诉你Object.freeze()和const是如何不同的。综述const和Object.freeze()完全不同。const的行为像let。它们唯一的区别是，const定义...

2020-10-19 09:52:18 214

原创几种简单方法CSS实现文字竖向排版

下面介绍几种使用css实现文字竖向排版的方法：1.一个句子的竖向排列如图：<!DOCTYPE html> <html> <head> <title>test</title> <meta charset="UTF-8"> </head> <style> .one { width: 20px; margin: 0 auto; .

2020-10-16 15:29:50 9713 1

原创 uni-app开发：多页面传值的三种解决方法

开发了一年的uni-app，在这里总结一些uni-app开发中的问题，提供几个解决方法，分享给大家：问题描述：一个主页面，需要联通一到两个子页面，子页面传值到主页面，主页面更新问题难点：首先我们需要一个逻辑模型（这里随便画了一个）通过这个模型，我们可以看到一个问题，子页面的内容怎么传回主页面，怎么让这个传回的方式更安全有效，这也是这个问题的难点，我总结了三种解决方法，在这里分享给大家：第一种：url传值顾名思义，就是利用页面的url方法来传值，具体操作逻辑如下：主页面：用o.

2020-10-16 15:29:22 6009 1

原创 vue在某页面监听键盘输入事件

首先先了解下键位和码值对照表在这里需求是通过按键1、2、3、4、向上向下向左向右进行页面的切换我是这样处理的：（1）、界面通过ifame标签<template> <div class="changepages-index"> <header>这是头部</header> <iframe name="myiframe" id=...

2020-10-09 09:57:15 2981

原创原生监听键盘事件

通过按特定键盘指令，来切换不同的页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body&

2020-10-09 09:56:57 490

原创对象截取前几条数据

for in / for offunctionparams(){vardata={'成都威威':[20,30,10],'上海11':[20,10,60],'北京':[20,10,60],'杭州':[20,10,30]}varnewData={}varnewDatas={}letnewKeys=Object.keys(data)...

2020-10-09 09:56:24 5166 1

原创 Math.max和Math.max.apply的区别和用法（Javascript）

最近在做一个小案例的时候遇到了Math.max.apply这么一个用法，之前很少遇到过感觉挺有趣的，就记录一下。Math.max语法：Math.max(n1,n2,n3,...,nX)返回值：max() 方法可返回指定的参数中带有较大的值的那个数var a = Math.max(1,2,3,4); console.log(a); //4 但是如果数据是放在一个数组里面，此时就不能这样调用了。这时就用到apply方法Math.max.applyapply() 方法调用一个函数..

2020-09-21 15:16:40 698 1

原创 uniApp项目搭建

（1）、首先你需要先下载一个开发工具HbuilderX下载（2）、进入开发工具，然后新建一个项目，如图（3）、配置微信小程序展示环境首次会弹出小框（只需将微信开发者工具安装包所在路径放上去即可）（4）、可以安装插件（sass、git等等）（在工具插件安装里面安装即可）（5）、接下来就可以开始你的开发了......

2020-09-18 10:57:47 559

原创 Array.prototype.slice.call(arguments)

原理解释：Array.prototype.slice.call()方法能够将一个具有length属性的对象转换为数组。比如我自己定义一个具有length属性的对象：var obj = { 0: 'one', 1: 'two', 2: 'three', length: 3};console.log(Array.prototype.slice.call(obj)); // ["one", "two", "three"]function foo(a,b,c,d) { var arg

2020-09-18 10:48:32 372

原创 javascript中定时器setInterval和setTImeout的this指向问题

在js中setTimeout和setInterval都是用来定时的一个功能，下面这篇文章主要给介绍了js中setInterval和setTImeout的this指向问题,文中通过示例介绍的很详细，有需要的朋友可以参考借鉴，一起来看看吧。前言js是一个单线程语言，可以通过setTimeout()和setInterval()来设置代码在指定时刻运行，前者是在指定时间后执行，后者是指每隔一段时间执行。两者的使用方法类似。最近在练习写一个小例子的时候用到了定时器，发现在setInterval和setTi

2020-09-04 15:27:00 130

原创 Object构造函数的方法之Object.entries()

Object构造函数的方法之Object.entries()Object.entries( obj )返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for…in循环遍历该对象时返回的顺序一致（区别在于for…in循环也枚举原型链中的属性）通俗讲就是Object.entries()可以把一个对象的键值以数组的形式遍历出来，顺序和for…in一致，但不会遍历原型属性描述Object.entries()返回一个数组，其元素是与直接在object上找到的可枚举属性键值..

2020-09-04 15:22:51 221

原创图片懒加载（二）vue自定义指令-懒加载

vue自定义指令-懒加载Vue自定义指令下面的api来自官网自定义指令：钩子函数bind: 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted: 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。update: 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新componentUpdated: 指令所

2020-09-01 16:23:26 235

原创图片懒加载（一）

什么是图片懒加载当我们向下滚动的时候图片资源才被请求到，这也就是我们本次要实现的效果，进入页面的时候，只请求可视区域的图片资源这也就是懒加载。比如我们加载一个页面，这个页面很长很长，长到我们的浏览器可视区域装不下，那么懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域在加载。这个功能非常常见，你打开淘宝的首页，向下滚动，就会看到会有图片不断的加载；你在百度中搜索图片，结果肯定成千上万条，不可能所有的都一下子加载出来的，很重要的原因就是会有性能问题。你可以在Network中查看，在页面滚动

2020-09-01 16:23:03 124

原创 Vue的$event的不同表现

$event是事件对象的特殊变量，在两种场景下，它有不同的意义，代表不同的对象。在原生事件中表示事件本身。可以通过$event.target获得事件所在的DOM对象，再通过value进一步获取具体的值。<template> <div> <input type="text" @input="inputHandler('hello', $event)" /> </div></template>expor.

2020-08-25 11:32:19 424

原创 Vue的异步更新队列之$nextTick()

vue在更新 DOM 时是异步执行的。只要侦听到数据变化，vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，vue刷新队列并执行实际 (已去重的) 工作。vue在内部对异步队列尝试使用原生的Promise.then、MutationObserver和setImmediate，如果执行环境不支持，...

2020-08-24 15:32:19 215

原创 Vue中表单输入框统一验证

1、先写一个校验的方法文件import Vue from 'vue'export const over100 = (e) => { let value = e.target.value if (value.length > 100) { Vue.prototype.$message.error('不能输入超过100个字符') value = value.slice(0, 100) } e.target.value = value e.target.di

2020-08-18 15:55:42 1334

转载实用的九个ES6 特性

1、展开操作符顾名思义，用于对象或数组之前的展开操作符（…），将一个结构展开为列表。演示一下：let firstHalf = [ one , two ];let secondHalf = [ three , four , ...firstHalf];这种写法够优雅，够简洁吧？如果不用展开操作符我们得这么写：let firstHalf = [ one , two ];let secondHalf = [ three , four ];for(var i=0, i

2020-08-10 15:47:06 90

原创基于vue2.0的活动倒计时组件

vue2-countdown 基于vue2.0的活动倒计时组件可以使用服务端当前时间在倒计时开始或者结束的时候,可以自定义回调文档：https://cgygd.github.io/vue2-countdown/ demo：https://cgygd.github.io/vue2-countdown/example/index.html 示例.png安装1.cnpm/npmnpm install vue2-countdown -..

2020-08-09 15:43:55 386

原创深浅（拷贝）克隆

1浅克隆arr.slice(0) arr.concat() let obj2 = {... obj}2深克隆function deepClone(obj){ //判断参数是不是一个对象 let objClone = new obj.constructor(); if(obj && typeof obj==="object"){ for(key in obj){ if(obj.hasOwnProperty(key)){ //判断ojb子元素是否为对..

2020-08-05 14:19:55 145

空空如也

空空如也