- 博客(70)
- 收藏
- 关注
RSS订阅
原创 JS 继承的正确操作
首先，我们先要明白，JS里的继承，是对原型的继承，而不是改变构造函数的原型。那这句话到底是什么意思呢？让我们通过一个例子解释一下。 function User() {} function Admin() {} User.prototype.name = function () { console.log("user name") }; Admin.prototype = User.prototype; let admin = new
2020-10-26 18:23:44
138
原创 JS 函数的原型关系
首先，我们创建了一个User函数，和User的实例化对象。function User() {}let hd = new User(); console.dir(User);console.log(hd);然后我们分别打印User和hd，分别看看他们两之间的原型关系。首先我们先来看看User这个函数，我们可以看到有prototype和__proto__两个属性，证明了User这个函数在不同的情况扮演着不同的作用。这就好比我们在生活中，在公司的时候我们是员工，回到家我们是父母的孩子。
2020-10-25 19:36:01
446
原创 浅谈JS引用类型（深浅拷贝的区别）
什么是深拷贝？什么是浅拷贝呢？首先我们先来看一个例子： let a = {title: '深拷贝'}; let b = a; a.title = '浅拷贝';我们声明了一个名为a的对象，并把a赋值给b，然后再修改对象a里面的title属性，然后我们分别打印对象a和b的值，让我们来看看输出结果分别是什么从输出结果中我们可以看到，我们虽然只修改了对象a的属性值，但是对象b的属性值也跟着一起被修改了，这是为什么呢？因为如果我们仅仅是把对象a在内存中的储存地址直接共享给了对象b，a和b是共
2020-10-20 19:47:30
349
3
原创 JS如何判断数据类型
1.typeof的返回值一共有六种，分别为"string"，"number"，"boolean"，“object”，"function"，以及"undefined"。如果我们想用 typeof 来判断array,object,还有null类型的话返回的结果都为“object”类型，没办法判断该变量是数组、对象还是空类型。若需要判断array，object，null的话则可以用typeof封装一下let getType = function (val) { if (val === .
2020-10-19 19:14:15
490
1
转载 前端瀑布流
HTML:<div class="box"><img src="img/dog.jpg"></div><div class="box"><img src="img/dog4.jpg"></div><div class="box"><img src="img/dog.jpg"></div><div class="box"><img src="img/dog3.jpeg"&.
2021-07-14 19:22:41
261
原创 谷歌浏览器快速查看对象属性值
当我们打印了一个对象，想查看对象的所有属性值的时候，我们会发现对象下所有的属性值都是隐藏起来的，想要看只能一个个点开，非常的麻烦。因此我们可以通过JSON的转换就能自动打开对象下的所有属性值啦。 console.log(JSON.parse(JSON.stringify(obj)))...
2021-05-10 14:50:55
1505
原创 微信小程序访问组件里面的方法
this.selectComponent('#gTabs').resetStyle()gTabs为组件设置的id名resetStyle为组件里面的方法名
2021-04-09 19:50:21
150
原创 微信小程序 文字无法换行问题
因为我用是弹性布局，给盒子设置的flex-wrap：wrap，我自以为文字就能换行了，但文字却没有换行，要想文字换行就加上这三行代码即可。 word-wrap: break-word; word-break: break-all; white-space: pre-line;...
2021-04-07 10:02:20
1081
1
原创 微信小程序 页面传参（url）参数过长报错解决办法
在开发中，如果希望将一个对象从一个页面传到另一个页面时，大家可能都会知道用JSON.stringify（）的方式，把对象转成JSON字符串再传值，但是当我们的这个对象字符串数值过长的时候就会出现报错，这时我们只需在JSON外面再包一个加密，就能解决报错了。页面（传参）：跳转到的页面（接收）：...
2021-03-26 15:19:28
4155
1
转载 浏览器的回流与重绘 (Reflow & Repaint)
写在前面在讨论回流与重绘之前，我们要知道：浏览器使用流式布局模型 (Flow Based Layout)。 浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了Render Tree。 有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。 由于浏览器使用流式布局，对Render Tree的计算通常只需要遍历一次就可以完成，但table及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时
2021-02-21 14:19:32
180
转载 JS 判断一个字符串中每个字母出现的次数
//输出一个字符串中每个字母出现的次数var str3 = "wfwgerhytyVDMUYRFACDScwvevVEAvea";//输出的字符串str3=str3.toLocaleLowerCase();//将字符串转换为小写var obj={};//创建一个空对象for(var i=0;i<str3.length;i++){//遍历字符串 if(obj[str3[i]]){//判断该字符在对象中是否存在，若存在未true obj[str3[i]]++;//若存在则+1 }else.
2021-01-23 20:58:51
679
原创 vue $router.push当前页面
说到用$router.push当前页面，可能很多朋友就会觉得，自己push自己有什么意义呢，可是在项目中，我们确实会遇到这种情况，以我在项目中遇到的情况为例：在某个歌手的详情页里面有相似艺人功能，在页面里点击相似艺人可以跳转到新的页面，并发送新的网络请求，而这个页面跟上一个页面是一样的，只是请求的参数不同。这种情况就可以使用$router.push到当前页面，但仅仅push到当前页面是没效果的，因此我们还需要用到监听器(watch)。实现代码：methods:{ pushA
2020-12-03 23:37:25
2013
原创 Ajax跨域请求时携带cookie
在使用Ajax技术发送跨域请求时，默认情况下是不会在请求中携带cookie信息的。如果需要在跨域请求中携带cookie，则需要对客户端和服务器都进行设置。客户端代码：xhr.withCredentials：true //xhr为Ajax的实例化对象服务器端代码:res.header('Access-Control-Allow-Credentials',true)...
2020-11-27 09:55:13
423
原创 同源政策及解决方案
封装JSONP函数(解决同源限制)： function jsonp(options) { // 动态创建script标签 let script = document.createElement('script'); let params = ''; for (let attr in options.data) { params += '&' + attr + '=' + options.dat...
2020-11-26 14:01:29
159
1
原创 FormData
FormData对象的作用:1.模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。2.异步上传二进制文件FormData对象的使用：FormData对象的实例方法：FormData 二进制文件上传:...
2020-11-25 20:18:42
171
原创 Ajax 函数封装与调用
function ajax(options) { //储存的是默认值 let defaults = { type: 'get', url: '', data: {}, header: { 'Content-Type': 'application/x-www-form-urlencoded' }, su.
2020-11-24 14:14:11
252
1
原创 Ajax 低版本IE浏览器缓存问题
为了解决低版本IE浏览器缓存问题，我们需要在请求地址上添加请求参数，通过改变这个参数的值保证每一次的请求地址与上一次的请求地址不同，就能避免从缓存中获取的问题出现。tips：这里的参数名称不能与请求地址要求的参数名称相同...
2020-11-24 12:37:57
132
原创 Ajax 状态码
在ajax的实例化对象中有个readyState属性，存储的就是Ajax状态码，但是这个状态码是不断变化的，因此如果我们直接在send方法后面打印readyState的话是看不到任何变化的，因此Ajax对象为我们提供了一个onreadystatechange事件。前端部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Titl..
2020-11-24 11:44:03
376
原创 Ajax 传递请求参数
前端部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>模拟提交表单请求</title></head><body><input type="text" id="username"/><input type="password" id="password"/><.
2020-11-23 15:39:30
720
原创 PHP连接数据库
PHP连接数据库八个步骤：//1. 链接数据库$link = mysqli_connect('localhost','root','123456');//2. 判断是否链接成功if(!$link){ exit('数据库连接失败')}//3.设置字符集mysqli_set_charset($link,'utf8');//4.选择数据库mysqli_select_db($link,'bbs');//5.准备sql语句 select update insert delet
2020-11-22 22:06:16
117
原创 mysql 命令
创建库：create database 库名;查看库:show databases(注意查看库的时候后面有s，创建和删除没有s)删除库：drop database 库名使用库：use 库名；创建表：create table 表名(字段名 数据类型<长度>)；查看表结构：desc 表名；修改表字段：alter table 表名change 原字段名 现字段名 现字段类型<长度>；删除表字段：alter table 表名 drop 字段名；添加表字段：a.
2020-11-20 12:30:53
109
原创 bootstrap 基本使用
列嵌套：列偏移：<div class="container"> <div class="row"> <!-- 使用列偏移实现两个盒子左右居中对齐--> <div class="col-md-3">左侧</div> <div class="col-md-3 col-md-offset-6">右侧</div> </div&g...
2020-11-17 12:16:24
191
原创 Vue v-for翻转数组
方法一：<template> <div> <div v-for="item in Array.prototype.reverse.call(items)"> <li>{{item}}</li> </div> </div></template><script> export default { n
2020-11-16 23:35:57
2393
原创 rem 适配方案
首先我们要明白，为什么要用rem单位呢，常用的px不好吗？原因是如果我们用px作为长度大小单位的话，就无法根据屏幕大小变化实时改变页面元素的大小，反之，rem就可以做到实时适配。其次，我们也要清楚以rem为单位的元素大小是根据css html根标签下的文字大小(fontsize)来改变的。在实际开发中，我们常见的设计稿尺寸有以下几个：实现不同屏幕大小等比例适配的方法：第一步、我们先用媒体查询做出判断，当屏幕大小为多少尺寸的时候，作出不同的适配第二步、我们需要把设计稿上的宽度平
2020-11-15 12:58:20
2986
原创 css3 flex布局
设置子元素是否换行：设置主轴上的子元素排列方式：设置侧轴上的子元素排列方式（单行）（无换行用这个）：设置侧轴上的子元素排列方式（多行）（有换行用这个）：...
2020-11-13 12:04:42
144
原创 CSS 多倍图（移动端图片适配）
首先我们得先知道我们css中的像素（px）跟物理像素的区别。在PC端和早期的移动端屏幕时，我们1 css像素就=1物理像素。但是随着手机屏幕的分辨率不断的提高，相当于同样大小的屏幕里面拥有了更多的物理像素点。因此出现的物理像素比。例如我们最常用的iphone6,7,8来说，他们屏幕1 css像素就 =2个物理像素，不仅如此，随着屏幕分辨率的提高，物理像素比也跟着提高。因此，如果我们需要在移动端上显示一张50 css像素的图片，则需要准备一张100物理像素或者更高的图片，再手动的设置为..
2020-11-12 20:01:19
1017
原创 CSS 动画
小案例：简单的图片环绕效果<div class="father"> <img src="img.jpg"></div> @keyframes move { /*定义关键帧*/ 0% { transform: translate(0px); } 25% { transform: translate(500px, 0px); ...
2020-11-11 18:57:03
131
原创 CSS 2D转换
小案例：当我们把鼠标移到div上时，字体旋转出现。<div class="father"> <div class="son">Joker牛逼</div></div>.father { width: 100px; height: 100px; background-color: cadetblue; overflow: hidden; } .fath...
2020-11-11 15:31:37
133
原创 JS 宏任务和微任务
首先，我们需要明白一个概念，JS是单线程的，相当于在干活的时候只有一个人在干活。在JS内部，执行顺序可以分为主线程和任务队列两个。执行的时候先会执行主线程中的任务，然后再从任务队列中抓任务到主线程中执行。有些事情JS内部就会自动把它放到任务队列里面，比如定时器，DOM的渲染以及各种各样的点击事件等等。 setTimeout(() => { console.log("定时器") }); console.log("Joker")在执行的时候，定时器会被放
2020-11-02 18:17:03
459
原创 JS ++i和i++的区别
首先我们先来看两段简单的代码。 let a = 1; let b = ++a; console.log(a); //2 console.log(b); //2 let a = 1; let b = a++; console.log(a); //2 console.log(b); //1从上面两个例子来看，如果是对于自增变量来说，两者之间是没有区别的。但是如果对于被赋值的变量来说，二者就产生差别，一个是成功赋值，一个则是赋值到
2020-11-02 13:28:40
405
1
转载 JS 常用的正则表达式
/** * js正则表达式库--Regs.js * by denghao.me @邓浩 * @date 2017-02-11 18:09:35 * @用法: RegsLib.en.test('abc') -> true */var RegsLib = { /* * 数字相关 */ //正数（可含小数、0） posiNum: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/, //正整数 po.
2020-10-31 19:23:49
832
原创 JS 判断原型关系
1.判断b的原型链中是否存在a对象 let a = { show() { console.log('a') } }; let b = { __proto__: a }; console.dir(a.isPrototypeOf(b)); //判断b对象的原型链上是否有a对象 返回true class User {} class Admin extends User {}
2020-10-27 19:28:13
361
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人