SakuraSnow's Blog

发表于2021-01-28

前言这是一篇包管理器的基本知识的汇总笔记为什么要有包管理器一些基本概念模块（module）通常以单个文件形式存在的功能片段，入口文件通常称之为入口模块或主模块库（library，简称lib）以一个或多个模块组成的完整功能块，为开发中某一方面的问题提供完整的解决方案包（package）包含元数据的库，这些元数据包括：名称、描述、git主页、许可证协议、作者、依赖等等包管理器的背景随着CommonJS 的出现，node环境下的JS代码可以用模块更加细粒度的划分。一个类、一个函数、一个对象、一个配置等等均可以作为模块，这种细粒度的划分，是开发大型应用的基石。为了解决在开发过程中遇到的常见问题，比如加密、提供常见的工具方法、模拟数据等等，一时间，在前端社区涌现了大量的第三方库。这些库使用 CommonJS 标准书写而成，非常容易使用。然而，在下载使用这些第三方库的时候，遇到了非常多的问题下载过程繁琐进入官网或 github 主页找到并下载相应的版本拷贝到工程的目录中如果遇到有同名的库，需要更改名称如果该库需要依赖其他库，还需要按照要求先下载其他库开发 ...

react学习笔记1-react概述和项目搭建

发表于2021-01-28

前言又到了随缘开新坑时，是的，我在复习Node时发现我学的的React也忘光了（这就是不用React写项目的后果吗），不管怎么说，下面又是复习时间官网：https://react.docschina.org/ 什么是ReactReact是由Facebook研发的、用于解决UI复杂度的开源JavaScript库，目前由React联合社区维护。它有下面的特点轻量：React的开发版所有源码（包含注释）仅3000多行原生：所有的React的代码都是用原生JS书写而成的，不依赖其他任何库易扩展：React对代码的封装程度较低，也没有过多的使用魔法，所以React中的很多功能都可以扩展。不依赖宿主环境：React只依赖原生JS语言，不依赖任何其他东西，包括运行环境。因此，它可以被轻松的移植到浏览器、桌面应用、移动端。渐近式：React并非框架，对整个工程没有强制约束力。这对与那些已存在的工程，可以逐步的将其改造为React，而不需要全盘重写。单向数据流：所有的数据自顶而下的流动用JS代码声明界面组件化和Vue的对比如下对比项 Vue React 全球使 ...

Cookie相关的一些概念

发表于2021-01-27

前言随缘记录一下，这篇文章讲解了Cookie的相关知识为什么要有Cookie客户端和服务器的传输使用的是http协议，http协议是无状态的，什么叫无状态，就是服务器不知道这一次请求的人，跟之前登录请求成功的人是不是同一个人，而在一些需要权限的情景下，服务器必须知道客户端的身份才能进行操作于是，服务器想了一个办法它按照下面的流程来认证客户端的身份客户端登录成功后，服务器会给客户端一个出入证（令牌 token）后续客户端的每次请求，都必须要附带这个出入证（令牌 token）这样，服务器就可以很方便的通过令牌识别客户端的身份了，这个令牌，就是Cookie cookie的组成每个cookie由下面的部分组成 key：键，比如 value：值，它可以是任何信息 domain：域，表达这个cookie是属于哪个网站的 path：路径，表达这个cookie是属于该网站的哪个基路径的，就好比是同一家公司不同部门会颁发不同的出入证。比如/news，表示这个cookie属于/news这个路径的。 secure：是否使用安全传输 expire：过期时间，表示该cookie在什么时候过期 ...

Node学习笔记3-express服务器开发

发表于2021-01-26

前言这篇会介绍使用express的基本使用为什么要使用express因为http模块来开发，有一些问题在实际开发中，我们要根据不同请求路径，不同请求方法做不同的事情，处理起来比较麻烦读取请求体和写入响应体是通过流的方式，使用起来比较麻烦所以我们一般会使用一些框架，常用的有 express koa 这里只介绍express 官方文档：https://expressjs.com/ 中文网：https://www.expressjs.com.cn/ express的基本使用首先，你要安装一下express 1npm install express --save 添加下面的代码 12345678910111213141516171819202122232425262728293031323334353637383940414243// index.jsconst express = require("express");// 创建一个express应用const app = express();const port = 5555;// express会 ...

Node学习笔记2-数据库开发

发表于2021-01-25

前言这篇文章用于介绍node和mysql怎么联用，只介绍常用的curd，因为这工作主要还是后端同学做www 这里不介绍怎么安装mysql和一些mysql的基本语句了，只介绍怎么用node操作mysql，还有一些非常基础的概念驱动程序首先，我们要知道，mysql和node是两个东西，mysql是一个数据库，node是一个语言，如果想要在mysql和node间进行操作，就需要用到驱动程序了驱动程序是连接内存和其他存储介质的桥梁在这里，mysql驱动程序是连接内存数据和mysql数据的桥梁常用的mysql驱动程序有 mysql（这是官方的） mysql2（原来叫mysql-native，非官方，但是现在和官方有合作，所以API都差不多了）这里我们使用mysql2 CURD直接放代码看看好了 123456789101112131415161718192021222324252627282930313233343536373839404142const mysql = require("mysql2");const connection = mysql.cr ...

