博主:DongJiang
码龄:7年
等级:LV.22级
内容:316
今日访问:2312
访问总量:5931
博客简介:学习与分享
博客创建时间:2018-04-12
博客主页 立即前往
赞助位
成为赞助商

开发笔记

0

什么是作用域和作用域链?

作用域是指变量和函数在代码中的可访问范围

作用域链是指在代码中查找变量和函数的过程,当一个变量或函数在当前作用域中找不到时,它会向上层作用域继续查找,直到找到为止,这种层层嵌套的查找关系形成了作用域链。

分类:Javascript 胡学长 2024-05-19
0

创建一个空数组/空对象有哪些方式?

创建空对象

1.通过字面量: {}

2.通过Object

new Object()

3.通过函数

function a() {
   this.b = 2
}
let c = new a()

4.通过Object.create

Object.create()

创建空数组

1.通过字面量:[]

2.通过Array

new Array()

3.通过Object.create

Object.create(Array.prototype)
分类:Javascript 胡学长 2024-05-19
0

实现水平垂直居中的方式?

1、通过绝对定位的方式 absolute 负margin

2、absolute transform (过渡)

3、absolute margin auto

4、使用flex布局设置居中

5、给容器加给伪元素line-height

6、tabel-cell实现垂直居中

分类:HTML5 现松 2024-05-19
0

javascript合并对象的几种方法

1、使用Object.assign()方法

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

2、使用展开运算符...(ES6语法)

对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中。

3、使用for...in循环(递归赋值)

4、使用lodash的merge方法(如果已经在项目中使用了lodash)

5、jquery中的extend()

jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。

分类:Javascript 现松 2024-05-19
0

css样式中:link和@import的区别

标签:样式表css3

两者都是外部引用css的方式。但是有一定的区别:

1. 从属关系:

link是一个xhtml标签,除了加载css外,还可以定义 RSS、rel 连接属性等;

@import属于css范畴,只能加载css。

2. 加载顺序:

link引用css的时候,在页面载入的同时加载;

@import需要页面完全载入以后才加载。

3.兼容性:

link是xhtml标签,无兼容问题;

@import是在css2.1提出的,只可在 ie5 才能识别,低版本的浏览器不支持。

4.DOM可控制性:

link支持使用javascript控制dom去改变样式;

@import不支持。

分类:CSS3 现松 2024-05-19
0

v-for循环为什么一定要绑定key?

vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等,因为vue组件高度复用增加Key可以标识组件的唯一性,为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM

1、vue更新已渲染过的元素时,默认使用就地复用策略(如果该元素dom未修改,则复用之前的元素,否则重新渲染这一项)。

2、key的作用是唯一标识组件元素,辅助判断新旧vdom节点在逻辑上是不是同一个对象,是否有更新

vue是通过比对组件自身新旧vdom进行更新的。

分类:Vue 东江哥 2024-05-19
0

什么是window对象? 什么是document对象?

标签:window对象

window对象是指浏览器打开的窗口。是 JavaScript 中的全局对象,在浏览器环境中始终存在且可直接访问。

document对象是Document对象(HTML 文档对象)的一个只读引用,window对象的一个属性。

分类:Javascript 东江哥 2024-05-19
0

vue中$route和$router的区别

标签:路由vue

1、$router是用来操作路由,$router是VueRouter的一个实例,他包含了所有的路由,包括路由的跳转方法,钩子函数等,也包含一些子对象(例如history)。

2、$route是用来获取路由信息,$route是一个跳转的路由对象(路由信息对象),每一个路由都会有一个$route对象,是一个局部的对象。包括 path,params,hash,query,fullPath,matched,name 等路由信息参数。

分类:Vue 秋林 2024-05-19
0

JavaScript 运行机制以及Event Loop(事件循环)

JavaScript执行机制通常指的是它的单线程事件循环任务队列

单线程:

JavaScript在浏览器中是单线程的,意味着同一时间只能执行一个任务,后续的任务必须排队等候。

事件循环:

JavaScript执行时,会形成一个执行栈和一个任务队列。当执行栈为空时,会从任务队列中取出任务执行。

任务队列:

任务队列通常包括宏任务和微任务。宏任务(Macro Task)如setTimeout、setInterval、I/O操作、UI渲染等;微任务(Micro Task)如Promise、MutationObserver等。

分类:Javascript 秋林 2024-05-19
0

JS中事件处理机制包含事件委托、事件捕获和事件冒泡

1、事件委托(Event Delegation)

事件委托是一种利用事件冒泡机制的技术,它允许我们将事件处理程序绑定到父元素上,而不是在每个子元素上都绑定事件处理程序。 当一个事件发生在子元素上时,它会冒泡到父元素,然后由父元素上的事件处理程序来处理。这样做的好处是减少了事件处理程序的数量,尤其适用于动态生成的内容。 举例来说,如果有一个列表,我们希望对列表中的每个项都执行相同的操作,那么我们可以将点击事件处理程序绑定到整个列表的父元素上,而不是在每个列表项上都绑定。

2、事件捕获(Event Capturing)

事件捕获是事件处理的第一个阶段,在事件到达目标元素之前发生。 当一个事件发生时,它会从文档树的根节点开始向下传播至目标元素。在这个过程中,如果某个元素在捕获阶段上绑定了事件处理程序,那么这些事件处理程序会按照捕获的顺序被依次执行。 事件捕获阶段很少被使用,因为它相对不常见,而且大多数情况下我们更关心事件的冒泡阶段。

3、事件冒泡(Event Bubbling)

事件冒泡是事件处理的第二个阶段,在事件到达目标元素之后发生。 当一个事件发生时,它会从目标元素开始向上冒泡至文档树的根节点。在这个过程中,如果某个元素或者它的祖先元素上绑定了事件处理程序,那么这些事件处理程序会按照冒泡的顺序被依次执行。 事件冒泡是 JavaScript 中最常用的事件处理机制,因为它使得我们可以在较高级别的元素上捕获事件,并且更容易管理事件处理程序。

分类:Javascript 秋林 2024-05-19
0

JS中数组去重的方法都有哪些?

1、使用 Set 去重(ES6 中最常用)

2、使用 indexOf()

3、使用includes()方法

4、使用双重for循环

5、使用单重for循环

6、使用filter()方法

7、使用reduce()方法

8、使用Map对象

分类:Javascript 胡学长 2024-05-19
0

移动端如何适配不同屏幕尺寸

1、使用响应式布局:使用CSS媒体查询和弹性布局来根据屏幕尺寸调整页面布局和元素大小。通过设置百分比、em或rem单位来实现元素的相对大小。

2、使用Viewport:通过设置Viewport元标签来控制页面在移动设备上的显示。可以使用来设置Viewport的宽度为设备宽度,并且禁用缩放。

3、使用CSS Flexbox或Grid布局:这些布局技术可以帮助您更轻松地创建自适应的布局,使元素在不同屏幕尺寸下自动调整位置和大小。

4、使用CSS媒体查询:通过使用@media规则,可以根据不同的屏幕尺寸应用不同的CSS样式。您可以根据需要设置不同的断点,并在不同的屏幕尺寸下应用不同的样式。

5、使用流式布局:使用百分比单位和自适应容器来创建流式布局,使页面元素根据屏幕尺寸自动调整大小。

6、使用图片适配:使用srcset和sizes属性来为不同屏幕尺寸提供不同大小的图片,以减少加载时间和带宽消耗。

7、使用JavaScript库:例如,使用Bootstrap或Foundation等前端框架,它们提供了一些内置的响应式布局和组件,可以帮助您更轻松地实现移动端适配。

分类:HTML5 胡学长 2024-05-19
0

关于弹性布局flex:1的三种属性

flex: 1 是一个简写的 CSS 声明,它包含三个属性:flex-grow、flex-shrink 和 flex-basis。它们分别代表:

flex-grow:定义项目的放大比例,默认为0,即如果存在剩余空间,也不会放大。

