jacob-lcs / blog Goto Github PK

View Code? Open in Web Editor NEW

3.0 3.0 1.0 6 KB

一个前端的博客，如果对你有帮助，还请点个 star ✨

Home Page: https://lcs.show

License: MIT License

javascript react vue

blog's Introduction

你好呀 👋

你好，我是 Jacob，在 2020 这个特殊的年份毕业于上海大学，目前在字节做前端。欢迎来到我的个人博客

blog's People

Contributors

Stargazers

Watchers

Forkers

anble66

blog's Issues

教你用 Vue 写一个开心消消乐

之前做过一个算法题，算法要求就是写一个开心消消乐的逻辑算法，当时也是考虑了一段时间才做出来。后来想了想，既然核心算法都有了，能不能实现一个开心消消乐的小游戏呢，于是花了两天时间做了一个小游戏出来。

效果展示

预览地址
先在这里放一个最终实现的效果，还是一个比较初级的版本，大家有什么想法欢迎评论哦

游戏规则：

初始时会给玩家十分的初始分，每拖动一次就减一分，每消除一个方块就加一分，直到最后分数为0游戏结束
任意两个方块都可以拖动

界面设计

页面的布局比较简单，格子的数据是一个二维数组的形式，说到这里大家应该已经明白界面是怎么做的了。

<div
  v-for="(item, index) in squareData"
  :key="index"
  class="row">
  <div
    v-for="(_item, _index) in item"
    :key="_index"
    class="square"
    :class="_item"
    @mousedown="dragStart(index, _index)"
    @mouseup="dragEnd">
    {{_item}}
  </div>
</div>

大家应该注意到了 :class="_item" 的写法，动态命名class，使得其每个种类的方块的颜色都不同，最后可以按照同色消除的玩法就行操作。

.square.A{
  background-color: #8D98CA;
}
.square.S{
  background-color: #A9A2F6;
}
/*其余操作相同*/

同时在玩家点击方块的时候方块会左右摆动以表示选中了此方块，还可以提升游戏的灵动性。关于HTML动画的实现方式有很多，在这里我们使用CSS animation进行操作，代码如下：

@keyframes jitter {
  from, 50%, to {
    transform: rotate(0deg);
  }
  10%, 30% {
    transform: rotate(10deg);
  }
  20% {
    transform: rotate(20deg);
  }
  60%, 80% {
    transform: rotate(-10deg);
  }
  70% {
    transform: rotate(-20deg);
  }
}
/* 只要是用户点击不动，动画就不会停止 */
.square:active{
  animation-name: jitter;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
}

核心算法

消除算法

上面提到我之前是做过一道题是判断一个二维数组中有没有可消的元素，有的话是多少个。

在这里我们可以这样想，最开始遍历一整个二维数组，每次定义一个 X₀ , X₁ , Y₀, Y₁, 然后每次计算其上下左右连续相同方块的位置，在这个过程中要注意边界问题，然后我们记录下这四个变量，只要 |X₀-X₁|+1>=3 或者 |Y₀-Y₁|+1>=3，我们就可以将这个方块的坐标加入到 del数组中。

遍历完一整个二维数组之后，我们就可以将 del数组中对应坐标位置的方块内容变为 '0', 由于我们没有对 0 定义样式，所以在没有执行下落算法之前变为 0 的方块为白色。

下落算法

在我们将相应的方块白色之后，其上面的方块应该下落，在这里我的**是这个样子的。

按照列遍历二维数组，定义一个指针 t，指向上次不为 0 的方块位置，一旦遇到方块不为 0 的格子就将其与t所指的方块就行交换，一次类推，示意图如下：

这样的话我们就可以把为空的上移到最顶层，并且不打乱顺序，然后我们在随机填充顶部的空方块就可以了。做完填充之后我们要再做一次消除算法，直到del数组的长度为空为止，这个道理大家应该都能想得到。

代码如下

clear(): void {
  const m: number = 10;
  const n: number = 10;
  while (true) {
    const del: any[] = [];
    for (let i: number = 0; i < m; i++) {
      for (let j: number = 0; j < n; j++) {
        if (this.squareData[i][j] === '0') {
          continue;
        }
        let x0: number = i;
        let x1: number = i;
        let y0: number = j;
        let y1: number = j;
        while (x0 >= 0 && x0 > i - 3 && this.squareData[x0][j] === this.squareData[i][j]) {
          --x0;
        }
        while (x1 < m && x1 < i + 3 && this.squareData[x1][j] === this.squareData[i][j]) {
          ++x1;
        }
        while (y0 >= 0 && y0 > j - 3 && this.squareData[i][y0] === this.squareData[i][j]) {
          --y0;
        }
        while (y1 < n && y1 < j + 3 && this.squareData[i][y1] === this.squareData[i][j]) {
          ++y1;
        }
        if (x1 - x0 > 3 || y1 - y0 > 3) {
          del.push([i, j]);
        }
      }
    }
    if (del.length === 0) {
      break;
    }
    this.score += del.length;
    for (const square of del) {
      this.$set(this.squareData[square[0]], square[1], '0');
    }
    for (let j: number = 0; j < n; ++j) {
      let t: number = m - 1;
      for (let i: number = m - 1; i >= 0; --i) {
        if (this.squareData[i][j] !== '0') {
          [this.squareData[t][j], this.squareData[i][j]] = [this.squareData[i][j], this.squareData[t][j]];
          t -= 1;
        }
      }
    }
  }
},

游戏结束

分数为 0 的时候游戏结束，此时在执行一遍初始化函数，重新生成一个开心消消乐格子，将分数初始化为10.

if (this.score <= 0) {
    if (confirm('分数用光了哦~~')) {
      this.init();
    } else {
      this.init();
    }
  }

项目源代码

目前项目是在github上托管，欢迎PR！点此跳转

一、前言

webpack5 也已经发布一段时间了，其模块联邦、bundle 缓存等新特性值得在项目中进行使用。经过笔者在公司实际项目中的升级结果来看，其提升效果显著，热更新时间由原来的 8s 减少到了 2s，会极大的提升开发幸福感。除此之外，webpack5 也带来了更好的 tree shaking 算法，项目的打包体积也会进一步减少，提升用户体验。

目前来看，create-react-app 脚手架还没有适配 webpack5，如果你想熟悉下如何从零开始配置 webpack5 项目的话，不妨跟着文档操作一下。

二、项目初始化

2.1 初始化文件结构

首先创建一个文件夹，进行 npm 初始化

mkdir react-webpack5-template
cd react-webpack5-template
# npm 初始化配置
npm init -y
# 创建 webpack 配置文件
touch webpack.common.js
# 创建 babel 配置文件
mkdir src && cd src
# 创建入口文件
touch index.js
cd .. && mkdir build
touch index.html

在上述步骤执行完毕之后，你的目录结构应该如下所示：

├── src
│   └── index.js
├── build
│   └── index.html
├── webpack.common.js
├── .babelrc
├── package.json

随后安装必要的依赖

npm i webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader path -D
npm i react react-dom

