- 博客(37)
- 收藏
- 关注
RSS订阅原创 浏览器的重绘与重排
重排：部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算，表现为重新生成布局，重新排列元素重绘：由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色之后，屏幕上部分内容需要更新，表现为某些元素的外观被改变单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，会重新绘制受到此次重排影响的部分重排和重绘代价是高昂的，他们会破坏用户体验，并且让UI展示非常迟缓，而相比之下重排的性能影响更大，在两者无法避免的情况下，一般我们都会选择代价最小的重绘重绘不一定.
2021-09-06 14:30:41
200
原创 判断数据类型的方法
function getType (obj) { let type = typeof obj if (type !== 'object') { return type } return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1')}
2021-04-12 17:51:33
135
原创 Babel原理是什么？
babel的转义过程也分为三个阶段，这三步具体是：解析Parse：将代码解析生成抽象语法树(即AST)，即词法分析与语法分析的过程转换Transform：对于AST进行变换一系列的操作，babel接收得到AST并通过babel-traverse对其进行遍历，在此过程中进行添加、更新及移除等操作生成Generate：将变换后的AST再转换为JS代码，使用到的模块是babel-genertor...
2021-03-22 16:09:19
364
原创 HTTPS是如何保证安全的
HTTPS是如何保证安全的过程比较复杂，我们得先理解两个概念对称加密：即通信的双方都使用同一个秘钥进行加解密，比如特务对暗号(天王盖地虎，小鸡炖蘑菇)，这就属于对称加密非对称加密：私钥 + 公钥 = 密钥对即用私钥加密的数据，只有对应的公钥才能解决，用公钥加密的数据，只有对应的私钥才能解密因为通信双方的手里都会有一套自己的密钥对，通信之前会把自己这边的公钥发送给对方然后再拿着对方发送过来的公钥对数据进行加密发送给对方，对方再用私钥对公钥进行解密如git中 远程仓库就要存储自己本地的公钥
2021-03-17 11:50:44
141
原创 HTTP有哪些方法，具体作用是什么
HTTP有哪些方法，具体作用是什么HTTP1.0定义了三种请求方法：GET、POST和HEAD方法HTTP1.1新增了五种请求：OPTIONS、PUT、DELETE、TRACE和CONNECT这些方法具体的作用是什么GET：通常用于请求服务器发送某些资源HEAD：请求资源的头部信息，并且这些头部与HTTP GET方法请求时返回一一致，该请求方法的一个使用场景是在下载一个大文件前先获取其大小再决定是否要下载，以此可以解决资源OPTIONS：用于获取目的资源所支持的通信选项POST：发送数据
2021-03-08 09:26:29
1285
1
原创 CSS有几种定位方式
static：正常文档流定位，此时top、right、bottom、left和z-index属性无效，块级元素从上往下纵向排布。relative：相对定位，此时的“相对”是相对于正常文档流的位置。absolute：相对于最近的非static定位祖先元素的偏移，来确定元素位置。fixed：指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变，比如那种回到顶部的按钮一般都是用此定位方式。sticky：粘性定位，特性近似于relative和fixed的合体，其在.
2021-03-04 11:03:09
170
1
原创 块级元素水平居中
margin:0 auto方法.center { height:200px; width: 200px; margin:0 auto; border: 1px solid red}<div class="center">水平居中</div>flex布局，目前主流方法.center { display: flex; justify-content: center;}<div class="center"> <div class="flex
2021-03-04 10:22:53
206
1
原创 em\px\rem区别
em\px\rem区别px：绝对单位，页面按精确像素展示em：相对单位，基于父节点的字体大小，如果自身定义了font-size按照自身的来计算（浏览器默认是16px），整个页面内1em不是一个固定的值rem：相对单位，可理解为"root em"，相对于html节点的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持...
2021-03-04 09:49:25
121
1
原创 css引入方式link和@import的区别
css引入方式link和@import的区别link属于XHTML标签，而@import是CSS提供的页面加载时，link会同时加载，而@import引用的css会在页面加载完之后再加载import只在IE5以上才能识别，而link是XHTML标签，无兼容问题link方式的样式权重高于@import的权重使用dom控制样式时的差别。当使用js去操控dom的时候只能是link引入的css样式，而@import引入的css不是dom可以操控的...
2021-03-03 09:49:28
144
原创 css选择器的优先级是怎样的
css选择器的优先级是怎样的css选择器的优先级是：内联 > ID选择器 > 类选择器 > 标签选择器到具体的计算层面，优先级是A、B、C、D的值来决定的，其中它们的值计算规则如下：A 的值等于1的前提是存在 内联样式，否则A = 0B 的值等于 ID选择器 出现的次数；C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数D 的值等于 标签选择器 和 伪元素 出现的总次数就比如下面的选择器，它不存在内联样式，所以A = 0，不存在ID选择器B = 0,存在一个类
2021-02-25 11:52:13
506
原创 有几种前端存储方式？这几种方式的区别是什么？
有几种前端存储方式？这几种方式的区别是什么？cookies: 在HTML5标准前本地存储的主要方式，优点是兼容性好，请求头自带cookies方便，缺点是大小只有4k，自动请求头加入cookie浪费流量，每个domain限制20个cookies，使用起来麻烦需要自行安装localStorage: HTML5加入的以键值对(Key-Value)为标准的方式，优点是操作方便，永久性存储(除非手动删除)，大小为5M，兼容IE8+sessionStorage: 与localStorage基本类似，区别是ses
2021-02-24 17:57:26
842
原创 scriptb标签中 defer 和 async 的区别
scriptb标签中 defer 和 async 的区别defer: 浏览器指示脚本在文档被解析后执行，script被异步加载后并不会立刻执行，而是等待文档被解析完毕后执行。async: 同样是异步加载脚本，区别是脚本加载完毕后立即执行，这导致async属性下的脚本是乱的，对于script有先后依赖关系的情况，并不适用。蓝色线代表网络读取，红色线代表执行时间，这两都是针对脚本的；绿色线代表html解析...
2021-02-24 15:55:18
113
原创 src href img的srcset
src 和 href 的区别src 是指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应用到文档内，如js脚本，img图片和frame元素。当浏览器解析到元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，所以一般js脚本会放在底部而不是头部。href 是指向网络资源所在位置（的超链接），用来建立和当前元素或文档之间的连接，当浏览器识别到它所指向的文件时，就会并行下载资源，不会停止当前文档的处理。img 的 srcset 的
2021-02-24 15:45:28
290
原创 怎么理解JS中原型链？如何实现继承
原型链每个构造函数都有一个原型对象每个原型对象都包含一个指向构造函数的指针每个实例都包含一个指向原型对象的指针查找方式是一层层向上查找直至顶层Object.prototype实现继承的方式常用的有原型链继承借用构造函数继承(call, apply)组合继承(原型链+构造函数)原型式继承寄生式组合式继承优缺点每一种继承的方式都有自己的优缺点组合继承的特点是会调用构造函数两次都是将多种继承方式组合到一起相辅相成new运算符具体干了什么创建一个空的对象将空的对象的p
2021-02-24 10:18:21
262
原创 chrom浏览器a标签下载图片
function downFile(url, fileName) { var a = document.createElement('a') document.body.appendChild(a) a.href = url + '?response-content-type=application/octet-stream' a.download = fileName // 命名下载名称 a.target = '_blank' a.click() // 点击
2020-12-09 17:17:50
397
原创 VUE自定义指令去除element输入框的空格（同时防止光标抖动）
技术能力有限，代码写法比较粗糙，各位大佬借鉴一下就好，但我可保证这是我个人原创而且真实可用。项目是ts的项目，如果想用到js的项目，改一下代码的写法就可以了removeSpace.tsimport Vue, { DirectiveOptions } from 'vue'const directive: DirectiveOptions = { componentUpdated (el, { value, modifiers }) { // // 获取真实的inputDOM元素
2020-11-20 15:03:53
1666
原创 promise的手写简单实现
项目结构直接上代码，代码里的注释很全/** * 自定义Promise函数: IIFE */(function (window) { // 定义常量 const PENDING = 'pending' const RESOLVED = 'resolved' const REJECTED = 'rejected' /** * Promise构造函数 * excutor执行器函数(同步执行) */ function Promise(excutor) {
2020-09-23 17:34:30
185
原创 vue自动化打包部署jenkins，公司项目遇到的坑，记录全过程
背景以前都是手动打包部署，然后测试服务器我们开发又没有权限，被测试独揽大权，每次转测之后改了BUG都要重新打包，就很烦，而且测试如果没有及时把包更新上去然后这个时候其他的开发又更新了他们版本的代码打包给其他的测试，这个就会导致测试环境的代码不正确，就很烦！！而且每次我们打包，测试还要部署包，也很烦！！！所以最后我忍无可忍无需再忍，去部署jenkins了（本来想着我只是一个刚毕业的大学生，这些东西不该我操心的，就一直放之任之）冲冲冲，直接贴截图上代码# 进入对应的jenkins的工作目录cd $W
2020-09-09 11:12:14
1005
2
原创 h5 判断当前机型为android还是ios，安卓苹果
// 判断当前机型是否为iosexport function getPhoneType () { let ua = navigator.userAgent.toLowerCase() return ua.includes('iphone') ? 'ios' : 'android'}
2020-07-11 14:19:36
1596
原创 vue+typeScript 中watch可以进行多层嵌套，同时watch多个变量
@Watch('b', { deep: true })@Watch('a', { deep: true })private getSubmitStatus ():void { console.log(this.a) console.log(this.b)}ps: 此处a，b均为对象，我是为了watch其中的变量才加的deep:true
2020-07-04 15:08:33
5070
原创 js去掉省市区或者省市市的省和第一个市
从企查查获取到企业的地址字符串，一般为省市区+详细地址或者为省市市+详细地址，产品提要求说要去掉省和第一个市，只拿区+详细地址或者第二个市+详细地址由于不知道获取的字符串里有一个市或者两个市或者没有市。let newAddress = address.includes('市') ? address.replace(/市/, ' ').split(' ')[1] : address先判断是否有市，如果有，通过 replace() 把第一个市置换为空格，然后再用 split() 从空格处进行分割，取分割
2020-07-01 10:13:18
1650
原创 vue中关于组件(element,vant等等)回显很慢的问题
业务场景：关于表单的交互，特别是从接口请求的数据要进行回显的时候。此时有一个对应表单定义的类是这样 private form = { a: '1', b: '2', c: '3' }然后需要请求回来的数据在表单上进行回显 const res:any = await request() // res = {a: 'a', b: 'b', c: 'c'}很多时候我们为了偷懒，就直接 this.form = res但是这样写会造成 回显很慢的问题，偷懒是不能偷懒
2020-06-23 15:23:15
1683
原创 element el-upload文件上传时，mac笔记本无法获取到file.type，就无法校验到上传的文件类型
今天项目中碰到了在使用el-upload时，mac笔记本无法获取到钩子函数的before-upload方法中的file回调参数中的type属性，就无法去进行校验，然后就换成了去校验file.name，判断是否以 .xlsx 和 .xls结尾的excel文件beforeUpload (file: any) { const uploadFileSize: boolean = file.size / 1024 / 1024 < 10 const fileType: boolean = f
2020-06-02 15:09:01
3172
2
原创 vue+ts+element ui的项目在进行自定义表单校验时获取不到form
今天在项目中进行自定义表单校验的时候，遇到了获取不到this.form的情况其实呢，这个问题之前在做一个动态表单验证的时候就遇到过，this.form获取不到值，当时是采用this.$set的方法进行赋值，比如this.此处是美元符号set(form,id,res.id)，然后就可以获取到对应的this.form.id的值。今天呢又遇到了这个情况，之前用set没有用了，然后我就试着在自定义表单校验方法里去console.log(this),结果发现this并不是指向的表单实例，后来发现每一个要去表单校验
2020-05-19 16:18:22
2303
原创 JS 数组去重，ES6写法
用ES6 SET数据结构给数组去重SET()SET()let arr = [3, 5, 2, 2, 5, 5];let unique = [...Array.from(new Set(arr))];// [3, 5, 2]由于set()的属性原因，在set数组中所有值都只有唯一的存在，然后再使用 … （扩展运算符，内部相当于for…of循环），就可以快速的进行去重了...
2020-04-26 17:00:36
173
原创 将数据存储到本地localStorage实现持久化存储
存数据 // 当 更新 car 之后，把 car 数组，存储到 本地的 localStorage 中 localStorage.setItem('car', JSON.stringify(state.car))加载数据// 每次刚进入 网站，肯定会 调用 main.js 在刚调用的时候，先从本地存储中，把 购物车的数据读出来，放到 store 中var car = JSON.par...
2019-09-11 19:00:56
2278
原创 配置Vuex的步骤
配置Vuex的步骤运行 cnpm i vuex -s导入包import Vuex from 'vuex'注册vuex到vue中Vue.use(Vuex )new Vuex.Store()实例，得到一个数据仓储对象var store = new Vuex.Store({state: {//可以把state想象成组件中的date,专门用来存储数据的count:0;...
2019-09-11 18:51:13
234
原创 Vue中的style 的lang=“ “和scpoed
Vue中的style 的lang=" "和scpoed普通的style标签只支持普通的样式，如果想启用scss或者less，需要为style元素设置lang属性<style lang="scss" scoped>/* 普通的 style 标签只支持 普通的 样式，如果想要启用 scss 或 less ，需要为 style 元素，设置 lang 属性 */// 只要 咱们的 st...
2019-09-11 17:31:36
8610
2
原创 Vue中export
Vue中exportexport default 向外暴露的成员，可以使用任意的变量来接收在一个模块中，export default只允许向外暴露一次在一个模块中，可以同时使用export default 和 export向外暴露成员// test.vueexport default { address：'深圳'}export var title = '星星'export v...
2019-09-11 11:11:16
2449
原创 Vue + elementUi 实现菜单无限级的分类导航
Vue + elementUi 实现菜单无限级的分类导航[ { "id": 1, "parent_id": 0, "menu_name": "第一级菜单 1", "sorting": 0, "node": [ { "id": 2, ...
2019-09-09 17:28:52
4519
1
原创 Vue路由切换页面时页面滚动条回滚到顶端以及校验页面是否登录
Vue路由切换页面时页面滚动条回滚到顶端在使用vue.router切换页面时，如遇到一个页面过长，滚动到某个位置时，再跳转到另一个页面，滚动条默认是在上一个页面停留的位置，最好的体验肯定是能回到顶端，可通过路由自带的钩子函数实现//mian.js//...router.afterEach((to,from,next) => { windows.scrollerTo(0,0);})...
2019-09-07 10:54:22
258
原创 Vue中使用Vue.router修改单页面的标题
Vue中使用Vue.router修改单页面的标题在页面发生路由改变的时候，统一设置。通过使用vue-router提供的导航钩子函数beforeEach和afterEach中的 beforeEachconst Routers = { { path:'/index', meta:{ title:'首页' }， component:(resolve) => requ...
2019-09-06 19:36:02
733
原创 Vue中实现用动态组件代替路由的效果
Vue中实现用动态组件代替路由的效果话不多说，直接上代码可直接复制粘贴运行。一个简易的动态组件Demo，仅供参考<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic...
2019-09-05 10:17:16
1683
转载 获取IP地址
<scripttype="text/javascript">functiongetUserIP(onNewIP){//onNewIp-yourlistenerfunctionfornewIPs//compatibilityforfirefoxandchromevarmyPeerConnection=windo...
2019-04-11 10:05:14
232
原创 使用命令行将snapshots上传到nexus
对于一些有源码的包可以直接用编译器deploy进行上传但是对于一些没有源码的包就不能用编译器deploy，所以采用cmd命令行的方式去上传先进入到你要上传包的目录的文件然后cmd，再输入下面这一串命令，其中相关配置根据文字的提示自行更改（前提是当前电脑已经装了maven和配置好了环境变量）mvn deploy:deploy-file -DgroupId=此处写GroupId -Dartifa...
2019-04-10 15:52:46
1021
原创 使用cmd命令配置环境变量
使用cmd命令配置环境变量重新配置了maven的环境变量,由于我的电脑无法从属性进入窗口图形化的环境变量设置界面,所以我使用cmd命令窗口去配置环境变量set 查看所有的系统环境变量set 环境变量名 查看该变量名的环境变量,例如:set path查看path下的环境变量(maven的环境变量多设置了几个)setx 环境变量名 “路径” 设置该变量的环境变量,例如:setx mav...
2019-03-20 10:53:05
1898
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人