flex-shrink:定义项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

flex-basis:定义了在分配多余空间之前,项目占据的主轴空间(main size),默认值为auto,即项目的本来大小。

简写为 flex: 1 实际上相当于 flex: 1 1 auto。

例如,在一个 flex 容器中,如果你想让一个子元素占据剩余空间的全部,你可以这样设置:

分类:CSS3 秋林 2024-05-19
0

vue3.0和vue2.0的区别

标签:vue2vue3

Vue.js是一款流行的用于构建用户界面的开源JavaScript框架。Vue.js库的最新版本是Vue3.0,它相较于之前的版本(如Vue2.0)有许多新的特性和改进。

1、响应式系统升级

2、更小的体积

3、更好的性能

4、Composition API

5、TypeScript支持

6更强大的工具链

分类:Vue 秋林 2024-05-19
0

HTML与CSS3伪元素和伪类详解

一、伪类(pseudo classes)

  用于已有元素处于某种状态时为其添加对应的样式,但是通过DOM树又无法表示这种状态,就可以通过伪类来为其添加样式。

例如:当用户悬停在指定元素时,可以通过:hover来描述这个元素的状态,虽然它和一般CSS相似,可以为已有元素添加样式,但是它只有处于DOM树无法描述的状态下才能为元素添加样式。

二、伪元素(pseudo elements)

  用于创建一些不在DOM树中的元素,并为其添加样式。

  例如:我们可以通过:before来在一个元素之前添加一些文本,并为这些文本添加样式,虽然用户可以看见这些文本,但是它实际上并不在DOM文档中。

分类:CSS3 现松 2024-05-19
0

操作数组的方式有哪些?

标签:数组方法

1、 push (将指定的元素添加到数组的末尾,并返回新的数组长度)

2、pop (从数组中删除最后一个元素,并返回该元素的值)

3、shift (从数组中删除第一个元素,并返回该元素的值)

4、unshift (向数组首位添加一个或多个元素,并返回新的数组长度)

5、concat (合并多个数组或值,返回一个新的数组)

6、slice (截取数组的一部分,返回一个新的数组)

7、splice (删除、替换或添加数组的元素,并返回被删除的元素)

8、filter (过滤数组中的元素,返回一个新的数组)

9、map (对数组中的每个元素进行操作,返回一个新的数组)

10、sort (对数组进行排序)

11、reverse (翻转数组中的元素)

12、indexOf (查找数组中指定元素的索引)

13、find (查找数组中符合条件的第一个元素)

14、findIndex (查找数组中符合条件的第一个元素的索引)

15、includes (判断一个数组是否包含一个指定的值)

16、every (判断数组内的所有元素是否都能通过指定函数的测试)

17、some(判断数组中是否至少有一个元素通过了指定函数的测试)

18、join (将一个数组的所有元素连接成一个字符串并返回这个字符串)

19、reduce (计算数组所有元素的总和)

20、forEach(数组循环遍历)

分类:Javascript 现松 2024-05-19
0

vue-router有哪几种导航钩子?

vue-router有3导航钩子分别是:全局导航钩子、组件内的导航钩子、路由独享钩子。

1、全局导航钩子

作用:路由跳转前触发,跳转前进行判断拦截

组件内的导航钩子

1)beforeRouteEnter 在进入当前组件对应的路由前调用

2)beforeRouteUpdate 在当前路由改变,但是该组件被复用时调用

路由独享钩子

可以在路由配置上直接定义 beforeEnter

3)beforeRouteLeave 在离开当前组件对应的路由前调用

分类:Vue 现松 2024-05-19
0

delete和Vue.$delete删除数组的区别

在Vue.js中,delete操作符和Vue.$delete方法都用于删除数组中的元素,但它们之间有一个关键的区别:

delete操作符:这是JavaScript的原生操作符,用于删除对象的属性。当使用它来删除数组中的元素时,它不会触发Vue的响应式更新机制。也就是说,数组的长度并不会改变,如果后续继续访问已删除元素的索引,会得到undefined。

Vue.$delete方法:这是Vue实例提供的一个方法,用于删除数组中的元素,并确保更新视图。这是一个Vue 2.x的方法,在Vue 3.x中应使用Vue.delete。

总结:

delete 数组自带的方法,删除后对应值变为 empty/undefined,数组长度不变,键值不变。

vue.$delete 会删除数组的键值对,数组长度变化。

分类:Vue 东江哥 2024-05-19
0

vue-router路由模式有几种,它们有什么区别??

VueRouter的路由模式有三种:hash模式、history模式和abstract模式。

1:Hash 模式(默认):

在URL中的路径部分以 # 符号开头。

比如:http://www.xxx.com/#/home。

在hash模式下,URL的hash部分的改变不会导致浏览器向服务器发送请求,可以通过监听hashchange事件来触发相应的路由变化。

2:History 模式:

通过使用HTML5的pushState和replaceState方法来改变URL,不再使用hash作为URL的一部分。

比如:http://www.xxx.com/home。

在history模式下,URL的改变会导致浏览器向服务器发送请求,因此需要服务器的支持来处理这些URL。

3:Abstract 模式:

在无法使用浏览器的history模式和hash模式时,可以选择使用abstract模式。在abstract模式下,只会改变应用的内存状态,并不会改变URL。这种模式适合于在非浏览器环境中使用VueRouter,比如在Node.js中渲染Vue应用。

分类:Vue 东江哥 2024-05-19
0

vuex是什么?怎么使用?哪种功能场景使用它?它有哪几种属性?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是:应用遇到多个组件共享状态时,使用vuex。

场景:多个组件共享数据或者是跨组件传递数据时

vuex有5种属性分别是State , Getter , Mutation , Action , Module (就是mapAction)

分类:Vue 东江哥 2024-05-19
0

Vue请求初始化数据放在Created还是Mounted?

mounted

  如果把所有请求放在created里面的话,请求过多会,加载太慢会导致页面出现短暂的白屏情况,一般上我写的话,接口不复杂会放created里面,接口多复杂的话会放在mounted里面.

mounted

  created 是加载DOM,html之后 就马上执行, 比如初始化,获取屏幕高度调整,赋值等等,而mounted就是执行包括js之后,准备开始调用方法,也就是说 类似传统开发那样,先加载jquery 再调用插件

分类:Vue 胡学长 2024-05-18
0

vue中的$nextTick的作用及使用场景

一、$nextTick的作用

$nextTick() 是 Vue 提供的一个异步方法,用于在 DOM 更新之后执行回调函数。在 Vue 中,DOM 的更新是异步的,即 Vue 异步执行更新队列,而不是直接操作 DOM。

$nextTick() 主要用于确保在 DOM 更新完成后执行一些操作,例如在更新后操作 DOM 元素、获取更新后的元素尺寸等。

二、特点和用途

$nextTick() 会在 Vue.js 更新队列完成之后,DOM 更新之前调用传入的回调函数。 主要用于确保在 DOM 更新之后执行一些操作,以避免直接操作未更新的 DOM。 通常用于处理需要等待 DOM 更新的情况,比如在修改数据后立即获取更新后的 DOM 元素。

三、使用场景:

1、在执行mounted中方法修改了 data 的值,然后通过 $nextTick 来确保在 DOM 更新后执行回调函数。这样可以保证在回调函数中获取到最新的 DOM 内容。

分类:Vue 胡学长 2024-05-18
0

v-if和v-for这两个指令谁的优先级高

标签:指令v-if

在vue2中,v-for的优先级高于v-if;

在vue3中,v-if的优先级高于v-for。

在vue中,永远不要把v-if和v-for同时用在同一个元素上,会带来性能方面的浪费(每次渲染都会先循环再进行条件判断);想要避免出现这种情况,可在外层嵌套template(页面渲染不生成dom节点),在这一层进行v-if判断,然后在内部进行v-for循环。

