路旁有花，心中有歌，

天上有星。

Vue

2021.09.12

Vue3组件：script setup 语法糖 Vue3 RFC: script-setup <script setup>语法糖引入的动机，是简化冗余代码，让SFC书写更简洁。 1. 书写形式 <script setup> // codes.. </script> 2. <script setup>基本用法 内...

Vue

2021.09.08

Vue使用的注意事项 一、v-for 与 v-if 不要同时使用 原因： 浪费性能。 v-for在Vue中比v-if优先级高，因此无论如何都会遍历所有列表中的子元素，才能确定哪些子元素被显示。（本意是只遍历+显示v-if为true的子元素集合） 解决方式： 使用computed等提前筛选出要显示的列表元素，然后用v-for遍历。 二、多个根节点的组件，需要显式指定Att...

Safety

2021.09.06

前端鉴权：掘金 一、cookie + session 浏览器登录发送账号密码，服务端查用户库，校验用户; 服务端把用户登录状态存为 session，生成一个 session_ID; 通过登录接口返回，把 sessionID set 到 cookie 上; 此后浏览器再请求业务接口，session_ID 随 cookie 带上; 服务端查 session_...

Safety

2021.09.06

前端安全 一、XSS：跨站点脚本攻击 二、CSRF：跨站点请求伪造 基本形式： 通过cookie等经过用户鉴权的页面，伪造用户请求，骗取服务器信任。 三、CSP：内容安全策略 四、HSTS：强制HTTPs连接 HSTS（HTTP Strict Transport Security） 五、X-Frame-Options：控制iframe嵌入 六、SRI： 子资源完整性校...

HTML

Performance

2021.09.06

一、preload和prefetch的功能 待补充。 二、preload和prefetch的区别 待补充。

Vue

2021.09.06

一、Vue3中的diff算法 Vue3中对于没有key的片段，采用的是直接数组比较方法； 对于有key的片段，采用的是先掐头去尾，然后执行最长递增子序列的方法。 1. 最长递增子序列算法 最长递增子序列算法： 贪心策略：为了找到最长的递增子序列，我们希望递增序列增长得慢一些。这样后面的元素就更容易与其形成更长的递增子序列。 因此，假设我们在遍历过程中当前找到的最长递增...

Frontend

2021.09.02

实用前端工具库 一、UI组件 Element UI: Element UI View UI: View UI 轮播图：swiper 滚动：mescroll.js 二、工具类 函数库： Lodash 解析时间: day.js 显示timeago日期效果: timeago.js 数据可视化： ECharts Markdown编辑器： MEditor 表单验证： v...

Vue

Vuex

2021.09.02

Vuex: 中心型状态管理工具 核心概念和基本操作 安装使用 npm 安装: npm i vuex@next; 在main.js引入：import { createStore } from 'vuex'; 创建新store(vuex仓库实例): const store = createStore({ state(){ return { ...

Vue

Vue-Router

2021.09.02

Vuex-Router: 路由管理工具 路由链接、路由出口 这是两个vue-router内置组件： <router-link>: 用来存放路由链接的内置组件，点击即可进行路由跳转； <router-view>: 用来显示路由匹配结果的内置组件，路由匹配到的组件会显示在这里。 JS: 配置一个vue-router基本流程 // 官方代码示例...

Webpack

2021.09.02

什么是Source Map？ 怎样设置Source Map？ An Introduction to Source Maps 一、Source Map 是什么 当代码被打包完成后，开发调试变得困难，无法查看到一段压缩后的代码在它源文件中的位置。 source map是一种将压缩后代码，映射到源代码位置的方式，用于开发调试。 Source Map文件以 xxx.js....

Webpack

2021.09.02

一、Webpack基本概念 二、Webpack配置 三、常用 Webpack Plugins 开启Source Map 一、Webpack基本概念 二、Webpack 配置 通过外部webpack.config.js文件来配置。 1. 模式 Mode development: 开发模式。 会使用DefinePlugin把代码中的...

Vue

2021.09.01

一、虚拟DOM是什么？基本实现流程是？ 1. 什么是虚拟DOM 虚拟DOM是用JS对象，对真实DOM树进行的简化模拟。 基本的虚拟DOM元素，叫做VNode，它包含以下几个属性： tag: 对应的DOM元素标签名； props: 对应的DOM元素Attributes； children: 子元素。可以是纯文本子元素，也可以是VNode子元素。 2. 基本的虚拟DOM...

JavaScript

2021.08.31

前端路由相关 一、页面路由的历史 1. 早期：路由由服务端控制 流程： 客户端发起http请求 -> 服务端根据请求url匹配不同的资源（不同html） -> 返回请求数据 -> 客户端渲染显示 好处： 直接生成html，seo友好； 首屏渲染快； 首屏时间（白屏时间）： 从输入url按下回车到页面任意元素加载出来的时间。 缺点： ...

JavaScript

2021.08.31

RFC 3986： Uniform Resource Identifier (URI): Generic Syntax 通用资源标识符： 通用语法 2. 符号 2.1 百分号编码 2.2 保留字符 2.3 非保留字符 2.4 何时编码、何时解码 2.5 3. 语法组成 Syntax Components 一般的URI语法，由层次化的序列串组成。它们包括：协议、主机、路径...

JavaScript

2021.08.31

Express框架基本操作 引入与创建express app实例 const express = require('express') const app = express() 基本路由 app.METHOD(PATH, HANDLER) METHOD: http方法； PATH: 请求路径，一旦匹配执行handler; HANDLER: 路径匹配后的...

JavaScript

2021.08.23

部分原生API的手动实现 一、数组 reduce()方法 二、对象 深拷贝 一、数组Array 1. reduce()方法 function myReduce(arr, fn = (accu, item, index, array) => {}, init) { // 判断arr是否是数组； if (Object.prototype.toString.c...

JavaScript

2021.08.23

Airbnb JavaScript Style Guide 中文版： Airbnb JS 样式指南 1. 函数 不使用arguments，使用...args收集函数参数； 参数带有默认值的，放在参数列表最后； 不使用Function构造函数生成函数； 参数分为多行时，每行只存在一个参数，并用逗号结尾； 箭头函数的参数，永远用小括号包裹； 2. 操作...

Network

TCP

HTTP

HTTPs

2021.08.23

计算机网络笔记: TCP和HTTP部分 一、TCP协议及其特点 TCP协议是TCP/IP协议栈里面，用于运输层的协议。 TCP协议的特点： 面向连接：必须先握手建立连接再通信，通信完协商断开连接； 面向连接和有连接的关系？ 面向连接的连接状态信息，只在连接的端点保存。而有连接的情况，是除了端点之外，中点保障二者通信的网络节点也保存它们的连接信息。 ...

JavaScript

2021.08.01

学习内容：《现代JavaScript教程》 1. 为什么要模块化Module 关注点分离：一个的长代码不易维护和重用，我们希望将一个单独的功能分离出来（单一职责），使用时按需加载。这个分离的实现某个单一功能的代码就是模块。 避免全局污染： 一个模块可以包含用于特定目的的类或函数库。 15.1 历史上的JS模块 因为历史原因而存在的早期JS模块化系统，现在不...

CSS

2021.07.28

CSS细节记录 二、主要内容 2.1 特指度、继承和层叠关系 2.1.1 CSS特指度 CSS特指度由4位构成比如(0,0,0,0)，可以认为是个十百千四位。越靠左优先级越高。 每存在一个选择器，总的CSS特指度按选择器权重增大。各选择器权重如下： 行内声明（元素的style属性）：(1,0,0,0)； Id选择器： (0,1,0,0)； 类、伪类：(0,0,1...