#eight-part essay# js手写题

2021-11-16

2021-11-02

GMT时间格式转YYYY-MM-DD格式：

function GMTToStr(time) {
    let date = new Date(time)
    let result =
        date.getFullYear() +
        "-" +
        (date.getMonth() + 1 >= 10
            ? date.getMonth() + 1
            : "0" + (date.getMonth() + 1)) +
        "-" +
        (date.getDate() >= 10
            ? date.getDate()
            : "0" + date.getDate());
    return result
}

获取最近自定义天数的时间范围：

function getRecentDays(days) {
    let date = new Date();
    // 通过时间戳计算
    let starTime = date.getTime() - days * 24 * 3600 * 1000; // 转化为时间戳
    let endTime = date.getTime();
    let startDateNs = new Date(starTime);
    let endDateNs = new Date(endTime);
    starTime =
        startDateNs.getFullYear() +
        "-" +
        (startDateNs.getMonth() + 1 >= 10
            ? startDateNs.getMonth() + 1
            : "0" + (startDateNs.getMonth() + 1)) +
        "-" +
        (startDateNs.getDate() >= 10
            ? startDateNs.getDate()
            : "0" + startDateNs.getDate());
    endTime =
        endDateNs.getFullYear() +
        "-" +
        (endDateNs.getMonth() + 1 >= 10
            ? endDateNs.getMonth() + 1
            : "0" + (endDateNs.getMonth() + 1)) +
        "-" +
        (endDateNs.getDate() >= 10
            ? endDateNs.getDate()
            : "0" + endDateNs.getDate());
    return [starTime, endTime];
}

时间戳转正常格式时间：

function timestampToTime(timestamp) {
    let date = new Date(timestamp);
    let Y = date.getFullYear() + '-';
    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    let D = date.getDate() + ' ';
    let h = date.getHours() + ':';
    let m = date.getMinutes() + ':';
    let s = date.getSeconds();
    return Y + M + D + h + m + s;
}

这篇博客未来会添加许多代码片段，对于一篇文章来说太长了，于是新建了一个git仓库，未来的js code snippets会更新在这个repo里：
https://github.com/Xutangxin/JS-code-snippets/blob/main/js%20code%20snippets.md

展开全文 >>

纯前端导出Excel

2021-11-01

最近在开发中需要在前端页面导出Excel文件，最开始的实现方案本来是和后端同学配合，前端发送请求获取数据然后导出，后来发现这样的方案不能完全满足需求，原因是前端表单的一些特有的字段比如序号什么的也要导出，但是从后端传来的源数据是没有序号的，序号是前端页面加上的。所以后来还是选择了纯前端导出Excel文件的方案。
总体思路是通过html引入excel模板，再在html里放入表格内容（dom），然后转成blob文件流下载表格

实现表格导出的函数：

export default function exportTable(table, exportName) {
  let html =
    '<html xmlns:o="urn:schemas-microsoft-com:office:office"\
  xmlns:x="urn:schemas-microsoft-com:office:excel"\
  xmlns="http://www.w3.org/TR/REC-html40">\
  <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>\
  <x:Name></x:Name>\
  <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>\
  </x:ExcelWorksheets></x:ExcelWorkbook></xml>\
  </head><body>' +
    table.outerHTML +
    "</body></html >";
  let blob = new Blob(["\uFEFF" + html], { type: "text/plain" });
  let a = document.createElement("a");
  a.download = exportName + ".xls";
  a.style.display = "none";
  a.href = URL.createObjectURL(blob);
  document.body.appendChild(a);
  a.click();
  URL.revokeObjectURL(a.href);
  document.body.removeChild(a);
}

获取表格dom，我使用的框架是Vue，所以通过$refs来获取dom：

1 2	let table = this.$refs.table.$el; let tableName = "通讯录";

传入参数到函数，就可以导出excel文件了：

1	exportTable(table, tableName);

展开全文 >>

#够用就行# 正则表达式入门

2021-10-31

之前学习JavaScript的过程中学习了正则表达式的基本使用，也做了一些笔记，但之后很少用到这些正则表达式的知识，所以也慢慢忘记了其基本使用。最近在开发中有遇到需要正则表达式的地方（主要是字符串匹配和替换），所以就把之前留下来的笔记整理了一下

