Debbl

// ==UserScript==
// @name         隐藏腾讯课堂正在观看提示
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  利用CSS隐藏腾讯课堂正在观看提示*2022-08-28*
// @author       Debbl
// @match        https://ke.qq.com/webcourse/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=ke.qq.com
// @license      MIT
// @grant        none

Debbl

1. 准备

• window 11
• 开启适用与 Linx 的 Windows 子系统
• 到微软商店下载 Ubuntu 系统
• 这里我使用的是 WSL1, wsl --set-default-version <Version>

1.1 查看当前环境的 shell

echo $SHELL

Debbl

1. 初始化

npm init

2. git 初始化

git init

3. 安装 React 和 ReactDOM

Debbl

function debounce(fn, delay) {
  // 定时器，保留上一个触发的定时器
  let timer = null;
  const _debounce = function () {
    // 没有达到延时，在次触发，清空上一次的定时器，不执行 fn
    if (timer) clearTimeout(timer);
    // 定时器
    timer = setTimeout(() => {
      fn();
    }, delay);

Debbl

CommonJS 模块化

导出

• 导出的是对象的引入，指向同一个对象
• exports={} 是错误的

module.exports = {};
exports.name = name;
// 重点 最终导出的一定的是 module.exports
exports = {} // 这个导出是错误的，exports 指向了其他的对象，无法修改 module.epxorts 所指向的对象
// 源码中

Debbl

宏任务和微任务

宏任务队列（macrotask queue）

• ajax
• setTimeout
• setInterval
• DOM 监听
• UI Rendering 等

Debbl

// https://promisesaplus.com/


// 状态定义
const PROMISE_STATUS_PENDING = 'pending';
const PROMISE_STATUS_FULFILLED = 'fulfilled';
const PROMISE_STATUS_REJECTED = 'rejected';

class MYPromise {
  constructor(executor) {

Debbl

const path = require('path');
const { merge } = require('webpack-merge');
const { DefinePlugin } = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

Debbl

/**
 - https 代理
 - 用户名
 - 邮箱
 - 中文乱码
*/

https.proxy=http://127.0.0.1:10808
user.name=Debbl
[email protected]

Debbl

{
  "compilerOptions": {
    // 目标代码 esnext 是指 es6 以后
    // 交给 Babel　来转化　根据　browserslistrc
    "target": "esnext",
    // 目标代码使用的模块化方案 umd 支持多种模块化
    "module": "esnext",
    // 严格模式 'use strict'
    "strict": true,
    // 对 jsx 进行怎么样的处理 preserve 保持默认