- 博客(32)
- 收藏
- 关注
RSS订阅
原创 webpack入门
什么是webpack?Webpack可以看做是模块打包机：它做的事情是，分析你的项⽬结构，找到JavaScript模块以及其它的⼀些浏览器不能直接运⾏的拓展语⾔（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使⽤。安装(前提先安装node环境)全局安装 —不推荐npm install webpack webpack-cli -g // webpack-cli 可以帮助我们在命令里使用npx、webpack等相关指令webpack -v\\卸
2021-04-27 15:10:00
75
原创 原型模式
每个函数都会创建一个prototype属性，这个属性是一个对象，包含应该由特定引用类型的实例共享的属性和方法。实际上，这个对象就是通过调用构造函数创建的对象的原型。使用原型对象的好处是，在它上面定义的属性和方法可以被实例对象共享。原来在构造函数中直接赋值给对象实例的值，可以直接赋值给它们的原型。function Person() { }Person.prototype.name = 'Jackson'；Person.prototype.age = 30;Person.prototype.job =
2021-04-15 14:42:14
67
原创 ES6函数拓展
前言函数对我们来说使用是非常频繁的，ES6中对于函数又加入了很多非常好用的内容，最近看完这一块之后，觉得很有必要整理一下。Es6中的参数默认值经常使用javascript的人都知道在ES5中如果我们想要对所传参数设置默认值，我们需要在函数体内一开始的地方编写，比如：function fnc( a, b ){ // 给b设置默认参数 b = b || 10; return a+b;}// 传入 a 与 bfnc(2,3) // 返回 5// b不传值fnc(5) // 返回
2021-03-17 14:24:54
79
原创 flex布局语法总结
其实在布局中，我们想要让一个元素在水平轴上居左居右或居中是很容易实现的，但是在垂直轴上就不是那么轻易搞定了，相信你在布局的时候也会遇到这样的情况，想让一个盒子垂直居中显示，但又不能去设置line-height或者margin，padding等值问题的困扰。W3C针对这一问题提出了flex布局这一方案。可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能...
2020-03-11 10:27:10
155
原创 vue 组件传值、通信
父组件=>子组件属性props//childprops:{ msg: String }//parent<HelloWorld msg="welcome to vue.js" \>引用refs//parent<HelloWorld refs="test" />this.$refs.test.xxx子组件=>父组件自定义事件//child...
2020-02-10 10:29:55
84
原创 微信小程序获取用户信息
最近在做一个微信小程序项目时，原本我想在页面加载的时候去获取用户信息，但这样会出现问题，如果你先前就已经对该程序授权，那么确实可以获取到用户信息，但是如果拒绝了授权，那么我们无论进入多少次小程序，都获取不到用户信息；因为只要你拒绝授权，那么后续就不会弹出授权询问窗口。那么正确的处理方式是怎样的呢？在页面放置一个按钮，按钮编写如下：<button open-type="getUserIn...
2019-12-20 16:04:52
308
转载 web 前端性能优化汇总
本文为CSDN博主「JesonAx」的原创文章原文链接：https://blog.csdn.net/qq_34927733/article/details/103051612一、 网络层面优化减少http请求，合并资源（js、css、图片）减少资源体积，压缩资源（js、css、图片）大量数据加载或大量图片加载时使用懒加载或预加载优化使用按需加载，加快首屏渲染速度利用http缓存机制，...
2019-11-14 13:57:09
102
原创 页面优化之防抖
防抖就是在事件触发的时候，并没有马上急着去做处理，而是在等待一定时间之后再去执行，也就是说在该时间范围内只发起一次请求，以最后一次为准。就比如浏览器的滚动事件function debounce(fn,waitTime){ let timer = 0; //定义一个定时器id,方便每次执行都保证能够将之前的定时器销毁 return (args)=>{ if(timer) clearTimeout(timer); timer = setTimeout(()=>{ fn.app
2021-07-01 22:31:58
766
原创 性能优化之节流
在前端性能优化方面，我们除了以往的那些减少DOM操作，减少请求等等这些外，还有节流，防抖，重回重排等知识点可以优化；为什么要用到节流呢？比如一个表单提交，由于DNS解析、TCP链接等响应时间较长的时候，使用者在不知情的情况下在短时间内多次点击提交按钮，这样就会发起多个请求，这就对性能产生了极大的消耗。使用节流去控制，利用闭包原理达到封装一个节流方法去控制的目标// 定义一个节流函数// 接收两个参数，一个是需要节流的函数，一个是等待时间，默认设置为100msfunction throttle(f
2021-07-01 22:22:13
171
原创 Cookie、SessionStorage与localStorage
CookieCookie是为了解决HTTP无状态的一件产物，希望与特定用户相关的信息能够保存在用户的机器上，而HTTP协议并不能帮助我们实现这种功能，因此Cookie也就随之而诞生了出来。Cookie实现原理：客户端请求服务器后，如果服务器需要记录用户状态，服务器会在响应信息中包含一个Set-Cookie的响应头，客户端会根据这个响应头存储Cookie信息。之后客户端向服务器发起请求时，都会携带一个名为Cookie的请求头信息，里面包含之前存储好的Cookie信息。//响应头HTTP/1.1 200
2021-05-07 15:37:46
115
原创 web常见攻击手段
XSS(Cross site scripting)跨站脚本攻击，因为缩写和CSS重叠，所以叫做XSS。跨站脚本攻击是指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的非本站点HTML标签或JavaScript进行的一种攻击。影响：利用虚假输入表单骗取用户个人信息。利用脚本窃取用户的Cookie值，被害者在不知情的情况下，帮助攻击者发送恶意请求。显示伪造的文章或图片。XSS攻击分为两大类：反射型 - 通过URL参数直接注入http://localhost:3000/?from=
2021-05-06 10:41:40
138
2
原创 Vue组件中的data为什么必须是一个函数
关于Vue中的data为什么必须是一个函数，咱们直接上源码：在初始化data的时候，我们可以看到针对于data数据的处理data = vm._data = typeof data === 'function' ? getData(data, vm) : data || {}如果传过来的data是一个函数，那么就执行getData()这个工厂函数，这样每一个实例的data都能够保持唯一性，独立性，互不干扰。总结：Vue组件可能存在多个实例，如果使用对象形式去定义data，会导
2021-04-22 16:46:43
209
原创 Vue中 v-vif 与v-for 的问题
Vue中针对于v-if与v-for的使用可能会有一些疑问，比如两者在同一级时，谁的优先级比较高，应该这样去处理会更好。首先我们看vue中的源码：源码中对于v-for的执行先与v-if，因此v-for的优先级高于v-if的优先级。因此当两者在同一级一起使用时，会出现性能方面的问题，因为不管你的v-if里的语句是否为true，都会先执行v-for去循环。要避免这种情况，可以在外面嵌套一层template，在这一层去做判断，然后在内部进行v-for循环。还有一种情况，比如判断的条件是循环项的值，为了避
2021-04-22 16:28:59
2508
转载 Http 常见状态码
HTTP状态码表示客户端HTTP请求的返回结果、标记服务器端的处理是否正常或者是出现的错误，能够根据返回的状态码判断请求是否得到正确的处理很重要。状态码由3位数字和原因短语组成，例如下图所示：数字中的第一位指定了响应类别，后两位无分类，响应类别有一下5种：状态码分类表类别原因短语1xxInformational（信息性状态码）接受的请求正在处理2xxSuccess（成功状态码）请求正常处理完毕3xxRedirection（重定向）需要进行附加操作以完成请
2021-04-21 14:14:14
59
原创 JS继承(二)
在JS继承(一)中总结了继承的原型链继承、盗用构造函数继承以及组合继承三种继承方式，当然js中的继承方式不仅仅这三种方式，所以这次再总结一下其它继承模式；原型式继承原型式继承使用情况：你有一个对象，想在它的基础上再创建一个新对象。通过Object.create()实现，这个方法接收两个参数：作为新对象原型的对象，以及给新对象定义额外属性的对象。let person = { name: "Jackson", friends: ["Jimi","Van","Jhone"]};let anothe
2021-04-21 12:06:29
39
原创 闭包
什么是闭包？闭包是指能够访问另一个函数作用域的变量的函数。通俗来说，闭包就是一个函数，这个函数能够访问其它作用域中的变量。我们先来看一个例子：function outer(m){ return { inner:function(){ console.log(m) } }}outer('测试').inner()执行上述代码后，有的同学就懵了，m不是outer这个函数作...
2021-04-13 17:08:49
54
原创 javaScript中的类型转换
在使用JavaScript编写的时候，我们常常会遇到一些数据类型的转换问题，最近做项目也遇到这样的问题，因此在这里总结一下；JavaScript类型转换分为两大类，显式转换与隐式转换显式转换显式转换可以很清楚的知道该数据转变成了什么数据类型，常见的方法有：Number() 转换成数值，转换规则：原值转换结果null0true1false0undefinedNaNstring该类型转换参考string类型转数值parseInt()逐一
2021-04-12 14:16:11
94
转载 前端常见跨域解决方案
什么是跨域？跨域是指一个域下的文档或脚本去请求另一个域下的资源文档，根据浏览器同源策略，同源是指 协议+域名+端口都相同，有一个不同都会产生跨域行为。同源策略限制一下行为：localstorage，cookie和IndexDB无法读取Dom 和 js 对象无法获取Ajax请求不能发送常见的跨域场景跨域解决方案JSONP通常为了减轻web服务器的负载，我们把js,css,im...
2021-03-17 14:32:24
755
原创 JS中对象的常用方法
之前总结了数组，字符串的一些常用方法以及ES6新增的方法，今天就来看看对象有哪些我们可能会常使用到的方法。如有不对，还望指出，不胜感激。Objec.assign通过复制一个或多个对象来创建一个新的对象。var obj = { a: 1, b: 2};var res = Object.assign({c:3},obj); // { c:3, a:1, b:2 }//obj 对象没改变 依然是{ a:1, b:2 }Object.is用于判断两个值是否相等，相当于 “=
2021-03-16 15:55:07
215
原创 css 实现子元素相对父元素上下左右居中
在排版布局的过程中，我们不难遇到需要实现这么一个要求，我们希望子元素相对于父元素水平和垂直方向上都居中。水平居中相信大家都很熟悉了，只需要设置margin：0 auto就行，但垂直居中的话，就不是那么简单了。下面我就分享一下我所了解的实现这一需求的方法。首先准备两个盒子，一个parent-box, 一个child-box；第一种方式，利用position与margin结合<div cl...
2020-04-24 14:43:34
1853
原创 js 数据类型
在js中，数据类型总共分为两大类：分为两大类：简单数据类型和复杂数据类型；简单数据类型：number // 数字string //字符串boolean // 布尔值null // 空值undefined //未定义symbol //表示独一无二的值 由 Symbol函数生成 （ES6新增）复杂数据类型object //对象Array // 数组E...
2020-03-26 15:02:32
77
原创 深拷贝和浅拷贝
比如A复制了B的值，修改A，B也跟着改变，这就叫做浅拷贝；比如A复制了B的值，修改A，B不变，这就叫做深拷贝；可能看了这两句话之后大家还是不太理解是什么意思，首先我们来看个例子var a = 123;var b = a;b = 24;console.log(a,b); // a=123;b=24var obj = { x:23};var obj1 = obj;obj1.x=...
2020-03-13 15:54:13
100
原创 箭头函数
ES6允许使用箭头“=>” 定义 函数var foo = v => v;//类似于var foo = function (v){ return v;}如果箭头函数没有参数或者有多个参数就用圆括号包起来var foo = ()=> 'hello'相当于var foo = function (){ return 'hello'};多个参数var foo ...
2020-03-11 15:11:38
78
原创 ES6块级命令与解构赋值
一、let，const 块级作用域块级作用域 { … } ，通过let与const定义的变量只在当前的花括号里能够访问{ var str = "hello world"; let str1 = "sdhkaj"; const str2 = "sdmak";}console.log( str ); // 输出 "hello world"console.log( str1 ); /...
2020-03-10 16:17:02
99
原创 页面导入样式时，使用link和@import有什么区别
在html设计编写中，样式有四种方式作用于网页，分别是：内联样式，嵌套样式，链接样式 ( link )，导入样式(@import )。内联样式以及嵌套样式在这里我们就不做过多的介绍，我们都知道内联样式只对当前标签有用，嵌套样式只在当前页面起作用；我们接着说链接样式 link 与导入样式 @import的区别：1、link属于XHTML标签，除了可以加载css外，还可以定义RSS等其它事务，@...
2020-02-14 10:44:30
511
原创 get和post请求的区别
一、get把请求参数放在URL中，而post通过request body 传递参数；二、get 在浏览器回退时是无害的，而post会再次提交请求；三、get 请求参数会被完整保留在浏览器历史记录里，而post中的参数不会被保留；四、get 请求在URL中传递的参数是有长度限制的，而post没有；五、由于get请求的参数是直接暴露在URL上的，所以不能用来传递敏感信息，get请求比post更...
2020-02-08 12:59:09
332
原创 数组去重方法归纳
无论是实际工作中还是面试的时候，常常会遇到数组去重的问题，今天就把我所知的数组去重的方法归纳一下，若说的不全，请大神评论区给点idea，以便于完善；事先定义一个数组和一个空数组(后面会用到)let arr = [1,2,3,2,3,4,{},{}];const result = [];Set 去重Set 方法对数组进行去重是ES6中最常用的方法，代码比较简洁Array.from(ne...
2019-11-20 17:15:45
187
原创 js中数组常用方法
从事前端已经两年多的时间了，从前没有一直没有养成一个归纳总结做笔记的习惯，以至于有些知识长时间没有用到之后就开始有些模糊不清。所以在面对一些问题的时候，总是拿捏不准，常常需要借助度娘。于是自己开始从新将js基础知识走一遍，并进行总结。之前发过一篇关于字符串常用处理方法的文章，字符串和数据是我们在工作中时常在打交道的，所以了解并熟练掌握它们的一些常用处理方法是必要的。现在我们就来看看数组都有哪些常...
2019-11-15 17:29:48
195
原创 js中字符串常用方法
字符串和数组可能是我们经常需要去处理的数据类型了，今天我们就来先说说字符串有哪些常用的处理方法。至于数组，我们放到下一篇文章去讨论；length返回字符串长度var str = 'hello world!'console.log(str.length) // 输出 12indexOf通过传入的字符从左到右开始对字符串进行查找，返回所查找字符在该字符串中第一次出现(最左边)的索引值，...
2019-11-15 14:15:23
181
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人