- 博客(166)
- 收藏
- 关注
RSS订阅原创 cookie、sessionStorage和localStorage的区别
相同点：都存储在浏览器端不同点：1、存储大小cookie的存储大小不超过4k,sessionStorage和localStorage 也有大小限制，但是比cookie大得多，可以达到5M或者更大2、有效时间localStorage 存储持久数据，浏览器关闭后数据不丢失，除非主动清除sessionStorage 数据在当前浏览器关闭后自动删除cookie 设置的cookie过期时间之前一直有效，如果没有设置有效时间，则在浏览器关闭之后失效；每次请求会带到请求头中，比较消
2021-12-19 11:19:36
402
原创 手写实现promise.all
let p1 = new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve(1111) },1000)})let p2 = new Promise((resolve,reject) => { setTimeout(()=>{ resolve(2222) },2000)})Promise.all([p1,p2]),then(res => {.
2021-12-19 10:58:26
227
原创 vue中eslint报错
使用vue/cli 搭建完项目，启动后报上面的错误，可以采用以下方式不报错：在 src 目录下，新建一个 vue.config.js 文件，然后在文件中写入下面的代码，然后重启npm run serve即可以module.exports = { lintOnSave:false}...
2021-10-27 15:15:39
252
原创 Vuex的工作流程
1、页面用户进行操作，dispatch调用一个action2、对应的action处理参数，比如接口，逻辑操作，传值，commit一个type类型，进而触发mutation3、mutation接收一个type类型触发对应的函数，修改state值4、state更改后对应的view视图重新渲染...
2021-10-26 14:46:12
437
原创 Vue脚手架搭建流程
1、命令： vue create vue-example2、3、4、5、6、7、8、9、这一行代码的意思是：给当前的配置是否起名保存
2021-10-20 15:49:27
73
翻译 MVC和MVVM
一、MVC mvc模式，软件代码可以分为3个部分： View(视图)，用户界面；Controller(控制器)，业务逻辑；Model(模型)，数据保存 各部分之间的通信方式如下： 1、View传递指令到Controller 2、Controller完成业务逻辑后，要求model改变状态 3、Model将新数据发送给View，用户得到反馈 所有通信都是单向的二、MVC的互动模式 ...
2021-10-20 14:25:57
78
原创 获取当前时间
function dateFormat(){ let date = new Date(); let str = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + ((date.getHours()).toString().padStart(2,'0')) + ':' + ((date.getMinutes()).toString().padStart(2,'0')) + ':' +.
2021-10-19 17:10:34
54
原创 ts语法中的一些难记点
1、接口类型中的任意属性 一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的子集。实例代码：interface Person{ name: string; age?:number; // 报错，应该是string类型 [propName: string]:string}//正确如下interface Person{ name: string; age?:number; [propName: string]:any;...
2021-10-19 16:47:51
743
原创 前后端交互图片懒加载
index.js文件代码如下$(function(){ var num =1; imgList(num) var flag = true //滚动条触底后，再次请求数据 $(window).scroll(function(){ // 获取当前视口的高度 var _h = $(this).height() //获取当前页面的高度 var h = $(document).height()
2021-10-19 13:50:54
186
原创 瀑布流布局和滚动加载更多
...html <div id="box"> <div class="item"><img src="./images/1.jpg"></div> <div class="item"><img src="./images/2.jpg"></div> <div class="item"><img src="./images/3.jpg"><.
2021-10-15 19:39:31
154
原创 es6中的Map类型
var obj1 = { name:'zs'}var obj2 = { name:'ls'}var obj3 = { [obj1]:'ww', [obj2]:'ll'}console.log(obj3) // {[object Object]:'ll'}// es5 中，形如 obj3中的键key，会调用toString()，隐式转换为字符串，[obj1]和[obj2]调用toString()转换为 [object Object] ，俩个相同的key,第.
2021-10-15 18:17:28
299
原创 js中的继承
1、原型链继承 子类的原型指向父类的实例，缺点：子类有多个实例，一个实例改变值是引用类型的属性的值会改变其他实例的相同属性的值；无法对父类进行传参function Person(){ this.name = ['张三']}Person.prototype.getName = function(){ return this.name}function Child(){}Child.prototype = new Person();Child.pr...
2021-10-15 16:20:56
71
原创 数组的拼接
var arr1 = [1,2,3,4,5]var arr2 = [6,7,8,9,10]var arra = arr1.concat(arr2) //不改变arr1和arr2的值，返回拼接后的新数组Array.prototype.push.apply(arr1,arr2) console.log(arr1) // [1,2,3,4,5,6,7,8,9,10]
2021-10-15 11:26:25
99
原创 理解伪数组
一、特点 含有length属性，无法直接使用数组的方法，可以通过索引获取内部数据的数据结构二、常见的伪数组 arguments document.getElementByTagName、document.getElementByClassName等获取的dom元素的集合 等等三、伪数组转换为数组...html <div class='div1'></div> <div cla...
2021-10-15 11:17:33
128
原创 数组的reduce方法
一、reduce的理解 arr.reduce(function(pre,cur,index,arr){},init)或者 arr.reduce(function(pre,cur,index,arr){})-- arr 表示原数组--pre 表示上一次调用回调函数后的返回值，或者原始值 init。如果init设置的值，那么第一次调用回调时，pre值就是init的值，如果没有设置init的值，那么第一次调用回调时，pre值就是arr第一项元素的值--...
2021-10-14 18:37:59
280
原创 BFC块级格式化上下文
一、BFC的理解 块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干二、实际场景 一个盒子不设置height，当内容子元素都浮动时，无法撑起自身，那么这个盒子就没有形成BFC三、如何创建BFC方法一： float的值不是none方法二：position的值不是static或者relative方法三：display的值是inline-b...
2021-10-14 16:07:51
64
原创 数组的扁平化处理
将多维数组转换为一维数组示例数组： const arr = [1,[2,[3,[4,5]]]6]方法一：使用 flatconst arr1 = arr.flat(Infinity) // [1,2,3,4,5,6]方法二：利用正则const arr2 =JSON.parse('['+JSON.stringify(arr).replace(/\[|\]/g,'')+']')方法三：使用reduceconst flatten = arr => {...
2021-10-14 15:44:26
68
原创 js的设计模式
一、单例模式1、定义 只有一个实例，可以全局访问。 主要解决：一个全局使用的类，频繁的创建和销毁 何时使用：当想控制实例的数目，节省系统化资源的时候 如何实现：判断系统是否已经有这个单例，如果有则返回，没有则创建 单例模式优点：内存中只有一个实例，减少了内存的开销，尤其是频繁地创建和销毁实例，比如首页页面的缓存2、案例 实现一个登陆的弹窗<html> <but...
2021-10-14 14:08:47
88
原创 js中的event-loop
事件循环机制由三部分组成，调用栈、微任务队列、消息队列，1、event-loop开始的时候，会从全局一行一行地执行，遇到函数调用，会压入到调用栈中，被压入的函数被称之为帧，当函数返回后，会从调用栈中弹出。<script> function fun1(){ console.log(1) } function fun2(){ console.log(2) fun1() console.log(3...
2021-10-13 18:49:11
327
原创 手写实现map
<script> var arr = [1,2,3]; var newArr = arr.map((item,index)=>{ return item*2 }) console.log(newArr) // [2,4,6] // 手写实现Map function map(arr,mapCallback){ if(!Array.isArray(arr) || !arr.length || typeof m.
2021-10-13 17:24:01
169
原创 浅拷贝和深拷贝
一、浅拷贝1、浅拷贝和赋值的区别 赋值：当我们把一个对象赋值给一个新变量时，赋的其实是这个对象在栈中的地址，而不是堆中的数据，也就是两个对象指向的是同一个存储空间。无论哪个对象发生改变，其实都是改变的存储空间的内容。因此两个对象是联动的。 var person = { name:'一个字', hobby:['学习',['看电影','打游戏'],'购物']}var person1 = person;person1.name = '张三';person1.h...
2021-10-12 17:56:49
61
原创 async和defer的区别
两者的差别：在于脚本下载完之后何时执行。defer是立即下载但延迟执行，加载后续文档元素的过程将和脚本的加载并行进行（异步），但是脚本的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。async是立即下载并执行，加载和渲染后续文档元素的过程将和js脚本的加载与执行并行进行（异步）。...
2021-06-17 11:09:16
438
原创 数组的sort方法
数组的sort方法排序：var arr = [12,4,16,5,7,14,23,20]arr.sort() 是将arr中每个值转换为字符串，
2021-06-17 10:32:32
253
原创 简单实现双向数据绑定
<input type="text" id="input_text"> <p id="p_text"></p> <script> let obj = {}; Object.defineProperty(obj,'propertyname',{ get:function(){ return obj }, ...
2021-05-21 09:52:20
81
翻译 React\Vue\Angular的区别
1. React和Vue React和Vue有许多相似之处，它们都有：使用了Virtual DOM （虚拟DOM） 提供了响应式和组件化的视图组件 专注于核心库，而将其他功能如路由和全局状态管理交给相关的库 二者的运行时速度都很快 React与Vue不同之处：在React应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。在Vue中，组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件确实需要被渲染。2. Angular和...
2021-04-22 13:11:12
174
翻译 javascript严格模式
1 javascript严格模式（use strict） javascript严格模式（strict mode）即在严格的条件下运行。 “use strict”指令在javascript 1.8.5(ECMAScript5)中新增。它不是一个语句，是一个字面量表达式，在javascript旧版中忽略。 为什么使用严格模式？消除javascript语法的一些不合理、不严谨之处，减少一些怪异行为消除代码运行的不安全之处，保证代码运行的安全 提高编译...
2021-04-15 14:15:59
228
原创 Module和commonjs的区别
区别一： module属于编译时加载，也就是静态加载，在编译时就能确定模块的依赖关系，以及输入和输出的变量；commonjs属于运行时加载，只有代码在运行时才能确定这些东西。区别二： module可以做到tree-shaking，也就是可以加载模块部分用到的内容，commonjs需要加载整个模块，再取内容。区别三： module输出的是值的引用，commonjs输出的是值的拷贝。区别四： module中的this是指 und...
2021-04-15 09:57:53
939
转载 javscript运行机制
一、javascript是单线程 JavaScript在同一时间执行一件事，是单线程的。这与它的用途有关。它是一门浏览器脚本语言，主要与用户互动，操作DOM。这决定了它只能是单线程，不然会出现复杂的同步问题。比如，假设js有两个线程，一个线程是在某个DOM节点上添加内容，另一个线程是删除这个节点，这时浏览器应该以哪个线程为准？所以为了避免矛盾，javascript是以单线程的身份诞生的，这是js的核心特征。 为了利用多核CPU的计算能力，html5提出了web worke...
2021-04-14 15:47:22
137
转载 TypeScript和javascript的区别
1. Javascript特点 JavaScript是一种轻量级的解释性脚本语言，可嵌入到html中，在浏览器端运行，实现浏览器端丰富的交互功能。 Javascript是基于对象和事件驱动的，无需特定的语言环境，只需要在支持的浏览器上运行。 特点：（1）JavaScript 是一种脚本编写语言，无需编译，只要嵌入 HTML 代码中，就能由浏览器逐行加载解释执行。（2）JavaScript 是一种基于对象的语言，可以创建对象同时使用现有对象。但是 ...
2021-04-08 10:54:53
1173
原创 图片懒加载
如果：offsetTop-scroolTop<clientHeight，则图片进入了可视区内，则被请求；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=..
2021-04-07 11:43:01
56
翻译 map和object
1. Map对象 Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。2.Maps 和 Objects 的区别一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值。 Map 中的键值是有序的（FIFO先进先出 原则），而添加到对象中的键则不是。 Map的键值对个数可以从 size 属性获取，而Object的键值对个数只能手动计算。 Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键...
2021-04-02 12:50:57
502
原创 let、var和const的区别
var、let和const都是声明变量的。它们的区别是： var声明的变量会提升到函数的最顶部，let和 const不会； console.log(a); console.log(b); //报错 console.log(c); //报错 let b = 2; const c = 3; var a = 1;2....
2021-04-01 14:23:49
58
原创 闭包
闭包，是可以实现从函数外部访问函数内部变量的代码书写方式。 function f1(){ var a = 1; function f2(){ return a; } return f2; } var b = f1(); // b=f2 var c = b(); // c=1
2021-04-01 13:41:51
51
翻译 session和cookie
http协议是无状态协议，不能以状态来区分和管理请求和响应。无法根据之前的状态处理本地的请求处理。这种无状态的优点是减少服务器的CPU、内存资源的消耗。缺点是，在某些登录场景下，用户登录到某个页面，进行页面跳转后，还得再重新输入登录信息去登录。所以为了解决这个问题，cookie诞生了...
2021-04-01 13:23:14
63
原创 css3属性选择器
下面的介绍都已p元素为例来写：1. p[target] 选择出有target属性的所有p元素2. p[target=_blank] 选择出 target属性是_blank的所有p元素3. p[target~=abc] 和 p[target*=abc] 结果一样，都是选择出 target属性值包含abc的所有p元素4. p[target|=abc] 和 p[target^=abc] 结果一样，都是选择出target属性值是以abc开头的所有p元素5. p[target$=abc] 选择..
2021-03-31 16:37:01
77
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人