more >>

展开全文 >>

RESTful

2021-10-30

REST全称为Representational State Transfer，意思是表现层状态转移
根据百度百科的解释，RESTful指的是一组架构约束条件和原则，满足这些约束条件和原则的应用程序或设计就是 RESTful
Web 应用程序最重要的 REST 原则是，客户端和服务器之间的交互在请求之间是无状态的。从客户端到服务器的每个请求都必须包含理解请求所必需的信息。如果服务器在请求之间的任何时间点重启，客户端不会得到通知
在服务器端，应用程序状态和功能可以分为各种资源。资源是一个有趣的概念实体，它向客户端公开。资源的例子有：应用程序对象、数据库记录、算法等等。每个资源都使用URI得到一个唯一的地址。所有资源都共享统一的接口，以便在客户端和服务器之间传输状态。使用的是标准的 HTTP 方法，比如 GET、PUT、POST 和 DELETE

RESTFUL有以下特点：
1.每一个URI代表1种资源
2.客户端使用GET、POST、PUT、DELETE4个表示操作方式的动词对服务端资源进行操作：GET用来获取资源，POST用来新建资源（也可以用于更新资源），PUT用来更新资源，DELETE用来删除资源
3.通过操作资源的表现形式来操作资源
4.客户端与服务端之间的交互在请求之间是无状态的，从客户端到服务端的每个请求都必须包含理解请求所必需的信息

百度百科的解释总体来说还是有些学术化，一时让人不太好理解，笔者在知乎看到了一个比较通俗易懂的解释，短短几句话：
看url就知道要什么
看http method就知道干什么
看http status code就知道结果如何
比百度百科的解释更平易近人

展开全文 >>

#够用就行# Sass入门

2021-10-16

变量声明和引用

声明：
任何可以用作css属性值的赋值都可以用作sass的变量值

1	$basic-border: 1px solid red;

引用：

1
2
3

.container {
    border: basic-border;
}

more >>

展开全文 >>

#够用就行# Git基本使用

2021-10-15

工作区、暂存区和版本库
工作区：
可直接在电脑上操作编辑的文件
暂存区：
数据暂时存放的区域
版本库：
存放已经提交的数据，使用push提交的时候，就是把这个区的数据push到远程git仓库了

git clone
拷贝一份远程仓库

git init
初始化仓库

git add .
添加文件到暂存区

git commit -m ‘xxx’
将暂存区内容添加到仓库中

git push
上传远程代码并合并

git pull
下载远程代码并合并

git status
查看仓库当前的状态，显示有变更的文件

git diff
比较文件的不同，即暂存区和工作区的差异

git reset –hard git提交哈希值
回退到某一个版本

git branch -a
查看分支

git branch
查看当前分支

git branch <分支名称>
创建分支

git checkout <分支名称>
切换分支

合并分支：
git checkout master 先切换到master分支
git merge fenzhi 再将分支的代码合并到master

展开全文 >>

《图解HTTP》 ch11 Web的攻击技术

2021-10-10

对Web应用的攻击模式有以下两种：
1.主动攻击
2.被动攻击

主动攻击：
攻击者通过直接访问Web应用，把攻击代码传入的攻击模式。由于该模式是直接针对服务器上的资源进行攻击，因此攻击者需要能够访问到那些资源。主动攻击模式里具有代表性的攻击是SQL注入攻击和OS命令注入攻击。
被动攻击：
利用圈套策略执行攻击代码的攻击模式。在被动攻击过程中，攻击者不直接对目标Web应用访问发起攻击。被动攻击模式中具有代表性的攻击是跨站脚本攻击和跨站点请求伪造。

跨站脚本攻击（XSS）
通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或JavaScript进行的一种攻击。动态创建的HTML部分有可能隐藏着安全漏洞。就这样，攻击者编写脚本设下陷阱，用户在自己的浏览器上运行时，一不小心就会受到被动攻击。

影响：
1.利用虚假输入表单骗取用户信息
2.窃取用户Cookie，让用户在不知情的情况下帮助攻击者发送恶意请求
3.显示伪造的文章或图片