2.2 完善配置文件

文件结构生成完毕后，我们开始编写代码。首先，在index.js 中写入以下代码：

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <React.StrictMode>
    <div>你好，React-webpack5-template</div>
  </React.StrictMode>,
  document.getElementById('root')
);

在 webpack.common.js 中写入以下内容：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = (env) => {
  return {
    mode: "development",
    entry: {
      index: './src/index.js'
    },
    output: {
      // 打包文件根目录
      path: path.resolve(__dirname, "dist/"),
    },
    plugins: [
      // 生成 index.html
      new HtmlWebpackPlugin({
        filename: "index.html",
        template: "./build/index.html",
      }),
    ],
    module: {
      rules: [
        {
          test: /\.(jsx|js)?$/,
          use: ["babel-loader"],
          include: path.resolve(__dirname, 'src'),
        },
      ]
    },
    devServer: {
      port: 8080,
      host: '0.0.0.0',
    },
  }
}

在 index.html 中写入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

在 .babalrc 中写入以下代码：

{
  "presets": ["@babel/preset-react"]
}

然后在 package.json 中添加如下 script：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
+  "dev": "webpack serve --config webpack.common.js"
},

随后我们运行 npm run dev 就可以直接运行了，由于我们上面设置的 devServer 端口号为 8080，所以在浏览器中打开 localhost:8080 即可看到如下效果：

到这里位置，我们的初步搭建已经完成了，但是我们在现有的项目中看到的 webpack 配置文件不止这些，有 less、css 文件的解析，image 等资源文件的处理，还有一些优化项的配置等，接下来会一一介绍。

三、功能性配置

上面我们已经做到可以将一个简单的 React 项目运行起来了，接下来我们要做的是加一些功能。

3.1 样式文件解析

在前端项目开发过程中，比较经常使用的是 css、less、scss、sass、stylus，下面我们就先仅对 less 进行配置，其余的样式文件可参考 GitHub 源码。首先安装 loader：

npm i style-loader less-loader less css-loader postcss-loader postcss-normalize autoprefixer postcss-preset-env -D

首先，在 webpack.common.js 顶部加入以下正则表达式，用来判断样式文件：

// less/less module 正则表达式
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

然后在 webpack.common.js 中加入以下配置：

module: {
	rules: [
    {
      test: lessRegex,
      use: ["style-loader", "css-loader", "postcss-loader", "less-loader"],
      sideEffects: true,
    },
  ]
}

新增 postcss.config.js 文件并配置：

const postcssNormalize = require('postcss-normalize');

module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        autoprefixer: {
          flexbox: "no-2009",
        },
        stage: 3,
      }
    ],
    postcssNormalize(),
    require('autoprefixer') ({
      overrideBrowserslist: ['last 2 version', '>1%', 'ios 7']
    })
  ],
};

然后我们在 src 目录下新建 index.less 文件，测试配置是否成功：

// index.less
.title {
  text-align: center;
  color: coral;
}

重新运行项目后发现样式生效，配置成功。

但是仅配置 less 是不够的，我们日常在开发过程中经常用到 less module，在这里我们进行如下配置，首先安装 react-dev-utils：

npm i react-dev-utils resolve-url-loader -D

在 webpack.common.js 中进行如下配置：

const getCSSModuleLocalIdent = require("react-dev-utils/getCSSModuleLocalIdent");

module: {
	rules: [
    {
      test: lessRegex,
+     exclude: lessModuleRegex,
      use: ["style-loader", "css-loader", "postcss-loader", "less-loader"],
      sideEffects: true,
    },
+   {
+     test: lessModuleRegex,
+     use: [
+       "style-loader",
+       {
+         loader: "css-loader",
+         options: {
+           modules: {
+             getLocalIdent: getCSSModuleLocalIdent,
+           }
+         }
+       },
+       "postcss-loader",
+       "less-loader"
+     ],
+   }
  ]
}

接下来我们新建 index.module.less 来进行测试：

.font {
  color: red;
}

重新运行项目后样式生效，并且 className 也发生了相应变化：

CSS、SCSS 与 SASS 的配置都大同小异，大家可以移步到我的 GitHub。

3.2 图片地址解析

资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。

在 webpack 5 之前，通常使用：

raw-loader 将文件导入为字符串

url-loader 将文件作为 data URI 内联到 bundle 中

file-loader 将文件发送到输出目录

资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：

asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。

asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。

asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。

asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。

—— 引自 webpack5 中文文档

webpack5 内置 assets 类型，我们不需要额外安装插件就可以进行图片等资源文件的解析，配置如下：

{
  test: /\.(jpe?g|png|gif|svg|woff|woff2|eot|ttf|otf)$/i,
  type: "asset/resource",
},

如此我们便可以处理引入的图片资源文件，可以根据自身需要进行拓展。

四、性能优化

4. 1 引入缓存

前面提到，webpack5 引入了缓存来提高二次构建速度，我们只需要在 webpack 配置文件中加入如下代码即可开心缓存

cache: {
  type: 'filesystem',
  // 可选配置
  buildDependencies: {
    config: [__filename],  // 当构建依赖的config文件（通过 require 依赖）内容发生变化时，缓存失效
  },
  name: 'development-cache',
},

重新运行项目后会发现 node_modules 目录下会新增一个 .cache 文件夹：

笔者在实际项目中测试，热更新时间由原来的 8s 缩短到 2s 可以说是提升巨大。

4.2 引入多线程

为了提升构建速度，我们可以引入 thread-loader 提升构建速度，首先我们需要安装：

npm i thread-loader -D

然后在 webpack.common.js 中进行配置：

{
  test: /\.(jsx|js)?$/,
- use: ["babel-loader"],
+ use: ["thread-loader", "babel-loader"],
  include: path.resolve(__dirname, 'src'),
},

五、总结

到目前为止，配置工作算是已经完成了，本篇文章只是指导大家进行一些初始化配置，项目中肯定还有很多可以优化的地方，比如说分别配置 webpack.dev.js 以及 webpack.prod.js 以通过测试环境与正式环境的不同需求，在这里就不细说，环境区分的相关配置我会上传到 GitHub 中，如果你觉得项目对你有点用处的话，还请点个 star。

使用 media 实现响应式布局

最近工作有一个需求是将一个界面改为响应式布局，由于UI还没有给设计，于是自己先查了一下资料做了一个demo。其实实现响应式布局的方式有很多，利用media实现就是其中一种，但是他也有一些缺点，比如说要对特别的屏幕单独定制样式代码。在我的代码里面我把屏幕分为了三种，代表为iPhone、iPad、PC三种，分别对应着三种不同的样式。

目前可以实现：

根据界面大小自动调整布局

界面宽度小到一定程度时会隐藏header，将其放到侧拉栏中

效果图如下(代码会在下面全部放上来)：

media使用

原理

media简单来说就是一种查询工具，加入说你想知道打开你网页的屏幕宽度是768px的时候才使用这个样式，这个时候你就可以这样写：

