![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端小知识
文章平均质量分 90
懂懂kkw
持续精进
展开
-
web 安全
web 安全1.常见的web安全事件1.1 钓鱼向受害者发送一个伪造的链接,骗取用户信息特征: 1. 诱惑性标题 (看了就想点进去,比如收到账号安全问题的邮件,账号异常修改密码,比如中奖信息) 2. 仿冒真实网站 (还原官方网站的样子,但是会让用户多几项特别的信息,比如密保问题之类的)目的: 骗取用户账号和资料正常流程 用户收到邮件 =>xxxx用户收到钓鱼链接邮件1.2 篡改网页通过黑客技术攻破网站, 对对方网站进行篡改特...原创 2021-03-07 13:17:46 · 965 阅读 · 0 评论 -
this指向的四种情况
this 是在运行时进行绑定的,并不是在编写时绑定,它的上下文取决于函数调用时的各种条件。 this 的绑定和函数声明的位置没有任何关系,只取决于函数的调用方式。 当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在哪里被调用(调用栈)、函数的调用方式、传入的参数等信息。this 就是这个记录的一个属性,会在函数执行的过程中用到。判断this指向的四种情况1. new使用 new 来调用函数,或者说发生构造函数调用时,会自动执行下面的操作。 ...原创 2020-07-07 18:33:05 · 1244 阅读 · 0 评论 -
文字少的时候居中显示,文字超过一行的时候居左显示
html<div class="box"> <p>这是一段文字</p></div>css.box { margin: 20px auto; padding: 10px; background-color: #cd0000; text-align: center; width: 200px;}.box ...原创 2020-04-24 01:05:31 · 380 阅读 · 0 评论 -
slice,substr和substring的区别
1. 相同点他们都接收两个参数 , 第二个参数都是可选的, 如果忽略, 返回从 第一个参数的开始位置到字符串的结尾slice 和 substring 接收的是 起始位置 和 结束位置(不包括结束位置),substr 接收的则是 起始位置 和 所要返回的字符串长度 。var str = 'helloworld'; alert(str.slice(4,7)); ...原创 2019-04-09 14:48:25 · 1369 阅读 · 0 评论 -
CSS3 animation属性
timing-function 是用来描述 CSS3 animation 动画曲线的函数,通常称之为缓动函数.div { animation: mv 3s ease;}这里的ease就是一个 timing-function。那么 ease 真的就是函数吗?还可以定义其它的缓动过程吗?通常我们用到的动画都是连续的,那么有不连续的动画吗?这些问题都和 timing-functi...转载 2019-04-16 11:05:52 · 188 阅读 · 0 评论 -
Set 和 Array
ES6 提供了一个新的数据结构 Set 用来存储任意类型的值,它类似于数组。转换Array 转换成 Setlet arr = [1, 2, 3]let set = new Set(arr) // Set(3) {1, 2, 3}Set 转换成 Arraylet set = new Set([1, 2, 3])let arr = [...set] //...转载 2019-04-17 11:59:23 · 6348 阅读 · 0 评论 -
渐进增强 && 优雅降级
渐进增强(Progressive Enhancement)和优雅降级(Graceful Degradation)是前端开发中很重要的两个概念,尽管也许你没有听过,但是实际开发中肯定已经接触到了,当然面试也经常会问到。起因之所以会出现渐进增强和优雅降级,是因为前端应用运行的载体是浏览器,而浏览器的多样性和差异也导致了同一个页面在不同的浏览器之前会有不一样的运行和显示效果。这个时候我们就必...转载 2019-04-17 14:10:37 · 241 阅读 · 0 评论 -
正则方法
1、正则对象exec() 检索 test() 匹配2、字符串search() 搜索 replace() 替换 split() 切割 match() 检索// 使用方法// search 语法str.search(regexp)'hello'.search(/l/) //返回第一个 l 的索引值 2'heLlo'.search(/l/i) // 正则是区分大小...原创 2019-04-15 15:34:50 · 986 阅读 · 0 评论 -
标签语义化
使用正确的标签做正确的事,即使是源码也是有意义的,也是可读的。理解起来很简单,人眼能看到的某个标签长什么样,做什么用,但是阅读设备只能阅读源码结构,所以必须要让这个结构是有意义的组织。目的1、方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备) 2、提升用户体验 3、SEO 友好 4、便于团队开发和维护建议尽可能少的使用无语义的标签,比如<div>和&...原创 2019-04-15 15:55:27 · 176 阅读 · 0 评论 -
~ ^ 版本控制
^version更新到当前 major version(也就是第一位数字)中最新的版本从左数,第1个不为 0 的数字 + 1,后面的变成 0^1.2.3 >=1.2.3 <2.0.0^0.2.3 >=0.2.3 <0.3.0^0.0.3 >=0.0.3 <0.0.4~version更新到当前 minor versi...原创 2019-04-15 16:04:31 · 736 阅读 · 1 评论 -
最简单的查询全局(window)方法的使用
1. 打开谷歌2. 打开控制台3. 直接敲下要查询的命令, 回车4. 比如要 查询 window.location 的方法5. window 下有哪些方法6. window下的 localStorage 具体有哪些方法, 进入__proto__(隐式原型) 可以查看...原创 2019-05-30 14:12:24 · 832 阅读 · 0 评论 -
js 中编码和解码
1. 什么情况下需要编码 ?我们要查询一个年龄为 20,姓名包含tom的人,那么我们会这样去组织请求var url = "http//xxx/age=20&name=tom"然后服务端就能收到下面的接口请求参数{ "age": "20", "name": "tom"}如果我要搜索的姓名是tom&lucy,那么 url 就变成了var...原创 2019-05-30 15:49:02 · 876 阅读 · 0 评论 -
UNI-APP 使用 ICONFONT
UNI-APP 使用 ICONFONT更新: 根据官网 小于 40kb 的字体文件可以直接本地引用。 方法如下: 首先下载字体文件。 然后删除多余文件,只需要留下 iconfont.ttf 和 iconfont.css 文件即可使用。 放入到 static 下。 修改 iconfont.css 文件,如下 左侧红框里是...转载 2019-07-19 00:58:42 · 2558 阅读 · 0 评论 -
管道操作符
本质上来说,管道操作符是函数链式调用的语法糖。 语法expression |> function一般用法// 传统语法let url = decodeURI("21");// 管道操作符let url = "21" |> decodeURI; 函数链式调用const double = (n) => n * 2;const in...原创 2019-04-15 16:35:16 · 1062 阅读 · 0 评论 -
Content-Type
Content-Type 存在于请求和响应的头部,用于标识数据的类型。(通俗地说就是 , 你想要后台返回给你什么数据类型, 后台需要你发送什么样的数据类型给他)1. Response Headers在响应中,Content-Type 告诉客户端实际返回的内容的类型。比如要通常接口会返回 JSON 格式的数据,那么需要将 Content-Type 设置为application/js...原创 2019-04-11 16:41:09 · 2447 阅读 · 0 评论 -
attr 伪类用法
<p data-txt="hello"></p>p:before { content:attr(data-txt)}结果显示 : hello原创 2019-02-11 15:43:39 · 454 阅读 · 0 评论 -
前端名称正确书写规范
基础名词HTML5(全大写)CSS、CSS3(全大写)JavaScript(JS 大写)Node.js(首字母大写)ES6(全大写)TypeScript(TS 大写)Material Design(MD大写)npm(全小写)AMD(全大写)CommonJs(CJ大写)JSON(全大写)WebAssembly(WA大写)PWA(全大写)SVG(...原创 2019-02-11 15:52:45 · 1180 阅读 · 0 评论 -
JS获取当前时间戳的方法
1. 方法一Date.now()2. 方法二new Date().getTime()3. 方法三new Date().valueOf()4. 方法四+new Date()原创 2019-02-11 16:01:07 · 182 阅读 · 0 评论 -
彻底弄懂 defineProperty
彻底弄懂 definePropertyVue.js 的流行将其数据双向绑定的核心带到了大家面前,那就是Object.defineProperty(),在详细讲解这个方法之前,我们先用一段最简单的代码实现一个最简单的数据响应。<div id="main"></div>let info = {}Object.defineProperty(info, 'nam...原创 2019-02-20 09:49:08 · 142 阅读 · 0 评论 -
JS数组快速去重
1. 常规操作遍历对比arr.reduce((result, item) => { if (result.indexOf(item) < 0) { result.push(item) } return result}, [])2. 简单操作filter 删选, arr.filter(function(item, index) { ...原创 2019-02-11 17:41:58 · 2280 阅读 · 0 评论 -
节流和防抖
节流和防抖其实没那么高大上节流(throttle)和防抖(debounce)是 JS 中的两个概念,听上去挺高大上的,很多同学也望而却步了,加上这俩概念还很类似,所以也就更加懵了。接下来我们以实际的例子为突破口,讲解一下这俩究竟有何用途以及区别场景1一个文章页面,左侧是文章各级标题的导航,当滚动的时候需要高亮显示对应的标题菜单,这个时候我们就需要监听页面的滚动事件,我们会顺手写下这样的...转载 2019-02-20 09:49:51 · 45 阅读 · 0 评论 -
data-* 自定义数据属性
data-* 作为一个 HTML5 的自定义数据属性,主要是用来规范和管理用户自定义属性的.1. 使用方式如下:<div id="demo" data-tip="提示"></div>data-tip="提示" 便是一个自定义属性。使用该属性,名称需要遵循下面的规则:1、不能以 xml 开头 2、不能包含分号 3、不能包含 A 至 Z 的大写字母...原创 2019-02-20 10:03:53 · 1408 阅读 · 0 评论 -
map, filter, some, every , find, forEach, for..in, for...of等使用方法说明
let arr = [1, 2, 3, 4, 5];// map 使用 (处理数组,返回数组)var res = arr.map( item => { return item * 2;});// res: [2, 4, 6, 8, 10]// filter 使用 (删选符合条件元素,返回数组)var res = arr.filter( item => ...原创 2019-02-20 11:47:04 · 483 阅读 · 0 评论 -
SSE了解一下
说到 Web 消息推送,大家可能第一个想到的就是 Websocket。的确,作为 HTML5 中的一种持久化协议,Websocket 可以帮我们连接客户端和服务端,实时地进行双向数据传递。但是在某些场景下我们可能不需要那么复杂的连接,也不需要指定要给谁谁谁推送数据,例如一个社区有新的帖子,需要通知每个打开网站的用户。这个时候更简单的SSE(全称Server Sent Events) 就派上...转载 2019-02-20 14:14:07 · 1389 阅读 · 0 评论 -
Google JavaScript 风格指南
Google 和 Airbnb 是目前最流行的 JavaScript 代码风格,如果你长期使用 JavaScript 来写代码的话,建议对比看看。在团队开发中,通常需要遵循一定的代码风格,这样有利于团队的协作和代码的可维护性。而 JavaScript 的代码风格其实是有很多的,接下来我们来看看 Google 发布的 JavaScript 风格指南,大致包含了以下部分内容:文件名...原创 2019-02-20 14:32:30 · 399 阅读 · 0 评论 -
JavaScript 清空数组的四种方法
var arr = [1, 2, 3]1. length (推荐)arr.length = 0 2. splicearr.splice(0, arr.length)// 等价于arr.splice(0)splice 语法 : array.splice(start[, deleteCount[, item1[, item2[, ...]]]])参数含义...原创 2019-02-26 15:30:59 · 282 阅读 · 0 评论 -
ES6 展开语法
展开语法(Spread syntax), 可以在函数调用/数组构造时, 将 数组表达式 或者 字符串在语法层面展开.还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。语法 : 函数调用:myFunction(...iterableObj)字面量数组构造或字符串:[...iterableObj, '4', ...'hello', 6]构造字...原创 2019-02-26 16:49:37 · 382 阅读 · 0 评论 -
es6 数组解构
1. 用法[a, b] = [b, a]let [a, b] = [1, 2] // a=1, b=2let [a, b] = [1, 2, 3] // a=1, b=3let [a, ...b] = [1, 2, 3, 4] // a=1, b=[2, 3, 4]let [a, ...b] = [1] //...原创 2019-04-11 16:12:45 · 554 阅读 · 0 评论 -
深拷贝
1. JS 中拷贝对象分为浅拷贝和深拷贝浅拷贝 : 拷贝引用深拷贝 : 拷贝里面的数据成新的对象2. 常规做法 递归 , 简单实现方式如下:var a = {name: "xiaoming"}var b = JSON.parse(JSON.stringify(a))// b 就是对 a 的一个深拷贝当对象中包含 undefined、函数以及 symbol 值的...原创 2019-02-11 15:28:20 · 792 阅读 · 0 评论