Node学习笔记1-Node核心API

发表于2021-01-25

前言要春招了吖，随缘复习下Node的知识 NodeJS基本介绍NodeJS是一种语言，但是如果你要找更确切的描述，那可以把它描述成一种Javascript的运行环境，能够使得Javascript脱离浏览器运行。但是它比传统的浏览器JS拥有更多的功能，浏览器中的JS包括两个部分 ECMAScript Web Api WebAPI就是浏览器环境的提供的一些API，你在浏览器中能通过JS操作DOM，就是浏览器提供了DOM相关的API，还有setTimeout，fetch这些API。但是Web环境提供的功能非常有限，比如说你不能直接操作文件，进行HTTP请求时还要考虑同源策略，这些浏览器环境受限的地方（当然这是为了安全考虑，不然你上个网站，没准电脑里就多了一些奇奇怪怪的东西，那就不得了了）而NodeJS就没有这些问题，和传统的后端语言一样，它几乎可以做到所有东西（包括文件操作，修改注册表等），可以对你的电脑做任意的操作，它包括下面的两个部分 ECMAScript Node API Node API就是Node环境给NodeJS提供的API，详细的下面说对比一下就行总结一下就是 ...

为什么你要使用CSS3动画

发表于2021-01-21

前言如果你要做一个动画，你会使用什么来做？是CSS3，requestAnimationFrame，还是setTimeout，这篇我们用一个例子介绍一下怎么样选择它们，才能让你的动画尽可能流畅。 SetTimeout这里我们用SetTimeout制作一个非常简单的动画：把页面中的几个div来回平移 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box { width ...

http发展史

发表于2021-01-20

前言谈及浏览器中的网络，就避不开 HTTP。我们知道 HTTP 是浏览器中最重要且使用最多的协议，是浏览器和服务器之间的通信语言，也是互联网的基石。这篇文章会介绍HTTP的发展历程，让你更好的了解它。一切的开始HTTP/0.9首先我们来看看诞生最早的 HTTP/0.9。 HTTP/0.9 是于 1991 年提出的，主要用于学术交流，需求很简单——用来在网络之间传递 HTML 超文本的内容，所以被称为超文本传输协议。整体来看，它的实现也很简单，采用了基于请求响应的模式，从客户端发出请求，服务器返回数据。 HTTP/0.9 的一个完整的请求流程如上因为HTTP是基于TCP 协议的，所以客户端先要根据 IP 地址、端口和服务器建立 TCP 连接，而建立连接的过程就是 TCP 协议三次握手的过程。建立好连接之后，会发送一个 GET 请求行的信息，如GET /index.html用来获取 index.html。服务器接收请求信息之后，读取对应的 HTML 文件，并将数据以 ASCII 字符流返回给客户端。 HTML 文档传输完成后，断开连接。总的来说，当时的需求很简单，就是用来传 ...

浏览器架构与性能优化方案

发表于2021-01-18

前言我又开新坑了，虽然最近烦心事多，但还是要好好学习。这一篇我们来复习浏览器渲染原理和一些优化方法。进程和线程先介绍一下线程和进程一个进程就是一个程序的运行实例。启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫进程。进程是操作系统分配资源的基本单位。线程是由进程创建的和管理的，是CPU调度的最小单位进程和线程有四个特点进程中的任意一线程执行出错，都会导致整个进程的崩溃线程之间共享进程中的数据（线程之间可以对进程的公共数据进行读写操作）当一个进程关闭之后，操作系统会回收进程所占用的内存（即使其中任意线程因为操作不当导致内存泄漏，当进程退出时，这些内存也会被正确回收）。进程之间的内容相互隔离（进程隔离是为保护操作系统中进程互不干扰的技术，每一个进程只能访问自己占有的数据，也就避免出现进程 A 写入数据到进程 B 的情况。正是因为进程之间的数据是严格隔离的，所以一个进程如果崩溃了，或者挂起了，是不会影响到其他进程的）而浏览器使用的是多进程架构，为什么要使用多进程架构呢我们可以先了解一下 ...

Webpack系列6-性能优化

发表于2021-01-15

前言啊，不出意外的话，这应该是这个系列的最后一篇了，或许接下来还会有搭Vue或者React项目的文章，但是我感觉不一定能弄出来，嘛，这篇文章会介绍一些常见的性能优化方法，现在应该能给出的内容不多，以后如果看到了我再慢慢补充（虽然我基本都是用脚手架的）。安装Bundle Analyzer这里我们使用Bundle Analyzer查看打包体积 Visualize size of webpack output files with an interactive zoomable treemap. 官方文档：https://www.npmjs.com/package/webpack-bundle-analyzer Webpack Bundle Analyzer是一个可以对打包结果进行可视化的工具，为了能更直观的看到打包结果，我们要先装一下这个东西（当然不装也行）安装 1234# NPMnpm install --save-dev webpack-bundle-analyzer# Yarnyarn add -D webpack-bundle-analyzer 使用 1234567con ...