@media screen and (max-width:768px){
    body{
        background-color: black
    }
}

这个代码的效果就是当前界面的宽度小于768px的时候，将网页背景变成黑色。screen是用于电脑屏幕、平板电脑、智能手机等。对于@media的更多媒体类型如下：

值	描述
all	用于所有设备
print	用于打印机或打印预览
screen	用于电脑屏幕、平板电脑、智能手机等
speech	用于屏幕阅读器等发声设备

在做响应式布局的时候我主要用到max-width和min-width两种属性，min-width的作用于max-width的作用相反。

应用

<link rel="stylesheet" href="./index.css">
<link rel="stylesheet" href="./index_ipad.css" media="screen and (max-width:1200px)">
<link rel="stylesheet" href="./index_mobile.css" media="screen and (max-width:768px)">

由我的代码可以得知我将页面分为三种大小，分别为(1200, +∞),(768, 1200),(0, 768)，这个分类我是参照bootstrap来分的。

首先引入index.css，这也是你的电脑打开时的默认样式，当你的电脑宽度逐渐减小时，就会开始应用index_ipad.css这个样式文件，在这个文件中并不是将index.css的样式代码全部重写了一遍，而是把需要更改样式的代码做了编写。

举个例子，比如说我index.css中有四个方块，默认布局是float布局，全部排在一行，但是当页面宽度变为ipad大小是页面方块就会变成两行，原理是改一下方块的宽度。具体实现代码如下：

/* index.css */
.board {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    float: left;
    width: 25%;
    color: white
}

.first {
    background-color: #F44336
}

.second {
    background-color: #E91E63
}

.third {
    background-color: #9C27B0
}

.fourth {
    background-color: #009688
}

/* index_ipad.css */
.first,
.second,
.third,
.fourth {
    width: 50%;
}

侧拉栏

侧拉栏的原理其实并不难，就是先写一个div，保持与header元素相同，然后再设置其left属性，使其隐藏，通过js操作其left，将其显示出来。

<div class="nav">
    <ul>
        <li>
            <a>第一个</a>
        </li>
        <li>
            <a>第二个</a>
        </li>
        <li>
            <a>第三个</a>
        </li>
    </ul>
</div>

.nav {
    position: absolute;
    z-index: 11;
    left: -10rem;
    top: 0;
    width: 10rem;
    height: 100%;
    background: #607D8B;
}

window.onload = function() {
    let btn = document.getElementsByClassName('menu')[0]
    let nav = document.getElementsByClassName('nav')[0]
    // 改变侧拉栏状态
    btn.addEventListener('click', function() {
        nav.style.left = nav.style.left == '-10rem' || nav.style.left.length == 0 ? 0 : '-10rem';
    }, false);
}

全部代码

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>响应式布局</title>

    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="./index_ipad.css" media="screen and (max-width:1200px)">
    <link rel="stylesheet" href="./index_mobile.css" media="screen and (max-width:768px)">
    <script src="./index.js"></script>
</head>

<body>
    <div class="nav">
        <ul>
            <li>
                <a>第一个</a>
            </li>
            <li>
                <a>第二个</a>
            </li>
            <li>
                <a>第三个</a>
            </li>
        </ul>
    </div>
    <nav>
        <img src="./img/菜单.png" alt="菜单" class="menu">
        <a href="#">第一个</a>
        <a href="#">第二个</a>
        <a href="#">第三个</a>
    </nav>
    <div>
        <div class="board first">
            第一个
        </div>
        <div class="board second">
            第二个
        </div>
        <div class="board third">
            第三个
        </div>
        <div class="board fourth">
            第四个
        </div>
    </div>
</body>

</html>

/* index.css */
.board {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    float: left;
    width: 25%;
    color: white
}

.first {
    background-color: #F44336
}

.second {
    background-color: #E91E63
}

.third {
    background-color: #9C27B0
}

.fourth {
    background-color: #009688
}

nav {
    background-color: #607D8B;
    text-align: right;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: right
}

a {
    text-decoration-line: none;
    color: white;
    margin-right: 3%
}

.menu {
    width: 1.5rem;
    margin-left: 0px;
    display: none;
    cursor: pointer;
}

