花圃

# CommonJS # 核心函数 exports exports 是一个 object，可以在它身上添加需要导出的属性，是默认的根本导出的对象 module.exports module.exports 是被模块直接导出的对象，它实际上默认是 exports 的引用 require require 实际上是会执行要导出的模块里的 code，然后导入被导入模块的 module.exports # 加载模式 commonJS 的加载模式是运行时的，同步的，它是当代码运行到 require 函数的这一行时，才会开始加载模块，并且执行模块里面的代码，模块里的代码执行完毕才会执行下一行。 #...

# hooks 使用规则 hooks 只能在函数组件 or 自定义 hook 的顶部使用 不能在条件，循环，嵌套函数中使用 hooks # 为什么会有这样的规则，hooks 究竟是怎么保存我们函数组件的状态的？ Not Magic, Just Arrays # 基本原理 函数组件初次执行阶段 React 会维护一个数组 componentHooks ，和一个索引 componentHookIndex 函数组件中的 useState 被调用时，初始值和修改初始值的方法被存进 pair 数组，然后再将 pair 数组通过索引 componentHookIndex 存进...

# 对数据管理和页面渲染的解析 Vue 用户只需要去关心数据，而完全不需要关心界面是怎么渲染怎么更新的，响应式数据一改变，vue 内部就会做数据劫持，触发收集的依赖，从而调用 render 函数完成视图的更新，这都是 vue 帮我们做好的，我们只需要关心数据。 React React 是没有数据劫持的，我们想要界面随着数据更新而更新就必须调用 setState , 而调用 setState 实际上不仅改了数据，内部还相当于调用了 render 函数来对页面进行更新，也就是说用户不仅仅需要去关心数据的改变，还需要手动的去触发页面的渲染更新。 # DOM...

# 基本原理 根据用户的 id 发送请求获取用户能够看到的菜单 将需要动态注册的路由对象放到一个数组里面 路由对象在一个个单独的文件里面 需要从文件中读取路由对象，然后放到数组里面（这一步我们将进行自动化操作） 根据菜单去匹配对应的路由对象，并将其注册 Router.addRoute('main', route) # 详细步骤 根据用户的 id 发送请求获取用户能够看到的菜单 这里我们看一下服务器返回给我们的信息 对返回的信息进行一波浅浅的分析 🤔 是一个数组，数组里面存储的是所有一级菜单的信息， name , url ，然后我们发现还有一个 children...

# XSS 攻击 # 概念 XSS 指的是跨站脚本攻击，是一种代码注入攻击，本质是网站没有对恶意脚本进行过滤，导致其和普通代码混在了一起，最终被浏览器执行。 # 可以进行的操作 获取页面的数据，比如 DOM，cookie，localStorage，sessionStorage DOS 攻击，向服务器发送大量的请求，占用服务器资源，导致用户无法访问服务器 破坏页面结构 流量劫持（将链接指向其他网站） # XSS 攻击类型 存储型 XSS 攻击 指的是恶意脚本会存储在服务器上，等到浏览器请求数据的时候，恶意脚本会返回，并执行。 反射型 XSS 攻击 指的是诱导用户访问一个带有恶意代码的...

# http1.1 与 http1.0 的区别 连接方面 http1.0 不是持久连接，每次发送请求都需要建立一个连接；http1.1 是持久连接，多次请求服用一个 tcp 连接。 缓存方面 http1.0 的缓存主要是使用请求头中的 If-Modified-Sine,Expires 作为缓存判断的标准。http1.1 则增加了 Etag, if-None-match,if-Match 等更多选项来控制缓存策略 资源请求方面 http1.0 请求资源的时候，有时候只是需要请求一点东西，但是服务器会把整个对象返回，存在浪费带宽的现象，并且不支持断点续传。http1.1 则在请求同中增加了...

# 常见的请求方法及其相关面试问题 # 请求方法 GET 用来请求服务器的资源，是一个幂等请求，不会造成服务器数据的改变 POST 用来向服务器提供实体，服务器会保存提供的实体数据，不是一个幂等请求，会对服务器存储的数据造成改变。 PUT 用来提供数据，以更新服务器存储的数据。 DELETE 用来删除服务器里存储的相关数据 HEAD 和 GET 类似，只不过没有请求体 OPTIONS 用来发起预请求，通常用于跨域问题 CONNECT 要求在与代理服务器通信时建立一个隧道，用于 TCP 通信 TRACE 通常用于测试 # 相关面试问题 GET 请求和 POST...

# webpack 常用配置 const path = require('path');const CleanWebpackPlugin = require('clean-webpack-plugin');const HtmlWebpackPlugin = require('html-webpack-plugin');const CopyWebpackPlugin = require('copy-webpack-plugin');const HappyPack =...

# 防抖 简要介绍 防抖是指事件被触发后的一定时间后才执行回调，这期间如果事件被再次触发，则重新计时，常用于按钮的点击事件，避免按钮短时间内被多次点击，向服务器发送过多的请求 主要应用 按钮提交场景：防⽌多次提交按钮，只执⾏最后提交的⼀次 服务端验证场景：表单验证需要服务端配合，只执⾏⼀段连续的输⼊事件的最后⼀次。 完整代码 function debounce(fn, dup === 100) { let timer; return function(...arg) { clearTimeout(timer); timer =...

# 实现图片懒加载 # 传统的不够优雅的实现方式 完整代码 const imgs = document.querySelectorAll('img');window.addEventListener('scroll', () => { imgs.forEach((img) => { if (img.getBoundingClientRect().top < window.innerHeight) { const dataSrc =...