huihui
huihui
 ## 一、方式 `javaScript`本地缓存的方法我们主要讲述以下四种： - cookie - sessionStorage - localStorage - indexedDB ### cookie `Cookie`，类型为「小型文本文件」，指某些网站为了辨别用户身份而储存在用户本地终端上的数据。是为了解决 `HTTP `无状态导致的问题 作为一段一般不超过 4KB 的小型文本数据，它由一个名称（Name）、一个值（Value）和其它几个用于控制 `cookie `有效期、安全性、使用范围的可选属性组成 但是`cookie`在每次请求中都会被发送，如果不使用 `HTTPS `并对其加密，其保存的信息很容易被窃取，导致安全风险。举个例子，在一些使用 `cookie `保持登录态的网站上，如果 `cookie `被窃取，他人很容易利用你的 `cookie...
 ## 一、原型 `JavaScript` 常被描述为一种基于原型的语言——每个对象拥有一个原型对象 当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾 准确地说，这些属性和方法定义在Object的构造器函数（constructor functions）之上的`prototype`属性上，而非实例对象本身 下面举个例子： 函数可以有属性。 每个函数都有一个特殊的属性叫作原型`prototype` ```js function doSomething(){} console.log( doSomething.prototype ); ``` 控制台输出 ```js { constructor: ƒ doSomething(), __proto__: { constructor: ƒ Object(), hasOwnProperty:...
 ## 一、事件与事件流 `javascript`中的事件，可以理解就是在`HTML`文档或者浏览器中发生的一种交互操作，使得网页具备互动性， 常见的有加载事件、鼠标事件、自定义事件等 由于`DOM`是一个树结构，如果在父子节点绑定事件时候，当触发子节点的时候，就存在一个顺序问题，这就涉及到了事件流的概念 事件流都会经历三个阶段： - 事件捕获阶段(capture phase) - 处于目标阶段(target phase) - 事件冒泡阶段(bubbling phase)  事件冒泡是一种从下往上的传播方式，由最具体的元素（触发节点）然后逐渐向上传播到最不具体的那个节点，也就是`DOM`中最高层的父节点 ```html Event Bubbling Click Me ``` 然后，我们给`button`和它的父元素，加入点击事件 ```js var button = document.getElementById('clickMe');...
 ## 一、是什么 ### fork `fork`，英语翻译过来就是叉子，动词形式则是分叉，如下图，从左到右，一条直线变成多条直线  转到`git`仓库中，`fork`则可以代表分叉、克隆 出一个（仓库的）新拷贝  包含了原来的仓库（即upstream repository，上游仓库）所有内容，如分支、Tag、提交 如果想将你的修改合并到原项目中时，可以通过的 Pull Request 把你的提交贡献回 原仓库 ### clone `clone`，译为克隆，它的作用是将文件从远程代码仓下载到本地，从而形成一个本地代码仓 执行`clone`命令后，会在当前目录下创建一个名为`xxx`的目录，并在这个目录下初始化一个 `.git` 文件夹，然后从中读取最新版本的文件的拷贝 默认配置下远程 `Git` 仓库中的每一个文件的每一个版本都将被拉取下来 ### branch `branch`，译为分支，其作用简单而言就是开启另一个分支， 使用分支意味着你可以把你的工作从开发主线上分离开来，以免影响开发主线...
 ## 一、是什么 `Node.js` 是一个开源与跨平台的 `JavaScript` 运行时环境 在浏览器外运行 V8 JavaScript 引擎（Google Chrome 的内核），利用事件驱动、非阻塞和异步输入输出模型等技术提高性能 可以理解为 `Node.js` 就是一个服务器端的、非阻塞式I/O的、事件驱动的`JavaScript`运行环境 ### 非阻塞异步 `Nodejs`采用了非阻塞型`I/O`机制，在做`I/O`操作的时候不会造成任何的阻塞，当完成之后，以时间的形式通知执行操作 例如在执行了访问数据库的代码之后，将立即转而执行其后面的代码，把数据库返回结果的处理代码放在回调函数中，从而提高了程序的执行效率 ### 事件驱动 事件驱动就是当进来一个新的请求的时，请求将会被压入一个事件队列中，然后通过一个循环来检测队列中的事件状态变化，如果检测到有状态变化的事件，那么就执行该事件对应的处理代码，一般都是回调函数 比如读取一个文件，文件读取完毕后，就会触发对应的状态，然后通过对应的回调函数来进行处理  ## 二、优缺点 优点： - 处理高并发场景性能更佳...
 ## 一、是什么 `Tree shaking` 是一种通过清除多余代码方式来优化项目打包体积的技术，专业术语叫 `Dead code elimination` 简单来讲，就是在保持代码运行结果不变的前提下，去除无用的代码 如果把代码打包比作制作蛋糕，传统的方式是把鸡蛋（带壳）全部丢进去搅拌，然后放入烤箱，最后把（没有用的）蛋壳全部挑选并剔除出去 而` treeshaking `则是一开始就把有用的蛋白蛋黄（import）放入搅拌，最后直接作出蛋糕 也就是说 ，`tree shaking` 其实是找出使用的代码 在`Vue2`中，无论我们使用什么功能，它们最终都会出现在生产代码中。主要原因是`Vue`实例在项目中是单例的，捆绑程序无法检测到该对象的哪些属性在代码中被使用到 ```js import Vue from 'vue' Vue.nextTick(() => {}) ``` 而`Vue3`源码引入`tree shaking`特性，将全局...
 ## 一、组件设计 组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式 现在有一个场景，点击新增与编辑都弹框出来进行填写，功能上大同小异，可能只是标题内容或者是显示的主体内容稍微不同 这时候就没必要写两个组件，只需要根据传入的参数不同，组件显示不同内容即可 这样，下次开发相同界面程序时就可以写更少的代码，意义着更高的开发效率，更少的 `Bug `和更少的程序体积 ## 二、需求分析 实现一个`Modal`组件，首先确定需要完成的内容： - 遮罩层 - 标题内容 - 主体内容 - 确定和取消按钮 主体内容需要灵活，所以可以是字符串，也可以是一段 `html` 代码 特点是它们在当前`vue`实例之外独立存在，通常挂载于`body`之上 除了通过引入`import`的形式，我们还可通过`API`的形式进行组件的调用 还可以包括配置全局样式、国际化、与`typeScript`结合 ## 三、实现流程 首先看看大致流程： -...
 ## 一、是什么 枚举是一个被命名的整型常数的集合，用于声明一组命名的常数,当一个变量有几种可能的取值时,可以将它定义为枚举类型 通俗来说，枚举就是一个对象的所有可能取值的集合 在日常生活中也很常见，例如表示星期的SUNDAY、MONDAY、TUESDAY、WEDNESDAY、THURSDAY、FRIDAY、SATURDAY就可以看成是一个枚举 枚举的说明与结构和联合相似，其形式为： ```txt enum 枚举名{ 标识符①[=整型常数], 标识符②[=整型常数], ... 标识符N[=整型常数], }枚举变量; ``` ## 二、使用 枚举的使用是通过`enum`关键字进行定义，形式如下： ```ts enum xxx { ... } ``` 声明关键字为枚举类型的方式如下： ```ts // 声明d为枚举类型Direction...
 ## 一、是什么 `Css` 作为一门标记性语言，语法相对简单，对使用者的要求较低，但同时也带来一些问题 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 `Css` 编写经验而很难写出组织良好且易于维护的 `Css` 代码 `Css`预处理器便是针对上述问题的解决方案 #### 预处理语言 扩充了 `Css` 语言，增加了诸如变量、混合（mixin）、函数等功能，让 `Css` 更易维护、方便 本质上，预处理是`Css`的超集 包含一套自定义的语法及一个解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 `Css` 文件 ## 二、有哪些 `Css`预编译语言在前端里面有三大优秀的预编处理器，分别是： - sass - less -...
 ## 一、背景 在开发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素 居中是一个非常基础但又是非常重要的应用场景，实现居中的方法存在很多，可以将这些方法分成两个大类： - 居中元素（子元素）的宽高已知 - 居中元素宽高未知 ## 二、实现方式 实现元素水平垂直居中的方式： - 利用定位+margin:auto - 利用定位+margin:负值 - 利用定位+transform - table布局 - flex布局 - grid布局 ### 利用定位+margin:auto 先上代码： ```html .father{ width:500px;...