- 博客(223)
- 收藏
- 关注
RSS订阅原创 【promise + yield + async + await】异步转同步
【promise + yield + async + await】异步转同步。
2022-08-12 21:50:51
469
原创 opacity设置透明度 影响内部文字颜色
<style> div{ width: 200px; height: 200px; font-size: 30px; } .div1{ background-color: red; opacity: 0.5; color: green; } .div2{
2022-05-30 09:36:59
1235
原创 节流的使用【throttle】，和防抖的对比
throttle【节流】间隔时间执行；通过判断是否到达一定的时间来触发函数，若没有到达规定的时间则使用定时器延后，而下一次事件则重新设计定时器
2021-12-13 15:41:09
531
原创 vue中防抖的使用
防抖函数function debounce(fn, immediate = true) { let timer; return function () { if (timer) clearTimeout(timer); if (immediate) { let bool = !timer; timer = setTimeout(() => (timer = 0), 300); return bool && fn.apply(
2021-12-11 19:19:00
917
原创 移动端vw适配（百分比）
vw和vh是相对单位1vw==布局视口宽度的1%1vh==布局视口高度的1%有严重的兼容性问题可以去caniuse.com去查阅
2021-12-06 19:33:07
98
原创 正则表达式知识
正则表达式 RegExp:regular expressvar reg = /表达式/修饰符1、 var a = ‘abcdasdfasfasfSBSBSBSBBS’a.search(/c/);返回值：c处在字符串中的下标2、a.replace(/f/gi)全局替换a字符串的f字符且忽略大小写；3、a.replace(/[abcdef]/gi,‘0’)全局替换a字符串的a-f字符为0且忽略大小写；4、最高强度密码【数字、字母、大小写 8-16位】var refPwd = /^[a-zA-
2021-12-06 14:02:30
108
转载 移动端适配知识（react--张天禹）
移动端开发一、相关概念（一）屏幕相关1. 屏幕大小指屏幕对角线长度，单位是英寸（inch）。常见尺寸有：3.5寸、4.0寸、5.0寸、5.5寸、6.0寸等等。备注：1英寸（inch）= 2.54 厘米（cm）2. 屏幕分辨率是指屏幕在：横向、纵向上的物理像素点总数，一般用 n * m 表示。例如：iPhone6 的屏幕分辨率为： 750 * 1334注意：屏幕分辨率是一个固定值，无法修改！！屏幕分辨率、显示分辨率是两个概念，系统设置中可以修改的是：显示分辨率。屏幕分辨率 >
2021-12-05 10:25:06
1248
2
原创 window.postMessage的使用
window.postMessageotherWindow.postMessage(message,targetOrigin,[transfer]);otherWindow:其他窗口的一个引用，例如iframe的contentWindow属性等等窗口对象才能使用；targetOrigin:指定哪些窗口能接收消息事件；window.parent.postMessage(“getOrgInfo”,’*’)发送事件window.addEventListener(‘message’,[FUNCTIO
2021-12-01 17:02:29
1119
原创 vue 父子组件生命周期执行顺序
加载页面父组件：beforeCreate => created => beforeMount子组件: beforeCreate => created => beforeMount => Mounted父组件：Mounted销毁组件父组件：beforeDestroy子组件： beforeDestroy子组件：destroyed父组件：destroyed...
2021-11-30 14:23:31
647
原创 js中this指向
this指向在函数定义的时候无法确定，谁调用this就只指向谁this最终只会指向那个直接调用他的对象构造函数中，this一般指向new出来的实例对象，但是构造函数若返回一个对象，则this指向这个返回的对象...
2021-11-09 19:26:53
205
原创 white-space 处理样式中的空白部分
white-spacenormal【MDN】连续的空白符会被合并，换行符会被当成空白符进行处理。但是在盒子中进行换行是必要的，也就是文字超过一行会自动进行换行，主动的换行不生效,会进行填充换行nowrap【MDN】连续的空白符会被合并,文本内换行无效（不会进行填充换行）；pre【MDN】连续的空白符会被保留,文本内换行无效（不会进行填充换行）,需要换行符或br才会换行,pre-wrap【MDN】连续的空白符会被保留,会进行填充换行,需要换行符或br才会换行,pre-line【M
2021-11-05 10:44:21
458
原创 new 运算符 操作符 的过程
1.创建一个空对象,并且this指向这个新对象同时继承该构造函数的原型2.属性和方法被加到this引用的对象中function Animal(name) { this.name = name;}Animal.prototype.run = function() { console.log(this.name + 'can run...');}var cat = new Animal('cat');创建一个空对象let obj = {}该对象的原型指向构造函数的原型对象
2021-09-29 16:53:02
79
原创 mvc mvp mvvm 前端面试题
mvc（model view controller）model，model 为数据模型层；负责数据处理view，为视图层，负责显示页面controller,为控制器，负责调度使用哪个model，哪个view，逻辑处理model层不依赖于view层，而view层依赖于model层#mermaid-svg-EiNFWDUaz4rVHdAQ .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font
2021-09-27 10:51:00
229
原创 元素的显示和隐藏
v-if 和 v-showv-if 会伴随着元素的生产和移除是真正的条件渲染，它会确保在切换的过程中条件块内的事件监听器和子组件适当的被销毁和创建，如果初始条件为假，则什么也不做，直到第一次条件变为真的时候，才会真正开始渲染条件块；所以有更高的切换开销；v-if支持templatev-show 有更高的初始切换开销；所以频繁切换则使用v-show比较好v-show只是简单的切换元素的css属性display在渲染的过程中，可以使用key来管理可以复用的元素v-if v-show 动态组件
2021-09-26 16:30:16
47
原创 2021-09-24 git相关
git branch -a查看本地和远程分别有哪些分支git branch dev创建一个名称为dev的分支git checkout dev切换到本地的dev分支git push origin dev将本地dev分支push到gitlab上git pull origin dev将gitlab上的代码拉到本地git merge dev在dev以外的分支上执行，合并代码git branch -r查看远程分支git 合并冲突将本地dev分支push到gitlab上，pu
2021-09-26 10:44:16
40
原创 从浏览器控制台复制数据
store as global variable;存储为全局变量； temp1copy(temp1）拷贝的是全局变量这些操作都是在浏览器控制台中进行
2021-09-26 10:38:22
1076
原创 文字超出内容的css解决方式
.pclass2Span { height: 100%; width: 100%; display: inline-block; overflow: hidden; /* 表示文本不会换行 在同一行继续 遇到标签为止 */ white-space: nowrap; /* 超出文本对象溢出显示... */ text-overflow: ellipsis;}<p class="pclass1"> <!-- title 超出的部分
2021-09-23 11:14:22
244
原创 自定义promsie，未完成
/* 自定义promise函数 IIFE立即执行函数*/(function (window) { // Promise的构造函数 /* executor 执行器函数 （同步执行） */ function Promise(executor) { // 将当前promise对象保存起来 const self = this; self.status = "pending"; //给promise对象指定status属性，初始值为pe
2021-08-21 10:29:49
46
原创 let,var,const 的区别
1、js在es6后添加了块级作用域，let在{}声明内有效，在{}外无效；2、var可以先调用再声明，let只能先声明再调用index.html:11 Uncaught ReferenceError: Cannot access 'num' before initialization3、let不可以重复声明，var可以重复声明Uncaught SyntaxError: Identifier 'num' has already been declared4、let声明变量可以不用初始化，cons
2021-08-21 10:09:52
52
原创 sass的再学习
scss是sass的超集,升级版本；支持嵌套语法，不要使用空格语法；/* 定义变量与值 */$bgcolor: lightblue;$textcolor: rgb(223, 223, 252);$fontsize: 18px;/* 使用变量 */div { width: 100px; // height: 100px; background-color: $bgcolor; >.div1{ width: 50px; height: 50px; .
2021-08-02 15:16:58
42
原创 递归处理数据，进行数据扁平化
/* 实现数据的平铺 flatten*/ const options = [ { value: "330000", label: "浙江省", children: [ { value: "330100", label: "杭州市", children: [ { value: "3.
2021-08-01 17:08:51
566
原创 js 递归的初体验
/* 递归 recursion 自己执行自己 */ var a = 1; function fn(){ a++ if(a>50) return; console.log(a) fn() console.log(a) } fn(); /* 不断的复制副本调用 在执行当前自身函数时 复..
2021-08-01 17:08:18
58
原创 js中原型，对象的原型链(__proto__) 和 类的原型(prototype)
<script> class Box{ constructor(){ } // 这样写 方法写在原型链上 play(){} run(){} static run(){} } let obj1 = new Box(); // obj1.__proto__.getNum = function(
2021-08-01 17:08:09
84
原创 js中原型的使用
谢天 0515 原型的使用还需要看 后续0515 { 原型 继承 深复制} /* 原型的使用 */ console.log( Array.prototype ) Array.prototype.abc = function(){ console.log('asda') } let arr = [12,3,13123,2]; // arr.abc(); /* 实现foreac
2021-08-01 17:07:57
139
原创 js中函数的柯里化
<!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>Do
2021-08-01 17:07:41
43
原创 遍历dom树，将具有id属性名的存储到对象上
<div id="divs"> <div id="div0"> <p id="p0"></p> <p id="p1"> <span id="sp4"></span> <span id="sp5"></span> <span id="sp6
2021-08-01 17:07:29
79
原创 递归的返回，
递归对象 数组 字符串递归字符串 ， 使用正则的match，匹配一个数组，之后使用递归<!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
2021-08-01 17:07:07
829
原创 js中函数的闭包closure,bind实现
<!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>Do
2021-08-01 17:06:57
52
原创 while循环也可以进行深度遍历
let obj1 = { value:1, prop:{ value:2, prop:{ value:3, prop:{ value:4, prop:{ value:5
2021-08-01 17:06:45
267
原创 npm的了解和使用
npm (node package manage)node包管理器对于包、插件等等进行安装、卸载、更新、查看、搜索、发布等等缺点：不会进行断点续传，下载断网就失败了；坏的文件在那儿，不允许下载了，需要清除掉之前的包，清除缓存数据npm -v 查看版本尽量不要使用cnpm，生成的配置文件容易造成多人协同开发时的混乱；因为国外服务器的速度原因，使用国内淘宝源更合适 npm config set registry 淘宝镜像地址初始化项目，生成配置文件，npm init -y自动全部ye
2021-08-01 17:06:16
113
原创 观察者模式，demo视频弹幕，弹幕+时间管理者
<!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>Doc
2021-07-29 17:37:27
69
原创 get/set 运用
<!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>Do
2021-07-20 08:49:14
34
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人