如果v-if依赖于v-for中的某一个数据,可以用computed计算属性和filter来实现。

分类:Vue 胡学长 2024-05-18
0

vue父组件调用子组件中的方法和值的几种方式

1. ref

直接在父组件内部给子组件标签添加ref属性,然后通过ref属性来调用子组件的方法。

2. $children

在父组件的方法中,通过 $children 属性来访问子组件实例,并调用子组件的方法,返回的是一个存放所有子组件的数组。

3. $emit $on

子组件向父组件$emit消息发送和父组件$on监听

分类:Vue 胡学长 2024-05-18
0

Vue中keep-alive组件作用详解

Vue中keep-alive组件作用是保留组件状态或避免重新渲染(缓存的作用)。

Vue中keep-alive组件有两个属性include与exclude:

include:字符串或者正则表达式。只有匹配的组件会被缓存

exclude:字符串或者正则表达式。任何匹配的组件都不会被缓存。

keep-alive提供了两个生命钩子,分别是activated与deactivated。因为keep-alive会将组件保存在内存中,并不会销毁以及重新创建,所以不会重新调用组件的created、mounted这些函数。

被 keep-alive 包裹的组件被缓存之后有两个独有的生命周期: activated 和 deactivated。activated 生命周期在组件激活时调用、deactivated 生命周期在组件停用时调用。

分类:Vue 现松 2024-05-18
0

Vue 的父组件和子组件生命周期钩子函数执行顺序

加载渲染过程:

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

子组件更新过程:

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

父组件更新过程:

父 beforeUpdate -> 父 updated

销毁过程:

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

分类:Vue 现松 2024-05-18
0

computed 和 watch 的区别和运用的场景?

computed和watch的区别

1、computed是计算属性;watch是监听,监听data中的数据变化。

2、computed支持缓存,当其依赖的属性的值发生变化时,计算属性会重新计算,反之,则使用缓存中的属性值;watch不支持缓存,当对应属性发生变化的时候,响应执行。

3、computed不支持异步,有异步操作时无法监听数据变化;watch支持异步操作。

4、computed第一次加载时就监听;watch默认第一次加载时不监听。

5、computed中的函数必须调用return;watch不是。

6、使用场景:

computed:一个属性受到多个属性影响,如:购物车商品结算。

watch:一个数据影响多条数据,如:搜索数据。 数据变化响应,执行异步操作,或高性能消耗的操作,watch为最佳选择。

分类:Vue 现松 2024-05-18
0

v-show 与 v-if 有什么区别?

标签:指令v-show

设置DOM元素显示隐藏有v-show指令和v-if指令两种。

相同点:两者都是达到显示隐藏的功能

不同点:v-show指令通过修改元素的display属性让其显示或者隐藏,v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果.

分类:Vue 秋林 2024-05-18
0

vue组件slot 插槽有哪些,如何使用?

标签:插槽slot

slot 插槽,可以理解为slot在组件模板中提前占据了位置。当复用组件时,使用相关的slot标签时,标签里的内容就会自动替换组件模板中对应slot标签的位置,作为承载分发内容的出口。

主要作用是复用和扩展组件,做一些定制化组件的处理。

插槽主要有3种

1)默认插槽

2)具名插槽

3)作用域插槽

分类:Vue 秋林 2024-05-18
0

class 与 style 如何动态绑定

vue组件中class 和 style 可以通过对象语法和数组语法进行动态绑定

对象写法

<template>
<div :class="{ active: isActive }"></div>
<div :style="{ fontSize: fontSize }">
</template>
<script>
export default {
data() {
  return {
    isActive: true,
    fontSize: 30
  }
}
}

数组写法

<template>
<div :class="[activeClass]"></div>
<div :style="[styleFontSize]">
</template>
<script>
export default {
data() {
  return {
    activeClass: 'active',
    styleFontSize: {
      fontSize: '12px'
    }
  }
}
}
</script>
分类:CSS3 秋林 2024-05-18
0

vue中常用的修饰符哪些?

表单修饰符

lazy: 失去焦点后同步信息

trim: 自动过滤首尾空格

number: 输入值转为数值类型

事件修饰符

stop:阻止冒泡

prevent:阻止默认行为

self:仅绑定元素自身触发

once:只触发一次

鼠标按钮修饰符

left:鼠标左键

right:鼠标右键

middle:鼠标中间键

分类:Vue 东江哥 2024-05-18
0

router-link上事件无效解决方法

内置组件router-link不生效的原因:router-link会阻止click事件,为决绝这一问题我们在事件绑定上加个native事件修饰符如:

使用@click.native。

.native指直接监听一个原生事件。

分类:Vue 东江哥 2024-05-18
0

vue指令v-model的原理如何实现?

标签:指令v-model

v-model原理:

原生 input 元素若是text/textarea类型,使用 value 属性和 input 事件。

原生 input 元素若是radio/checkbox类型,使用 checked属性和 change 事件。

原生 select 元素,使用 value 属性和 change 事件。

input 元素上使用 v-model 等价于

<input :value="message" @input="message = $event.target.value" />
分类:Vue 东江哥 2024-05-18
0

js中数组合并的方法有哪些

1、 concat关键字 arr.concat(arr2, arr3, ······)

2、 es6 展开运算符(…) […arr1, …arr2,······]

3、 push() push(…arr)

通过push合并数组有以下2中形式

1)使用es6扩展运算符合并

2)结合for循环,遍历一个数组,然后push到另一个数组中。

分类:Javascript 现松 2024-05-17
0

什么是内存泄漏,内存泄漏的原因是什么,应该如何优化?

内存泄露

内存泄露是指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束。

可能出现内存泄漏的原因

1、 意外的全局变量

2、 DOM元素清空时,还存在引用

3、 闭包

4、 遗忘的定时器

内存泄漏优化方法

1、 全局变量先声明在使用

2、 避免过多使用闭包。

3、 注意清除定时器和事件监听器。

分类:Javascript 现松 2024-05-17
0

get请求和post请求区别和使用方式

标签:get请求get

关于接口获取数据get请求和post请求区别和使用方式。

特性 get post
参数位置 参数拼接到URL后面 参数在请求体中
参数大小 受限于浏览器url大小,一般不超过32K 1G
安全性 参数暴露在URL中,安全性低 相对get安全性更高些
适用场景 从服务器端获取数据 从服务器端获取数据
缓存 在浏览器中可缓存 不可以缓存
分类:Javascript 胡学长 2024-05-17
0

关于LocalStorage、SessionStorage、Cookie 之间的区别和共同点

localStorage:

localStorage.setItem(key, value)
localStorage.getItem(key)
localStorage.removeItem(key)
localStorage.clear()

sessionStorage:

sessionStorage.setItem(key, value)
sessionStorage.getItem(key)
sessionStorage.removeItem(key)
sessionStorage.clear()
特性 LocalStorage SessionStorage Cookie
存放数据大小 LocalStorage 的存储容量为5MB/10MB SessionStorage 的存储容量为5MB Cookies的存储容量为4KB
数据生命周期 由于它不是基于会话的,因此必须通过 javascript 或手动删除 它是基于会话的,可以按窗口或选项卡工作。这意味着数据仅在会话期间存储,即直到浏览器(或选项卡)关闭 Cookies 根据选项卡和窗口的设置和工作过期
存储方式 客户端只能读取本地存储 客户端只能读取本地存储 客户端和服务器都可以读取和写入 cookie
向服务器传输数据 没有向服务器传输数据 没有向服务器传输数据 存在到服务器的数据传输
浏览器兼容性 支持它的旧浏览器较少 支持它的旧浏览器较少 所有浏览器都支持它,包括旧版浏览器
共同点 都是保存在浏览器端 都是保存在浏览器端 都是保存在浏览器端
分类:Javascript 胡学长 2024-05-17
0

CSS 单位: %, em, rem, px, vh, vw

% – %单位用于设置相对于当前字体大小的字体大小。

