笔记
关注
分享
扫一扫
enter键上的妹妹
此人不懒,但啥都没有写
展开
-
笔记：前端性能的优化（总结）
优化的三大部分对于图片的优化减少http请求减小http请求的大小启用Gzip压缩图片优化图片懒加载懒加载的时候先使用默认图占位，加载完成后依次加载真实图片使用base64格式的图片使用webp格式的图片小的背景图片合成（精灵图）使用svg图片前台在请求图片的时候直接带上宽高，服务器直接把处理好的图片发过来对于分辨率比较高的图片，服务器先发送一个分辨率很低的模糊图片，等到用户点击大图，或者网络空闲的时候在把高清大图请求回来替换减少http请求路由懒加载重要的页面使用原创 2020-09-16 19:08:13 · 169 阅读 · 0 评论 -
笔记：axios的简单使用
概念Axios是-个基于promise的HTTP库，可以用在浏览器和node.js中。类似jq的ajaxaxios是一个已经封装好的ajax的一个库不支持jsonp优点从浏览器中创建XML HttpRequests从node.js 创建http请求支持Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换JSON数据客户端支持防御XSRF (跨站请求伪造)挂载到Vue实例可以把axios直接挂载Vue上，这样每个页面不用导入就可以直接用了Vue.pr原创 2020-09-08 22:00:39 · 221 阅读 · 0 评论 -
笔记：Mock简单使用
作用拦截ajax生成随机数据安装npm install mockjs -D导入，建议写在main.js里import Mock from 'mock' const Mock = require('mock')配置拦截需要单独写个文件，在main.js文件里引入Mock.mock('requestPath','GET',function(){ return { name:'111'}})参数1 拦截的请求接口路径（可以是正则表达式）参数2 拦截的请求方式原创 2020-09-08 21:48:18 · 203 阅读 · 0 评论 -
你不知道的parseInt
今天在控制台输入了以下代码咦？！为什么会返回1呢？这难道不是吧13这个数转换为2进制返回么？这引起了我的兴趣，接着我又输入了以下代码这特么为啥？！翻阅资料之后我得知parseInt接受到参数之后，会对第一个参数进行解析比如说第一个参数是345，那么就把这个数拆成3和4和5拿上3和4和5去跟参数2做对比参数2是一个进制数，去看参数1的每一位数是否在参数2的最大值之内比如说2进制最大值为1，3进制最大值为2，依此类推。参数2最大值为36如果发现任意一位数不在参数2的限制之内，则不在原创 2020-09-01 23:04:09 · 244 阅读 · 0 评论 -
Vue2.6+ 插槽新语法
Vue里面插槽老的写法已经走在废弃的路上了，还不抓紧时间学一下最新的语法？原创 2020-09-01 17:10:01 · 4772 阅读 · 2 评论 -
笔记：Git版本管理系统
Git是一个版本管理系统（VCS），它可以在任何时间点，将文档的状态作为更新记录保存起来，也可以在任何时间点，将更新记录回复过来版本管理版本管理是一种记录文件变化的方式，以便将来查阅特定版本的文件的内容使用步骤先下载git（https://npm.taobao.org/mirrors/git-for-windows/）一路下一步，安装完成之后，会在鼠标右键菜单出现，最常用的 Git bash here命令查看版本git --version查看分支git branch原创 2020-08-27 21:43:37 · 122 阅读 · 0 评论 -
笔记：Less的简单使用方法（css前置处理器）
Less包含一套自定义的语法和一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件变量格式@变量名：值不能包特殊字符，不能以数字开头，大小写敏感嵌套格式父级元素{ css样式； 子集元素{ css样式 }}交集|伪类|伪元素选择器内层选择器前如果没有 & 符号，会被解析为父系的子代如果有 & 符合，会被解析成父元素自身或者父元素的伪类父级元素{ css代码； &：hover{ c原创 2020-08-27 21:33:17 · 229 阅读 · 0 评论 -
笔记：TypeScript泛型
泛型**就是解决 类 接口 方法 的复用性，以及对不特定数据类型的支持**泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。可以支持不特定的数据类型T 表示泛型，具体什么类型是用的时候决定的，可以用任意字母，建议用 T泛型函数function 函数名<T>(参数类型:T):T{ //...}调用函数名<参数数据类型>(值)泛型类class 类名<T>{原创 2020-08-27 21:27:10 · 111 阅读 · 0 评论 -
笔记：TypeScript接口
在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。接口定义了某一批类所需要遵循的规范，接口不关心这些类的内部状态数据，也不关心这些类里的方法的实现细节，它只规定这批类里必须提供某些方法，提供某些方法，提供这些方法的类就可以满足实际需要。通过 interface 关键字定义接口属性类接口对 json 的约束interface 父类名{ 子类必须属性a:数据类型; 子类必须属性b:数据类型;}function 子类名(参数类原创 2020-08-27 21:22:04 · 136 阅读 · 0 评论 -
笔记：TypeScript实现面向对象
面向对象定义一个类class 类名{ 名称:数据类型； constructor(参数:数据类型){ } // 构造函数 方法名():返回值类型{ }}省略了 public 关键字构造函数 实例化的时候触发属性修饰符用来修饰类里面的属性和方法public 公有 类里面，类外面，子类，都可以访问 protected 保护 类里面，子类，可以访问 provite 私有 只有在 类里面 可以访问 继承的方法super 是为了初始化父类的构造函数，这原创 2020-08-27 21:14:35 · 318 阅读 · 1 评论 -
笔记：TypeScript函数语法
函数声明方式普通函数function 函数名():数据类型{ return 数据类型}匿名函数let 函数名 = function():数据类型{ return 数据类型}传参function 函数名(参数1:数据类型，参数2:数据类型):返回值数据类型{ 内容}可选参数 TS中实参和形参数据类型必须一样，如果不一样就要配置可选参数 参数的数据类型冒号前加一个问号就是可选参数，必须配置在最后面function 函数名(参数1:数据类原创 2020-08-27 21:03:43 · 144 阅读 · 0 评论 -
js原生fetch方法??小抄级汇总
fetchXMLHttpRequest 是一个设计粗糙的 API，不符合关注分离（Separation of Concerns）的原则，配置和调用方式非常混乱，而且基于事件的异步模型写起来也没有现代的 Promise，generator/yield，async/await 友好。Fetch 的出现就是为了解决 XHR 的问题。同时简洁的语法，基于标准 Promise 的实现，支持 async/await等特性更是如虎添翼，废话不多说，上示例。 fetch('请求的地址',{ method:'原创 2020-08-19 19:57:23 · 648 阅读 · 0 评论 -
JS中的Generator(笔记)
Generator语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行普通函数就像是做飞机，直接到站，中间不能停车，但是Generator就像是咱们自己开着车出去玩，想啥原创 2020-08-14 01:10:43 · 165 阅读 · 0 评论 -
BFC？看这一篇就够了！！！
什么是BFCBFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干概念晦涩难懂！不要着急，继续往下看BFC特性1.内部的盒子会在垂直方向，一个一个地放置；2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；3.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是原创 2020-08-13 16:48:57 · 440 阅读 · 0 评论 -
GFC?一篇管饱(display:grid)
GFCGFC全称是**gridLavoutformatting context.**他就是网格布局格式上下文，是用于布局网格容器的一-块渲染区域。其实把display设置为grid后，这个盒子就成了grid布局div{ display:grid;}flex布局好用吧？这个grid布局可是flex Plus ！！！赶紧来试试用grid实现9宫格<html><head><style> .box{ display:grid; grid原创 2020-08-13 15:36:18 · 2946 阅读 · 0 评论 -
HTTP协议？管饱篇（转）
HTTP协议简介超文本传输协议是一种用于分布式，协作式和超媒体信息系统的应用层协议，HTTP是万维网的数据通信的基础蒂姆·伯纳斯-李提交1999年6月发布——HTTP1.12015年5月发布 HTTP/2 取代HTTP1.1HTTP协议概述HTTP是一个客户端（终端，客户端）和服务器端（网站）请求和应答的标准（TCP）。通过使用网页浏览器或者其他工具，客户端发起一个HTTP请求到服务器上指定端口。我们称这个客户端为用户代理程序（user agent）。应答服务器上存储着一些资源，比如js,转载 2020-08-12 19:47:48 · 627 阅读 · 0 评论 -
JS中Map数据结构？看这一篇就够了！！！
MapJavaScript 的对象（Object），本质上是键值对的集合（Hash结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现任何具有 Iterator接口、且每个成员都是一个双元素的数组的数据结构都可以当作Map构造函数的参原创 2020-08-12 11:45:41 · 6485 阅读 · 1 评论 -
JS中Set数据结构？看这一篇就够了！！！
SetSet本身是一个构造函数，用来生成 Set 数据结构。类似于数组，但是成员的值都是唯一的，没有重复的值Set函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。向 Set 加入值的时候，不会发生类型转换,使用的算法叫做“Same-value-zeroequality”，它类似于精确相等运算符（===），主要的区别是向 Set加入值时认为NaN等于自身，而精确相等运算符认为NaN不等于自身。两个对象总是不相等的。Set 实例的属性和方法Set原创 2020-08-11 00:07:08 · 1509 阅读 · 1 评论 -
TyperScript独有数据类型,看这一篇就够了
TS独有数据类型viod(不常用)在typescript中主要是表示没有任何返回值的函数函数没有任何返回值的时候会用到any默认的类型，其类型的变量允许任何类型的值放弃了类型检查，最好不要用这个，用这个还不如去写jslet a:any = 1;a = 'xxx';a = [];never是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值ever 类型的变量只能被 never 类型所赋值，在函数中它通常表现为抛出异常或无法执行到终止点原组数组的一种原创 2020-08-12 09:14:40 · 781 阅读 · 0 评论 -
JS中的Promise？看这一篇就够用了
PromisePromise 是异步编程的一种解决方案所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理原理对象的状态不受外界影响有三种状态: pending (进行中)、fulfilled (已成功)和rejected (已失败)一旦状态改变，就不会再变，任何时候都可以得到这个结果Promise对象的状态改变，只有两种可能:从pending变 为fu原创 2020-08-12 09:14:26 · 1684 阅读 · 2 评论 -
原生js本地存储？看这一篇就够了！！！
JS cookie1、概述cookie也叫HTTP Cookie，最初是客户端与服务器端进行会话（Session)使用的。如果没写expires,那么下次打开网页，cookie就会消失，这个就是会话机制2、格式name=value; [expires=date]; [path=path]; [domain=somewhere.com];[secure]encodeURIComponent函数可以：将文本字符串编码为一个统一资源标识符 (URI) 的一个有效组件上面的方法主要用于协议、主原创 2020-08-11 00:05:34 · 1665 阅读 · 0 评论 -
js正则表达？看这一篇就够了！！！
JS 正则表达式创建方法直接量的方式创建var reg = /....../构造函数创建var reg = new RegExp( "" )作用表单验证敏感词替换获取字符串特定部分优点灵活性，逻辑性，功能性非常强可以迅速用及其简单的方式达到字符串的复杂控制检测方法text方法reg.text(被检测字符);// 用来检测string中是否匹配reg对象// 返回值 boolean// true 匹配// false 不匹配exec正则.exe原创 2020-08-11 00:05:01 · 288 阅读 · 0 评论 -
FormData表单对象方法，一篇管饱
FormData步骤1 : 获取form表单元素let _form = document.querySelector('form');2 : 创建FormData对象let fd = new FormData(_form);3 : 打印 _form 里面的值console.log(fd.get('带有name属性的标签'))特点FormData是获取form表单里面的拥有name属性的标签的值的.获取到的值是键值对形式的name属性名 = 值注意为什么要有FormData呢,原创 2020-08-11 00:04:46 · 820 阅读 · 0 评论 -
原生js事件？看这一篇就够了！！！
事件属性传统注册事件的方式有唯一性，也就是同一个元素同一个事件只能设置一个处理函数，最后注册添加的的处理函数会覆盖前面注册添加的处理函数解决办法 => 事件监听事件流事件冒泡 : 事件从子元素向父元素传播事件捕获 : 事件从父元素向子元素传播事件对象event 就是一个事件对象，写在 侦听函数的 小括号 里当作形参事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数事件对象是事件的一系列相关数据的集合，跟事件相关的，比如鼠标点击里面就包含鼠标的相关信息，鼠原创 2020-08-11 00:05:17 · 832 阅读 · 0 评论 -
原生jsBom对象？看这一篇就够了！！！
BOM属性方法window.screen.width // 屏幕宽window.screen.availWidth // 屏幕可用宽window.history.back() // 下一页window.history.forward() // 上一页window.history.go() // 某一页window.location.href // 获取完整路径window.location.pathname // 获取路径名window.location.reload( ) //刷新原创 2020-08-11 00:04:08 · 744 阅读 · 0 评论 -
原生jsDom对象？看这一篇就够了
dom元素的属性操作读操作js对象.属性名写操作js对象.属性名=属性值属性操作dom对象.style.属性名=属性值修改内容dom对象.innerHTMLdom对象.innerText样式操作读操作js对象.style.样式名 // 读取的是行内元素写操作js对象.style.样式名=样式值js中不允许出现短划线这个符号margin-leftmarginLeftfont-sizefontSize-webkit-transform==WebkitTransfo原创 2020-08-10 19:17:55 · 540 阅读 · 0 评论 -
同源和跨域？看这一篇就够了！！！
跨域概念浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。同源策略:同源是指，域名，协议，端口相同。不同源的客户端脚本(javascript、ActionScript)在没明确授权的情况下，不能读写对方的资源。为什么跨域为了让某些数据实现不同域名上的共享，以达到数据共用提高处理效率的目的，需要对部分数据进行跨域访问！实现方法JSONP(JSON with Padding)通过script标签的src属性，进行域名的包装来完成跨域数据的原创 2020-08-10 18:47:24 · 332 阅读 · 0 评论 -
HTTP请求？看这一篇就够了！！！
HTTP请求概念超文本传输协议（HTTP，HyperText Transfer Protocol)http是计算网络通信的规则http是一种无状态的协议（不建立持久连接）HTTP的7个请求步骤1 : 建立TCP连接,即著名的TCP/IP协议族2 : Web浏览器向Web服务器发送请求命令3 : Web浏览器发送请求头信息4 : Web服务器应答,应答的第一部分是协议的版本号和应答状态码。5 : Web服务器发送应答头信息6 : Web服务器向浏览器发送数据7 : Web服务器关闭T原创 2020-08-10 18:45:17 · 907 阅读 · 0 评论 -
jQuery中的bom操作？看这一篇就够了！！！
获取属性值$("select").attr("property"); // 可以获取任何在标签内的属性$("select").prop("property"); // 无法获取自定义属性添加属性$("select").attr({"property" : "value","property" : "value".....});$("select").prpo({"property" : "value","property" : "value".....});// 无法设置自定义属性at原创 2020-08-10 17:20:24 · 701 阅读 · 0 评论 -
jQuery中的事件？看这一篇就够了！！！
模拟事件$("seletor").trigger("event") // 会触发默认行为$("seletor").triggerHandler("event") // 不会触发默认行为委托事件概念事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。让父级来代替本级工作。$("select").bind("事件1,事件2....",function(){}); // 多个事件对应一个函数$("select").bind({"事件1:function(){},事件2:func原创 2020-08-10 17:11:41 · 110 阅读 · 0 评论 -
jQuery关于类的方法?看着一篇就够了！！
$("对象").addClass("类1 类2 ....."); // 增加类// 增加多个类时中间用 空格 隔开// 增加的类不用加 " . "$("对象").removeClass("类1 类2 ....."); // 删除类$("对象").toggleClass("类1 类2 .....");// 没有的话增加类.有的话删除类$("对象").val(“str”) // 设置表单value的值// 如果val的小括号里什么也不写的话就是读取值...原创 2020-08-10 17:05:44 · 102 阅读 · 0 评论 -
jQuery中的动画?看这一篇就够了!!
显示与隐藏$("对象").hide(参数1,参数2); // 隐藏类// hide 括号里参数1可以写数字和描述速度的单词,单位是毫秒// 参数2可以写函数,这个函数是等执行完参数1之后再执行 ,回调函数$("对象").show(); // 显示类// 参数如同隐藏淡入淡出$('select').fadeIn(speed,callback) // 淡入$('select').fadeOut(speed,callback) // 淡出$('select').fadeToggle(原创 2020-08-10 17:00:59 · 103 阅读 · 0 评论 -
jQuery中文档dom处理
内部插入(父子之间)插入尾部$("select").append(content) //在jq对象内部的结尾插入content内容//可以解析标签// 可以解析jq对象// 同一行的尾部$("content").appendTo("jq对象") // 此方法建议 content含有标签 的时候用,相当于创建了一个新的jQ对象插入开头$("selector").prepend("content") // 在jq对象内部的开头插入content内容//可以解析标签//可以解析jq对象$原创 2020-08-10 16:50:52 · 107 阅读 · 0 评论 -
jQuery通过遍历来选择元素
概念Query 遍历，可以理解为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。向上遍历$("select").parent() //返回被选元素的直接父元素$("select").parents() //返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)$("select").parents("指定祖先") $("select").parentsUntil("指定祖先原创 2020-08-10 16:33:15 · 407 阅读 · 0 评论 -
关于box-shadow的问题
官方图 来一张水平阴影位置：是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边；垂直阴影：是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；阴影模糊半径：此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；值越大越模糊阴影扩展半径此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小co原创 2020-05-24 17:29:16 · 1070 阅读 · 0 评论 -
标签右浮动顺序倒转问题
今天写了一个导航栏 , 我给ul下的li加了右浮动,我发现顺序倒转 <style type="text/css"> *{ /*清除边距*/ margin: 0; padding: 0; } div{ /*用div包起来,看的清除*/ width: 150px; height: 20px; border: 3px solid red; } ul{ /*清除默认样式*/ list-style: none; } ul li{ wi原创 2020-05-21 00:29:03 · 4123 阅读 · 4 评论 -
CSS中文字两端对齐的问题
今天写作业的时候需要把文字两端对齐我输入了p{ width:100px; text-align:justify;}但是那一行文字仿佛聋子一样听不到我说的话!查阅资料后发现应该这么写p{ width:100px; text-align-last:justify; text-align:justify;/*只有一行文本时可以省略*/ text-justify:distribute-all-lines; /*这一行可不写,其目的是兼容IE*/}text-align-last这句原创 2020-05-21 00:12:06 · 767 阅读 · 0 评论 -
基于某个时间点的计时器
明天就是5.20了,手把手教大家讨女孩子欢心第一步:完事儿从头起,先写一个script标签<script></script>写一个名为fn的函数<script> function fn() { }</script>设置一个过去的时间,命名为ago,可以是你和女孩子在一起的纪念日哦<script> function fn() { new ago = new Date("2000-1-1 20:0:0"); }&原创 2020-05-19 23:06:36 · 814 阅读 · 0 评论