前端-小明-CSDN博客

原创拼接两个数组的方法总结

一普通方式var arr=[2,3,5,7];var arr1=[1,2,3,4]arr=arr.concat(arr1);console.log(arr);//(8) [2, 3, 5, 7, 1, 2, 3, 4]二利用原型var arr=[2,3,5,7];var arr1=[1,2,3,4]arr=[].concat.apply(arr,arr1);console.log(arr);三利用pushpush 返回的是新数组的长度var arr=[2,3,5,7];v

2021-02-25 09:25:21 5181

原创将伪数组转换成真正的数组方法总结

伪数组：无法调用数组的方法，但是有length属性，又可以索引获取内部项的数据结构。比如：arguments、getElementsByTagName等一系列dom获取的NodeList对象转换一let arr = [].slice.call(pagis)二let arr = Array.prototype.slice.call(pagis);三var arr1 = [], len1 = pagis.length; for (var i = 0; i < len1; i+

2021-02-15 09:23:44 628

原创 js中类型判断总结

1.typeof操作符返回一个字符串，表示未经计算的操作数的类型，用于除null、对象和数组，正则之外的通用类型的判断方法Object.prototype.toString原生原型扩展函数，用来精确的区分数据类型，万能instanceof该运算符用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置，用于检测引用类型的判断方法，针对Array和RegExp DOM元素进行判断。constructor注不能用于undefined 与 null 因为它们没有构造函数也可

2021-02-09 14:29:31 275

原创 Ajax传输数据加密

^常用于数据加密常常使用日期与数据进行异或 c= a ^ b 可以推出 a = b ^ c. （常用于加密）异或的运算方法是一个二进制运算：两者相等为0,不等为1.使用进制形式防止服务器不是utf8无法解析中文前端代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="

2021-01-11 20:36:41 2120

原创 Ajax中send可发送的数据类型

1.ArrayBuffer类型1.1 ArrayBuffer类型放在栈中而普通数组在堆中ArrayBuffer 前端的一个通用的二进制缓冲区，类似数组1.2 发送arrayBuffer数据类型/在后台获取2.二进制大数据如图片

2021-01-11 08:50:06 600

原创 PHP封装MySQL的单例

封装单例实现数据库连接增删改查操作<?php//封装MySQL单例class MySQLDB { private $host; //主机地址 private $port; //端口号 private $user; //用户名 private $pwd; //密码 private $dbname; //数据接名 private $charset; //字符集 private $link; //连接对象 private static $instance; private

2021-01-03 17:42:21 137

原创 ES5 原始方法判断数据类型

通过对象结构的方式结构出toString方法任何对象都有toString方法下面展示一些内联代码片。 //结构出toString方法 var {toString}={}; console.log(toString.call(5)==="[object Number]"); console.log(toString.call({})==="[object Object]"); console.log(toString.call([])==="[obje

2020-12-17 21:43:30 322 2

原创 js碎片容器的理解和使用

## 1.我们要明白当js操作dom时发生了什么？每次对dom的操作都会触发"重排"（重新渲染界面，发生重绘或回流），这严重影响到能耗，一般通常采取的做法是尽可能的减少 dom操作来减少"重排"2、什么是文档碎片？document.createDocumentFragment() 一个容器，用于暂时存放创建的dom元素3、文档碎片有什么用？将需要添加的大量元素先添加到文档碎片中，再将文档碎片添加到需要插入的位置，大大减少dom操作，提高性能（IE和火狐比较明显）如下代码每次循环都要操

2020-12-12 17:22:14 363

原创 js中耦合与解耦问题总结

一.概念一、耦合1、耦合是指两个或两个以上的体系或两种运动形式间通过相互作用而彼此影响以至联合起来的现象。2、在软件工程中，对象之间的耦合度就是对象之间的依赖性。对象之间的耦合越高，维护成本越高，因此对象的设计应使类和构件之间的耦合最小。二、解耦1、解耦，就是解除耦合关系。2、在软件工程中，降低耦合度即可以理解为解耦，模块间有依赖关系必然存在耦合，理论上的绝对零耦合是做不到的，但可以通过一些现有的方法将耦合度降至最低。4、观察者模式：观察者模式存在的意义就是「解耦」，它使观察者和被观察者的逻辑

2020-12-12 10:26:41 3080

原创常用数组去重方法总结

1.双重for循环与splice数组的引用不会变化 var arr=[2,3,1,2,3,5,2,4,1,2,3,5,2,1,5,7,8]; // 数组的引用不发生改变 for(var i=0;i<arr.length;i++){ for(var j=i+1;j<arr.length;j++){ // if(arr[i]===arr[j]) arr.splice(j,1);//删除元素后长度变化

2020-12-08 20:56:42 112

原创实现自适应三栏布局方法总结

1.改变页面结构将两边盒子左右浮动中间盒子给margin左右值2.不改变页面结构三个盒子都添加浮动中间的盒子用calc指定宽度3.不改变页面结构左边盒子添加浮动右面盒子添加定位中间盒子添加左右margin值4.改变页面结构给左右盒子添加浮动中间盒子用BFC一级标题...

2020-11-26 22:03:25 358

原创实现块级元素水平垂直居中的方法总结

1.通过给子元素添加margin注意:此方法只能用于子元素为块级元素或者行内块元素······不能用于子元素为行内元素的情况因为行内元素设置垂直方向的auto没有效果通过给父级元素设置padding注意:此方法只能用于子元素为块级元素或者行内块元素······不能用于子元素为行内元素的情况因为行内元素无固定宽高3.text-align: center;于vertical-align: middle;配合使用给父元素添加text-align: center可以让其内的行内元素行内块元素

2020-11-23 20:50:52 786 1

原创 word-spacing不起作用的问题

如图所示当给元素添加word-spacing: -5px;时并没有起作用但是使用letter-spacing可以查阅资料得知word-spacing==>单个字/字母间隔，letter-spacing==>字母/汉子间隔如图所示当给词之间添加空格使用 word-spacing可以减少空格左右两个词之间的距离而原来之间没有间隙的汉字(词)无法实现层叠效果...

2020-11-21 08:55:13 1965

原创 margin: auto 在行内块元素以及行内元素中失效的问题

今天在写页面的时候一个大黑盒子包裹一个图片当给子元素设置 margin auto 时不起任何作用源码为效果图为当把 margin: auto;换成 margin: 10px auto; 页面会起变化但是水平方向无变化源码为：效果图为:查阅属性的值 maigin的auto 无法作用于行内元素和行内块元素但是如果是数值可以起作用当让块级元素内的行内元素或行内块元素水平居中推荐给块级元素添加 text-align: center; 很方便因为也可以让图片下面

2020-11-20 21:55:09 1517

原创 background-size失效的问题及其基本用法

background-size的用法总结CSS3 background-size 属性指定背景图像的大小：有四种值的写法当背景图片出现太大或者太小的问题是可以使用cover属性自动铺满cover于contain的区别是 contain 当x 轴或者y轴自动适应以后另一个轴将不再拉伸background-size与background-repeat background-position的区别background-repeat 是当图像没有完全铺满时背景图片是否x y轴重复不会拉伸图像

2020-11-19 08:12:41 7697 2

原创 inline-block元素间默认空白间隙问题

有时候为了布局需要，我们需要把一些块状元素的display属性设置为inline-block，让它们在一行排列，如下代码：<style> .parent{ width: 200px; height: 60px; border: 1px solid pink; } .parent div{ display: inline-block; box-sizing: border-box; width: 30

2020-09-10 13:00:11 270

原创 ElementUI中Cascader 级联选择器高度占满浏览器的问题

今天在做项目练习时发现当数据较多时 Cascader 级联选择器显示不全且与浏览器等高查阅文档所知在全局样式文件global.css中添加高度配置即可解决：下面展示一些内联代码片。 .el-cascader-panel{ height: 200px; }...

2020-09-03 16:21:56 605 2

原创如何让块级元素与浏览器窗口等高

#如果想让该div撑满整个浏览器窗口如何让div撑满整个浏览器窗口如果直接这样设置达不到预期的结果div { width: 100%; height: 100%; background-color: pink; }效果如下原因为:浏览器计算宽度时只会参考浏览器窗口的宽度，默认将块级内容平铺填满整个横向宽度如果想让一个元素的百分比高度height: 100%;起作用，你需要给这个元素的所有父元素的高度设定一个有效值。例如:在body

2020-08-29 13:50:05 218

原创当项目名称与webpack重名时会导致webpack安装失败

在使用 npm install webpack webpack-cli -D 命令安装webpack 发现安装失败并报错通过查询知是因为package.json中 name属性的项目名称与webpack重名所致 "name": "webpack",当修改项目名称后安装成功 "name": "WebPack",...

2020-08-22 10:10:33 150

原创模板内部外链资源的路径问题

模板文件中的外链如果写相对路径相对的是浏览器地址栏中的请求路径浏览器会认为请求路径的最后一部分是路径下面的文件即 login是文件 /admin是请求路径所以模板文件中的相对路径是相对于/admin的请求路径访问模板文件 css样式可以显示外链文件的请求路径客户端的请求路径和服务器端存放css文件夹的路径正好相同所以能访问下面展示一些内联代码片。//为路由匹配请求路径app.use('/admin',admin);当我们把admin改成abc时当我们使用此请求路径访问模板

2020-07-30 16:17:38 298

原创移动端click事件默认300ms延时解决方案

问题描述移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。3种解决方案 1. 禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟。 <meta name="viewport" content="user-scalable=no"> 2.利用touch事件自己封装这个事件解决300ms 延迟。原理当我们手指触摸屏幕，记录当前触摸时间当我们手指离开屏幕，用离开的时间减去触摸的时间

2020-07-23 07:59:32 520

原创类中共有的属性和方法this指向问题总结

1.constructor中的this指向的是new出来的实例对象创建一个公共类 Star 将constructor内的this 赋值给全局变量that 利用全等号判断that与 ldh 实例是否相等下面展示一些内联代码片。 <script> var that; class Star { constructor(uname, age) { that = this;

2020-07-17 08:29:40 315

weixin_44226088的博客