em -相对于当前对象内文本的字体尺寸(参考物是父元素的font-size)

注意:这里的 2em 表示当前字体大小的 2 倍。

rem – rem是相对于HTML根元素的字体大小(font-size)来计算的长度单位

px -相对于显示器屏幕分辨率

vh - 相对于视口高度的 1%。

vw – 相对于视口宽度的 1%

分类:CSS3 东江哥 2024-05-17
0

map 和 forEach 的都可以用来遍历,它们有什么区别

map 和 forEach 的区别是map返回一个新的数组,forEach返回undefined。

使用场景:修改或返回新数组使用map,相反只是做遍历循环时用foreach 或 for

const array = [1, 2, 3, 4, 5]
const arr = array.forEach(x => x * x)
const arr2 = array.map(x => x * x)
console.log(array)  // [1, 2, 3, 4, 5]
console.log(arr)  // undefined
console.log(arr2)  //[1, 4, 9, 16, 25]
分类:Javascript 东江哥 2024-05-17
0

什么是跨域?跨域解决方法有哪些?

跨域是指当请求非同源的URL链接,简单说就是协议,域名,端口中存在有和当前Url不同的就是跨域

跨域解决方法

1)cors:后端服务器设置

2)nginx反向代理

3)jsonp

由于script的src不受同源策略限制,我们可以通过src访问服务器上的脚本进行数据回调 (动态创建script标签,回调函数)

分类:Javascript 东江哥 2024-05-17
0

什么是同源策略,非同源浏览器会有哪些限制

同源策略指的是:协议,域名,端口三者一致

同源策略的目的:是为了保证用户信息的安全,防止恶意的网站窃取数据

如果非同源,浏览器会进行什么限制?

Cookie,LocalStorage和IndexDB 无法读取

Dom不能获得

ajax请求不能发送

分类:Javascript 东江哥 2024-05-17
0

preventDefault()阻止元素默认事件和 stopPropagation()阻止元素事件冒泡

preventDefault()函数: a标签,radio、checkbox复选框等表单元素,div没有默认事件

stopPropagation()来阻止触发的事件

分类:Javascript 东江哥 2024-05-17
0

JS防抖和节流简单理解

标签:防抖节流

函数防抖:是函数在特定的时间内不被再调用后执行。如果n秒内高频事件再次被触发,则重新计算时间。

事件场景:

1)点击按钮事件

2)输入框的自动保存事件

3)浏览器resize事件

函数节流:是确保函数特定的时间内至多执行一次。

事件场景

1)scroll事件,滚动的过程中每隔一段时间触发事件。

分类:Javascript 东江哥 2024-05-17
0

关于typeof和instanceof的用法

1、在判断一个变量是否存在时应该用typeof来判断。

2、当判断一个变量是否是数组类型时使用 instanceof 关键字而不是 typeof。

3、如何判断一个对象是否属于某个类使用instanceof。

分类:Javascript 现松 2024-05-16
0

什么是原型对象和原型链,为什么要使用原型链呢?

1、原型对象(Person.prototype)是 构造函数(Person)的一个实例。

2、JavaScript是⾯向对象的,每个实例对象都有⼀个__proto__属性,该属性指向它的原型对象,这个实例对象的构造函数有⼀个原型属性 prototype,与实例的proto属性指向同⼀个对象。当⼀个对象在查找⼀个属性的时候,⾃⾝没有就会根据__proto__向它的原型进⾏查找,如果 都没有,则向它的原型的原型继续查找,直到查到Object.prototype.proto_为null,这样也就形成了原型链。

原型链的顶层就是Object.prototype,而这个对象的是没有原型对象的。

分类:Javascript 现松 2024-05-16
0

JS中相等运算符(==)和完全相等运算符(===)的区别

1、相等运算符(==)是判断等号两边的值是否相等

2、完全相等运算符(===)是判断等号两边的值和类型是否相等

分类:Javascript 秋林 2024-05-16
0

普通函数和箭头函数有啥区别

1、书写方式不同

2、箭头函数this所指的对象是上层函数作用域里this所指的对象

3、箭头函数不能用作变量提升

4、箭头函数没有构造函数不能实例化

分类:Javascript 秋林 2024-05-16
0

call、bind、apply的区别

标签:thiscall

1、都是用来改变函数执行时的上下文,再具体一点就是改变函数运行时的this指向

2、区别:参数书写方式不同

call(thisObj, arg, arg2, arg3);

apply(thisObj, [args]);

bind(thisObj,arg, arg2, arg3)(); //bind 返回的是一个新的函数,必须调用它才会被执行。

分类:Javascript 秋林 2024-05-16
0

JS中中什么是高阶函数,高阶函数有哪些?

高阶函数是JS函数式编程的最佳特性。它是以函数为参数并返回函数作为结果的函数。一些内置的高阶函数是map、filter、reduce 等等。

分类:Javascript 秋林 2024-05-16
0

什么是箭头函数

箭头函数是在es6或更高版本中编写函数的表达式

箭头函数可以更简洁地定义函数,使用箭头(=>)符号来替代传统的function关键字。这种函数定义方式可以使代码更加简洁易读。

分类:Javascript 秋林 2024-05-16
0

什么是深拷贝和浅拷贝,怎么理解?

浅拷贝 :只复制指向某个对象的指针,而不复制这个对象本身,新旧对象共享一块内存。

深拷贝 :复制并创建一个一模一样的对象,不共享内存,修改新对象旧对象不会变。

分类:Javascript 秋林 2024-05-16
0

同步请求和异步请求的区别

按顺序执行的函数为同步请求、同时进行请求的函数为异步请求。

区别:同步按顺序执行函数、解析的速度相对异步较慢;异步则相反,先读取完成的函数先执行、解析速度快。

分类:Javascript 东江哥 2024-05-15
0

关于null,undefined 的区别

标签:对象值null

null 表示一个对象是“没有值”的值,也就是值为“空”。undefined 表示一个变量声明了没有初始化(赋值)。undefined不是一个有效的JSON,而null是。

分类:Javascript 东江哥 2024-05-15
0

js数据类型有几种?有什么不同

js的数据类型可分为基本数据类型和引用数据类型。基本数据类型(栈存储):Undefined,Null,Boolean,Number、String引用数据类型(堆存储):对象、数组、函数

分类:Javascript 东江哥 2024-05-15
0

什么是promise,如何去理解和正确使用?

promise是一个构造函数,是用来处理异步操作的解决方式。promise构造函数是同步执行的,then方法是异步执行的

分类:Javascript 东江哥 2024-05-15
0

什么是闭包?

标签:闭包函数

闭包是指存在自由变量的函数。在A作用域中使用的变量a,却没有在A作用域中声明(即在其他作用域中声明的),对于A作用域来说,a就是一个自由变量。如下代码

分类:Javascript 东江哥 2024-05-15
0

vue组件中data为什么不是一个对象?

标签:vue组件

在 Vue 中,data 选项在组件中通常被定义为一个函数,而不是一个对象。主要是因为组件被多次引用,每个组件实例都需要有自己独立的数据状态。

如果你将 data 定义为一个对象,那么所有的组件实例将共享同一个对象引用,这会导致它们之间的数据状态相互干扰。

通过将 data 定义为一个函数,Vue 可以确保每次创建新的组件实例时都会调用这个函数,从而返回一个新的数据对象。这样,每个组件实例都会有自己独立的数据状态

分类:Vue 东江哥 2024-05-15
0

PHP服务器静态文件跨域配置

标签:

php网站apache服务器静态资源跨域问题配置,可以在.htaccess文件中进行跨域配置

<IfModule mod_headers.c>  
    Header set Access-Control-Allow-Origin "*"  
    Header set Access-Control-Allow-Methods "GET"  
    Header set Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range"  
</IfModule>
分类:PHP 东江哥 2024-01-09
0

MySQL 通过JOIN查询多张表数据的总和