ul,
li {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav {
    position: absolute;
    z-index: 11;
    left: -10rem;
    top: 0;
    width: 10rem;
    height: 100%;
    background: #607D8B;
}

.nav {
    transition: left linear .1s;
}

.nav a {
    display: block;
    padding: 1em 0;
    border-bottom: 1px solid #888;
    font-size: 16px;
    color: #eee;
    text-align: center;
}

.nav li {
    cursor: pointer;
}

/* index_mobile.css */
.first,
.second,
.third,
.fourth {
    float: none;
    width: 100%;
}

.menu {
    display: block;
    margin-right: 2%;
}

a {
    display: none
}

/* index_ipad.css */
.first,
.second,
.third,
.fourth {
    width: 50%;
}

.menu {
    display: block;
    margin-right: 2%;
}

a {
    display: none
}

//index.js
window.onload = function() {
    let btn = document.getElementsByClassName('menu')[0]
    let nav = document.getElementsByClassName('nav')[0]
    btn.addEventListener('click', function() {
        nav.style.left = nav.style.left == '-10rem' || nav.style.left.length == 0 ? 0 : '-10rem';
    }, false);
}

一、背景

最近在写一个批量上传的 node 脚本，其实大家可以想到批量上传带来的接口性能问题，如果将需要上传的文件通过多个异步请求同时上传的话，服务器方面应该是吃不消的，所以这里提出一个 promise 池的概念。

其原理就是固定每次运行的 promise 函数个数，其中有一个完成之后再继续再向这个池子中新增一个 promise 函数运行，这样就可以保持一直有固定个数的 promise 函数在运行，并且服务端的压力不会太大。

二、实现

具体的实现就像是接力跑步，比如我们规定最多同时执行 5 个异步函数。

赛道上只能有 5 个运动员在跑步，但是要让所有的运动员都跑一次，最好的方法就是 5 个运动员分别在 5 个赛道上跑，谁先跑到终点就将接力棒传递给下一个运动员，这样就能使每个运动员跑一次并且赛道上最多有 5 个运动员。

当然，这里只是说跑到终点会将接力棒传给下一个运动员，但是如果一个运行员跑步过程中受伤了，不能继续完成跑步的话就要放弃，并将接力棒传递给下一个运动员，也就是 promise 函数中的 reject。

还有一个点就是如何监听所有的 promise 函数已经结束，我们在每个 promise 函数运行结束之后都要运行判断一下当前正在执行的函数个数以及还没有运行的函数个数是否为 0，为 0 的话则表示函数运行结束。这里我们使用 EventEmitter 来发送结束消息，表示所有 promise 函数已经执行完成。

具体的实现代码如下：

class PromisePool extends EventEmitter {
  constructor(params, fn, max) {
    super();
    this.params = params; // 异步函数的参数数组
    this.fn = fn; // 异步函数
    this.max = max; // 同时运行的最大数量
    this.pool = []; // 存放task
    this.successNum = 0; // 成功个数
    this.failNum = 0; // 失败个数
    this.count = params.length; // 当前正在运行的异步函数个数
    this.init();
  }
  // 初始化函数
  init() {
    while (this.count < this.max) {
      const param = this.params.shift();
      if(!param){ break; }
      this.genTask(param);
    }
  }
  genTask(param) {
    this.count++;
    const task = this.fn(param);
    task.then(() => {
      this.successNum++;
    }).catch(() => {
      this.failNum++;
    }).finally(() => {
      this.count--;
      this.init();
      if(this.count === 0 && this.params.length === 0){
        this.emit('finish');
      }
    })
  }
}

准备工作

我们先写一个简单的HTML文件，方便我们接下来进行效果实现

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="./index.css">
        <title>水平垂直居中</title>
    </head>
    <body>
        <div class="container">
            <div class="inner">水平垂直居中</div>
        </div>
    </body>
</html>

/* CSS文件 */
.container{
    width: 400px;
    height: 400px;
    border: 1px solid black;
}

.inner{
    width: 100px;
    height: 100px;
    border: 1px solid red;
}

最终浏览器呈现的效果如下

水平居中

水平居中的方式有多种，总体来说可以使用flex、grid、text-align、margin等方法，我们要实现如下所示的效果

使用flex方法

.container{
    width: 400px;
    height: 400px;
    border: 1px solid black;
    /* 新增 */
    display: flex;
    justify-content: center;
}

只需在父DOM元素中新增以上CSS即可实现水平居中

使用margin方法

.inner{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    /* 新增 */
    margin: 0 auto;
}

**注：**这个方法适用于知道子dom元素宽度已知的情况下

使用text-align方法

要注意：text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐，并不控制块元素自己的对齐，只控制他行内内容的对齐。

所以这个属性对于我的HTML文件是无效的，我们要把内部的div改为span即可生效，修改后的代码如下：

<body>
    <div class="container">
        <!-- 将div修改为span -->
        <span class="inner">水平垂直居中</span>
    </div>
</body>

CSS样式表修改为如下所示

.container{
    width: 400px;
    height: 400px;
    border: 1px solid black;
    /* 新增 */
    text-align: center;
}

使用grid方法

.container{
    width: 400px;
    height: 400px;
    border: 1px solid black;
    /* 新增 */
    display: grid;
    grid-template-rows: 1fr; /* 让inner的高度占满 */
    grid-template-columns: 1fr; /* 让inner的宽度占满 */
    justify-items: center; /* 让inner水平居中 */
}

关于grid的更多介绍详见张鑫旭的:point_right:博客👈

使用left方法

.container{
    width: 400px;
    height: 400px;
    border: 1px solid black;
    /* 新增 */
    position: relative;
}

.inner{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    /* 新增 */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

这个地方要注意的是，如果想要使用left、right、top、bottom方法的时候必须保证父dom的position为relative属性，子dom的position为absolute属性，这样才可以生效。并且子dom的基准是离其最近的position属性为relative的父dom元素

当然，这里你如果很明确子dom元素和父dom元素的宽度的话，比如我写的HTML代码，可以直接使用left: 150px来实现，但是这样的话就没有什么拓展性了。

垂直居中

垂直居中的方法也有很多，比如flex、top、grid等，我们要实现的效果如下

使用flex方法

.container{
    width: 400px;
    height: 400px;
    border: 1px solid black;
    /* 新增 */
    display: flex;
    align-items: center;
}

只需在父DOM元素中新增以上CSS即可实现垂直居中、

使用grid方法

.container{
    width: 400px;
    height: 400px;
    border: 1px solid black;
    /* 新增 */
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    align-items: center;
}

使用top方法

.container{
    width: 400px;
    height: 400px;
    border: 1px solid black;
    /* 新增 */
    position: relative;
}

.inner{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    /* 新增 */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

使用line-height方法

使用line-height方法是不能使我这个HTML垂直居中的，但是如果你想垂直居中的元素是一个单行文本，那么可以参照这个方法。

<body>
    <div class="container">
        <!-- 将div修改为span -->
        <span class="inner">水平垂直居中</span>
    </div>
</body>

.container{
    width: 400px;
    height: 400px;
    border: 1px solid black;
}

.inner{
    width: 100px;
    line-height: 400px;
    border: 1px solid red;
}

请注意一定是单行文本，因为line-height是指一行文本的高度，如果是两行文本的话就不能实现垂直居中的效果了

使用inline-block方法

.container{
    width: 400px;
    height: 400px;
    border: 1px solid black;
}
/* 新增 */
.container::after{
    display:inline-block;
    vertical-align:middle;
    content:'';
    height:100%;
}
.inner{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    /* 新增 */
    display: inline-block;
    vertical-align: middle;
}

以上就是我对于垂直居中方法的一些整合，如果您有什么其他的方法，请在评论区进行讨论！

前言

最近笔者在复习 JavaScript 基础知识，刚看完《JavaScript 高级程序设计（第四版）》，想再找一些优秀代码库巩固一下学到的内容，自然而然得就想到了 Lodash。

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。在笔者的公司内使用率颇高，相信在大家的项目中也是如此，于是就想研究一下 lodash 源码，顺便做一些源码分析，独乐乐不如众乐乐，写一些文章出来与大家分享。

于是就到了这篇文章的主题，快速搭建一个文档网站。其实笔者是有一个服务器的，域名是 https://lcs.show，但是服务器确实带宽有限，再加上还得自己配置 NGINX、GitHub Action 以及 https 证书等内容。

很巧看到了腾讯云 cloudbase 服务，可以快速搭建静态网站，如果你没有域名的话会自动分配一个域名（但是会比较难记），可以的话还是自己注册一个域名，也可以很方便地申请并配置 https 证书，如果搭配 GitHub Action 使用的话可以说是完全不用考虑服务器维护的内容了。

接下来就来讲一下如何搭建以及部署。

搭建及部署

本文是以 VuePress 为例进行搭建部署，VitePress、Next、Docsify 等部署大同小异。

项目初始化

安装 CLI

npm install -g @cloudbase/cli@latest

初始化一个应用

tcb new cloudbase-test vuepress

使用该 CLI 是需要进行登录的，如果 CLI 检测到你当前没有登录的话会自动打开浏览器跳转到腾讯云登录页面，登录成功后返回命令行，继续下一步操作：

接下来选择你认为合适的一个服务器地点，在这里我选择上海。

接下来会选择关联环境，如果你当前没有环境的话可直接选择「创建新环境」，CLI 会自动打开浏览器跳转到「创建新环境」页面，创建新环境如下图，在这里我选择使用 VuePress 模板进行创建：

选择完成后点击下一步即可：

创建成功后返回命令行，会显示正在初始化环境，稍等几分钟就可以直接创建项目。创建成功后会生成以下目录结构的项目：

├── README.md
├── cloudbaserc.json
├── guides
│   └── README.md
└── package.json

项目部署

安装依赖

npm i

构建部署

npm run deploy

部署成功

执行 npm run deploy 稍等片刻之后即可部署成功，命令行会返回一个访问域名，笔者的为 https://cloudbase-test-9gccjnk3e393c02a-1256377994.tcloudbaseapp.com/vuepress/ ，点击即可访问示例网站，如下：

到这里为止，其实部署工作就算是结束了，无需自己配置 NGINX 等复杂繁琐的操作，这就是云服务的魅力，同时该服务按量计费，对于笔者来说费用可以说是非常低了。

但是，仅此还不够，我们要配置 GitHub Action 之后，才能算完全放手部署这件事，做到完全自动化，将日常工作精力专注于文档编写就可以了。

GitHub Action 配置

如果初始化了一个项目的话，会看到项目中有一个 cloudbaserc.json 文件，该文件为 cloudbase 配置文件，文件中有一个 envId 配置项，这属于敏感信息，请注意千万不要上传到 GitHub 中，将该配置信息从 cloudbaserc.json 中删除！

既然不能上传的话，我们应该如何配置呢，答案很简单，使用 GitHub secret 即可。需要在腾讯云控制台新建秘钥，新建完成后，打开你的 GitHub 仓库进行如下设置：

创建 ENVID、SECRETID、SECRETKEY 三条 secret，其中 ENVID 在应用列表中可见，配置完成后如下所示：

接下来在项目的 .github/workflows 目录下创建 deploy.yml 文件，内容如下：

name: 自动化部署

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    name: deploy
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Deploy to Tencent CloudBase
        uses: TencentCloudBase/cloudbase-action@v2
        with:
          secretId: ${{ secrets.SECRETID }}
          secretKey: ${{ secrets.SECRETKEY }}
          envId: ${{ secrets.ENVID }}

然后将你的项目代码 push 到 GitHub 就可以完成自动化部署了，之后就可以专心进行文档编写，无需关心服务器维护这样的事情了。

快乐搬砖~

总结

像腾讯云 cloudbase 这样的云服务可以说真的方便了很多，可以直接部署自己的静态博客或者文档等站点，一键部署，无需运维，岂不美哉。

前面说到笔者最近正在写 lodash 源码解析，地址是 lodash.lcs.show，GitHub 地址为 https://github.com/jacob-lcs/lodash-source-code-analysis当然还处于刚开始的阶段，大家有兴趣的话欢迎关注~

Vue 事件修饰符详解

整体学习Vue时看到Vue文档中有事件修饰符的描述，但是看了之后并没有理解是什么意思，于是查阅了资料，现在记录下来与大家分享

先给大家画一个示意图理解一下冒泡和捕获

(1) `.stop`修饰符

请看如下代码

<template>
  <div class="about">
    <div @click="test1">
      <div @click="test2">
        测试
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods:{
    test1(){
      console.log('test1')
    },
    test2(){
      console.log('test2')
    }
  }
}
</script>

由以上代码可以看到我们有一个嵌套的div，每一个div都绑定着一个事件，如果我们点击div的话是按什么顺序触发这两个事件的呢。其实是默认按照冒泡的方式触发的，简单来说就是由内而外，如果还是不明白请看上面的解析图。

此Vue文件最终生成的界面是这个样子的

当我们点击的时候默认按照冒泡方式触发函数，控制台打印结果如下

现在就是.stop发挥作用的时候了，修改代码如下

<template>
  <div class="about">
    <div @click="test1">
      <div @click.stop="test2">
        测试
      </div>
    </div>
  </div>
</template>

这样我们在点击之后控制台打印结果如下

由这个结果我们可以看到，这个修饰符的作用就是阻止事件冒泡，不让他向外去执行函数，到此为止

(2)`.prevent`修饰符

这个时候我们再来说一下.prevent修饰符，其作用就是阻止组件本来应该发生的事件，转而去执行自己定义的事件

<template>
  <div class="about">
    <a href="https://www.cnblogs.com/Jacob98/" @click="test2">跳转</a>
  </div>
</template>

<script>
export default {
  methods:{
    test2(){
      console.log('test2')
    }
  }
}
</script>

上述代码我们并没有添加.prevent修饰符，接下来的结果我们应该可以想到，点击之后会跳转到我写的网址中(也就是我的博客:sunglasses:)，当时当我们对这个代码稍作修改

<template>
  <div class="about">
    <a href="https://www.cnblogs.com/Jacob98/" @click.prevent="test2">跳转</a>
  </div>
</template>

点击之后就不会跳转到相应的网址，而是去执行我写的函数

(3)`.capture`修饰符

其实这个的理解就很简单，就想我们第一节所说，网页是默认按照冒泡方式去触发函数的，但是当我们使用.capture修饰符时，网页就会按照捕获的方式触发函数，也就是从外向内执行，但是这个时候一定要注意，.capture修饰符一定要写在外层才能生效，原因大家应该能自己想清楚。

<template>
  <div class="about">
    <div @click.capture="test1">
      <div @click.stop="test2">
        测试
      </div>
    </div>
  </div>
</template>

控制台打印结果如下

(4)`.once`修饰符

这个理解起来就更加简单了，加上此修饰符之后相应的函数只能触发一次，无论你点击多少下，函数就只触发一次。这个有一个用途就是防止用户多次点击造成应用数据错误。比如说用户点击支付按钮，由于客户机器比较卡顿，点击一下之后没有立即反应就又点了一下，这个时候有可能就会造成多次扣费，降低用户体验。

(5)`.self`修饰符

当前元素自身时触发处理函数时才会触发函数，原理：是根据event.target确定是否当前元素本身，来决定是否触发的事件/函数
实例：如果点击内部点击2，冒泡不会执行gett方法，因为event.target指的是内部点击2的dom元素，不是外部点击1的，所以不会触发自己的点击事件

<div v-on:click.self="test1">
    test1
	<div v-on:click="test2">
    	test2
    </div>
</div>

前言

在做需求过程中我们大概率会遇到在浏览器中下载文件的需求，如果仅仅是这个要求的话很简单，有如下两种解决方式。

第一种是通过 window 对象的 open 方法进行操作，将文件 url 直接在浏览器中打开即可下载。

window.open('url')

第二种是通过 a 标签，设置 href 为 url 值，点击 a 标签即可完成下载。

<a href='url' download='文件名'></a>

但是上面两种文件下载方式都会存在一个问题，就是 pdf 文件会直接在浏览器中打开而不是直接下载，效果如下：

解决方案

这种需求的解决方式就是将PDF文件的 MIME type 改为 application/octet-stream 并加入 Content-Disposition:attachment header，原本的 pdf 文件 MIME type 为 application/pdf，浏览器识别到这个 type 之后会自动在浏览器打开，所以说我们在这里修改 type 即可。

修改的方法有两种，一种是在后端进行修改，上传文件或者返回文件的时候进行操作，但是绝大多数情况下文件都是存储到 cdn 服务器中的，后端也不方便对其进行操作，这个时候就需要前端来修改了。

处理代码如下：

/**
 * @deprecated 下载文件
 * @param {string} url 
 * @param {string} filename
 */
handleFileDownload = (url, filename) => {
  // 创建 a 标签
  let a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
}

/**
 * @deprecated 处理 pdf url，使其不在浏览器打开
 * @param {string} url
 */
handlePdfLink = (url, filename) => {
  fetch(url, {
    method: 'get',
    responseType: 'arraybuffer',
  })
    .then(function (res) {
      if (res.status !== 200) {
        return res.json()
      }
      return res.arrayBuffer()
    })
    .then((blobRes) => {
    	// 生成 Blob 对象，设置 type 等信息
      const e = new Blob([blobRes], {
        type: 'application/octet-stream',
        'Content-Disposition':'attachment'
      })
      // 将 Blob 对象转为 url
      const link = window.URL.createObjectURL(e)
      handleFileDownload(link, filename)
    }).catch(err => {
      console.error(err)
    })
}

这样修改修改代码的话就可以实现在浏览器中下载。效果如下

三种方法教你HTML实现点击某一个元素之外触发事件

大致编写的HTML界面渲染后是这个样子的，我们现在想要实现的需求是点击Button所在的div不会触发事件，而在点击Button所在的div之外的区域时会触发事件，下面就来介绍三种方法实现。

<!-- HTML代码 -->
<html>
<head>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div class="container">
    <div class="inner">
      Button
    </div>
  </div>
  <script src="./index.js"></script>
</body>
</html>

/* CSS代码 */
.container{
  width: 400px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
}
.inner{
  height: 100px;
  width: 100px;
  background-color: burlywood;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

方法一、阻止事件冒泡

先给大家画一个示意图理解一下冒泡和捕获

由上面的HTML代码可以看到我们有一个嵌套的div，如果我们点击div的话是按什么顺序触发这两个事件的呢。其实是默认按照冒泡的方式触发的，简单来说就是由内而外，如果还是不明白请看上面的解析图。这就导致我们点击Button所在的div也会触发事件，所以我们要阻止冒泡就可以实现我们的需求

/**
 * 方法一
 * 利用阻止事件冒泡实现
 */
const inner = document.getElementsByClassName('inner')[0];
const container = document.getElementsByClassName('container')[0];

inner.addEventListener('click', event => {
  event.stopPropagation();  // chromium内核
  window.event.cancelBubble = true;  // IE内核
})

container.addEventListener('click', event => {
  console.log('success');
})

方法二、利用判断点击事件的target是否为内部元素

/**
 * 下面介绍了三种方法来判断是否为内部元素
 * 1.className是否相等，也可以使用id
 * 2.DOM元素是否相等
 * 3.点击的DOM是否包含内部DIV
 */
container.addEventListener('click', event => {
  if('inner' !== event.target.className) {
    console.log(`success`);
  }
  if(inner !== event.target) {
    console.log('success');
  }
  if(event.target.contains(inner) && event.target !== inner) {
    console.log('success');
  }
})

方法三、使用Vue `.self`修饰符

当前元素自身时触发处理函数时才会触发函数

原理：是根据event.target确定是否当前元素本身，来决定是否触发的事件/函数

<template>
  <div id="app" @click.self="container">
    <img alt="Vue logo" src="./assets/logo.png" >
  </div>
</template>

<script>
export default {
  name: 'app',
  components: {
    HelloWorld
  },
  methods:{
    container() {
      console.log('success')
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  background-color: aqua;
}
</style>

这样的话也可以实现点击内部div之外的部分触发特定函数

大家有什么其他的方法可以实现欢迎评论内提出:smile:

做了一个比较完善的课程管理与推荐系统

Web 端：https://github.com/jacob-lcs/awesome-curriculum-web

Android 端：https://github.com/jacob-lcs/awesome-curriculum-android

Nodejs 端：https://github.com/jacob-lcs/awesome-curriculum-backend

预览网址：http://schedule.lcs.show/

一、引言

自己在大学的时候做了一个课程管理与推荐系统，系统的功能包括课程表、课程推荐、课程群聊三大功能。其实自己也是在大学时候感受到没有一款相似的工具出现，并且平时想找大学课程班上的同学比较困难，因为大学是走班制，没有固定的班级。所以就做了这么一款软件。总体来说分为 Android 端、Web 端、Nodejs 端。

二、功能介绍

本章主要来介绍一下本系统做的一些功能，并且通过 gif 图片的形式对其作出演示。

2.1 课程表

课程表就是可以通过自动导入或者手动新建的方式进行添加，但是由于浏览器跨域限制，Web 端并没有做自动导入功能，而是将其放到了 Android 端，GitHub 地址如上所示。自动导入故名思义，输入你的学号和密码，就可以通过学校教务处拉取你的课程信息，当然这个需要适配，目前只适配了上海大学（对，我就是上海大学的😝）。
手动新增课程的方式也比较人性化，通过在课程表中下拉就可以弹出课程详情的 form 表单，输入相关的信息即可。下面通过 gif 图片来演示一下。

2.2 课程群聊

课程群聊就是在你新建完课程之后，系统会自动根据你新建的课程将你拉入到对应的课程群聊当中，省去了寻找群聊的过程，打开聊天界面即可看到所有课程群聊，要注意的是当学校、课程名称、课程好均相同时才会进入到同一个课程群聊当中。
在群聊中可以发送图片、表情、文字等信息，演示如下：

课程推荐

系统中还有一个课程推荐的功能，就是根据你平时的点击日志进行课程推荐，推荐算法使用的是比较经典的基于物品的协同过滤推荐算法。数据库的所有课程都是从网易云课堂、腾讯课堂、MOOC 等网站爬取的，具体的方法可以看我这篇博客，演示如下：

Android 端总览

三、部署方法

3.1 Web 端

安装依赖

yarn install

运行项目

yarn start

3.2 Nodejs 端

你应该可以发现项目目录/config/下的三个文件里面的配置项都为空，因为我使用的云服务器作为 MySQL 数据存储，包括 qq 邮箱密钥，为了保护隐私，还请大家自己填写调试程序。

3.2.1 配置变量

// PASS_SECERT.js
const PASS_SECRET = {
  SECRET_KEY: "" // 加密密码的密钥，自己随便填写就好
};

// dbConfig.js
const dbConfig = {
  DATABASE: "", //数据库
  USERNAME: "", //用户
  PASSWORD: "", //密码
  PORT: "", //端口
  HOST: "" //服务ip地址
};

// email.js
const emailInfo = {
  user: "",
  pass: "" // QQ邮箱密钥，注意：不是密码
};

另外，config 目录下还有两个 pem 文件，这个是生成的密钥和公钥，请按照以下方法生成

打开命令行工具，输入 openssl，打开 openssl;
生成私钥
genrsa -out rsa_private_key.pem 2048
生成公钥
rsa -in rsa_private_key.pem -pubout -out rsa_public_key.pem

3.2.2 安装依赖

npm run install

3.2.3 运行项目

npm run start

一文详解 react-color 实现原理

一、前言

ReactColor 是一个优秀的 React 颜色选择器组件，官方给了多种布局供开发者选择。

笔者常用的主题为 Sketch，这种主题涵盖了颜色面板、推荐色块、RGB颜色输入等功能，比较完善。但是最近在写一个富文本编辑器，编写过程中遇到了一些问题，比如用户在点击推荐色块时，编辑器会失去焦点，无法对字体颜色进行更改。如果是编辑器自有的组件，可以使用以下代码

event.preventDefault();

该代码可以禁止浏览器默认行为，比如点击推荐色块之后只将色值向上传递，而不改变浏览器当前 focus 状态。但是 ReactColor 并没有暴露该事件，故 clone 了源码，在编辑器内集成了该组件，实现功能的同时也能够减少打包体积。

二、实现原理

本章节主要介绍 ReactColor 的实现原理，以比较有代表性的 Sketch 主题为例。

由上图可以看到，整个颜色选择器面板由这六个部分组成，分别是亮度与饱和度调节面板、色相 Hue 调节面板、透明度调节面板、当前颜色的 RGBA 与 Hex 值、推荐色块以及颜色实时预览。下面的部分就来介绍其原理实现。

2.1 HSV 色彩模型

与颜色相关的几个属性分别为亮度、饱和度、色相与透明度，与我们平时用到的 RGB 色彩模型不同，ReactColor 中用的是 HSV 色彩模型，其具体含义如下：

下面是维基百科对 HSV 色彩模型的介绍：

HSV即色相、饱和度、明度（英语：Hue, Saturation, Value），又称HSB，其中B即英语：Brightness。

色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。

饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0-100%的数值。

明度（V），亮度（L），取0-100%。

至于为什么选用 HSV 色彩模型而不是直接使用 RGB，大家在使用 ReactColor 的过程中应该会发现，只要在下方的色相 Hue 调节面板上选中了颜色，亮度与饱和度调节面板就会呈现什么颜色。举个例子：你选择了黄色，那么最上方调节面板呈现的就是黄色，差别也只是饱和度与明度不同而已。这就是使用 HSV 色彩模型的优势，让用户选择的颜色变成可预知并且方便调节的。

RGB 颜色空间利用三个颜色分量的线性组合来表示颜色，任何颜色都与这三个分量有关，而且这三个分量是高度相关的，所以连续变换颜色时并不直观，想对图像的颜色进行调整需要更改这三个分量才行。自然环境下获取的图像容易受自然光照、遮挡和阴影等情况的影响，即对亮度比较敏感。而 RGB 颜色空间的三个分量都与亮度密切相关，即只要亮度改变，三个分量都会随之相应地改变，而没有一种更直观的方式来表达，而这就是 HSV 色彩模型的优势所在。

2.2 HSV 转 RGB

上面提到，在日常的前端开发过程中还是普遍使用 RGB 色彩模型进行颜色表示，在用户设置好 HSV 值后我们需要将其转为 RGB 值，公式如下（该公式来自维基百科)

$h_i = \lfloor h/60 \rfloor$
$f = h/60 - h_i$
$p = v * (1-s)$
$q = v*(1-f*s)$
$t = v * (1 - (1-f)*s)$
$$rgb=\begin{cases}
(v,t,p), & \text{if $h_i=0$} \
(q,v,p), & \text{if $h_i=1$} \
(p,v,t), & \text{if $h_i=2$} \
(p,q,v), & \text{if $h_i=3$} \
(t,p,v), & \text{if $h_i=4$} \
(v,p,q), & \text{if $h_i=5$} \
\end{cases}$$

这样在用户选择完成后就可以对色彩空间实时转换，通过 onChange 回调返回给用户。

2.3 HSV 色彩模型在 ReactColor 中的实现

既然使用了 HSV 色彩模型就要考虑一下如何表示这三个变量，下面我们分两部分来讲。

2.3.1 Hue 色相

颜色名称	红绿蓝含量	角度	代表物体
红色	R255,G0,B0	0°	血液、草莓
橙色	R255,G128,B0	30°	火、橙子
黄色	R255,G255,B0	60°	香蕉、杧果
黄绿	R128,G255,B0	90°	柠檬
绿色	R0,G255,B0	120°	草、树叶
青绿	R0,G255,B128	150°	军装
青色	R0,G255,B255	180°	水面、天空
靛蓝	R0,G128,B255	210°	水面、天空
蓝色	R0,G0,B255	240°	海、墨水
紫色	R128,G0,B255	270°	葡萄、茄子
品红	R255,G0,B255	300°	火、桃子
紫红	R255,G0,B128	330°	墨水

如何横向表示色相呢，只需要一行 CSS 代码：

background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);

这样即可大致表达出 0-360 度的色相值，效果如下：

根据鼠标拖动的位置距离左边界的距离就可以计算出色相值。

/**
 * 在颜色值发生变化时实时计算相应的色相值
 * @param event
 */
const handleChange = (event: any) => {
  if (!ref.current) {
    return;
  }
  const clientRect = ref.current.getBoundingClientRect();
  const { width: containerWidth } = clientRect;
  const x: number = typeof event.pageX === 'number' ? event.pageX : event.touches[0].pageX;
  const left = x - (clientRect.left + window.pageXOffset);

  let innerHue;
  // 处理边界值
  if (left < 0) {
    innerHue = 0;
  } else if (left > containerWidth) {
    innerHue = 359;
  } else {
    const percent = (left * 100) / containerWidth;
    innerHue = (360 * percent) / 100;
  }
  setHue(innerHue);
  props.onChange({ h: innerHue });
};

2.3.2 Saturation 饱和度与 Value 明度

**饱和度（S）**是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0-100%的数值。**明度（V）**指颜色的亮度，不同的颜色具有不同的明度。

在 ReactColor 中按照如下方式来表示饱和度与明度。

其实用 CSS 表示也比较简单，使用渐变色来表示就可以实现该效果。

background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));

与色相的计算方式一样，也是根据鼠标拖动的位置距离左边界和下边界的距离来计算，计算方法可以参考色相的思路。

三、总结

大家看完这篇文章应该发现代码部分其实我介绍的不多，更多还是介绍 HSV 色彩模型，以及作者为什么没有使用 RGB 表示。

如果大家去看 react-color 源码就会发现代码其实不难理解，难点还是在 HSV 的应用方法上面，大家如果有需要自己在项目里面定制化颜色选择器的话也可以根据这个思路来，一天之内就可以写出来。

四、参考资料

教你爬取腾讯课堂、网易云课堂、mooc等所有课程信息

本文的所有代码都在GitHub上托管，想要代码的同学请点击这里:smile_cat:

序：由于自己想要实现一个课程推荐系统，需要在各大视频网站上爬取所有视频课程，从而为后续的推荐工作提供大量数据，在此篇博客中我分别爬取了MOOC、网易云课堂、腾讯课堂、学堂在线共约15万条数据。

运行环境：

mysqlclient~=1.4.6
requests~=2.22.0
bs4~=0.0.1
beautifulsoup4~=4.8.2

MOOC

首先进入网站，在这里我们分析他的API设计，先要找到他是从哪一个API获得相应课程的，经过分析之后我们发现是https://www.icourse163.org/web/j/courseBean.getCoursePanelListByFrontCategory.rpc这个API，其返回内容如下：

然后我们随意点击页面上的一个课程，找到其课程url的规律，打开沟通心理学这门课程，其URL是https://www.icourse163.org/course/HIT-1001515007，而沟通心理学这门课程返回的信息是：

// 在这里我只保留了我需要的一些数据
{
    name: "沟通心理学",
    id: 1001515007,
    schoolPanel: {id: 9005, name: "哈尔滨工业大学", shortName: "HIT"}
}

我们可以发现课程的URL就是学校的简称-id，这样就可以组成课程URL，现在我们得知课程URL如何得知，那么这些课程数据需要传什么参数呢，如下：

{
    categoryId: -1, // 类别id，因为我这里选的全部，所以是-1
    type: 30,
    orderBy: 0,
    pageIndex: 1, // 第几页
    pageSize: 20 // 每页多少条数据
}

到这里就新产生了一个问题，categoryId是怎么来的，我们继续看网页请求的api列表，找到这样一个APIhttps://www.icourse163.org/web/j/mocCourseCategoryBean.getCategByType.rpc，其返回结果如下：

数据结构大致如下：

我们想要得到的课程分类特别细致的话就需要一直向下找json的children，直到children为空，算法的话就采用递归算法就可以。

到现在为止我们已经知道了如何获取类别id，如果由类别id获得课程数据，接下来我们就需要把获取到的数据存储到数据库中，我的数据库包含类别、课程名称、课程图片URL、课程URL、课程来源这四个字段，存储代码如下：

# 存储到数据库
def save_to_mysql(data, category_name):
    sql = "insert into webCourses (category, name, site, imgUrl, resource) values ('{0}', '{1}', '{2}', '{3}', '{4}')".format(
        category_name, data["name"],
        'https://www.icourse163.org/course/' + str(data["schoolPanel"]["shortName"]) + "-" + str(data["id"]),
        data["imgUrl"], "慕课")
    print(sql)
    execute(sql)

要注意这里的execute函数是我封装的一个函数，具体的作用就是运行sql语句，全部代码请到我的GitHub查看。

腾讯课堂

其实如果你看过了上面MOOC的获取所有课程的API设计，其他课程网站的API设计也是大致相同的，首先我们要获得类别id，然后再根据类别id去请求数据，与mooc不同的是腾讯课堂请求课程数据是通过beautifulsoup4解析html内容实现的。下面就来简单说一下：

获取课程类别的API：https://ke.qq.com/cgi-bin/get_cat_info

根据类别id获得数据的网页url： https://ke.qq.com/course/list?mt=1001&st=2001&tt=3001&page=2，这里的mt、st、tt分别是三个类别，st是mt的一个子类，tt是st的一个子类，page就是页数了。

得到的网站如下：

在这里我们需要的是每一个课程，其实思路很简单，按F12打开开发者工具，找到课程对应的dom块，用beautifulsoup4解析html内容，得到课程数组就可以了，代码如下：

# 获取课程数据
def get_course_data(mt, st, tt, page, category):
    url = "https://ke.qq.com/course/list?mt=" + str(mt) + "&st=" + str(st) + "&tt=" + str(tt) + "&page=" + str(page)
    response = requests.request("GET", url).text
    bs = BeautifulSoup(response)
    course_blocks = bs.find_all(name='li', attrs={"class": "course-card-item--v3 js-course-card-item"})
    # print(course_blocks)
    if len(course_blocks) != 0:
        for i in range(len(course_blocks)):
            bs = course_blocks[i]
            img = bs.find(name="img", attrs={"class", "item-img"})
            a = bs.find(name="a", attrs={"class", "item-img-link"})
            save_to_mysql(img.attrs["alt"], a.attrs["href"], img.attrs["src"], category)
        return True  # 这里是返回该类别的下一页是否还有数据
    else:
        return False

得到数据之后再将这些数据存入到数据库中就可以了。

网易云课堂

其实网易云课堂就和MOOC的API设计非常类似了，毕竟都是网易公司的程序员写的，规范也都差不多，看懂MOOC的api设计的同学直接去我的github看代码就可以了。

学堂在线

学堂在线的API设计就比较简单，直接通过一个API就可以获得所有的数据，https://next.xuetangx.com/api/v1/lms/get_product_list/?page=1，返回的数据格式如下：

在这里一个API里面课程名称、分类、课程封面URL，课程id可以看的非常请求，下面我们就需要得到课程信息与课程url之间的关系，我们随意点开一个课程，分析他的URL，我们就可以发现，课程URL就是https://next.xuetangx.com/course/加上课程的course_sign组成的。

到这里就分析结束，存储到数据库即可。

小结

从上述的分析我们可以看出，各大课程网站的api设计都是类似的，并且他们都没有做api请求限制，所以我在爬取过程中没有遇到过被封IP的情况，也算是省了不少事:joy:。在这里把代码与思路分享给大家，希望能够给到大家一些帮助。所有代码请点击这里:smile_cat:

jacob-lcs / blog Goto Github PK

blog's Introduction

你好呀 👋

blog's People

Contributors

Stargazers

Watchers

Forkers

blog's Issues

效果展示

界面设计

核心算法

游戏结束

项目源代码

一、前言

二、项目初始化

2.1 初始化文件结构

2.2 完善配置文件

三、功能性配置

3.1 样式文件解析

3.2 图片地址解析

四、性能优化

4. 1 引入缓存

4.2 引入多线程

五、总结

media使用

原理

应用

侧拉栏

全部代码

一、背景

二、实现

准备工作

水平居中

使用flex方法

使用margin方法

使用text-align方法

使用grid方法

使用left方法

垂直居中

使用flex方法

使用grid方法

使用top方法

使用line-height方法

使用inline-block方法

前言

搭建及部署

项目初始化

项目部署

GitHub Action 配置

总结

(1) .stop修饰符

(2).prevent修饰符

(3).capture修饰符

(4).once修饰符

(5).self修饰符

前言

解决方案

方法一、阻止事件冒泡

方法二、利用判断点击事件的target是否为内部元素

方法三、使用Vue .self修饰符

一、引言

二、功能介绍

2.1 课程表

2.2 课程群聊

课程推荐

Android 端总览

三、部署方法

3.1 Web 端

3.2 Nodejs 端

3.2.1 配置变量

3.2.2 安装依赖

3.2.3 运行项目

一、前言

二、实现原理

2.1 HSV 色彩模型

2.2 HSV 转 RGB

2.3 HSV 色彩模型在 ReactColor 中的实现

2.3.1 Hue 色相

2.3.2 Saturation 饱和度与 Value 明度

(1) `.stop`修饰符

(2)`.prevent`修饰符

(3)`.capture`修饰符

(4)`.once`修饰符

(5)`.self`修饰符

方法三、使用Vue `.self`修饰符