- 博客(30)
- 收藏
- 关注
RSS订阅原创 执行上下文、作用域、闭包
执行上下文var a = 2function add(){var b = 10return a+b}add()所谓的变量提升，是指在 JavaScript 代码执行过程中，JavaScript 引擎把变量的声明部分和函数的声明部分提升到代码开头的“行为”。变量被提升后，会给变量设置默认值，这个默认值就是我们熟悉的 undefined。...
2021-10-13 18:29:41
56
原创 跨域与安全
跨域浏览器遵循同源政策(scheme(协议)、host(主机)和port(端口)都相同则为同源)。非同源站点有这样一些限制:不能读取和修改对方的 DOM不读访问对方的 Cookie、IndexDB 和 LocalStorage限制 XMLHttpRequest 请求。(后面的话题着重围绕这个)CORSCORS 其实是 W3C 的一个标准，全称是跨域资源共享。服务器需要附加特定的响应头Access-Control-Allow-OriginAccess-Control-Allow-Cred
2021-10-12 15:41:26
100
原创 跨域与安全
跨域浏览器遵循同源政策(scheme(协议)、host(主机)和port(端口)都相同则为同源)。非同源站点有这样一些限制:不能读取和修改对方的 DOM不读访问对方的 Cookie、IndexDB 和 LocalStorage限制 XMLHttpRequest 请求。(后面的话题着重围绕这个)CORSCORS 其实是 W3C 的一个标准，全称是跨域资源共享。服务器需要附加特定的响应头Access-Control-Allow-OriginAccess-Control-Allow-Cred
2021-10-12 15:39:01
1996
原创 浏览器本地缓存
浏览器的本地存储主要分为Cookie、WebStorage和IndexedDB, 其中WebStorage又可以分为localStorage和sessionStorage。接下来我们就来一一分析这些本地存储方案。CookieCookie 最开始被设计出来其实并不是来做本地存储的，而是为了弥补HTTP在状态管理上的不足。HTTP 协议是一个无状态协议，客户端向服务器发请求，服务器返回响应，故事就这样结束了，但是下次发请求如何让服务端知道客户端是谁呢？这种背景下，就产生了 Cookie.Cooki.
2021-10-12 14:47:19
667
原创 HTTP — HTTP发展史
HTTP/0.9https://mp.weixin.qq.com/s/MBfyWeagIQin43z0ypm4JgHTTP/1.0HTTP/1.1HTTP/2.0
2021-10-05 15:40:49
146
原创 vue 题目累计
v-show 和 v-if 的区别v-show 通过 CSS display 来控制显示和隐藏v-if 组件真正的渲染和销毁，而不是显示隐藏频繁切换显示用 v-show，否则用v-ifv-for 为何使用 keydiff算法通过 tag 和 key 来判断，是否是sameNode减少渲染次数，提升渲染性能描述 vue 组件生命周期（父子组件）vue组件如何通讯父子组件 props 和 this.$emit自定义事件 event. $on $off $emitvuex..
2021-09-13 19:43:17
56
原创 vue 原理
MVVM（Model-View-ViewModel）数据驱动视图ViewModel 是一个连接层，比如点击事件修改model的数据，促使view变更Vue响应式Object.defineProperty 代理（记得深度监听问题）双向数据绑定Object.defineProperty 的缺点（Vue3 利用了Proxy）深度监听需要递归到底，一次性计算量大无法监听新增、删除属性（所以需要用Vue.set、Vue.delete）无法监听数组变化vue实现响应式时，把无法监听数组 的情况通过
2021-09-12 15:55:45
50
原创 vue-router 相关
路由模式（hash、h5-history）hash不需要后端支持，history需要后端支持hash：http://xxx.com/#/xxxhistory：http://xxx.com/xxx路由配置（动态路由、懒加载）const router = new VueRouter({ mode: 'history', routes: [ { path: '/', redirect: '/home' }, { path: '/home', comp
2021-09-11 18:09:02
78
原创 vuex 相关
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化基本使用四大模块state：一般用于初始化数据getters：跟计算属性很类似actions：异步操作，比如ajax请求mutations：同步操作vue中使用dispatch：this.$ store.dispath(‘action名’, 参数)commit：this.$store.commit(‘action名’, 参数)ma.
2021-09-11 17:42:08
155
原创 vue高级特性
自定义v-model// 父组件<template> <p>{{name}}</p> <Child v-model="name"></template><script>export default { data() { return { name: 'hahaha' } }}</script>// 子组件Child<template> <in
2021-09-11 17:25:43
55
原创 webpack基本配置
什么是前端工程化前端工程化是根据业务特点，将前端开发流程规范化，标准化，它包括了开发流程，技术选型，代码规范，构建发布等，用于提升前端工程师的开发效率和代码质量前端代码为什么要进行构建打包webpack 基本配置entry：入口output：出口loader：webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。p
2021-09-10 18:03:01
54
原创 vue基础使用
说说你对 SPA 单页面的理解，它的优缺点分别是什么？仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载优点用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；基于上面一点，SPA 相对对服务器压力小；前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；缺点初
2021-09-06 15:01:24
177
原创 ES6相关
set、map、weakSet、weakMap 的区别Set和Map本身就是一种构造函数，新增的数据存储结构Set：成员唯一、无序且不重复，[val, val]，可以遍历WeakSet：成员都是对象，成员都是弱引用，可被垃圾回收机制回收，可以保存dom节点，不容易造成内存泄漏，不能遍历Map：本质上是键值对的集合，类似集合，可以遍历WeakMap：只接受对象作为键名(null除外)，键名是弱引用，不能遍历var、let、const之间的区别先说下var对缺点，再来扩展let、const解决的痛
2021-09-05 19:51:11
57
原创 HTTP协议
HTTP/1.0/1.1/2.0HTTP 0.91991年,原型版本，功能简陋，只有一个命令GET,只支持纯文本内容，该版本已过时。HTTP 1.0任何格式的内容都可以发送，这使得互联网不仅可以传输文字，还能传输图像、视频、二进制等文件。除了GET命令，还引入了POST命令和HEAD命令。http请求和回应的格式改变，除了数据部分，每次通信都必须包括头信息（HTTP header），用来描述一些元数据。只使用 header 中的 If-Modified-Since 和 Expires 作为缓存失效的
2021-09-05 15:48:41
78
原创 javascript相关
JS数据类型原始类型：boolean、string、number、undefined、symbol、bigint、null引用类型：对象Object（object、array、regexp、date、math、function）null是对象吗？为啥？不是，这是js存在的一个悠久bug，在js最初使用的32位系统，000开头代表对象，而null表示全0说下var、let、const先说下var对缺点，再来扩展let、const解决的痛点var会存在变量提升，从而导致了很多与直觉不符的代码
2021-09-05 15:16:50
49
原创 浏览器、网络
目前浏览器主要有5个进程：（单进程「不稳定、不安全」时代到多进程时代）浏览器进程：主要负责界面显示、用户交互、子进程管理，同时提供存储等功能渲染进程：核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，每个tab页都有一个渲染进程网络进程：主要负责页面的网络资源加载插件进程：主要是负责插件的运行，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响。GPU进程：GPU 的使用初衷是为了实现 3D CSS 的效果进程和线程线程
2021-09-05 14:20:15
62
原创 链表相关算法
输出链表中倒数第k个节点function findK(head, k) { var stack = [] while(head){ stack.push(head) head = head.next } return stack[stack.length - k]}
2021-09-05 14:01:30
42
原创 数组相关算法
快排排序：找到一个数，数组通过这个数的大小去分左右两边，递归function quickSort(arr) { var len = arr.length if(len <= 1) return arr var temp = arr[0] var left = [] var right = [] for(var i = 0; i < len; i++){ if(compare(temp, arr[i])){ // compare比较 left.push(arr[i])
2021-09-05 13:57:44
55
原创 观察者模式
function Event () { this.cache = {};}Event.prototype.on = function (type, handle) { if(!this.cache[type]){ this.cache[type] = [handle]; }else{ this.cache[type].push(handle); }}Event.prototype.emit = function () { var type = arguments[0]; var
2021-09-05 13:41:37
29
原创 双向数据绑定
<input type="text" id='inp'><div id='view'></div>let oInp = document.getElementById('inp');let oDiv = document.getElementById('view');let oData = { value: ''}function update () { oDiv.innerText = oData.value;}oInp.oninput = fun
2021-09-05 13:40:07
46
原创 ajax、jsonp封装
ajaxfunction ajax (url) { return new Promise((res, rej) => { var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp"); xhr.open('get', url); xhr.send(); xhr.onreadystatechange = function () { if(xhr.re
2021-09-05 13:10:05
86
原创 防抖、节流
节流：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。场景：鼠标不断点击触发，如抢优惠券function throttle (handle, wait) { var lastTime = 0; return function () { var nowTime = new Date().getTime(); if(nowTime - lastTime > wait){ handle.apply(this, arguments); last
2021-09-05 13:08:23
32
原创 css相关
说下盒模型盒模型由四个部分组成：margin、border、padding、content标准(IE)盒模型：width = content （box-sizing:content-box;）怪异盒模型：width = content + padding + border （box-sizing:border-box;）display有哪些值？说明他们的作用none: 元素不显示，并从文档流中移除inline: 行级元素block: 块级元素inline-block: 行级块元素flex:
2021-09-04 21:21:30
36
原创 数组方法相关原理
// 改变原数组 push、pop、unshift、shift、reverse、splice、sort// 不改变 concat、toString、slice、join// 数组乱序arr = [ 1, 2, 3]arr.sort(function(a, b) {return Math.random() - 0.5})// push原理Array.prototype.push = function (target) {this[this.length] = targetthis.leng
2021-09-04 15:07:44
70
原创 HTML相关
HTMLDoctype作用？严格模式与混杂模式如何区分？它们有何意义?告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE 不存在或格式不正确会导致文档以兼容模式呈现行内元素、块级元素、行内块元素行内：span、a…块级：div、p、ul、h1…行内块：img浏览器内核Trident内核：IEGecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等。Presto内核：Opera7及以上。 [Opera内核原为：Presto，现
2021-09-03 17:49:40
46
原创 instanceof、new、数组去重、deepClone
function myInstanceof (leftVal, rightVal) { let left = leftVal.__proto__ let right = rightVal.prototype while(true){ if(left === null){ return false }else if(left === right){ return true } left = left.__proto__ }
2021-09-03 17:12:44
65
原创 call、apply、bind
// callFunction.prototype.myCall = function () { [context, ...arg] = [...arguments]; context.fn = this; var result = context.fn(...arg); delete context.fn; return result;}// applyFunction.prototype.myApply = function (context, args) { context.fn
2021-09-03 16:43:35
41
原创 ES6-Map
// 原理: 链表、hash算法、桶// 桶: 在桶内拟定8个空间, 链表: next, hash算法: 把不定的值变为特定范围的值 [0, 8)// 用数组拟定为桶，桶内8个空间// 传入的值可能为 object，array，string，number，undefined，NaN，boolean…// 将传入的值通过hash算法求出[0, 8)的特定值，最后通过链表插入// 1.不重复// 2.字符串 数值 NaN null [] {} function(){}…// 3.set get d
2021-09-03 16:42:19
47
原创 Promise
// 1.状态status变化，捕获异常// 2.Promise异步操作(回调解决)// 3.then链式操作，异步执行，捕获异常，空then// 4.then返回值为new Promise// 5.Promise.race()，Promise.all()function Promise (executor) { var self = this; self.status = 'Pedding'; self.value = null; self.ResolveCallBackList = [
2021-09-03 16:39:10
55
原创 基础算法篇
数组、链表/* 快排 */function quickSort (arr) { if(arr.length <= 0) return arr; var temp = arr[0]; var left = []; var right = []; for(var i = 1; i < arr.length; i++){ if(co...
2020-03-31 16:07:38
111
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人