标签:hpmysql语句
<?php
// 连接数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";
 
$conn = new mysqli($servername, $username, $password, $dbname);
 
// 检查连接是否成功
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
 
// 查询多表的总数
$sql = "SELECT COUNT(*) AS total_count FROM table1
        JOIN table2 ON table1.id = table2.id
        JOIN table3 ON table1.id = table3.id";
 
$result = $conn->query($sql);
 
if ($result->num_rows > 0) {
    // 输出总数
    while($row = $result->fetch_assoc()) {
        echo "总数: " . $row["total_count"];
    }
} else {
    echo "没有结果";
}
 
// 关闭数据库连接
$conn->close();
?>
分类:PHP 东江哥 2023-11-30
0

textarea换行提交,页面未展示换行效果可通过replace处理

文本域内容通过回车键进行换行后,提交表单保存到数据库中,数据库保存的内容格式和文本域是一致的。

请求接口后,返回的数据是带有/n换行符的字符串。/n换行符是后端的代码换行的符号,在前端代码中是不展示也不起换行作用。

为了保证页面展示和我们输入一致的换行效果,此时,我们需要对该字段的数据进行处理。可以通过替换方法replace()方法\n替换成浏览器可识别的换行标签进行处理。

summary.replace(/\n/g, '<br/>')
分类:Javascript 秋林 2023-11-26
0

yarn和npm命令对比

标签:arn命令npm
npm yarn 注释
npm init yarn init 初始化项目
npm install yarn 安装全部依赖
npm install react –save yarn add react 安装某个依赖,保存到 dependencies
npm uninstall react –save yarn remove react 移除某个依赖
npm install react –save-dev yarn add react –dev 安装某依赖,保存到 devDependencies
npm update [package] –save yarn upgrade [package] 更新生产环境某个依赖包
npm install axios –global yarn global add axios 全局安装某个依赖
npm install –save axios vue-axios yarn add axios vue-axios 同时下载多个依赖包
npm install [package]@[version] yarn add [package]@[version] 安装指定版本的包
npm rebuild yarn install –force 重新下载所有包
分类:nodeJs 东江哥 2023-11-22
0

CSS十六进制颜色值设置透明度

标签:

把颜色值转换床RGB模式

const colorHex2Rgb = (color: any) => {
  var reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
  var sColor = color.toLowerCase();

  if(sColor && reg.test(sColor)){
      if(sColor.length === 4){
          var sColorNew = "#";
          
          for(var i=1; i<4; i+=1){
              sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));    
          }
          
          sColor = sColorNew;
      }
      
      var sColorChange = [];
      
      for(var i=1; i<7; i+=2){
          sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));    
      }
      
      return "RGB(" + sColorChange.join(",") + ")";
  }else{
      return sColor;    
  }
};

将RGB模式转换成十六进制

const colorRgb2Hex = (color: any) => {
  var reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
  var that = color;
  
  if(/^(rgb|RGB)/.test(that)){
      var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g,"").split(",");
      var strHex = "#";
      
      for(var i=0; i<aColor.length; i++){
          var hex = Number(aColor[i]).toString(16);
      
          if(hex === "0"){
              hex += hex;    
          }
          
          strHex += hex;
      }
      
      if(strHex.length !== 7){
          strHex = that;    
      }
      
      return strHex.toUpperCase();
  }else if(reg.test(that)){
      var aNum = that.replace(/#/,"").split("");
      
      if(aNum.length === 6){
          return that;    
      }else if(aNum.length === 3){
          var numHex = "#";
      
          for(var i=0; i<aNum.length; i+=1){
              numHex += (aNum[i]+aNum[i]);
          }
          
          return numHex.toUpperCase();
      }
  }else{
      return that.toUpperCase();    
  }
};
分类:HTML5 现松 2023-09-04
0

通过CSS设置SVG图标颜色

标签:SS变量SVG

icon公共样式

.icon{
  display: inline-block;
  width: 16px;
  height: 16px;
  transition" all .3s ease
}

svg图标类样式

.icon-mood{
  background-color: #00000;
  -webkit-mask-image: url("./mood.svg")
}
分类:CSS3 东江哥 2023-09-04
0

Mysql数据库基本操作语句

查看指定数据库创建时的sql指令

mysql> show databases;
 -------------------- 
| Database           |
 -------------------- 
| information_schema |
| website            |
 -------------------- 

创建数据库

mysql> create database website;
Query OK, 1 row affected (0.04 sec)

创建数据库 如果不存在

mysql> create database if not exists website;
Query OK, 1 row affected (0.00 sec)

创建数据库 并设置编码

mysql> CREATE database if not exists website character set utf8;
Query OK, 0 rows affected, 1 warning (0.00 sec)

删除数据库

mysql> drop database if exists website;
Query OK, 0 rows affected (0.00 sec)

使用数据库

mysql> use website;
Database changed
分类:Mysql 胡学长 2023-07-13
0

CSS Flex弹性布局基本属性说明

display: 指定 HTML 元素的盒子类型

flex-direction: 指定弹性盒子中子元素的排列方式

flex-wrap: 设置当弹性盒子的子元素超出父容器时是否换行

flex-flow: flex-direction 和 flex-wrap 两个属性的简写

justify-content: 设置弹性盒子中元素在主轴(横轴)方向上的对齐方式

align-items: 设置弹性盒子中元素在侧轴(纵轴)方向上的对齐方式

align-content: 修改 flex-wrap 属性的行为,类似 align-items,但不是设置子元素对齐,而是设置行对齐

order: 设置弹性盒子中子元素的排列顺序

align-self: 在弹性盒子的子元素上使用,用来覆盖容器的 align-items 属性

flex: 设置弹性盒子中子元素如何分配空间

flex-grow: 设置弹性盒子的扩展比率

flex-shrink: 设置弹性盒子的收缩比率

flex-basis: 设置弹性盒子伸缩基准值

分类:CSS3 秋林 2023-07-13
0

CSS盒子模型边框样式属性设置

边框宽度

/*边框的宽度*/
border-width:3px;
/*上边框的宽度*/
border-top-width:3px;
/*右边框的宽度*/
border-right-width:3px; 
/*下边框的宽度*/
border-bottom-width:3px; 
/*左边框的宽度*/
border-left-width :3px;

边框颜色

/*边框的颜色*/
border-color: #eee;
/*上边框的颜色*/
border-top-color: #eee;
/*右边框的颜色*/
border-right-color: #eee;
/*下边框的颜色*/
border-bottom-color: #eee; 
/*左边框的颜色*/
border-left-color: #eee; 

边框样式

/*边框的样式*/
border-style: solid;
/*上边框的样式*/
border-top-style: solid;
/*右边框的样式*/
border-right-style: solid;
/*下边框的样式*/
border-bottom-style: solid;
/*左边框的样式*/
border-left-style: solid;
分类:CSS3 现松 2023-07-12
0

php strtotime获取时间段今天昨天本周本月

标签:strtotimephp
// 今天开始
strtotime('today');
// 今天结束
strtotime('today 23:59:59');
// 昨天开始
strtotime('yesterday');
// 昨天结束
strtotime('yesterday 23:59:59');
// 本周开始
strtotime('last Monday');
// 本周结束
strtotime('sunday 23:59:59');
// 本月开始
strtotime(date("Y-m-01"));
// 本月结束
strtotime(date("Y-m-t"));
分类:PHP 东江哥 2023-07-12
0

php当前时间不准有以下两种方法设置

PHP默认时区是UTC,在使用PHP获取系统时间,会发现时间不对,所以需要把时区设置为北京时区UTC。

方法一:修改php.ini文件

打开php.ini文件:

查找date.timezone,找到date.timezone =”UTC”,

将其改为date.timezone ="PRC",若date.timezone左边有分号,要将该分号去掉。

<?php 
  echo "当前时间:" . date("Y-m-d H:i:s") 
?>

方法二:使用date_default_timezone_set(”)方法;

