- 博客(57)
- 收藏
- 关注
RSS订阅
原创 前端代码——前端代码规范（含html、css、javascript、vue等）
前端代码规范代码提交规范HTML规范CSS规范JavaScript规范注释命名规范运算符其他：Vue 代码规范常规vuex代码提交规范每次提交代码时，commit按规范进行备注，如：本次提交新增了新功能：feat: 新增xx功能codeinfofeat: msg新功能featurefix: msg修复bugmerge: msgmergedocs: msg文档修改style: msg格式，不影响代码运行的变动refactor: msg重构即不
2021-04-19 19:18:54
6130
11
原创 前端Javascript代码优化（如何写出优雅简洁的代码）
高效编写Javascript代码的技巧1. 对不允许更改的常量声明——使用“const”而不是“var”2. 对允许更改的变量——使用“let”代替“var”3. 声明对象——使用字面量{}4. 声明数组——使用字面量[]5. 连接字符串——使用模板字符串``6. 使用对象方法的简写——fn(){}7.1. 对不允许更改的常量声明——使用“const”而不是“var”// badvar a = 1;// goodconst a = 1;2. 对允许更改的变量——使用“let”代替“var”/
2021-03-16 17:06:54
1662
原创 面试题之JS逻辑题
1.计算2的n次幂，n可输入，n为自然数。var n = parseInt(window.prompt('input'));var mul = 1;for (var i = 0; i < n; i++) { mul *= 2;}document.write(mul);2.计算n的阶乘，n可输入（递归）5! = 5 * 4 * 3 * 2 * 1;4! = 4 * 3...
2020-03-19 11:14:54
1654
原创 Github Emoji——Github表情大全
People???? ???? ???? ???? ☺️ ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ???? ?
2021-07-28 17:23:41
3900
原创 CSS3——实现多种背景动态效果
产品：那个…能不能给我画条中国龙？能不能给我画个世界地图？能不能给我弄个3D360°旋转翻滚？…然后开发只能硬着头皮去干了，淦出来后，产品又说，怎么效果不怎么好啊，再改改…然后：...
2021-06-23 13:39:34
601
原创 git——.gitignore添加忽略文件不生效
使用git rm:如果您已添加要跟踪的文件,则需要将其从跟踪中删除:git rm env.local --cachedgit rm env.staging --cachedgit commit -m “Stopped tracking env.local, and env.staging”现在,您应该能够克隆您的分支,而不会跟踪这些文件.注意:请记住,这些文件的内容在您的历史记录中,如果它...
2021-06-23 11:58:06
5451
3
原创 前端面试每日一题——git rebase（含答案）
git rebase先回答git rebase的主要作用：git rebase 都是用于分支合并再回答git rebase的实现流程：git rebase 会先找到两个分支的第一个共同的 commit 祖先记录，然后将提取当前分支这之后的所有 commit 记录，然后将这个 commit 记录添加到目标分支的最新提交后面。经过这个合并后，两个分支合并后的 commit 记录就变为了线性的记录了。...
2021-06-13 17:01:45
324
原创 前端面试每日一题——在Vue中，为什么 data 是一个函数？
在Vue中，为什么 data 是一个函数？先来了解一下对象Object和函数Function的区别：在JS中，对象是引用数据类型，没有作用域，如果两个实例引用同一个对象，当修改其中一个属性值时，另一个实例也会跟着改变函数可以构成一个独立的作用域，可以有属于自己的this指向export default { data(){ return {} }}总结在vue中，组件是会被复用的，而data如果是对象的话，那么变量的作用域都会是同一个，子组件data中的属性值就会互相影响，所以为了
2021-06-10 18:58:53
271
原创 前端面试每日一题——什么是原型链？
什么是原型？在JS中，每个函数在被创建的时候就会有一个 prototype属性，这个属性是一个指针，指向一个对象，而这个对象就是这个函数的原型对象（也就是原型），它是用来共享所有实例的属性和方法的地方，所以原型其实就是函数的伴生体（与生俱来的）var a = [1, 2, 3, 4, 5];a.__proto__ === Array.prototype; // true什么是原型链？原型链，简单理解就是原型组成的链。当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则
2021-06-08 15:05:10
2786
3
原创 vue——强制刷新子组件重新渲染
vue——重新渲染子组件不妥的方式：v-if较好的方式：forceUpdate最好的方法：key不妥的方式：v-if在父组件中，给子组件添加v-if属性<Button v-if="refresh" :data='data' />监听data，当data发生变化时，重新渲染子组件export default { data(){ data: [], refresh: true }, watch:{ data(){ this.refresh = false;
2021-05-06 18:53:05
11325
原创 echarts & vue——echarts图显示隐藏后不显示
踩坑记录echarts图显示隐藏后不显示echarts图显示隐藏后不显示因为大部分项目的需求都存在图的缺省内容，当后端返回空数据时，需要给用户反馈一个缺省提醒，所以一般把echarts图作了显示隐藏的功能那么问题来了，当返回空数据时，先把图隐藏起来，当再次请求到数据并把图进行实例化时，图怎么都显示不出来，控制台上也不报错Markdown将文本转换为 HTML。...
2021-03-05 15:14:57
2312
原创 vue——下拉选择框新增全选选项
下拉选择框新增全选选项elementUI原本组件实现效果实现代码elementUI原本组件elementUI原本组件是没有全选这个选项的实现效果我们要实现的就是把全选选项给它加上实现代码<template> <el-select v-model="selectValue" collapse-tags multiple placeholder="请选择" @change="selectAll" > <el-op
2021-02-15 21:29:07
1340
1
原创 vue——动手完成一个自定义右键菜单组件
动手完成一个自定义右键菜单组件实现效果引入第三方组件父组件子组件实现效果在虚线框内点击任何位置都可以弹出右键菜单，右键菜单的内容是可以自定义的，此处举例：复制、粘贴引入第三方组件引入第三方组件vue-context-menunpm install vue-context-menu父组件<template> <div class="dashboard-container"> <!-- 自定义右键菜单 --> <div class=
2021-02-15 21:16:38
824
原创 vue & swiper——关于与后端交互的几个建议
这里写目录标题建议一建议二建议一请求数据后再初始化swiper实例建议二再次请求数据前最好先停止自动轮播
2021-01-08 17:12:52
280
原创 TypeScript——2021最新学习心得总结
TypeScript未来前端的发展逐步挺近企业级的开发业务，强类型的typescript已经广泛普及使用优势一：类型化思维方式，使得开发更加严谨，提前发现错误，减少改bug事件优势二：类型系统提高了代码可读性，并使维护和重构代码更加容易优势三：补充了接口、枚举等开发大型应用时JS缺失的功能TypeScript环境安装与运行安装：npm install -g typescript初始化生成tsconfig.json配置文件：tsc --init编译成js：tsc ./index.ts
2021-01-06 22:35:48
287
原创 前端面试题——2021最新企业面试题
2021最新企业面试题对MVVM的理解浏览器的渲染机制事件循环机制(Event Loop)宏任务和微任务(先执行微观任务，再执行宏观任务)你对Promise的理解数组的常用方法虚拟DOM的原理为什么操作对象会比操作DOM快vue组件之间的通讯说一下vuex的属性说一下生命周期你用过keepAlive吗？这个有生命周期吗？compenter和watch的区别你是怎么做懒加载的你是怎么进行移动端的设配的（我说rem）你使用rem有遇到过设配问题吗？说一下弹性盒模型vue和react如何选择vue的混入vue的双
2021-01-06 21:58:32
271
原创 CSS——美化全局滚动条
CSS——美化全局滚动条代码效果代码话不多说，直接附上代码：// 美化滚动条::-webkit-scrollbar { width: 10px; height: 10px;}::-webkit-scrollbar-track { width: 6px; background: rgba(#101F1C, 0.1); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em;}
2020-12-30 19:05:58
9447
4
原创 vue & swiper——实时获取当前轮播索引并赋值到data实例中
实时获取当前轮播索引并赋值到data实例中实现功能实现思路实现代码实现功能swiper中，要想获取实时的当前索引，需要在实现思路实现代码
2020-12-30 18:58:25
4229
原创 vue & swiper——使用方法实现可控制的自动轮播
使用方法实现可控制的自动轮播实现功能实现思路实现代码实现功能使用这个控件控制swiper的自动轮播实现思路swiper官网列出了swiper方法：可以使用vue监听器监听是否勾选自动轮播这个按钮如果勾选了就调用this.swiper.startAutoplay();方法如果没有勾选就调用this.swiper.stopAutoplay();方法实现代码 watch: { isAutoChange(val) { if (val) { this.s
2020-12-03 20:29:27
1146
2
原创 你不知道的vue——Cascader级联选择器点击标签选中复选框
Cascader级联选择器点击标签选中复选框element-ui原功能实现效果代码element-ui原功能element-ui的Cascader级联选择器点击标签时是不会选中复选框的，我们想要实现点击标签时也能选中复选框这个效果，那么就要用到一些原生的方法实现效果代码 mounted() { // Cascader 级联选择器: 点击文本就让它自动点击前面的input就可以触发选择。 setInterval(function() { document.query
2020-11-27 13:56:45
1546
1
原创 你不知道的vue——tree组件实现默认禁用选项
tree组件实现默认禁用选项实现效果解决思路代码实现效果作为一个前端狗，需求有多奇葩，开发的脑洞就有多大。先给你们看看产品想实现的功能：既可以实现概况的全选功能，又要实现只选中概况，这明显是矛盾的但是问题来了，这个效果图却可以实现这个需求，神奇不神奇！！然后细细研究发现，虽然查看浏览是不能点击的，但是他里面的状态是可以更改的，这压根就是一个禁用的复选框覆盖掉了查看浏览这个节点！！解决思路所以接下来的事情就好办了，只要我们把查看浏览这个复选框用一个提前写好的禁用复选框覆盖掉就好了那么哪里来
2020-11-25 18:50:26
2899
原创 你不知道的vue——显示输入框时，光标自动聚焦
v-focus属性<el-input v-if="isShow" v-model="data" v-focus placeholder="请输入内容"></el-input>directives自定义指令directives: { focus: { inserted: function (el) { el.children[0].focus() } } }不要使用v-show，使.
2020-11-23 19:53:54
1332
原创 小程序的四种跳转方式（官方文档）
小程序的四种跳转方式wx.switchTab(Object object)wx.redirectTo(Object object)wx.navigateTo(Object object)wx.reLaunch(Object object)wx.switchTab(Object object)wx.redirectTo(Object object)wx.navigateTo(Object object)wx.reLaunch(Object object)...
2020-10-29 09:16:31
803
原创 JS高级——深入理解实现继承的方式和原理
JS高级——深入理解实现继承的方式和原理什么是继承？常用的继承(1) 混入式继承(2) 原型式继承(3) 原型链继承(4) 借用构造函数实现继承(5) 组合继承(6) class实现继承什么是继承？继承就是子类获取父类的成员(属性和方法)常用的继承(1) 混入式继承适用于单个普通对象的情况(浅拷贝和深拷贝)浅拷贝: for…in深拷贝: Object.assign() let o = { name: "zs", age:
2020-06-23 21:08:50
341
原创 原生JS案例（面向对象）——按住鼠标实现左右拖动列表
按住鼠标实现左右拖动列表需求基本结构效果图HTML页面CSS样式实现思路原生JS最终效果实际应用需求鼠标在有色部分按下后, 可以对有颜色的部分进行左右拖拽基本结构效果图HTML页面id为box的一个对象 <div class="box" id="box"> <ul class="ul-list"> <li>1</li> <li>2</li>
2020-06-23 19:48:55
1983
原创 原生JS案例——获取随机验证码
获取随机验证码要求具体效果实现原理页面准备原生JS实现代码要求当点击获取验证码按钮时, 弹出由英文字母或数字随机组合而成的四个字符串具体效果实现原理给按钮绑定点击事件把所有字母和数字存到变量里创建一个空字符串, 并循环4次, 每一次插入一个随机的英文字母或数字把字符串渲染到页面上页面准备 <button id="btn">获取验证码</button> <h1 id="h1"></h1>原生JS实现代码
2020-05-17 00:13:47
408
原创 原生JS案例——点击div随机变背景
要求当点击div时， div会随机切换另一种颜色具体效果实现原理给div绑定一个鼠标点击事件十六进制的颜色编码是由 ‘#’ 和 ‘0123456789abcdef’ 组成的, 共6位利用随机数函数每次从 ‘0123456789abcdef’ 中取一个字符串, 并拼接到 ‘#’ 后修改div的样式背景为新生成的十六进制颜色编码页面准备html代码 <div id="box"></div>css代码 #box { width: 200p
2020-05-11 08:18:01
583
原创 JS算法——字符串翻转算法
字符串翻转算法要求：把一个字符串的的所有字符前后顺序调换。例如：字符串 “abcdef” 转换为 “fedcba”;需要了解的方法字符串的方法 split数组的方法 reverse;数组的方法 join;实现思路1. 将字符串转为数组2. 利用数组的翻转方法翻转数组3. 利用数组方法将数组转换为字符串实现代码 function reverseString...
2020-05-06 08:58:11
334
原创 Javascript从零基础到精通——事件
事件事件是给浏览器定义一个预处理函数，当事件触发的时候，执行函数，这就是事件。理解事件:在一个程序中，我们决定做了用户做了事情之后该做什么事件的原理和hover类似。可以做到:hover做不到的事，:hover只能操作当前的元素，但是事件绑定之后可以选择任何元素。事件触发三要素：通过谁触发？ 通过什么触发？触发后要做什么？事件的写法：w3c标准：事件写在行内，但是因为结构和行为...
2020-05-05 22:37:03
177
原创 Javascript从零基础到精通——DOM
DOM（Document Object Model 文档对象模型）DOM定义了表示和修改文档所需的对象、行为和属性，以及这些对象之间的关系。DOM操作获取DOM节点1、 document.getElementById(id名)根据 id 属性获取对应的单个节点2、getElementsByTagName(标签名) 根据标签名获取指定节点名字的数组, 得到的是一个集合, 数组对象...
2020-05-01 11:45:50
614
原创 Javascript从零基础到精通——BOM
BOM（Browser Object Model 浏览器对象模型）window是全局浏览器内置顶级对象表示浏览器中打开的窗口（没有应用于window对象的公开标准，不过所有浏览器都支持该对象）Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。要引用当前窗口根本不需要特殊的语...
2020-04-26 00:29:29
131
原创 Javascript从零基础到精通——Date
Date内置对象日期对象创建时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总毫秒数（时间戳） var date = new Date(); //当前时间的日期对象 var data = new Date(2012,6,10); //2012年7月10号的日期对象 Date.now(); // 获取当前时间...
2020-04-23 09:36:18
232
原创 Javascript从零基础到精通——Math内置对象
MathMath内置对象Math对象属性Math对象上的属性都是常量，不是变量，不能被修改Math对象方法Math.random()生成随机数Math.random()生成一个从0-1（包含0不包含1）的随机小数生成 min ~ max （min < max）的随机数公式：Math.random()*(max - min) + minMath对象方法详解: ...
2020-04-22 23:56:13
107
原创 Javascript从零基础到精通——数组排序和数组去重
数组排序把数组中的数字按从小到大(从大到小)的顺序排列冒泡排序冒泡排序详解: var arr = [4,2,5,7,8,2,1] console.log(arr) // 用冒泡排序从小到大 // 总共有arr.length个数，每一趟都能确定一个最大值，但是最后一个不需要比较 // 所以总共要比较arr.length-1趟 0 ~ length-...
2020-04-22 10:59:00
127
原创 Javascript从零基础到精通——对象和数组
对象js语言中一切皆为对象，比如数字、字符串、数组、Math、Object、函数js中对象的本质：属性和方法的集合（无序，所以对象没有length属性）用官方语言来解释对象：什么是对象，其实就是一种类型，即引用类型。而对象的值就是引用类型的实例。在 ECMAScript 中引用类型是一种数据结构，用于将数据和功能组织在一起。它也常被称做为类，但 ECMAScript6以前却没有这种东西。...
2020-04-22 10:11:47
181
原创 Javascript从零基础到精通——函数(下)
匿名函数没有名字的函数function () { console.log(123)}var test = function () { console.log(123)}div.onclick = function () { console.log(123)}自调用函数（IIFE）Immediately Invoked Function Expressi...
2020-04-22 08:44:59
98
原创 Javascript从零基础到精通——函数(上)
函数一个工具，被封装好可重复执行的一段代码块系统函数： parseInt() alert() prompt() eval()自定义函数：自己封装一段代码，需要的时候再调用函数的声明和使用(两种方法)://通过function关键字声明一个函数，跟上函数名，一对小括号，一对花括号，花括号里面放代码块function test(){ //可重复执行的代码块}...
2020-04-22 00:09:26
340
原创 Javascript从零基础到精通——循环结构(附15道练习题)
循环结构while循环while(条件){ //条件成立就会反复执行这里的代码}var count = 0;while(count < 10){ count++; document.write("Hello world");}死循环： 没有终止条件的循环即为死循环，在代码中应尽量避免死循环do…while循环do { //先执行一遍代码...
2020-04-21 18:57:56
476
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人