应对方法：
1.在Cookie中设置httpOnly，使js脚本无法读取到Cookie信息
2.过滤：
(1)对输入格式进行检查，前端和后端都要做
(2)对标签进行转换
(3)对特定字符进行转义处理

SQL注入攻击
针对Web应用使用的数据库，通过运行非法的SQL而产生的攻击。该安全隐患有可能引发极大的威胁，有时会直接导致个人信息及机密信息的泄露。
可能造成的影响：
1.非法查看或篡改数据库里的数据
2.规避认证
3.执行和数据库服务器业务关联的程序等

OS命令注入攻击
通过Web应用执行非法的操作系统命令达到攻击的目的。只要在能调用Shell函数的地方就有存在被攻击的风险。OS命令注入攻击可以向Shell发送命令，让Windows或Linux操作系统的命令行启动程序。也就是说，通过OS注入攻击可执行OS上安装着的各种程序。

跨站点请求伪造（CSRF）
攻击者通过设置好的陷阱，强制对已完成认证的用户进行非预期的个人信息或设定信息等某些状态更新，属于被动攻击。通俗来讲，就是攻击者冒充用户身份发起请求，在用户不知情的情况下完成一些违背用户意愿的事情
可能造成的影响：
1.利用已通过认证的用户权限更新设定信息等
2.利用已通过认证的用户权限购买商品
3.利用已通过认证的用户权限在留言版上发表言论

应对方法：
1.验证码
2.Token
3.Referer check 请求来源限制

展开全文 >>

栈内存和堆内存

2021-10-07

栈内存

栈内存存放基本类型变量，复杂数据类型的引用和方法（函数）的调用，遵循先入后出的原则
看下面这段代码：

function foo() {
    console.log('hello world')
}

function fn() {
    foo()
}

fn()

上述代码中函数体入栈顺序为：fn->foo
出栈顺序为：foo->fn

栈内存特点：
连续的内存区域
栈内存与堆内存相比非常小，存取速度比较快
系统自动分配和释放，例如函数参数、局部变量、临时变量等
栈内存里的数据可以共享
栈内存里的数据大小和生命周期是确定的，缺乏灵活性

堆内存

堆内存不等于数据结构里的堆，其分配方式类似于链表
堆内存分配过程：
操作系统有一个记录空闲内存地址的链表，当系统收到程序的申请时，会遍历该链表，寻找第一个空间大于所申请空间的堆结点，然后将该结点从空闲结点链表中删除，并将该结点的空间分配给程序。由于找到的堆结点的大小不一定正好等于申请的大小，系统会自动的将多余的那部分重新放入空闲链表中

堆内存特点：
不连续的内存区域
一般由开发人员申请和释放
堆内存获取的空间比较灵活，比较大
存取速度比较慢，比较容易产生内存碎片

展开全文 >>

SPA & SSR

2021-10-05

SPA

什么是SPA
SPA单页面应用，是一种网络应用模型，其特点在于整个网站由一个html页面构成
传统的网站，不同页面之间的切换是直接从服务端加载新的页面，而在SPA中，页面之间的切换是通过动态地重写页面发生变化地部分来实现与用户的交互，避免过多的数据交换，响应速度相对较高
常见的SPA框架有：Angular, React, Vue

优点
页面之间切换较快
减轻了服务端压力

缺点
首屏打开速度较慢，因为首次加载需要下载SPA框架和应用程序的代码再渲染页面
不利于SEO搜索引擎优化

SSR

SSR即服务端渲染，是将SPA应用打包到服务器上，在服务器上渲染出html发送到浏览器，这样的html页面还不具备交互能力，所以还需要与SPA框架配合，在浏览器上混合成可交互的应用程序
常见的SSR框架有：React-Next, Vue-Nuxt

优点
首屏加载较快，不用等待所有的js代码下载完毕，浏览器就能显示比较完整的页面
利于SEO，可以将SEO的关键信息直接在后台就渲染成html，而保证搜索引擎的爬虫都能爬取到关键数据

缺点
服务端压力较大
开发调试会比较麻烦
服务端渲染结果可能和浏览器端不一致

展开全文 >>