- 博客(62)
- 收藏
- 关注
原创 Markdown的基本语法知识
你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客
2022-09-06 09:28:59
243
原创 改变单选框样式
也可以用自定义图片input[type='radio']:after { width: 15px; height: 15px; border-radius: 15px; top: -2px; left: -1px; position: relative; background-color: #d1d3d1; content: ''; displa
2022-01-16 14:58:46
402
原创 APP中打开调试面板
首页引入一下代码<script src='https://cdn.bootcss.com/vConsole/3.3.2/vconsole.min.js'></script><script type="text/javascript"> window.vConsole = new window.VConsole();</script>
2022-01-14 11:24:11
384
转载 一文帮你解决 90% 的 JS 手写题
1.call的实现第一个参数为null或者undefined时,this指向全局对象window,值为原始值的指向该原始值的自动包装对象,如 String、Number、Boolean为了避免函数名与上下文(context)的属性发生冲突,使用Symbol类型作为唯一值将函数作为传入的上下文(context)属性执行函数执行完成后删除该属性返回执行结果Function.prototype.myCall = function(context,...args){ let cxt = co
2021-11-30 16:11:24
164
转载 30+ 个工作中常用到的前端小知识
1. JS为什么单线程一个简单的原因就是,js在设计之初只是进行一些简单的表单校验,这完全不需要多线程,单线程完全可以胜任这项工作。即便后来前端发展迅速,承载的能力越来越多,也没有发展到非多线程不可的程度。而且还有一个主要的原因,设想一下,如果js是多线程的,在运行时多个线程同时对DOM元素进行操作,那具体以哪个线程为主就是个问题了,线程的调度问题是一个比较复杂的问题。HTML5新的标准中允许使用new Worker的方式来开启一个新的线程,去运行一段单独的js文件脚本,但是在这个新线程中严
2021-11-30 14:40:05
184
转载 VS Code 快捷键
尽管我在VS Code中经常使用许多快捷方式,以下快捷方式可能会派上用场,但我经常忘记它们的存在。我制作了一些GIF,以便更好地记住它们。也许这里面也有一些快捷方式你也不记得了,但是却很有用。VSCode 中的每个命令都可以通过 CTRL+SHIFT+P (MAC COMMAND+SHIFT+P) 搜索命令提示符执行,但是知道直接的快捷方式会可能会更快。下面的Gif是我在 Windows 环境中的 VSCode 制作的,但是我提升了一个表格,其中显示了每个命令在 Windows 和 Mac 上的快捷方式
2021-08-10 11:15:44
365
原创 VS Code 常用插件
1. VS Code 的中文(简体)语言包2. 自动闭合标签3. 标签重命名 修改首标签 闭合标签自动修改4. UI-颜色主题5. 鼠标悬停在元素的类名或元素ID上,就可以看到应用于这个元素的 CSS 规则6. 个人喜欢的主题其他: Night Owl, Pink Cat Boo, Panda Syntax, Mini Dark, Gatito Theme, One Monokai7. less 插件8. ES6 代码片段提示9. 服务器打开项目10. 默认浏览器打
2021-08-05 17:17:11
315
转载 Fiddler抓包工具总结
转载地址 :https://www.cnblogs.com/yyhh/p/5140852.htmlFiddler抓包工具总结序章Fiddler是一个蛮好用的抓包工具,可以将网络传输发送与接受的数据包进行截获、重发、编辑、转存等操作。也可以用来检测网络安全。反正好处多多,举之不尽呀!当年学习的时候也蛮费劲,一些蛮实用隐藏的小功能用了之后就忘记了,每次去网站上找也很麻烦,所以搜集各大网络的资料,总结了一些常用的功能。Fiddler 下载地址 :https://www.telerik.com/downlo
2021-07-30 09:10:15
361
转载 Vue3中的ref和reactive详解扩展
Vue3中的ref和reactive详解扩展一、ref和reactive死死记住:ref本质也是reactive,ref(obj)等价于reactive({value: obj})vue3中实现响应式数据的方法是就是使用ref和reactive,所谓响应式就是界面和数据同步,能实现实时更新vue2中响应式是通过defineProperty实现的,vue3中是通过ES6的Proxy来实现的1.reactivereactive的参数必须是一个对象,包括json数据和数组都可以,否则不具有
2021-07-09 11:22:07
7724
2
原创 js计算两个日期之间的天数
/** * 计算两个日期之间的天数 * date1 开始日期 yyyy-MM-dd * date2 结束日期 yyyy-MM-dd * 如果日期相同 返回一天 开始日期大于结束日期,返回0 */function getDaysBetween(date1,date2){ var startDate = Date.parse(date1); var endDate = Date.parse(date2); if (startDate>endDate){
2021-06-04 16:34:10
10870
转载 Vue中 watch的用法
有以下代码<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p></div> new Vue({ el: '#root', data: { firstName: 'Dawei', lastName: 'Lou', fullName:
2021-03-23 09:07:47
127
原创 js获取地址?后面的值
var url = 'https://editor.csdn.net/md?articleId=11697526&a=5&b=10'function fn(url) { var obj = {} var arr = url.split("?")[1].split("&") arr.forEach(v => obj[v.split("=")[0]]=v.split("=")[1]); return obj }console.log(fn(url))
2021-03-12 15:34:15
606
原创 小程序封装请求接口
request.jsvar md5 = require('md5.js');var signJs = require('sign.js');//自己写的方法 // 同时发送异步代码的次数let ajaxTimes=0;export const request=(params)=>{ //给参数加上sign验签 var dataJson = signJs.getSign(params)ajaxTimes++; // 显示加载中 效果 wx.showLoading({
2021-03-11 16:24:23
102
转载 H5页面放大镜效果
<!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>Document&l
2021-03-09 10:11:25
600
原创 H5列表左滑效果
效果如图<!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>Docu
2021-03-08 15:58:47
312
原创 new在执行时会做四件事情
在内存中创建一个新的空对象。让this指向这个新的对象。执行构造函数里面的代码,给这个新对象添加属性和方法。返回这个新对象(所以构造函数里面不需要return)。
2021-03-08 15:26:58
383
原创 v-if /v-show区别
v-if是否渲染这个标签v-if是动态的向DOM树内添加或者删除DOM元素v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译;,v-if有更高的切换消耗,不适合做频繁的切换v-showdisplay控制node/blockv-show是通过设置DOM元素的display样式属性控制显隐,v-show只是简单的基于css切换;v-show是在任何条件下(首..
2021-03-08 11:50:40
84
原创 vue路由传参的三种基本方式
先有如下场景 点击当前页的某个按钮跳转到另外一个页面去,并将某个值带过去<div class="examine" @click="insurance(2)">查看详情</div>第一种方法 页面刷新数据不会丢失methods:{ insurance(id) { //直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/particulars/${id}`,
2021-03-08 11:50:00
115
原创 输入网址浏览器都干了什么
第一步 浏览器查找该域名的 IP 地址第二步 浏览器根据解析得到的IP地址向 web 服务器发送一个 HTTP 请求第三步 服务器收到请求并进行处理第四步 服务器返回一个响应第五步 浏览器对该响应进行解码,渲染显示。第六步 页面显示完成后,浏览器发送异步请求。...
2021-03-08 11:22:38
124
原创 移动端一像素问题
viewport的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长。# 如何解决1px问题1. 媒体查询利用设备像素比缩放,设置小数像素IOS8下已经支持带小数的px值, media query对应devicePixelRatio有个查询值-webkit-min-device..
2021-03-08 11:20:25
232
原创 防抖节流
防抖节流函数防抖和函数节流都是防止某一时间频繁触发,但是这两兄弟之间的特性却不一样。search搜索联想,用户在不断输入值时,用防抖来节约请求资源。window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次函数防抖是某一段时间内只执行一次,而函数节流是间隔时间执行。鼠标不断点击触发,mousedown(单位时间内只触发一次)监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断函数防抖的实现原理:概念: 在事件被触发
2021-03-08 11:19:17
105
原创 jsonp原理(面试会碰到)
虽然这个方案现在用的越来越少,但是面试还是挺爱问的script标签的src属性,可以发送请求,没有同源限制和Ajax一点关系都木有:network中选到xhr分类,什么都看不到本质是动态创建了一个script标签添加到页面顶部src设置的:接口地址+发送的数据+callback=xxx请求成功之后会被自动移除服务器返回了:函数的调用函数名({对象})内容返回到浏览器之后会被解析为js,调用定义好的函数,传入了一个参数...
2021-03-08 11:18:22
181
原创 JS深拷贝和浅拷贝的实现
Object.assign()实现浅拷贝及一层的深拷贝使用JSON.stringify和JSON.parse实现深拷贝:JSON.stringify把对象转成字符串,再用JSON.parse把字符串转成新的对象;热门的函数库lodash,也有提供_.cloneDeep用来做深拷贝;jquery 提供一个$.extend可以用来做深拷贝;使用Object.create()方法直接使用var newObj = Object.create(oldObj),可以达到深拷贝的效果。/*..
2021-03-08 11:17:52
83
原创 前端优化的方案
一.css优化1.打包css文件2.易维护:少用ID, !important,多用class3.样式用外部样式,最好不要用行间样式,内嵌样式4.选择器的层级最好不要超过4层,减少层级可减少渲染速度5.可读性:类名的命名规范6.可扩展性:css的整体设计,公用的样式抽取,减少冗余的,重复的样式7.样式的引入放在头部二.js优化1.打包js2.减少全局变量,全局方法的定义3.减少闭包的使用,避免多层循环的嵌套4.减少dom节点的事件绑定5.删除多余的代码,公用方法的抽取6.减少htt
2021-03-08 11:15:02
223
转载 webpack 简介
文档视频地址:https://www.bilibili.com/video/BV1e7411j7T5?p=40&spm_id_from=pageDriver1.1 webpack 是什么webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler)。在webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle)。1.2 webpack 五个核
2021-03-05 15:49:39
190
1
转载 JS语法 ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性
作者:小豪看世界https://segmentfault.com/a/1190000039272641本文集合了 ES6 至 ES11 常用到的特性,包括还在规划的 ES12,只列举大概使用,详细介绍的话内容量将十分巨大.。PS:使用新特性需要使用最新版的 bable 就行转义新特性ES6(2015)1. 类(class)class Man { constructor(name) { this.name = '小豪'; } console() { console.
2021-03-02 09:44:27
3177
原创 H5拖拽盒子
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>拖拽盒子</title> <style> body { he
2021-02-26 18:24:14
147
原创 H5页面 左右拉伸内容区域
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>resize</
2021-02-26 18:21:48
520
原创 js上传图片的三种方式 可预览
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>上传图片</title></head><body> <div style="margin-left: 30px; margin-top: 30px"> <div style="position: absolut
2021-02-03 14:00:52
211
转载 JavaScript 优化小技巧 简洁的 JS 代码片段
一 if多条件判断// 冗余if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {}// 简洁if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {}二 if…else…// 冗余let test: boolean;if (x > 100) { test = true;} else { test = false;}// 简洁let t.
2021-02-03 09:35:20
182
原创 盒子左上角三角形 css
.pcode { position:relative; width: 100%; background-color: #ccc; height: 70px;}.picon { display: inline-block; width: 0; height: 0; border-top: 37px solid #f00; border-right: 37px solid transparent; position:
2021-01-11 15:45:50
1126
原创 vue -路由 -代理
一 路由原理:(1)hash路由 ==> location.hash切换 window.onhashchange监听路径的切换(2)history路由 ==> history.pushState切换 window.onpopstate 监听路径的切换二 路由拦截:router.beforeEach((to, from, next) => { // 需要拦截的路由集合 const auth = ['/center', '/order', '
2021-01-06 14:37:46
628
1
转载 vue 中axios 发post 请求 后端接受不到参数 如何处理
转发链接问题场景场景很简单,就是一个正常 axios post 请求:axios({ headers: { 'deviceCode': 'A95ZEF1-47B5-AC90BF3' }, method: 'post', url: '/api/lockServer/search', data: { username, pwd }})后台说没有接收到你的传参。这就有点奇怪了,我看了一下浏览器的请求信
2020-12-22 10:43:24
325
原创 vue中设置eslint 保存自动修正代码格式不规范(单双引号 空格等
安装插件ESLint文件 — 首选项 — 设置 — 在settings.json 中添加以下代码即可可能会出现没效果现象 升级vscode"editor.codeActionsOnSave": { "source.fixAll": true },或者 在项目中创建 vue.config.js 通过关闭eslint 完成项目后 在命令输入 npm run lint 来修正代码格式不规范关闭eslintmodule.exports = { lintOnS.
2020-12-15 15:25:58
1562
原创 vue中使用swiper
对swiper的简单封装(可复用) 主要是在vue中使用swiper引入所需文件 swiper的css js vue.js<div id="app"><!-- 用key 或者v-if 都可 --> <!-- <swiper :key="dataList.length"> <div class="swiper-slide" v-for="item in dataList"> {{item}} </.
2020-12-15 14:19:27
475
原创 Vue中自定义指令
简单的例子 <div id="app"> <div v-bgcolor="'yellow'">111</div> <div v-bgcolor="'blue'">222</div> <div v-bgcolor="myColor">333</div> </div><script src="https://unpkg.com/vue/dist/vue.js">&..
2020-12-14 15:34:15
95
原创 小程序 获取ip地址
wx.request({ url: 'http://ip-api.com/json', success: (e)=> { console.log('ip: ',e.data.query) } })
2020-12-11 13:41:09
2202
原创 改变单选框的背景颜色
上图 看效果<input type="radio" disabled/><input type="radio" disabled class="input" />.input[type=radio] { cursor: pointer; font-size: 14px; width: 16px; height: 16px; position: relative; .
2020-10-22 17:05:03
1852
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人