
前端开发技巧与习惯
文章平均质量分 94
前端开发技巧包括代码规范、模块化与组件化、性能优化等,良好习惯如版本控制、测试和持续学习是提升效率和项目质量的关键。
DTcode7
专注于《前端开发》、《微信小程序》领域 ,同时WEB开发、小程序开发、AIGC、IT信息化等领域摸爬滚打多年,深谙网页js,上班摸鱼、自动化打工等领域。略懂的前端开发、数据库、油猴脚本、Vue等框架,具备一定实操经验。让学习成为一种习惯,与君共享,携手共进!
我没有把枪口对向妇孺,而是选择对向自己。紧紧握住的是人性中的野蛮,涌溅出的是精神之海的浊秽。风雨大作之后呆滞的眼神是我最后倔强。让我们把握住贤者时间疯狂学习,努力提升自己!
展开
-
探索微软Edge开发者工具:优化前端开发的艺术与科学
微软Edge开发者工具不仅是调试和优化的平台,更是学习和实验的沙盒。随着Web技术的不断发展,其功能也在不断进化。鼓励大家积极尝试新特性,分享使用心得,共同推进前端开发的边界。无论是通过社区论坛、官方文档,还是参与开源项目,持续学习与交流是成为顶尖前端专家的不二法门。在探索Edge DevTools的旅途中,让我们携手前行,不断追求卓越的Web开发实践。讨论点:在你的实际工作中,Edge开发者工具哪些功能最让你惊喜?你有哪些独到的使用技巧愿意与大家分享?原创 2024-05-22 14:30:00 · 1755 阅读 · 0 评论 -
深入探索前端调试神器vConsole
vConsole作为一款前端调试神器,为前端开发者提供了一个便捷的调试解决方案。通过本文的介绍和示例,相信你已经对vConsole有了更深入的了解。然而,vConsole的功能远不止于此,它还有许多高级用法和技巧等待你去发掘。讨论:你在前端开发中是如何使用vConsole的?你有没有发现vConsole的一些隐藏功能或技巧?欢迎在评论区分享你的经验和见解!💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!原创 2024-05-17 08:55:58 · 7263 阅读 · 0 评论 -
vue引用阿里彩色图标(symbol引用)
引用阿里图标库的方式有三种,前两种都只能引入单色的图标,对于强迫症简直了,所以俺参考其他大佬的博客,学习了如何通过symbol引用彩色的图标第一步:在阿里图标库选择好自己要的图标,加入购物车,添加至项目,下载到本地这样就把样式文件下载到本地了第二步:在vue项目里面创建对应的inconfont文件夹将这些下载的样式文件放到新建的文件里,方便项目中引用第三步:在main.js中,引入这几个文件(前两个是阿里图标文件,最后一个可以不要,只是自己设置的基础图标宽高等),目的是为了让全...原创 2021-09-16 09:58:40 · 5966 阅读 · 2 评论 -
vue引用阿里彩色图标(symbol引用)-封装自己的icon组件
关于如何引入彩色的阿里图标,请参考另一篇博客:vue引用阿里彩色图标(symbol引用)_五速无头怪的博客-CSDN博客https://blog.csdn.net/black_cat7/article/details/120322471接下来要封装出自己的icon组件,方便使用。第一步:在components文件中新建一个组件(我的叫cjIcon.vue)<template> <!-- symbol方式引用彩色图标,就得这么写 --> <!-- :clas原创 2021-09-16 11:14:39 · 856 阅读 · 0 评论 -
【Markdown笔记】——设置markdown中文字的颜色
Markdown是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。它使用简单的符号和语法来表示标题、列表、链接、图片等元素,使得文档的格式和内容能够清晰地分离。原创 2024-04-29 16:01:53 · 6133 阅读 · 0 评论 -
ES6 解构赋值(变量声明的时候加花括号)
ES6语法中,声明变量时不再只能一个一个来赋值了,可以批量赋值了哦。原创 2021-09-15 10:21:55 · 2132 阅读 · 0 评论 -
css中的var变量定义——是css不是js哦
在CSS中,变量是一个非常实用的工具,它们能够帮助我们更有效地管理和重复使用各种样式。这些变量(也被称为CSS自定义属性)使我们能够为特定的值赋予一个名字,然后在样式表中的任何地方重复使用这个名字。CSS变量以两个破折号-- 开始,这让我们可以轻松地将它们与常规属性区分开来。这篇文章会带你了解如何定义和使用CSS-Var变量,以及它们在编写样式时的优势。css变量是通过--*语法定义的,其中表示我们为变量定义的名称。例如,我们可以定义一个名为的变量,并为其设置一个颜色值:css代码在上面的代码中,原创 2024-04-11 10:18:02 · 1062 阅读 · 0 评论 -
Vue的学习之旅-part1
Vue 读作 /vju:/ 不要读成v u eVuex 的x读作叉 不要读成埃克斯博主DTcode7带您 溺亖在知识的海洋里,嘿嘿嘿.~🐒 个人主页——DTcode7 的博客🐒《微信小程序相关博客》《Vue相关博客》《前端开发习惯与小技巧相关博客》《AIGC相关博客》《photoshop相关博客》😚 吾辈才疏学浅,摹写之作,恐有瑕疵。望诸君海涵赐教。望轻喷,嘤嘤嘤 🙈🕍 愿斯文对汝有所裨益,纵其简陋未及渊博,亦足以略尽绵薄之力。倘若尚存阙漏,敬请不吝斧正,俾便精进!原创 2024-04-03 10:35:46 · 1191 阅读 · 0 评论 -
Node.js-知识点学习总结归纳
对于开发者来说,熟悉多种运行方式将有助于在不同的开发环境中灵活工作。请注意,确保在运行之前,您的计算机上已经正确安装了Node.js,并且您具有足够的权限来访问和执行该文件。当然,在VSCode中,您也可以通过内置的终端来运行Node.js文件。文件中的代码,并在终端中显示输出结果。可以运行,但是其它的命令无法运行。,并在其中编写您的代码逻辑。Node.js将执行。原创 2024-03-30 16:00:00 · 623 阅读 · 0 评论 -
git控制台-分支的合并与推送
git控制台,提交代码到远程仓库原创 2024-03-28 11:52:11 · 1053 阅读 · 0 评论 -
git的使用日常习惯规范与一些特殊操作
git提交代码到远程仓库的一些规范操作和技巧介绍原创 2024-03-28 09:28:31 · 775 阅读 · 0 评论 -
git最常用的命令与快捷操作说明
直接用git pull origin 远程分支名 不写本地分支名字,这样来拉取(将远程分支拉到当前本地分支),有可能就ok了。如果提示有冲突,就可以按照上述:【特殊提示界面】-【git mergetool可视化工具】来处理。当本地分支和远程分支代码版本号差异过大,会提示无法快速合并,那就不要指定分支拉取,git checkout -b 新分支名 在本地创建一个新的分支。创建一个新本地分支并且直接切换到这个分支(快捷操作)推送到当前所在分支的云端对应分支去。原创 2024-03-27 14:14:26 · 1398 阅读 · 0 评论 -
git提交-分支开发合并-控制台操作
(vim编辑器是Linux系统中必备的编辑器,Git工具由Linux创始人写出来的,所有就把vim编辑器也用在Git上)提示你说要填写提交备注,你没有写备注,要你给个说法。根据需求合并完冲突代码之后,命令行界面中的分支名后面会有个(mergeing)标识,表示正在合并中,如果没有commit提交,我们也可以输入 git merge --continue 继续合并冲突操作。当commit(提交)比较多,git log 的内容在一页显示不完整,满屏放不下的时候,就会显示冒号。原创 2024-03-27 11:56:52 · 1581 阅读 · 0 评论 -
前端koa搭建服务器,不用后端接口也能跑啦(妈妈再也不用担心我不能自己返回数据了)——part1
Koa 是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。通过利用 async 函数,Koa 帮你丢弃回调函数,并有力地增强错误处理。Koa 并没有捆绑任何中间件, 而是提供了一套优雅的方法,帮助您快速而愉快地编写服务端应用程序。简而言之,koa可以让前端自己搭建一个服务器模拟后端接口,返回数据进行调试。KOA官网。原创 2023-10-23 18:15:38 · 2045 阅读 · 0 评论 -
直接在网页上获取【微信公众号】用户的【openId】
公众号openId是用户在当前公众号下的唯一标识(‘身份证’),就是说通过这个openId,就能区分在这个公众号下具体是哪个用户。1.2) 通过授权code获取用户信息(用户信息包含两种:1)只取OpenId,2)取用户相关头像、昵称。获取微信公众号用户的OpenId(用户关注公众号后,用户在公众号的唯一凭证),有两种方法。1.1)获取网页授权code(分为静默授权,非静默授权(需用户确认))2.4)按下F12打开调试模式(或者鼠标右键-检查),选中某个用户。2)通过公众号网页后台用户。原创 2023-10-20 16:30:57 · 3255 阅读 · 4 评论 -
浏览器中XPath的使用
XPath (XML Path Language) 是一门在 XML 文档中查找信息的语言,可用来在 XML 文档中对元素和属性进行遍历。XPath定位在爬虫和自动化测试中都比较常用,通过使用路径表达式来选取 XML 文档中的节点或者节点集,熟练掌握XPath可以极大提高提取数据的效率。因为XPath解析数据,是基于元素(Element)的树形结构,所以学习XPath前,先了解一下html的结构及常用标签。1.元素属性,快速定位,唯一属性: //*[@id="images"]原创 2023-10-10 18:40:20 · 1857 阅读 · 0 评论 -
浏览器【控制台】的小妙招-dom复制
控制台中可以看到在选中dom元素之后,鼠标右键的菜单中,复制功能扩展开有以下几项:复制元素复制outerHTML复制selector复制JS路径复制样式复制XPath复制完整的XPath原创 2023-04-26 17:23:53 · 7788 阅读 · 1 评论 -
excel处理日期格式相关问题-日期隐藏时间
excel表格中的日期格式显示错误:通过设置【单元格格式】,改编时间显示格式这样,就能正常显示日期了但是,会有个问题:日期中隐藏了时间段想要把时间给拆出来,就需要使用【分列】可以参考这篇博客:如何在excel去掉日期后边的时间-百度经验 (baidu.com)https://jingyan.baidu.com/article/d5a880eb5ad2a253f047cc35.html分列时,记得选择上【空格】分列,将日期和时间拆成两列,效果如下:这...原创 2021-12-13 18:22:28 · 4975 阅读 · 1 评论 -
关于fidders抓包显示sessionOut=true的问题-页面缓存问题
游览器为了节约资源,是会缓存页面的,但这也会带来一个问题,那就是因为缓存了页面,你再次打开页面它不会发送请求(游览器觉得页面没有变化),导致你页面是打开了,但是你的登录状态出现了问题(因为没有发送登录请求,你的登录状态没有更新),也就是为什么fidders抓包,会显示sessionOut=true =====> 登录状态过期/未登录网上有很多处理页面缓存的方法,比如:1.打包的时候把html打包成jsp,然后添加一些东西(我没试过,俺也想学一下)2.在meta里添加一些东西...原创 2021-11-16 09:50:39 · 1004 阅读 · 1 评论 -
vscode配置云端同步插件——code settings sync
更换开发设备后,新安装的vscode软件,是没有原先的配置的,诸如快捷键,快捷代码段生成、安装的各个插件,插件的配置等都木大了,开发起来会很别扭,网上最多的就是去安装一个叫做Settings Sync的插件,关联你的配置文件到github上,但是,github用起来间歇性掉线,持续性无法访问,还是用国内的gitee(码云)比较安心所以,接下来,针对插件:code settings sync,介绍如何将vscode插件、配置信息全部同步到gitee上,即使更换设备后,也能快速拉去同步常用配置.原创 2021-11-03 16:07:16 · 4446 阅读 · 12 评论 -
vscode插件配置settings.js留底备份
此博客作为个人vscode插件的配置文件留底,同时也对其中一些插件的配置进行说明,方便更改效果详细的插件名称与效果图可参考这篇博客:vscode插件使用留底_五速无头怪的博客-CSDN博客https://blog.csdn.net/black_cat7/article/details/120058093完整的配置setting.json文件放在文末,有需要自取~部分插件配置介绍Better Comments...原创 2021-11-03 10:45:55 · 1961 阅读 · 0 评论 -
elementUI的loading效果——防止用户在页面运算时乱点
组件 | Elementhttps://element.eleme.cn/#/zh-CN/component/loading#optionselementUI的loading官网文档,这里我着重使用Loading.service(options);方法具体使用方法:第一步:引入loading// ?引入elementUI的loading效果,用于防止图片处理过慢,用户乱点import { Loading } from 'element-ui'第二步:在需要loading的地方调用原创 2021-11-02 14:37:10 · 2221 阅读 · 0 评论 -
vscode快捷键多行批量操作-链式操作
目录一:需要使用到的两个快捷键ctrl+alt+ 方向键 ==>多行选择ctrl+alt+d ==>将下一个查找匹配项添加到选择二:操作演示当遇到很多行不规则数据需要批量处理的时候,一行一行的复制粘贴很麻烦,因此,需要使用链式操作来快速完成。一:需要使用到的两个快捷键ctrl+alt+ 方向键 ==>多行选择ctrl+alt+d ==>将下一个查找匹配项添加到选择注意,我有修改过vscode的快捷,所以跟你默认的会不太一样,我把...原创 2021-09-13 16:50:20 · 8534 阅读 · 6 评论 -
关于使用Typora制作接口文档的那些事儿-markDown技巧
程序开发过程中,团队协作是常态,有人负责前端,有人负责后端,那么前后端交互时的接口文档,就是一个相当关键的【沟通桥梁】,接口文档最常见(仅限于我这种弱智小白的见识范围)的就是markdown文档(.md文件),接下来记录一下我自己用Typora工具制作markDown接口文档的习惯与技巧markDown基础常用快捷键1.段落标题H1~H6 ctrl+数字1~数字6注意:这里不知道为什么,输入的数字不能用小键盘,否则没有效果2.高亮文字 ==文字==要先到【偏好设置】...原创 2021-10-18 17:43:47 · 2728 阅读 · 0 评论 -
Vscode快捷键操作-常用
推荐技术胖的公众号推文:都是常用的,我截取了对我来说更常用的并做详细说明动图演示23个鲜为人知的VSCode快捷键https://mp.weixin.qq.com/s/J9HfKoBVryMtjvHQUrqugQ这里我就不去自己录制gif了,直接用【技术胖】的了,懒狗,请见谅目录快捷键操作ctrl+p 搜索文件,并跳转到该页面ctrl+g 输入行号进【行定位】alt+z 开启超过一行长度,自动换行功能F8 定位错误、警告shift+alt+i 在所选的每一行的末...原创 2021-10-12 09:06:19 · 1762 阅读 · 0 评论 -
微信小程序-封装请求API——原生方式
微信小程序-封装请求API——promise方式_五速无头怪的博客-CSDN博客。小程序如何实现AOP · 语雀 (yuque.com)参考格式:colorUI的社区讨论。原创 2021-10-11 10:04:57 · 2166 阅读 · 0 评论 -
前端base64-file-blob之间的转换
已经有一篇博客介绍这三者的转换了,游览量挺大,可以先去看看base64和file互转_Amy的博客-CSDN博客_base64转file以图片文件为例:应用场景工作中经常遇到需要把图片文件操作之后再上传到服务器(比如,拼接、裁剪、生成预览等),通常操作之后的图片都会变成一个 base64 的字符串,把这个字符串嵌入到 img 标签的 src 属性中就能看到图片了。正常来说也是可以把这个字符串传给服务器存储的,但是图片生成base64字符串后特别特别的长,这样存取的话非常慢。所以我们需要把它转回成文件对象原创 2021-10-08 16:56:26 · 2926 阅读 · 0 评论 -
封装一个前端h5用来【下载文件】的方法-引入即用
封装函数是一种编程技巧,它允许开发者将一段特定的代码逻辑打包成一个独立的单元,以便在程序的其他地方重复使用。这样做的好处是可以减少代码冗余,提高代码的可读性和可维护性。以下是如何优雅地封装wx.requestrequestwx.requestresolverejectwx.login封装函数是提高开发效率和代码质量的有效手段。通过合理设计和使用封装函数,可以大大提升开发的效率和程序的稳定性。原创 2021-10-08 14:55:57 · 474 阅读 · 0 评论 -
批量获取目录下的文件名称(cmd方法与bat方法)
实际上,cmd文件和bat文件是一样的.bat尾缀特指.bat文件,是DOS和Windows中的批处理文件。(在Windows中与.cmd文件等同,都是由cmd.exe解释执行的cmd文件是Windows中的一个应用程序cmd.exe例如:批量获取文件名称方法一:bat文件DIR *.* /B> 目录.TXT双击执行:方法二:cmd文件上面说了,cmd文件和bat文件本质上一样,所以完全可以用cmd执行这段代码...原创 2021-10-08 11:48:55 · 4811 阅读 · 0 评论 -
Vuex-基础使用
this.$store.commit('方法名','载荷')Vuex,一个专为 Vue.js 应用程序开发的状态管理模式,用来处理在 vue 各个组件之间传值的痛苦。比如:在父子、兄弟组件,传值可能会很方便,但是如果是没有关联的组件之间要使用同一组数据,就显得及其蛋疼。而 vuex 就很好的解决了这种问题。 关于如何安装vuex,这里不做赘述,请参考官方文档State | Vuex (vuejs.org)https://vuex.vuejs.org/zh/guid...原创 2021-09-29 10:37:00 · 240 阅读 · 0 评论 -
微信小程序-图片宽高自适应设置
微信小程序中,有很做组件都是有默认宽高的,比如,image组件默认宽度320px、⾼度240px,这些默认设置常常会对我们的页面布局造成影响 <!-- mode="widthFix" 让图片占满宽度,等比例缩放高度 --> <image src="xxxx" mode="widthFix"></image>所以,在使用image标签的时候,最常用的方法就是设置其 mode,例如用widthFix,...原创 2021-09-26 15:25:38 · 13218 阅读 · 0 评论 -
封装、暴露方法供全局使用
export暴露封装的方法、import引用封装的方法一般我们会创建一个文件夹,里面放封装的方法,简化代码(比如封装一下请求API、时间格式化函数等)微信小程序的请求API封装可以看下这篇博客:微信小程序-封装请求API_五速无头怪的博客-CSDN博客https://blog.csdn.net/black_cat7/article/details/120451986在最外层目录下创建一个utils文件夹,以util.js文件为例你可以直接声明一个函数,然后当场用export 把它暴露出.原创 2021-09-24 16:11:54 · 751 阅读 · 0 评论 -
微信小程序-封装请求API——promise方式
微信小程序原生的请求API就是wx.requestwx.request({ url: 'example.php', //仅为示例,并非真实的接口地址 data: { x: '', y: '' }, header: { 'content-type': 'application/json' // 默认值 }, success (res) { console.log(res.data) }})有时候不能很好的适配我们的开发需求,比如我们要加一原创 2021-09-24 12:00:34 · 10525 阅读 · 4 评论 -
前端开发-快速编写页面样式的进阶技巧
目录首先,在写html、wxml时,带上样式类名然后,利用vscode插件【CSS Tree】,来快速生成对应的类名最后,对照着html格式,来写样式文件对于俺这种木得票子的打工仔,缺少扩展显示器等外设,写代码、切文档、改样式需要反复缩放界面,很烦~总结一些开发中的技巧,提升开发速度和开发舒适度首先,在写html、wxml时,带上样式类名就像这样,在构建html的时候就同时把样式类名写好,静态页面编写的时候,可以随便写一些填充内容来占位例如:想要下面这样的效果,就先搭建静原创 2021-09-24 11:18:27 · 2912 阅读 · 0 评论