Lenny-zlp-CSDN博客

原创 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

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"> <!-- <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

空空如也

空空如也