<?php
  date_default_timezone_set('PRC'); 
  echo date("Y-m-d H:i:s");
?>
分类:PHP 东江哥 2023-07-07
0

js正则表达式,匹配括号中的内容(不包含括号)

标签:

match用来在一个字符串中查找匹配的子串,并返回一个包含匹配结果的数组。match()方法可以接收一个参数,这个参数可以是正则表达式对象或者一个字符串。

1、匹配括号中的内容,包含括号

var str = 'HTML(小括号)的全称为[中括号]超文本【中文中括号】标记语言,是一种{花括号}标记语言。'

var reg1 = /\((. ?)\)/g // () 小括号
var reg2 = /\[(. ?)\]/g // [] 中括号
var reg3 = /\【(. ?)\】/g // 【】中文大括号
var reg4 = /\{(. ?)\}/g // {} 花括号

str.match(reg1) // ['(小括号)']
str.match(reg2) // ['[中括号]']
str.match(reg3) // ['{花括号}']
str.match(reg4) // ['【中文中括号】']

2、匹配括号中的内容,不包含括号

var str = 'HTML(小括号)的全称为[中括号]超文本【中文中括号】标记语言,是一种{花括号}标记语言。'

var reg1 = /(?<=\()(. ?)(?=\))/g // () 小括号
var reg2 = /(?<=\[)(. ?)(?=\])/g // [] 中括号
var reg3 = /((?<=\【)(. ?)(?=\】))/g // 【】中文大括号
var reg4 = /(?<=\{)(. ?)(?=\})/g // {} 花括号,大括号

str.match(reg1) // ['小括号']
str.match(reg2) // ['中括号']
str.match(reg3) // ['中文中括号']
str.match(reg4) // ['花括号']
分类:Javascript 秋林 2023-07-06
0

mysql查询去除重复数据的两种式

1、使用distinct关键字

distinct可以去除select查询结果中的重复行。

select distinct username from user;

2、使用group by关键字

group by能够将select查询结果按照指定列分组,并对每组进行聚合运算。

select * from user group by username;
分类:Mysql 东江哥 2023-07-05
0

用户登录前端进行密码md5加密

用户在登录时,数据传输过程中如果密码使用的是明文,那么在报文被拦截之后是可以直接获取传输的数据,所以明文密码在传输时被拦截是十分危险,因此在传输密码前前端需要对密码进行加密。

前端使用MD5进行加密如下:

1、使用npm安装md5

npm install js-md5

2、引入md5

import md5 from 'js-md5'

3、使用md5进行加密,加密方式有以下三种

// 密码
let password="123456"
// 盐值
let solt = 'yanzhi'

// 普通的md5加密
md5(password)

// 双重md5加密
md5(md5(password))

// md5加盐solt加密算法
md5(solt password)
md5(password solt)
md5(solt password solt)
md5(md5(password) solt)
md5(solt md5(password))
分类:Javascript 胡学长 2023-07-05
0

利用ES6解构赋值删除对象部分属性

通过扩展运算符,在对象最后一个命名参数以...为前缀,则它将成为一个由剩余参数组成的对象,所以将要删除的属性结构出来,剩余的通过...带上新的参数名,则新的参数名就是新的对象

// 删除user对象下的qq和电话属性字段
let user = {
  name: 'shenghao',
  age: 13,
  sex: '男',
  province: '广东省',
  cidy: '广州市',
  address: '天河区',
  qq: '365121369',
  phone: '15000000000',
}

let { qq, phone, ...info } = user

通过对象解构后info值是:
{
    "name": "shenghao",
    "age": 13,
    "sex": "男",
    "province": "广东省",
    "cidy": "广州市",
    "address": "天河区"
}
分类:ES6 东江哥 2023-07-04
0

通过speechSynthesis方法实现HTML5语音合成

// 实例化对象
const speakMsg = new SpeechSynthesisUtterance()

// 设置在说话时将合成的文本内容。
speakMsg.text = speech;
// 设置话语的语言。 例如:“zh-cn”表示中文
speakMsg.lang = "zh-CN";
// 设置将在其中发言的音量。区间范围是0到1,默认是1
speakMsg.volume = 1;
// 设置说话的速度。默认值是1,范围是0.1到10,表示语速的倍数,例如2表示正常语速的两倍
speakMsg.rate = 1;
// 设置说话的音调(音高)。范围从0(最小)到2(最大)。默认值为1
speakMsg.pitch = 10;
//音高:0-1

// 方法调用
window.speechSynthesis.speak(speakMsg)
分类:Javascript Y.S.H 2023-07-03
0

JS 找出两个数组中的并集

方法一(利用解构赋值...和Set的唯一性)

先将两个数组合并再通过Set()去重

let arr1 = [1, 2, 3, 4, 5]
let arr2 = [4, 5, 6, 7, 8]

let result = [...new Set(arr1.concat(arr2))]
console.log(result) // [1, 2, 3, 4, 5, 6, 7, 8]

方法二(reduce)

先合并和排序,然后通过reduce参数进行对比,判断上一个和当前元素不相同时,就push到新的数组中。

let arr1 = [1, 2, 3, 4, 5]
let arr2 = [4, 5, 6, 7, 8]
let arr = [...arr1, ...arr2].sort()
let result = [arr[0]]

arr.reduce((pre, now) => {
  if (pre !== now) {
    result.push(now)
  }
  return now
})
console.log(result) // [1, 2, 3, 4, 5, 6, 7, 8]

方法三(转json对象)

将数组转成JSON对象,数组每个元素都作为对象的键和值,如果元素相同,则对象键和值会覆盖,达到去重效果,接着再使用Object.values提取对象的值返回一个新的数组。

let arr1 = [1, 2, 3, 4, 5]
let arr2 = [4, 5, 6, 7, 8]
let obj = {}

arr1.forEach((item) => {
  obj[item] = item
})
arr2.forEach((item) => {
  obj[item] = item
})
let result = Object.values(obj)
console.log(result) // [1, 2, 3, 4, 5, 6, 7, 8]
分类:Javascript 东江哥 2023-07-03
0

JS 找出两个数组中的交集

1、方法一(常规for循环)

两个数组进行for循环嵌套,然后判断元素是否相等,如果相等就push到新的数组中。

let arr1 = [1, 2, 3, 4, 5]
let arr2 = [4, 5, 6, 7, 8]
let intersection = []

for (let i = 0; i < arr1.length; i  ) {
  for (let j = 0; j < arr2.length; j  ) {
    if (arr1[i] === arr2[j]) {
      intersection.push(arr1[i])
    }
  }
}
console.log(intersection) // [4, 5]

方法二(使用ES6的filter函数和includes函数)

let arr1 = [1, 2, 3, 4, 5]
let arr2 = [4, 5, 6, 7, 8]
console.log(arr1.filter((item) => arr2.includes(item))) // [4, 5]

方法三(reduce)

先合并和排序,然后通过reduce参数进行对比,判断上一个和当前元素相同时push到新的数组中。

let arr1 = [1, 2, 3, 4, 5]
let arr2 = [4, 5, 6, 7, 8]
let arr = arr1.concat(arr2).sort()
let intersection = []

arr.reduce((pre, now) => {
  if (pre === now) {
    intersection.push(now)
  }
  return now
})
console.log(intersection) // [4, 5]
分类:Javascript 东江哥 2023-07-03
0

php如何将json数据和数组进行转换

1、php将json数据转成数组

json_decode()函数将json字符串$json解析为php数组"$decoded_json"。第二个参数"true"表示返回的结果为数组而不是对象。

<?php
  $json = '{"name": "shenghao", "age": 3, "city": "广州"}';
  // 第二个参数用于返回数组代替对象
  $decoded_json = json_decode($json, true); 

// 返回结果为数组:
Array( 'name' => 'shenghao', 'age' => 3, 'city' => '广州');
?>

2、php将数组转成json字符串

