前端基础知识点
文章平均质量分 67
一些随着自己不断学到的前端相关基础知识点
33子~
一个立志成为前端工程师的柿子
展开
-
工作-数字字符串进行比较
这样一个场景,如果A收入的钱比B收入的钱少,那么就应该有一个友情提示,告知用户A收入的钱比B收入的钱少。最近测试童鞋反馈了一个问题,她那笔订单A返回的金额是15.00,B返回的8.00,但是我那个提示竟然非常突出的展示在了页面上。(当时我的表情如下:)这时候第一反应,让我直接拿着两个数字在控制台输出下。哦莫莫,我真的会栓Q。。一顿搜索之后,终于知道为什么了。像这种数字型字符串进行比较的话,这种比较为ASCII码比较,依次取每个字符,字符转为ASCII码进行比较,ASCII码先大的即为大,这时候就不原创 2022-06-21 15:12:07 · 475 阅读 · 0 评论 -
【组件库构建】知识储备----版本规范
semver版本规范semVer版本规范whywhathowsemVer版本规范why以下摘录自官网这并不是一个新的或者革命性的想法。实际上,你可能已经在做一些近似的事情了。问题在于只是“近似”还不够。如果没有某个正式的规范可循,版本号对于依赖的管理并无实质意义。将上述的想法命名并给予清楚的定义,让你对软件使用者传达意向变得容易。一旦这些意向变得清楚,弹性(但又不会太弹性)的依赖规范就能达成。举个简单的例子就可以展示语义化的版本控制如何让依赖地狱成为过去。假设有个名为“救火车”的函数库,它需要原创 2022-04-29 18:03:55 · 601 阅读 · 0 评论 -
ElementUI-<el-row>、<el-col>
公司用的是element-ui,在写代码的过程中,发现对<el-row> <el-col> 并没有搞懂到底啥区别,仔细看了下官方文档(所以就是以前看的不认真喽)<el-row> <el-col>标签是属于element的Layout布局控件,并且分成24分栏。可以理解为<div>=<el-row> 、<span>等于<el-col>。官网还提供了很多方便的属性,比如分栏间隔、对齐方式等。附上地址:官网地原创 2020-11-13 11:51:18 · 27530 阅读 · 0 评论 -
笔记-正则表达式
正则表达式就是一个规则,用来匹配字符串• 常用的表达式:[a-z] 查找任何从小写a到小写z的字符[A-Z]查找任何从大写A到大写Z的字符[0-9]查找任何从0-9的数字[abc]查找括号内的任意一个字符[^abc]查找除了括号内的任意字符• 常用的元字符:\w 匹配数字、字母、下划线\W匹配非数字、字母、下划线\d 匹配数字\D匹配非数字\s匹配空白字符(空格、换行)\S匹配非空白字符\n匹配换行符• 常用修饰符:i g m• 常用限定符:shift8 匹原创 2020-11-12 16:22:42 · 104 阅读 · 2 评论 -
JS-转为正数
情景:后端传过来的是个负数,前端不可以直接展示负数,需要转化下如下:原创 2020-11-12 14:43:21 · 669 阅读 · 0 评论 -
JS-时间戳
时间戳转化为正常时间最近遇到一个需求,但是后端传过来的时间是时间戳,需要自行转化下~在线转化工具时间戳分为两种,13位是毫秒,10位是秒__initData(time) { const date = new Date(time)// 时间戳为10位需*1000,时间戳为13位的话不需乘1000(time * 1000) var Y = date.getFullYear() + '-' var M = (date.getMonth() + 1 < 10 ? '0' + (date原创 2020-11-12 14:28:53 · 421 阅读 · 0 评论 -
JS-ES2020链判断运算符(?.)和Null判断运算符(??)
ES2020引入"链判断运算符"(?.)const firstName = message?.body?.user?.firstName || 'default';const fooValue = myForm.querySelector('input[name=foo]')?.value直接在链式调用的时候判断,左侧的对象是否为null或undefined。如果是的,就不在往下运算,而是返回undefined。链判断运算符三种用法:obj?.prop // 对象属性obj?.[expr]原创 2020-11-12 14:22:29 · 1854 阅读 · 0 评论 -
JS-js最大值
今天碰到一个bug,提示服务端错误,最后排查排查原来是后端传过来的数字已经超过16位了,搜索了一番才了解到原来javaScript有个最大值。javaScript最大值为2的53次方===9007199254740992。如果超过这个值,那么js会出现不精确的问题。这个值为16位。...原创 2020-11-12 14:18:14 · 797 阅读 · 0 评论 -
ECharts使用
文章目录ECharts使用五部曲代码演示ECharts使用五部曲下载并引入ECharts.js准备一个具有大小的DOM盒子初始化实例对象指定配置项和数据(option)将配置项设置给ECharts实例对象代码演示 // 1.实例化对象 let myChart = echarts.init(document.querySelector('.bar .char')) /...原创 2020-03-30 13:24:14 · 118 阅读 · 0 评论 -
深度优先遍历和广度优先遍历(随记)
文章目录广度优先搜索BFS(队列)深度优先搜索DFS(栈)广度优先搜索BFS(队列)找出从根节点到目标节点的最短路径节点的处理顺序和添加到队列的顺序是完全相同的(先进先出)广度优先遍历是需要记住所有的节点Queue:A BCD EFG // 广度遍历, 创建一个执行队列, 当队列为空的时候则结束 function getName2(data) { ...原创 2020-03-09 12:07:17 · 231 阅读 · 0 评论 -
JS-获取URL问号后面参数
实现思路:先找出?和#的索引,获取?和#后面值,再对问号(或者#)后面详细的值进行处理。看下面例子:let url = 'http://lss.lss.com?name=lss&age=22#lss';let url = 'http://lss.lss.com?name=lss&age=22#lss'; let qIndex = url.indexOf('...原创 2020-03-15 18:12:47 · 5147 阅读 · 0 评论 -
CSS-清除浮动
父元素因为子级元素浮动而引起的内部高度为0。我们没有给父元素设置高度<div class="par"> <div class="child1">浮动一</div> <div class="child2">浮动二</div> </div> <div class="btm"...原创 2020-03-10 11:01:15 · 141 阅读 · 0 评论 -
CSS-BFC随记
BFCBFC:块级格式上下文。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。BFC布局规则:内部的Box会在垂直方向,一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠每个元素的margin box的左边, 与包含块bo...原创 2020-03-07 17:45:09 · 168 阅读 · 0 评论 -
JS-图片的懒加载
懒加载主要是为了优化页面渲染,是前端性能优化的重要方法。主要是通过图片或数据的延时加载,加快页面渲染的速度,让第一次打开页面的速度变快,只有滑动到某个区域,才加载到真实的图片,这样也节省了用户的流量,哈哈。实现思路:把所有需要延迟加载的图片用一个盒子包起来,设置宽高和默认占位图。开始让所有的image的src为空,把真实的图片地址放到一个自定义属性当中,让开始所有的image隐藏。等待其...原创 2020-03-10 18:02:31 · 162 阅读 · 0 评论 -
CSS-水平垂直居中
文章目录水平居中垂直居中方法一:子绝父相方法二:flex水平居中元素宽度固定,margin:0 auto;行内元素,父元素text-align: center;子绝父相,孩子left:0;right:0;margin:auto;父元素设置display:flex;justify-content: center;垂直居中父元素设置display: flex;align-items...原创 2020-03-14 12:11:50 · 199 阅读 · 0 评论 -
JS-数组去重
方法一思路:创建一个空数组,循环原数组中的每一项,在添加到空数组中。在每次添加的时候验证新数组中是否包含当前遍历到的数组,若不包含则添加(数组中indexOf,lastIndexOf,includes在ie6,7,8不兼容)let ary = [1, 2, 3, 2, 1, 3, 2, 1, 2, 3, 2, 1]; let ary1 = []; ary.for...原创 2020-03-15 18:44:01 · 125 阅读 · 0 评论 -
CSS-随记css3
让一个小球在2s之内匀速从左边移动到页面右边并且停留在页面右边<div class="ball"></div>.ball { position: relative; animation: move 2s linear; width: 200px; height: 200px...原创 2020-03-22 13:14:14 · 281 阅读 · 0 评论 -
JS-原生js模拟红绿灯
<div class="container"> <div class="red"></div> <div class="green off"></div> <div class="yellow off"></div> </div>let...原创 2020-03-22 15:03:23 · 515 阅读 · 0 评论 -
CSS-移动端1px解决方法
文章目录方法一. ::after或者::before + transform方法二.viewport和rem结合方法三.小数值方法四.css3中box-shadow方法一. ::after或者::before + transform在移动端web开发中,设计稿中设置边框为1像素,前端在开发过程中如果出现border:1px,测试会发现在某些机型上,1px会比较粗,即是较经典的移动端1px像素问...原创 2020-03-05 11:49:41 · 388 阅读 · 0 评论 -
JS-继承的实现方式
文章目录原型继承call继承寄生组合继承es6中class原型继承通过prototype把子类的原型绑到父类的实例上,子类就可以调用父类的公有属性和方法、私有的属性和方法。但是这种方式实现继承,无论父类中公有的属性和方法还是私有的属性和方法,都会变成子类公有的属性和方法,这样子类就可以重写父类的属性和方法,也有影响父类的其他实例。function Parent(x){ this.x = x...原创 2020-03-04 20:37:26 · 198 阅读 · 0 评论 -
JS-防抖和节流
文章目录防抖节流小结防抖首先,先来说以下它的概念:在事件被触发几秒后再执行回调函数,如果在这几秒内又被触发,则重新计时。也就是可以理解为,本应该触发好多的事件,但是我们只允许它在规定时间内触发一次。节流规定一个时间,在这个时间内,只能有一次触发事件的回调函数执行,如果在同一个时间内某事件被触发多次,只有一次能生效。面试官就考我了,比如鼠标点击事件,当在这个规定的时间之内,我点击了很多次鼠...原创 2020-03-05 13:33:33 · 228 阅读 · 2 评论 -
JS-promise
Promise是一种用于解决异步问题的思路、方案,简单说是个容器,里面存的是某个未来会结束的结果。是一个对象,可以获取异步操作的消息。有三种状态,pending resolved rejected ,状态变了就不能修改了。在js里面,经常用异步的是ajax,比如sucess:一个回调,error一个回调。但是如果一次请求需要多个接口的时候就产生了回调地狱,promise可以用then来处理,它可...原创 2020-03-05 18:53:35 · 131 阅读 · 0 评论 -
JS-面向对象
文章目录对于面向对象你是怎么理解的呢?类的封装类的多态类的继承对于面向对象你是怎么理解的呢?其实我觉得面向对象编程其实就是一种编程思想,js本身也是基于面向对象编程思想来构建的,js有很多内置类,我们都是通过new 一个实例来进行各种处理,像vue框架,他也是基于面向对象编程来构建的,它在开发过程中就是通过new 不同的实例然后来进行开发。归根到底,其实我觉得面向对象编程就是可以理解为就是类的...原创 2020-03-05 10:52:44 · 170 阅读 · 0 评论 -
JS-手写实现call,apply,bind
call,apply,bind都是用来改变this指向的call:通过一个一个传参,返回的是函数的执行结果apply:以一个数组的形式传参,返回的也是函数的执行结果bind:通过一个一个传参,返回的是一个函数,首要手动调用。call方法首先,我们知道call是用来改变this指向的,它可以给一个函数一个指定的this值,并且可以传参数。 let a = { v...原创 2020-03-07 15:33:49 · 226 阅读 · 0 评论 -
JS-Js异步编程四种方法
学而不思则罔原创 2020-10-30 10:58:30 · 333 阅读 · 0 评论