hadardb-CSDN博客

原创前端安全防范

CSRF攻击（图片来源网络）防范措施：利用同源策略，不允许外域进行接口访问前后端接口添加验证信息，比如规定使用某种编码方式编码解码当前日期XSS攻击（图片来源网络）反射型XSS利用过程1. 恶意的攻击者发给受害者一个链接(链接中携带xss代码)2. 攻击者诱使受害者点开这个链接3. XSS代码被提交到有XSS漏洞的...

2019-12-30 17:17:40 337

原创【壹题】【个人理解】4.介绍下 Set、Map、WeakSet 和 WeakMap 的区别？

Set ：与数组类似，是无序的，内部不会有相同的值（相同的判断条件类似于 === ）WeakSet ：与Set的区别是，内部的值是弱引用，外部没有引用时会被垃圾回收机制干掉Map：与Object类似，都是键值对的形式，区别在于键可以是任意类型的值，例如{ {‘a':123} : 444 } 以数组，对象为名都是可以得，用于存放数据。WeakMap：与Map的区别：键名只能是对...

2019-09-09 17:58:37 296

原创【壹题】【个人理解】3.什么是防抖和节流？有什么区别？如何实现？

防抖：触发事件后在n秒内只能触发一次，如果在n秒内又触发，则重新计算时间。应用场景：用户输入间隔多久后没有输入时进行检查节流：连续触发事件时在n秒内只能触发一次应用场景：需要稀释执行效率的地方使用，例如懒加载的时候监听滚动条。代码：<!DOCTYPE html><html lang="en"><head> &...

2019-09-09 16:47:45 338

原创 css 让元素垂直水平居中的方法

我的常用方式：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...

2019-09-09 15:11:58 126

转载 FNC能够撑开float父元素，但是无法撑开绝对定位元素的父元素

原文链接：https://segmentfault.com/q/1010000000686154/a-1020000000686760W3C标准的算法里,float可能参与父级高度计算，但position:absolute;始终不参与父级计算。就是这样设计的，没辙：W3C CSS2.1 10.6.3规定了未创建BFC的非替换块级元素的高度计算规则：This section also ...

2019-09-09 14:56:56 233

转载为什么给定宽元素设置左右margin为auto就可以居中？垂直为什么不能这么干？

原文链接：https://segmentfault.com/q/1010000000689833宽度计算默认的宽度规则是“适应于父级”规则。（当然有一些计算模式会让元素适应于内部元素，超出话题范围，暂且不谈。）W3 CSS 2.1 第十章里为常规流替换和非替换块级元素定义了这个算式：margin-left+border-left-width+padding-left+w...

2019-09-09 14:53:51 564

原创常用网站

一.前端免费模板下载1.html5tricks2.源码之家3.代码家园4.模板之家5.站长之家二.图片图标logo素材1.标志在线2.阿里巴巴矢量图标3.iconmonstr4.懒人图库5.loading.io6.preloaders三.论坛与学习资料1.凹凸实验室2.木易杨前端进阶3.掘金4.张鑫旭博客5.leetCode...

2019-09-09 10:41:47 110

原创【壹题】【个人理解】2.['1', '2', '3'].map(parseInt) what & why ?

将字符串1，2，3通过map方法调用parseInt转变为数字 1 ，2，3 一点问题没有自然的很。但是转念一想怎么可能这么简单，重新去查阅了这两个方法发现了一点猫腻：.map().parseInt()注意： map()接受一个函数并且会对其传入三个参数 parseInt()会接受两个参数所以当执行['1', '2', '3'].map(p...

2019-09-06 16:07:36 282

原创服务器的同源策略与跨域问题原理解析

1.服务器的同源策略是什么？所谓同源策略，指的是浏览器对不同源的脚本或者文本的访问方式进行的限制。比如源a的js不能读取或设置引入的源b的元素属性。同源指两个页面具有相同的协议，主机（也常说域名），端口，三个要素缺一不可。2.跨域是什么？跨域是指在浏览器上进行非同源请求的行为。3.原理解析那么浏览器为什么会存在同源策略呢？你想啊，在不考虑后台权限的前提下，如果没...

2019-09-06 15:36:20 964

原创【壹题】【个人理解】写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？

没有去看过React 所以只讨论在vue的情况下。首先个人的观点，增加key并不是为了提升遍历的效率，这只和具体的操作相关。增加key的目的是给元素添加唯一标识，让vue通过映射能够准确标识每个元素，例如对一个数组进行修改时，在不加key的情况下会对整个dom节点进行修改，加key的会通过vnode进行比较，对有差异的局部进行修改。var vm = new Vue({ el: '#a...

2019-09-06 14:40:53 339

转载 CSS底层原理(剖析CSS权重、CSS布局模型和BFC等重要底层知识)

2019-09-05 10:15:45 644 1

原创 vsCode 插件推荐

1.自定义格式化插件 beautify2.支持运行不同语言的代码 code Runner3.chrome debugger调试 debugger for Chrome// 配置说明：// ${workspaceRoot} VS Code当前打开的文件夹// ${file} 当前打开的文件// ${relativeFile} 相对于workspaceR...

2019-09-04 16:28:09 152

原创 vuex的基础运用

目录1.目录结构2.调用方法3.module示例4.state文件5.getter文件6.mutation文件7.action文件1.目录结构参考官网：https://vuex.vuejs.org/zh/guide/structure.html├── index.html├── main.js├── api│ └── ... # 抽取出AP...

2019-08-30 16:58:12 253

原创 uni-app 下小程序登录前端实现

uni-app下的登陆API说白了就是对小程序原生代码的封装，先来看一下小程序的登录流程：代码开始之前理一下思路：1.在根目录下的manifest.json中配置小程序appid与appsecret2.通过uni.getProvider获取服务供应商3.通过uni.login获取code4.发送code给后台，获取openid5.通过wx.getUserInfo获取微信...

2019-08-29 16:07:24 914

原创 vue 中key的作用

vue 虚拟dom在渲染时为了提高更新效率，不会全局刷新所有元素，而是捕捉记录需要修改的节点进行渲染。key的作用就是标识每个不同的元素防止元素没有被重新渲染。示例：<template> <div> <template v-if="binded"> <label>Username</label> ...

2019-08-27 11:19:53 185

原创 vue中单个元素绑定多个相同事件与vue中如何获取event对象

1.vue单个元素绑定多个相同事件//正确的<button @click="handelClick(),handelClick2()">测试click事件</button>//错误的<button @click="handelClick,handelClick2">测试click事件</button>//错误的<button @...

2019-08-27 10:48:57 818

原创 vue修饰符 v-on、v-bind、v-model

1.v-on 修饰符.stop - 调用 event.stopPropagation()，禁止事件冒泡。 .prevent - 调用 event.preventDefault()，阻止事件默认行为。 .capture - 添加事件侦听器时使用 capture 模式。 .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。 .{keyCode | keyAlias} - 只当...

2019-08-27 10:32:09 870 1

转载 git忽略文件

在使用Git的过程中，我们喜欢有的文件比如日志，临时文件，编译的中间文件等不要提交到代码仓库，这时就要设置相应的忽略规则，来忽略这些文件的提交。规则作用/mtk 过滤整个文件夹*.zip 过滤所有.zip文件/mtk/do.c 过滤某个具体文件!/mtk/one.txt 追踪（不过滤）某个具体文件注意：如果你创建.gitignore文件之前就push了某一文件，那么即使你在.git...

2019-08-20 10:58:21 394

原创在uni-app 中踩过的坑

1. props传值变量名不要使用id页面：<scrollView :dataInfo.sync='questions' myId='333' id='444'>scrollView组件：created() { console.log(this.myId) console.log(this.id)}输出结果：2.组件没有页面事件也就没有onlo...

2019-08-16 17:16:28 9821

原创 webStrom 下git的配置安装与设置总集

1.git下载安装git下载地址：https://www.git-scm.com/download/如果下载过慢或者下载出错可在腾讯下载：https://pc.qq.com/detail/13/detail_22693.htmlgit安装包全部默认安装 Next即可百度经验：https://jingyan.baidu.com/article/9f7e7ec0b17cac6f2...

2019-04-09 22:30:26 442

原创 input 选择图片后获取base64、宽高并显示

显示为背景图：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.11.1.m

2019-02-27 10:14:07 2684 1

原创计算js对象的属性长度

var a= Object.keys(object) //保存着object中所有下标的数组var length=a.length

2019-01-18 16:26:07 562

原创 transform放大元素后，父级元素不出现滚动条的解决方案

首先讲一下自己对transform scale 的理解，transform scale 放大元素，元素本身的width与height不变，并不会影响页面布局，相当于是在元素上添加了一个放大镜。本质上是放大像素点，所以当放大图片时图片会出现模糊，这里也顺带提一下解决方案，当元素放大时去调用高清图片，不要一开始就加载大图，影响页面加载速度。使用transform默认的作用中心是元素的中心点，通过 ...

2019-01-11 17:05:27 8309

原创微信小程序动态设置/获取值与属性

这两天在公司做微信小程序，也是刚刚入手，遇到了很多的坑，和大家分享一下。首先微信小程序不像普通的页面一样，获取属性啊什么的需要你去操作节点，在小程序里你就是去对这个页面的data进行一系列的操作，然后通过data来反映到页面上。 1.设置data与使用data wxml代码：<view class="contai...

2018-07-16 23:29:57 12412

原创获取url中的参数值(支持传入数组)

调用方法：getQueryString(String|Array)传入一个字符串时，返回url中对应的参数值，如果没有对应的参数名则返回null传入一个数组时，返回一个数组，保存着对应的字符串，如果参数名不存在则保存为‘’空字符串示例：代码如下：function getQueryString(name) { if(typeof(name)=='string'){...

2018-07-15 22:08:32 3467

原创 js鼠标长按事件(支持移动端)

代码如下：Object.prototype.longclick=function(time,fun){ if(/Android|webOS|iPhone|iPod|BlackBerry|iPad|IEMobile|Nexus/i.test(navigator.userAgent)){ this.addEventListener('touchstart',funct...

2018-07-15 21:59:01 2772

qq_40299140的博客