json_encode()用于对变量进行JSON编码,该函数如果执行成功返回 JSON 数据,否则返回 FALSE 。

<?php
  $arr = Array( 'name' => 'shenghao', 'age' => 3, 'city' => '广州');
  $encoded_json = json_encode($arr); 

// 返回结果为json:
{"name":"shenghao","age":3,"city":"广州"}
?>
分类:PHP 现松 2023-07-02
0

指令v-if和v-for的使用注意事项

1、提示:指令v-if和v-for不能用在同一个标签上,否则性能会消耗很大。

2、原因:如果写在同一标签,会先对所有数据进行以下操作,就是一边循环一边执行v-if,循环中多次对 DOM 元素进行添加或删除,这样会造成大量的性能消耗

3、优先级:v-for 优先级 高于v-if

  <div v-for="(item, index) in dataList" :key="index">
    <div v-if="item.status">
      {{item.name}}
    </div>
  </div>

4、解决办法

1.不要把v-for和v-if 写在同一个标签上,而是新建div引入v-for包裹v-if

2.使用v-show代替v-if

分类:Vue 秋林 2023-07-02
0

vue代码中v-show和v-if指令能否共同使用

标签:vue指令

v-show指令是操作css样式display属性,用来控制DOM元素显示和隐藏。

v-if指令是对页面上DOM节点的添加与删除

从效果上来看是一样,都是设置DOM元素的展示隐藏。但是它们的性质是不一样,一个是设置display属性值,一个是操作DOM元素添加和删除。它们之间可以同时使用是没有冲突。

<!-- v-if指令 -->
<div v-if="status"></div>

<!-- v-if指令 -->
<div v-show="show"></div>

<!-- v-if和v-show指令 -->
<div v-if="status" v-show="show"></div>
分类:Vue 秋林 2023-07-02
0

dom创建与dom操作

标签:domdom元素

创建:新的标签(元素节点) = document.createElement("标签名")

删除:父节点.removeChild(子节点);

插入:insertBefore(新插入的节点,参照物节点) 往某个节点的前面插入一个新的节点

追加:appendChild(新的节点的名) 当前对象追加一个子节点

分类:Javascript 胡学长 2023-07-01
0

原生JavaScript绑定事件的3种方法

1.行内绑定:在标签上写οnclick=“事件名”

<button onclick="handleClick">Click Me</button>

2.在script中绑定

document.getElementById("标签").onclick=function(){
    /*   函数体   */    
}

3.绑定事件监听函数

绑定事件的第三种方法是用addEventListener()或者attachEvent()来绑定事件监听函数

元素选择器.addEventListener(事件名(click,keydown...), 回调函数, true捕获/false冒泡);

移除事件监听

document.getElementById("选择的标签").removeEventListenner('click') 
分类:Javascript 胡学长 2023-07-01
0

JavaScript常用的日期时间方法大全

标签:日期时间

let date = new Date(); // 获取中国标准时间

date.getFullYear(); / /获取完整的年份(4位)

date.getMonth(); // 获取当前月份(0-11,0代表1月)

date.getDate(); // 获取当前日(1-31)

date.getDay(); // 获取当前星期(0-6,0代表星期天)

date.getTime(); // 获取当前时间的时间戳

date.getHours(); // 获取当前小时数(0-23)

date.getMinutes(); // 获取当前分钟数(0-59)

date.getSeconds(); // 获取当前秒数(0-59)

date.getMilliseconds(); //获取当前毫秒数(0-999)

date.toLocaleDateString(); // 获取当前日期

date.toLocaleTimeString(); // 获取当前时间

date.toLocaleString(); // 获取当前日期与时间

date.setFullYear(); // 设置年份信息 获取该年份当前月日时分秒的时间戳

date.setMonth(); // 设置月份信息 获取该月份当前年日时分秒的时间戳 (0-11,0代表1月)

date.setDate(); // 设置日信息 获取该日当前年月时分秒的时间戳

date.setHours(); // 设置小时信息 获取该小时当前年月日分秒的时间戳

date. setMinutes(); // 设置分信息 获取该分当前年月日时秒的时间戳

date.setSeconds(); // 设置秒信息 获取该秒当前年月日时分的时间戳

分类:Javascript 东江哥 2023-06-29
0

JavaScript复制文本到剪切板中

判断navigator.clipboard是否为undefined,因为navigator.clipboard对象只能在安全网络环境中才能使用,比如在localhost或者https中才能正常使用,直接用ip地址和http访问出现undefined,所以需要表单元素来实现。

HTML部分

<body>
    <button id="copy">复制</button>
    <div id="text">你好啊</div>
</body>

JavaScript部分

<script>
      var copy = document.getElementById('copy')
      copy.onclick = function copy(e) {
        var text = document.getElementById('text')
        if (navigator.clipboard && window.isSecureContext) {
          return navigator.clipboard.writeText(text.innerHTML)
        } else {
          let input = document.createElement('input')
          document.body.appendChild(input)
          input.value = text.innerHTML
          input.focus()
          input.select()
          if (document.execCommand('copy')) {
            document.execCommand('copy')
          }
          input.blur()
          document.body.removeChild(input)
        }
      }
    </script>
分类:Javascript 秋林 2023-06-29
0

网页图片不存在时的以下两种处理方法

图片不存在会触发onerror事件,我们通过触发该事件后进行以下方式处理。

1、把图片元素隐藏

<img src="图片地址" onerror="this.style.display='none'" />

2、替换成默认图片

<img src="图片地址" onerror="this.src='默认图片的地址'" />
分类:HTML5 秋林 2023-06-29
0

PHP获取某月的第一天和最后一天

先确定某一日期,再转换成时间戳,然后通过date函数根据时间戳来获取该月的第一天和最后一天

1、默认时间

$date = "2022-06-30";

2、开始时间

date("Y-m-01", strtotime($date));

3、结束时间

date("Y-m-t", strtotime($date));
分类:PHP 东江哥 2023-06-29
0

css样式表的三种方式

1、行内样式表

<div style="width: 100px; height: 100px">style属性的设置</div>

2、内部样式表

<div class="box">类标签设置</div>

3、外部样式表

<!-- CSS链接样式 -->
<link type="text/css" rel="styleSheet"  href="/css.css" />
<!--CSS导入式 -->
<link type="text/css" rel="styleSheet"  href="/css.css" />
<style type="text/css">
    @import url("/css.css");
</style>
分类:CSS3 东江哥 2023-06-26
0

前端常用正则校验规则

1、校验手机号码

// 正则
const regex = /^1[3456789]d{9}$/;

2、校验邮箱地址

// 正则
const regex = /^w ([- .]w )*@w ([-.]w )*.w ([-.]w )*$/;

3、校验身份证号码

// 身份证号码为15位或18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X
const regex =
  /^[1-9]d{5}(19|20)d{2}(0[1-9]|1[012])(0[1-9]|[12]d|3[01])d{3}[0-9Xx]$/;

4、校验密码强度

// 正则
const regex = /^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]{6,20})$/;

5、校验 URL 地址

// 正则
const regex = /^(http|https)://([w-] .) [w-] (:d )?(/S*)?$/;

6、校验 IP 地址

const regex =
  /^([01]?d{1,2}|2[0-4]d|25[0-5]).([01]?d{1,2}|2[0-4]d|25[0-5]).([01]?d{1,2}|2[0-4]d|25[0-5]).([01]?d{1,2}|2[0-4]d|25[0-5])$/;

7、校验中文名

// 正则
const regex = /^[u4e00-u9fa5]{2,4}$/;

8、校验首位不为零的数字

// 正则
const regex = /^[1-9]d*$/;

9、校验只允许字母和数字

// 正则
const regex = /^[A-Za-z0-9] $/;
分类:Javascript 东江哥 2023-06-26
0

CSS优先级算法

CSS优先级:是由四个级别和各级别的出现次数决定的。 四个级别分别为:行内选择符ID选择符类别选择符元素选择符

