- 博客(42)
- 收藏
- 关注
RSS订阅原创 关于deep的理解
在vue中为了防止组件与组件之间的样式污染，使用scoped来进行组件之间的样式隔离，其原理主要是为组件增加一个属性eg:[data-454564654]这种，但是因为scope的原因会导致父组件无法修改子组件的样式，此时就要用到deep穿透，其中的deep的原理就是在css类等后面加入一个该组件的属性值。详情见https://blog.csdn.net/weixin_45842655/article/details/103547362，感谢该作者的分享...
2020-11-20 17:00:46
1457
原创 关于Vue中插槽的理解和总结
插槽作用: 我的理解大概就是子组件留了个坑坑，父组件如果有需要就可以往那个坑坑里面放一些其他的组件和模板。 插槽类型：default插槽，具名插槽，作用域插槽。default插槽：就是默认插槽，所有没有名字的插槽都会被放入this.$slots.default中，包分配。 具名插槽：具名插槽就是有名字的插槽，组件和模板申明了你的名字，就把他放在你的槽槽里。子组件：child.vue<templete><div><slot name="slotdemo">&
2020-11-12 15:25:16
644
原创 关于vue中props特性以及父子之间传值的总结
1.父子之间传值方法的总结：父组件向下给子组件传值：props 子组件给父组件传递事件：this.$emit()2.props特性：props:{ data:{ type:, required:,//是否必须 default:,//默认值 valiadate:function(value){ return },//验证传递字段 }}...
2020-11-11 19:29:47
246
原创 手写深拷贝
function isObject(obj){ return typeof obj === 'object' && obj!==null}function deepCopy(obj){ let result if(!isObject(obj)){ return obj } //初始化结果 if(obj instanceof Array){ result = [] }else{ result = {} } f.
2020-09-08 11:22:36
96
原创 手写数组去重
Array.prototype.myUnique1 = function(){ let unique = function(arr){ let result = [] arr.forEach(item => { const isOwn = result.indexOf(item) if(isOwn<0){ result.push(item) } }) return result } retur.
2020-09-08 11:02:15
185
原创 手写数组扁平化
Array.prototype.myFlat = function(){ let flat = function(arr){ //判断是否扁平 const isOwn = arr.some(item => item instanceof Array) if(!isOwn){ return arr } const res = Array.prototype.concat.apply([],arr) re.
2020-09-08 10:49:35
256
原创 手写apply,bind,call函数
Function.prototype.myCall = function(content){ if(typeof this !== 'function'){ throw new Error('err') } const obj = content || window obj.fn = this const args = Array.prototype.slice.myApply(arguments,[1]) const res = obj.fn(...args) d.
2020-09-08 10:35:43
91
原创 关于eventLoop Js事件循环机制的总结探索
首先再搞清js事件循环机制之前我们需要搞懂JS是单线程的运行机制，同步代码会造成阻塞，所以必须引进异步，那么异步和同步代码运行的机制又是怎样的呢？如图所示，js的所有代码在执行之前，会一行一行的将代码方法代码的执行栈中，如果是同步代码就会直接执行了，然后遇见异步回调则会将异步回调函数代码放入Web那个储存栈中（该存储站只存储宏任务setTimeoutsetIntervalajax和Dom事件），如果是执行代码过程中遇见微任务Promise和async/await则将代码放入微任务存储栈中，...
2020-08-19 19:36:38
115
原创 关于margin-right和width:100%冲突的问题
因为浏览器渲染是从左往后进行渲染，margin-left是可以展示除效果的，但是margin-right会因为width：100%从而元素会福满父级元素的宽度，从而导致margin-right被覆盖。
2020-08-13 09:22:28
836
原创 关于居中对齐的方式总结
1.水平居中对齐：对于行内元素可以使用text-align：center 对于块级元素使用margin：auto 使用绝对定位，left:50%+margin-left:-(子元素宽度的一半) 使用绝对定位+transform属性：left:50%+transform:translateX(-50%) 使用绝对定位＋margin：auto：left:0+right:0+margin:auto2.垂直居中居中对齐:line-height=height 使用绝对定位，top:50%+marg
2020-08-08 09:51:55
800
原创 关于css中清除浮动的方法总结
1.为什么要清除浮动？如果父元素没有高度，子元素浮动会发生高度塌陷，通过清除浮动可以让子元素撑起父元素高度2.清除浮动的方法1.创建bfc /* .three{ background-color: seagreen; overflow: hidden; border: 10px solid blue; } .four{ background-color: red; height: 50
2020-07-20 11:42:14
88
原创 关于HTML的语义化以及块级内联元素问题分析
1.HTML语义化（HTML中会含有具有语义的标签）作用：（1）增加代码的可读性 （2）方便搜索引擎识别读懂案例分析：//实例1 <div> <div>标题</div> <div> <div>文字</div> <div>1</div> <div>2</div> <div>3</div&
2020-07-17 14:59:19
108
原创 浅析new关键字创建对象的过程
1.产生一个继承构造函数(设为func)的原型对象(即func.prototype)的新对象2.执行构造函数，构造函数的this指向新对象3.如果构造函数返回的是一个对象，那么最后返回的就是这个对象；否则返回的就是继承了构造函数的原型对象的新对象//下面请看代码实现let new = function(func){ let o = Obejct.create(func.prototype)//继承构造函数的原型对象 let k = func.call(o)//执行构造函数 .
2020-07-08 16:41:31
363
原创 使用纯css实现三角形
<!DOCTYPE html><head> <style> .triangle{ width: 0px; height: 0px; border-width: 50px; border-style: solid; border-color: red #ffffff #ffffff #ffffff; } </style></head><html>.
2020-06-28 09:34:17
167
原创 简单模拟koa2原理
洋葱模型，中间件嵌套const http = require('http')function composeMid(middWareArr){ return (ctx)=>{ function dispatch(i){ let fn = middWareArr[i] try{ return Promise.resolve( ...
2020-04-20 23:37:03
145
原创 简单模拟express中间件
const http = require('http')let slice = Array.prototype.sliceclass express{ constructor(){ this.routes={ all:[],//用于储存app.use()方法注册的中间件 get:[],//用于储存app.get()方法注册的中间件 post:...
2020-04-18 23:13:06
124
原创 nodejs如何启动监听文件变化
使用nodemon和cross-env cnpm i nodemon cross-env --save-dev在package.json文件里"scripts": { "start": "node ./bin/www", "dev": "cross-env NODE_ENV=dev nodemon ./bin/www" }
2020-04-18 15:57:48
575
原创 关于js种继承的六种实现方法以及其优缺点
//实现继承的几种方式//第1种方式 使用call或者apply方法改变this指向//缺点：虽然改变了this的指向但是Child构造函数并不会指向Parent的原型链let Parent1 = function(){ this.name = 'name'}Parent1.prototype.say=function(){console.log('say')}let Child...
2020-04-14 23:01:24
126
原创 关于Http协议的总结
1.HTTP协议的主要特点灵活，简便，无连接，无状态具体理解参考https://blog.csdn.net/tennysonsky/article/details/445624352.HTTP报文的组成部分首先http报文由请求报文和响应报文组成请求报文：请求行(请求方法，请求url和http协议版本)，请求头(各种key值)，空行(标识请求头结束)，请求体(一般是post到服...
2020-04-14 16:43:49
135
原创 关于js数据类型转换
1.js中的数据类型：（1）js中的原始基本数据类型：String,Number,undefined,null,symbol(ES6),Boolean（2）js中的对象类型：Object2.js中的数据类型转换：（1）首先是字符串类型转换：使用String()方法：String(str)=>strString(123)=>'123'String(undefin...
2020-04-14 15:21:33
93
原创 关于js的DOM事件总结
1.关于js中事件的等级划分：(1).DOM0事件:eg:onclick等事件，直接使用dom.onclick=function(){}等，即将事件监听挂在节点上，回调中的this直接指向当前节点；此类事件缺点是之只能为为节点绑定一次相同的事件：eg：<body> <div> <span id="eve">添加事件</span>...
2020-04-13 17:51:25
230
转载 session,cookie,sessionStorage,localStorage的区别及应用场景
https://www.cnblogs.com/cencenyue/p/7604651.html
2020-04-12 23:56:03
86
原创 关于css盒模型以及的总结
1.css盒模型：（1）css盒模型分为标准模型和IE模型；标准模型：width和height = content部分的width和heightIE模型：width和height = content+border+padding（2）如何设置标准模型和IE模型：box-sizing：content-box（标准模型）/ border-box（IE模型）2.如何设置和获取...
2020-04-12 20:32:09
197
原创 关于js获取浏览器以及元素的高度
网页可见区域宽： document.body.clientWidth网页可见区域高： document.body.clientHeight网页可见区域宽： document.body.offsetWidth (包括边线的宽)网页可见区域高： document.body.offsetHeight (包括边线的高)网页正文全文宽： document.body.scrollWidth网页正文全...
2020-04-11 23:26:47
242
原创 记基础的三栏布局的五种实现方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>threelayout</...
2020-04-11 16:58:18
79
原创 vue创建项目时如何消除浏览器默认的外边距
使用reset.css文件一步到位/* html5doctor.com Reset Stylesheetv1.4.1 2010-03-01Author: Richard Clark - http://richclarkdesign.com*/html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blo...
2020-03-31 18:43:16
3308
原创 关于js中栈的使用
栈，接触过C语言应该对他理解比较深，但是总结过来就是一个进出的问题，记住八个字 “先入后出，后入先出”js中pop()和push()两个api结合就可以很好的实现栈的结构pop弹出数组最后一个元素push在数组最后新增一个元素...
2020-03-30 22:55:45
400
原创 关于js快速排序的总结
快速排序的思想是：随机选取一个中间值，遍历数组，将数组中比这个数小的放在这个数左边，将数组中比这个数大的放在右边，直至该数组排序完成。关于js的快速排序思路主要有两种：第一种：递归思想，使用两个数组对左右两边的小数和大数分别进行储存，但是该方法比较浪费内存资源代码如下：let qSort = (arr) => { let quickSort = (arr) => ...
2020-02-26 00:11:47
108
原创 关于冒泡排序和选择排序
冒泡排序简单来说是把大数往后面放：let mpsort = (arr) => { for(let i = arr.length; i > 0; i--){ for(let j = 0; j < i; j++){ if(arr[j]>arr[j+1]){ let num = arr[j+1] arr[j+1] = arr[j] ...
2020-02-16 22:51:31
78
原创 js中关于赋值的问题
let a = value;if(value==='数据'){ //a储存的就是这个数据}else if(value === Object){ //a储存的就是这个对象的地址值，当改变a中对象的属性时原对象中的属性也会跟着改变 //eg: let a={} let S={} a=S a.b=1; a.c=1; console.log(S)//{b:1,c...
2020-02-10 00:58:33
144
原创 关于js中apply方法和call方法的理解
大体上说，apply方法和call方法的功能就是改变当前函数的this指向；具体用法如下：Function.call(obj[, param1[, param2[, [,...paramN]]]]);Function.apply(obj[, argArray]);可以看到，call和apply的区别主要是传入的参数类型不同：apply()方法接收两个参数，一个是函数运...
2020-02-02 21:19:54
150
原创 关于js中数组的map方法和forEach方法的区别
Array.map()返回的值会存在一个新数组中（其中每一个元素由调用数组中的每一个元素执行提供的函数得来），对原数组没有影响，该方法是有返回值的；Array.forEach()只会在回调函数中对数据进行更改等操作，而不会有返回值...
2020-01-15 14:33:57
263
原创 算法练习——字符串反转
给定一个字符串，你需要反转字符串中每个单词的字符顺序，同时仍保留空格和单词的初始顺序。示例1:输入: "Let's take LeetCode contest"输出: "s'teL ekat edoCteeL tsetnoc"注意：在字符串中，每个单词由单个空格分隔，并且字符串中不会有任何额外的空格。来源：力扣（LeetCode）链接：https://leetcode-cn....
2020-01-14 16:21:05
165
原创 正则表达式之一些小总结
反向引用：在正则表达式中用（）括起来的子式，会被放在一个缓存区里面，其中/1表示缓冲区里第一个匹配的字符串，也就是第一个括号（第一个子式），/2，/3.../n依次类推；？：限定出现的次数只能是0次或者1次+：限定出现的次数可以是一次或者多次*：限定出现次数可以是0次或者1次，多次\d：匹配整数\w：匹配字母，数字，下划线等\W：与\w互补\s：匹配空白字符\S：与...
2020-01-14 16:08:08
100
原创 关于css的flex布局的一些记录
flex-direction：项目item排列的方向；flex-wrap：当轴线排列不下之后的排列方式； nowrap（默认）：不换行；wrap：换行（第一行在上方）；wrap-reverse:换行（在第一行的上方）；justify-content：项目在主轴上的对齐方式；flex-start（默认值）：左对齐 flex-end：右对齐 center：居中...
2019-12-14 23:03:30
79
原创 关于vue组件之间通信的总结（1）
prop传值：首先官方文档中，对prop传值提出了一个单向数据流的概念：所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。意思就是prop传值只支持父组件向子组件传值：eg://父组件parent.vue<temp...
2019-11-26 19:59:59
86
原创 关于element导航栏使用的一些记录
<template><div><img:src="imgSrc.src"/><el-menumode="horizontal":default-active="this.activeIndex"router><el-menu-itemv-for="iteminleadList"...
2019-11-26 19:41:05
323
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人