- 博客(32)
- 收藏
- 关注
RSS订阅原创 XSwitch
下载链接：https://crx.extfans.com/extension-v2/idkjhjggpffolpidfkikidcokdkdaogg/[email protected]?e=1653472808&token=QwV7OgC8jKau8iKjsseBUDIt5FN6na7ZeOi4eaMU:K-CgrWwM2PfcErru5cbzQPrZTw8=安装流程使用指南https://www.yuque.com/jiushen/blog/xswitch-readme...
2022-05-27 11:29:36
320
原创 浏览器中图片的请求情况
图片预加载在页面中图片的引入方式有以下几种<img src="xxx" />，用src直接引入；backgroud:url('xxx')，在css中当背景；const img = new Image('xxx'); img.src = xxx，在js中动态生成图片标签浏览器渲染页面顺序............
2022-05-25 16:44:05
713
原创 垃圾回收机制（GC）
为什么需要垃圾回收机制程序工作过程中会产生很多数据，但是有些数据可能用过一次后就不用了，如果不对这些数据进行清除，就会占用很多内存空间。如果不释放内存，重则会导致进程崩溃。垃圾回收机制就是对不需要用到的数据进行删除，释放内存。什么是垃圾回收机制在 JavaScript 内存管理中有一个概念叫做可达性，就是那些以某种方式可访问或者说可用的值，它们被保证存储在内存中，反之不可访问则需回收。垃圾回收机制就是定期找出那些不再用到的内存，然后释放其内存。算法策略最为常见的就是标记清除算法该算法分为两步：
2022-05-19 19:34:38
250
原创 elementUI cascader级联选择器隐藏某一层级的多选框
问题：el-cascader可以实现多选，但是在超过3层级的懒加载情况下，在没有加载最后一层内容是，点击选择框无法回显打input上并且change事件无法获取到值（下面的示例采用的是一个3层多选级联选择器）原因：由于这些层级是相关联的，所以，选中只会获取的子叶也就是最后一层的数据，这时候，最后一层也就是第三层没有数据，所以change获取到的才会如图所示，length为0.解决：一、我们可以通过在props中配置checkStrickly:true取消父子级的关联但是由于取消了父子级的
2022-03-17 19:56:14
4741
原创 移动端iframe跳转第三方应用出现无法滑动问题
问题为了实现跨平台兼容，我们的项目用的是capacitor+vue框架，实际上就是在webview上用iframe实现页面的跳转功能，ios在跳转到第三方页面时，出现了无法滑动的情况。由于iframe在ios上宽度撑开屏幕问题，设置了iframe的scrolling为no，因此才会出现无法滑动问题。解决办法由于不能直接改iframe，于是我们选择迂回救国，通过调用内置浏览器访问第三方页面。capacitor内置浏览器open()通过调用调用capacitor的内置浏览器打开第三方页面，但是该浏
2022-03-11 15:36:29
4635
原创 代理环境切换组件
问题在公司里我们联调的过程中，需要将本地请求代理到测试环境中；Vue项目中，采用devServer.proxy对代理进行配置；devServer: {// xxx为代理内容 proxy：{ '/*':{ ws：false， target:'docker33-www.baidu.net', changeOrigin:true } } port: 8088, },该例子是将所有请求都代理到test33-www.baidu.net；所以我们修改代理环
2022-03-11 14:33:46
830
原创 vue实现侧边定位栏
实现一个侧边栏，需要实现两个功能通过点击侧边栏，定位到响应的内容滑动滑动栏，侧边栏同步高亮对应的item效果图如下：1. 通过点击侧边栏，定位到响应的内容如果是用html的话我们可以用 锚点 的办法进行定位；在vue中，我们可以通过获取组件的高度，将滑动栏定位到对应的位置在进入主题之前我们需要先了解3个关于获取高度的属性scrollTop 滑动栏中的滑块离视区最顶部的距离document.documentElement.scrollTop || document.body.s.
2022-03-10 19:59:13
1720
原创 关于打印出现空白的问题
问题在打印的需求中，我们一般是将数据展示在页面中，然后通过调用window.print()，将页面打印出来但是这里有一个顺序问题，我们需要先加载完页面才能进行打印，不然就会出现白屏问题。解决方法this.nextTick()this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。但是 mounted（） 不会承诺所有的子组件也都一起被挂载。所以在mounted中执行this.nextTick（）会有子组件还没加载完成的情况。async mounted() {
2022-03-10 17:17:38
1930
原创 文件下载功能
对于文件的下载，目前知道后端有两种返回形式：① 返回blob文本流②返回文件的url链接参考文章1参考文章2一、通过a标签直接下载直接调用a标签进行下载（a标签只支持非图片和非PDF下载，这两种格式a标签只提供查看功能）<a href="https://.../158ac1e6917445a4aa384a2a7209445a.xlsx" download="test">下载文件</a>在a标签中的href中加上文件的地址；downloa属性可设置下载文件的名称
2021-12-28 10:29:12
641
原创 vue项目监听文件变化自动重启webpack服务器
问题：因为每次更换开发环境时，都需要手动重启一次服务器。以下的方法可以实现自动化重启。一、安装nodemon插件nodemon插件，这里有一篇详细的入门介绍。这里只有我的配置进行记录。首先我们需要在开发环境中安装nodemon依赖 npm install --save-dev nodemon在项目的package.json文件中的scripts对象下添加开启nodemon的操作// package.json"scripts": { "serve": "vue-cli-servi
2021-09-16 15:01:19
1923
3
原创 关于js中的!和!!
js中！不止可以用于取反，也可以将非布尔值类型转换为布尔值。对于null、undefined、和‘’（空），取反后为true，其他为false!!顾名思义就是将非布尔值类型转换为布尔值然后再进行取反。则null、undefined和 ‘’，会变成false，其他会变成true。tip：如果本来就是布尔值类型，则就按照布尔值逻辑进行取反这个两个方法主要用于判断获取的值是否有效比如，我们之前要判断这个值是不是有内容，有才进行相关操作，则// 如果val是null、undefined、‘’，.
2021-09-14 16:03:13
123
原创 git操作命令大全
常用操作指令命令作用git add [file] 或 .将file或所有文件的改动从工作区添加到暂存区git commit -m ‘提交说明’将改动从暂存区提交到本地仓库git pull拉去远程仓库的改动至工作区先 git fetch， 然后 git merge先拉去远程仓库改动，然后合并到工作区git push origin master将改动推送到远程仓库，一般也可以用git pushgit配置操作命令git的配置文件为.gitconfi.
2021-08-04 19:16:56
130
原创 2021.7.19前端小记
Object.seal()是es5的特性，用于封装对象，object.seal()会改变对象的两个特性，使对象即不能扩展新的属性、删除已有属性，也不能修改属性的已有的特性tip：如果你在使用Object.seal方法后，给对象添加新的属性可能不会报错，但是不会起任何作用，如果你通过Object.defineProperty方法重新配置该对象的特性，则会报无法重新定义不可配置属性的特性的错误var obj = { prop: function () {}, foo: 'bar'}var
2021-07-20 16:30:02
61
原创 前端小记~
一、call、apple、bind的区别用于重定向this。call和apple会直接执行函数，而bind返回的是一个函数，需要加（）调用，才会执行。//例子：var obj={> name: 'she'> myfun: function(fm,t){> console.log(this.name+' '+fm+' '+t)> }> }> var bd(){> name: 'he"> }> obj.myfun.cal
2021-07-19 10:41:56
878
1
原创 移动端canvas画布加载图片模糊问题
参考链接：高清图片在不同移动端设备上的显示效果由于pc端和移动端的分辨率不同，在pc端1pxwindow.devicePixelRati= 单个css像素（逻辑像素）/ 物理像素物理像素（设备像素）：是显示器真正的像素点，我们可以将屏幕看成由一个一个的小灯组成，而1物理像素===1个小灯逻辑像素（设备独立像素）：是操作系统定义的一种像素单位，，在不缩放的前提下，CSS 中的 1px 就代表着 1 个物理像素...
2021-07-15 16:32:30
413
原创 关于window.print()
window.print()在js中调用该方法能够打印当前页面的body里面的内容。强制换页css属性中page-break-befrore、page-break-after、page-break-inside可以对换页进行设置page-break-before 可以设置某元素前面的换页值说明auto默认值。如果必要则在元素前插入分页符。always在元素前插入分页符。avoid避免在元素前插入分页符。left在元素之前足够的分页符，一直到
2021-07-04 02:39:58
238
原创 cvte前端一面面经
一、vue中双向数据绑定的实现参考链接：Vue的数据双向绑定原理及实现、Object.defineProperty的缺陷vue实例创建后，将遍历所有DOM对象，并为每个数据属性添加了get和set缺点：不能监听对象的增加和删除； 不能监听数组的修改二、CORS跨域如果后端设置header允许访问域为*，还能携带cookie请求吗参考：前后端跨域请求处理以及携带cookie CORS实现服务端配置 Access-Control-Allow-Origin: ‘*’ 或者前端的origin
2021-03-24 13:00:10
238
原创 深传互动前端面经
一、什么是H5参考：https://baike.baidu.com/item/html5/4234903?fr=aladdinH5是HTML的第五个版本，是构建web内容的一直语言描述方式。HTML5 的语法特征更加明显，并且结合了 SVG 的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容；视频、音频、图像、动画以及与设备的交互都进行了规范。...
2021-03-24 01:55:28
146
原创 多益网络面经
2021/3/10的一面，内容如下：你觉得前端开发是什么？答：前端开发是做页面呈现和用户交互的。你觉得你擅长前端开发哪方面？答：页面呈现，因为对vue框架比较熟悉，所以对页面的呈现比较擅长。get和post请求的区别？（1）get在浏览器回退时是无害的，但是post会重新提交请求。（2）get请求可以被浏览器收藏为书签，而post不行。（3）get会被浏览器主动缓存，而post不会，除非手动设置。（4）get只支持url编码，而post支持多种编码（下面有补充）（5
2021-03-16 21:25:02
1093
原创 TT语音前端一面面经
box-sizing 有哪些box-sizing属性有3个值，分别是 content-box、border-box、inheritcontent-box 的宽高指内容的宽高border-box 的宽高指 内容的宽高+内边距+边框介绍一下flex布局flex布局里面的元素都是一个个item，这些item像inline-block。flex里面分为main axis和cross axis。flex的属性有：flex-direction：row || row-reverse || column
2021-02-28 16:53:52
1611
1
转载 vue中element表格导出为excel
导出excel*安装依赖*npm install -S file-savernpm install -S xlsxnpm install -D script-loader下载 Export2Excel.js 文件 这个文件没在npm上找到，所以在网上找的文件放入项目中。 Export2Excel.js(复制demo中的Export2Excel.js代码保存到项目static文件夹下，可根据自己的习惯保存路径)1、项目中使用引入 export_json_to_excel 方法 (使用相对
2020-10-13 17:24:48
699
1
原创 mockjs打开新世界——再也不用担心没有后端接口怎么办了
什么是mockjs用于拦截Ajax请求，模拟数据返回。当后端接口还没开发完成时，可以手动模拟后端接口。使用mockjs模拟后端接口，可随机生成所需数据，可模拟对数据的增删改查。在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成 之后，只需要改变url地址即可。mock/index.js 内容const fs = require('fs');const path = require('path');const Mock = require('mockjs');co
2020-08-06 14:40:07
213
原创 nodejs笔记（未完待续）
1、promise用于异步处理：function getdata(resolve,reject){ setTimeout(()=>{ var name = 'nihao'; resolve(name); },1000)}var p = new Promise(getdata);p.then((data)=>{ console.log(data);})2、async:让方法变成异步。返回是一个promise，跟promise区别不大，优势在于处理多个promise
2020-08-05 14:41:00
74
原创 js中闭包的理解
在了解闭包之前，我们还有一些内容需要提前了解作用域作用域分为，全局作用域和局部作用域。全局变量拥有全局作用域，在js代码中的任何地方都是有定义的。而在函数内声明的变量只是在函数内有定义，这就是局部变量。全局变量顾名思义就是在整个项目中都能被调用，而局部变量就是在函数内定义，且只能在函数内能被使用，函数结束后，局部变量也就消失了。注：如果在函数内声明一个局部变量和全局变量重名，那么局部变量的优先级高于同名的全局变量，全局变量会被局部变量所覆盖。为什么局部变量优先级高于同名的全局变量？这就是作用域
2020-06-17 17:26:22
114
原创 关于Ajax的写法
关于Ajax的写法Ajax 即“Asynchronous Javascript And XML " (异步JavaScript 和 XML ），能够在无需重新加载整个网页的情况下，更新部分网页（异步更新）。jq请求Ajax类型内容类别解释url地址相对地址/绝对地址例子： url: ‘http://jingdong.index.json’、url: ‘/request/ajaxtest’、url: ‘request/ajaxtest’dataType数据类型
2020-06-15 14:03:19
135
原创 前端必备单词——更新中
这是我在学习前端过程中看到的一些单词，于是就把它们整理起来看熟vuesilent ['saɪlənt]adj.安静的；不吵闹的；沉默的；无言的[例句]She was silent, her eyes downcast.她两眼低垂，默不出声。config[kən’fɪɡ]n. 配置，布局；显示配置信息命令option['ɒpʃ(ə)n]vt. 使最优化，使尽可能有效...
2020-05-06 14:22:52
375
原创 drag&&drop
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{margin: 0; padding: 0;} #laji li{width: 100px; height: 50px; displ...
2020-03-29 17:11:46
74
原创 轮播图
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; list-style-type: none; } ...
2020-03-25 21:12:37
71
原创 js之打砖块小游戏
<!DOCTYPE htm<html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } #box { width: 600px; he...
2020-03-25 15:58:58
162
原创 flappybird源代码
flappybird源代码 js<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>pipibird</title> <style type="text/css"> * { margin: 0; padding: 0...
2020-03-20 15:32:06
1864
原创 小白之js秒表
学了这么就网页设计，第一次很有成就感的作出自己的作品。对于新手小白我想说，一开始的时候，跟着视频学总感觉打出的代码和视频里的一样，但是就是运行不出效果。我想提的建议是：你应该是某些小细节没有注意到，比如某个关键 词打错了。某句语句不完整。对着教学视频一句一句代码的校对，不要粗心大意错过每一个你觉得绝对不可能出错的细节。这样你一定能实现你所有的效果。<!DOCTYPE html...
2019-11-04 13:34:43
121
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人