优先级的算法:

每个规则对应一个初始"四位数":0、0、0、0

若是 行内选择符,则加1、0、0、0

若是 ID选择符,则加0、1、0、0

若是 类选择符/属性选择符/伪类选择符,则分别加0、0、1、0

若是 元素选择符/伪元素选择符,则分别加0、0、0、1

...

分类:CSS3 东江哥 2023-06-26
0

不请求后端前端实现分页功能

1、声明页数和页码

let page=1 let size=10 let dataList []

2、通过数组slice方法截取

dataList.slict((page-1)*size, (page-1)*size size)

起始位置:(page-1)*size

终止位置: (page-1)*size size)

根据数组索引位置截取来实现翻页效果

当page=1截取的位置是0到9

当page=2截取的位置是10到19

当page=3截取的位置是20到29

分类:Vue 秋林 2023-06-26
0

使用Vue3开发的图片上传和裁剪作为用户头像背景功能

上传背景图片并拖拽调整图片,找到适合部分然后裁剪作为个人用户头像背景图。

    // 拖拽图片
    function onmousedown(ev: any) {
      ev.preventDefault()
      let oevent = ev || event
      let distanceX = oevent.clientX //鼠标点击位置
      let distanceY = oevent.clientY //鼠标点击位置
      //dX和dY是鼠标在pic内的相对位置
      //在移动后,设置图片的外边距,利用负外边距移动图片
      ...
分类:Vue 东江哥 2023-06-25
0

用nodejs实现httpserver服务

//导入模块是require 类似于import java.io
const http = require('http')

//创建httpserver服务
http
  .createServer(function (request, response) {
    //告诉浏览器将以text-plain去解析hello server
    response.writeHead(200, { 'Content-type': 'text/plain' })
    //输出内容给浏览器
    response.end('hello server!!!')
  })
  .listen(8888)
console.log('你启动的服务是:http://localhost:8888')
//监听端口8888
//启动运行服务器node httpserver.js
//浏览器访问http://localhost:8888
分类:nodeJs 东江哥 2023-06-25
0

XSS 是什么

概念: 是向网页中注入恶意脚本在用户浏览网页时在用户浏览器中执行恶意脚本的攻击方式。

跨脚本攻击有以下两种形式

1、反射型攻击: 通过引诱用户点击带有嵌入恶意脚本的链接而达到攻击目的。

原理: 攻击者要获取一个网站管理员 cookie,他会向 admin 用户发送一个链接地址,而再链接地址后面会加上参数值为 document.cookie,当 admin 用户在点击该链接时会将自己的 cookie 显示出来,返回给攻击者[攻击这会监听到该链接的端口从而获取管理员 cookie 信息]。攻击者拿到管理员 cookie 信息后会进行制造伪请求进行破坏操作。

...

分类:系统 现松 2023-06-25
0

怎么判断数组所有元素都相同

标签:

通过ES6 Set方法去重,再判断去重后的数组长度是否等于1

let arr = [23, 23, 23, 23, 23, 23, 23];
let item = [...new Set(arr)];
if(item.length === 1){
  console.log("true")
}else{
  console.log("false")
}
分类:Javascript 秋林 2023-06-25
0

vscode编辑器常用快捷键

1、快速创建HTML基础代码

输入!后按Tab键

2、快速复制一行

快捷键: shift alt 下箭头/上箭头 或者 ctrl c 然后 ctrl v

3、撤销还原快捷键

Ctrl Z: 撤销,Ctr Y:还原

4、单文件查询和多文件查询

快捷键:Ctrl F:单文件查询 Shift Ctr F:多文件查询

...

分类:系统 秋林 2023-06-25
0

pointer-events: none 是点击dom元素事件触发产生无效状态

pointer-events: none; 是看得到却摸不着,点击不到,点击会穿透触发到下层元素的css属性。

<div style="pointer-events: none;"></div>
分类:CSS3 东江哥 2023-06-25
0

简单介绍下 Set、Map的区别

标签:SetMap
应用场景Set用于数据重组,Map用于数据储存
Set: 
(1)成员不能重复
(2)只有键值没有键名,类似数组
(3)可以遍历,方法有add, delete,has
Map:
(1)本质上是健值对的集合,类似集合
(2)可以遍历,可以跟各种数据格式转换
分类:ES6 秋林 2023-06-24
0

关于forEach、for in、for of三者遍历数据的说明

forEach更多的用来遍历数组
for in 一般常用来遍历对象或json
for of数组对象都可以遍历,遍历对象需要通过和Object.keys()
for in循环出的是key,for of循环出的是value
分类:Javascript 东江哥 2023-06-24
0

JavaScript数组去重的两种方法

1、indexof 去重使用for遍历后使用indexof判断数组元素是否存在,如果不存在那么push到数组中

    var arr =[1,6,12,0,4,7,6,3];
    var arr1 = [];       
    // 新建一个数组来存放arr中的值
    for(var i=0,len=arr.length;i<len;i  ){
       if(arr1.indexOf(arr[i]) === -1){
          arr1.push(arr[i]);
       }
    }

2、ES6方法set()去重

let arr = [212, 3, 25, 3, 6, 7, 25];
let item = [...new Set(arr)];
分类:Javascript 东江哥 2023-06-24
0

简要说明var、let、const之间的区别

标签:
var声明变量可以重复声明,而let不可以重复声明
var是不受限于块级的,而let是受限于块级
var会与window相映射(会挂一个属性),而let不与window相映射
var可以在声明的上面访问变量,而let有暂存死区,在声明的上面访问变量会报错
const声明之后必须赋值,否则会报错
const定义不可变的量,改变了就会报错
constlet一样不会与window相映射、支持块级作用域、在声明的上面访问变量会报错
分类:Javascript 秋林 2023-06-24
0

基本的Linux命令学习

1、cd:改变目录

2、cd ..:回退到上一个目录,直接cd进入默认目录

3、pwd:显示当前所在的目录路径

4、ls(ll):都是列出当前目录中的所有文件,只不过ll列出内容更为详细

5、touch:新建一个文件如touch index.js就会在当前目录下先建一个index.js文件

分类:系统 秋林 2023-06-24
0

PHP提交json数据出现带斜杠转义字符处理

处理方法有

1、改环境配置:在php.ini配置文件中将magic_quotes_gpc值改成Off。

2、在代码中判断get_magic_quotes_gpc()值是否为On,如果是则对传过来的字段使用stripslashes()进行处理。

分类:PHP 东江哥 2023-06-23
0

Vue3父组件与子组件双向数据传值展示和修改

标签:Vue3组件

子组件中通过computed计算属性监测到值变化后,向父组件发送消息并更改父组件值

const value: any = computed({
      get: () => props.content,
      set: (val) => context.emit('update:content', val)
});
分类:Vue 东江哥 2023-06-23
0

使用JS实现文件下载代码

标签:
      // create URL and Link
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = filename;
      document.body.appendChild(a);

      // Invoke download
      a.click();

      // remove URL and Link
      window.URL.revokeObjectURL(url);
      a.remove();
分类:Javascript 东江哥 2023-06-22
0

git通过命令完成代码提交的几个步骤

标签:itgit命令
1、将所有文件提交到暂存区
git add .

2、将文件提交到本地仓库
git commit -m "firt commit"

3、从远程仓库更新最新代码
git pull

4、将本地仓库推送到远程仓库
git push
分类:浏览器 东江哥 2023-06-22
0

Navicat 清空数据表后id自增依旧在原基础上进行的问题

在Navicat里需要手动操作把自增值改

1、点击数据表右键选择设计表

2、在设计表中找到选项这一项,将自动递增改成1然后点击保存。

分类:Mysql 东江哥 2023-06-22
0

好记忆不如烂笔头,加油!少年!

努力工作,认真学习,做好笔记,积累经验,分享成果。

分类:其他 东江哥 2023-06-21