2024年6月记录

Posted on:June 1, 2024 at 05:41 AM
预计阅读时长：11 min read 字数：2073

目录

计划

面试题继续还得背,算法还得刷,源码还得看,英语还得学,但路还是一步步走,步子大了,容易…
容易累

但已经年中了,一年总得做些什么出来,要不考研去吧

记录

js

使用this关键字

  • method
const obj = {
  name: "Alice",
  greet: function () {
    console.log(this.name); // 'Alice'
  },
};

obj.greet(); // 'Alice'
  • function
function sayName() {
  console.log(this); // 非严格模式下是 `window`,严格模式下是 `undefined`
}

sayName();
  • 使用call/apply显式更改this的值
function greet() {
  console.log(this.name);
}

const person = { name: "Bob" };
greet.call(person); // 'Bob'
greet.apply(person); // 'Bob'
  • 事件处理中的this
document.getElementById("myButton").addEventListener("click", function () {
  console.log(this); // `<button id="myButton">...</button>`
});
  • 箭头函数中
const obj = {
  name: "Alice",
  greet: function () {
    const innerFunction = () => {
      console.log(this.name); // 'Alice'
    };
    innerFunction();
  },
};

obj.greet();

箭头函数不会创建自己的 this,它会捕获其所在上下文的 this 值.

  • 独立使用this

在全局作用域中,独立使用 this：

在非严格模式下,this 指向全局对象（浏览器中是 window）. 在严格模式下,this 是 undefined.

console.log(this); // 浏览器中,非严格模式下是 `window`,严格模式下是 `undefined`

react

Routers

react router/reach router

reach router Reach Router 的作者建议新的项目直接使用 React Router 6,因为它结合了 Reach Router 和 React Router 的优点,并改进了许多方面.如果你已经在使用 Reach Router,可以考虑迁移到 React Router 6,迁移过程相对简单

特点

1.简单的 API：Reach Router 采用声明式的路由配置,使用 JSX 来定义路由,使得代码更加直观和易于理解.2.可访问性：它非常重视可访问性（accessibility）,例如,自动管理页面标题和聚焦管理等,以确保应用对所有用户友好.3.基于 URL 路径：路由匹配基于 URL 路径,并且支持动态路由参数.4.轻量级：相比于 React Router,Reach Router 更加轻量,适合需要简单路由解决方案的项目.

import React from "react";
import { render } from "react-dom";
import { Router, Link } from "@reach/router";

const Home = () => <div>Home</div>;
const About = () => <div>About</div>;
const Dashboard = () => <div>Dashboard</div>;

const App = () => (
  <div>
    <nav>
      <Link to="/">Home</Link> | <Link to="about">About</Link> |{" "}
      <Link to="dashboard">Dashboard</Link>
    </nav>
    <Router>
      <Home path="/" />
      <About path="about" />
      <Dashboard path="dashboard" />
    </Router>
  </div>
);

render(<App />, document.getElementById("root"));
react router

React Router 版本 6 提供了更简洁和更强大的 API,非常适合与 TypeScript 一起使用.下面是一个完整的示例,展示如何在 TypeScript 项目中使用 React Router 6.

安装

首先,你需要安装 React Router 和类型定义文件：

npm install react-router-dom
npm install --save-dev @types/react-router-dom

配置 TypeScript

确保你的 tsconfig.json 文件配置正确,至少包含以下配置：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "es2015", "es2017"],
    "jsx": "react",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

基本使用

下面是一个基本的例子,展示如何在 TypeScript 项目中使用 React Router 6.

创建页面组件

首先,创建几个简单的页面组件：

// src/pages/Home.tsx
import React from "react";

const Home: React.FC = () => {
  return <h2>Home Page</h2>;
};

export default Home;

// src/pages/About.tsx
import React from "react";

const About: React.FC = () => {
  return <h2>About Page</h2>;
};

export default About;

// src/pages/Dashboard.tsx
import React from "react";

const Dashboard: React.FC = () => {
  return <h2>Dashboard Page</h2>;
};

export default Dashboard;
配置路由

接下来,在你的主应用组件中配置路由：

// src/App.tsx
import React from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Dashboard from "./pages/Dashboard";

const App: React.FC = () => {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link> |{" "}
        <Link to="/dashboard">Dashboard</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </Router>
  );
};

export default App;
渲染应用

最后,在入口文件中渲染你的应用：

// src/index.tsx
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

动态路由和参数

为了处理动态路由和参数,React Router 提供了 useParams 钩子.以下是一个示例：

创建动态页面组件
// src/pages/User.tsx
import React from "react";
import { useParams } from "react-router-dom";

interface UserParams {
  userId: string;
}

const User: React.FC = () => {
  const { userId } = useParams<UserParams>();

  return <h2>User ID: {userId}</h2>;
};

export default User;
配置动态路由
// src/App.tsx
import React from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Dashboard from "./pages/Dashboard";
import User from "./pages/User";

const App: React.FC = () => {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link> |{" "}
        <Link to="/dashboard">Dashboard</Link> |{" "}
        <Link to="/user/1">User 1</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/user/:userId" element={<User />} />
      </Routes>
    </Router>
  );
};

export default App;

路由守卫（即受保护的路由）

有时,你可能需要保护某些路由,使得只有经过身份验证的用户才能访问.以下是如何在 TypeScript 项目中实现路由守卫：

创建一个保护组件
// src/components/ProtectedRoute.tsx
import React from "react";
import { Navigate } from "react-router-dom";

interface ProtectedRouteProps {
  isAuthenticated: boolean;
  children: React.ReactElement;
}

const ProtectedRoute: React.FC<ProtectedRouteProps> = ({
  isAuthenticated,
  children,
}) => {
  if (!isAuthenticated) {
    return <Navigate to="/" />;
  }
  return children;
};

export default ProtectedRoute;
使用保护组件
// src/App.tsx
import React from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Dashboard from "./pages/Dashboard";
import User from "./pages/User";
import ProtectedRoute from "./components/ProtectedRoute";

const App: React.FC = () => {
  const isAuthenticated = true; // 替换为实际的身份验证逻辑

  return (
    <Router>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link> |{" "}
        <Link to="/dashboard">Dashboard</Link> |{" "}
        <Link to="/user/1">User 1</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route
          path="/dashboard"
          element={
            <ProtectedRoute isAuthenticated={isAuthenticated}>
              <Dashboard />
            </ProtectedRoute>
          }
        />
        <Route path="/user/:userId" element={<User />} />
      </Routes>
    </Router>
  );
};

export default App;

通过上述步骤,你可以在项目中成功地使用 React Router 6 进行路由管理,包括基本路由、动态路由和受保护路由等.

state manegment

链接

场景题

英语

算法

Creative Coding

js hack and creative coding

  • death star
<body
  onload="Я=[];Л=
               {};Ж=!Я;З=
              !Ж;Ч=!+Я;Д=
Ч+Ч;П=З+Я;Б=Д+Ч;Ю=Ж+Я;Ф=[Ж]+Я[Я];И=П[+Ч]
   Ы=Я[Ю[+Я]+Ф[+Ч+[+Я]]+Ю[Д]+П[+Я]+П[
      Б]+И];C=Я[Я]+Я;P=Я+Л;Ь=Д+Б;Ш
         =+Ч;X=+Я;Й='★';К='Й'
           H=П[X];T=Д+[X];Ы[P
          [Ь]+P[Ш]+C[Ш]+Ю[Б]+H
         +И+C[X]+P[Ь]+H+P[Ш]+И
         ](Ю[Ш]+Ю[    Д]+П[Б]+И
        +H+(Ж+Ы          )[T]+К+
       (З+Ы)                [T])(
      )"
></body>
  • translate js into japanese
(ウ = ""),
  (ア = !ウ + ウ),
  (ネ = !ア + ウ),
  (ホ = ウ + {}),
  (ヌ = ア[ウ++]),
  (セ = ア[(ミ = ウ)]),
  (ハ = ++ミ + ウ),
  (ヘ = ホ[ミ + ハ]),
  ア[
    (ヘ +=
      ホ[ウ] +
      (ホ.ホ + ホ)[ウ] +
      ネ[ハ] +
      ヌ +
      セ +
      ア[ミ] +
      ヘ +
      ヌ +
      ホ[ウ] +
      セ)
  ][ヘ](ネ[ウ] + ネ[ミ] + ア[ハ] + セ + ヌ + "(ウ)")();

format

ウ = "";
ア = !ウ + ウ;
ネ = !ア + ウ;
ホ = ウ + {};
ヌ = ア[ウ++];
セ = ア[(ミ = ウ)];
ハ = ++ミ + ウ;
ヘ = ホ[ミ + ハ];
ア[
  (ヘ +=
    ホ[ウ] +
    (ホ.ホ + ホ)[ウ] +
    ネ[ハ] +
    ヌ +
    セ +
    ア[ミ] +
    ヘ +
    ヌ +
    ホ[ウ] +
    セ)
][ヘ](ネ[ウ] + ネ[ミ] + ア[ハ] + セ + ヌ + "(ウ)")();

es6

let u = "";
let a = Boolean(!u) + u;
let ne = Boolean(!a) + u;
let ho = u + {};
let nu = a[u++];
let se = a[(mi = u)];
let ha = ++mi + u;
let he = ho[mi + ha];

let functionName = (he +=
  ho[u] + (ho.ho + ho)[u] + ne[ha] + nu + se + a[mi] + he + nu + ho[u] + se);
let result = functionName(ne[u] + ne[mi] + a[ha] + se + nu + "(u)");

result();

当然也可以用中文

空 = "";
真 = !空 + 空;
不 = !真 + 空;
物 = 空 + {};
乳 = 真[空++];
セ = 真[(未 = 空)];
半 = ++未 + 空;
合 = 物[未 + 半];
真[
  (合 +=
    物[空] +
    (物.物 + 物)[空] +
    不[半] +
    乳 +
    セ +
    真[未] +
    合 +
    乳 +
    物[空] +
    セ)
][合](不[空] + 不[未] + 真[半] + セ + 乳 + "(空)")();

🎉🎉🎉🎉🎉🎉🎉 支持所有浏览器的中文语言,它来了 🎉🎉🎉🎉🎉🎉🎉

  • bird lang
(𓅂 = ""),
  (𓂀 = !𓅂 + 𓅂),
  (𓁄 = !𓂀 + 𓅂),
  (𓊎 = 𓅂 + {}),
  (𓆣 = 𓂀[𓅂++]),
  (𓊝 = 𓂀[(𓇎 = 𓅂)]),
  (𓏢 = ++𓇎 + 𓅂),
  (𓆗 = 𓊎[𓇎 + 𓏢]),
  𓂀[(𓆗 += 𓊎[𓅂] + (𓂀.𓁄 + 𓊎)[𓅂] + 𓁄[𓏢] + 𓆣 + 𓊝 + 𓂀[𓇎] + 𓆗 + 𓆣 + 𓊎[𓅂] + 𓊝)][𓆗](
    𓁄[𓅂] + 𓁄[𓇎] + 𓂀[𓏢] + 𓊝 + 𓆣 + "`𓅂 𓏢 𓂀 𓁄 𓆣 𓊝 𓇎`"
  )``;

这段代码的逻辑是在创建一系列变量后,调用了一个函数并传递了一串字符串作为参数.函数的定义部分在代码的末尾,因此函数被立即调用并传递了字符串参数.

  • 头像注释
/*
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMNdyssoooyNMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMNy/..`  ``` ``..--/+/+yydNMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMNy-             `      `....+mMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMNs.`                    `` `...`/hNMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMN+`                               `-dMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMN:                           `     ``-dMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMN-                              `  ``.:/dMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMdo`                                   `.-/-hMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMNo`                                    .:/:/.:hMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMN/                                   `.../sms.:oNMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMo`                              ``..-//:yNMMm::shMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMy.                  ``..---.``.::///++oyNMMMMM+:soMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMN-                 ``..---::::/+ooosydmNMMMMMMN+//+NMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMy-               `....---:://+oyhdmNNNNMMMMMMmy/-+NMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMmo             `....----::/++ohmmNNNNMMMMMMMMN/./mMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMN/          `.....``````..-::/osyhddhhddddmNd..+NMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMy`         `.--...````````  ``-:/+++/:.``./hs`oNMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMNo+:.`      .---..```    `.`````.:+o:.`  `:+mNNMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMm:`  ```----...``````:-``.``-+mN+..``:NNMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMmh-..`..`-::--........---....-oNMNdyyhmMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMho:.   `-..``-:----..--::::::-...-+NMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMNo.         ` `.-------:://///:-....-/hMMMMMMMMMh`oMMMMMMMMMMMMMMMM
MMMMMMMMMMMMN-              .-:------:::::--.`..--/sMMMh+yNMMh  sMMMMMMMMMMMMMMM
MMMMMMMMMMMMo               `.-----..........`````.-+dNm+-/dN-  +MMMMMMMMMMMMMMM
MMMMMMMMMMMM.               `.--...````````````````.oNMMo:.o/   +MMMMMMMMMMMMMMM
MMMMMMMMMMMM/                `....`````    ````.-:/+hmmy-:/y    oMMMMMMMMMMMMMMM
MMMMMMMMMMMMs                ``..`````````     ```.-+shyydh.    dMMMMMMMMMMMMMMM
MMMMMMMMMMMMy                 ``````````..``````--:/yMMNmh.     /mMMMMMMMMMMMMMM
MMMMMMMMMMMMs                    `````` ``````````.-oNNh+.       .+oyhhmMMMMMMMM
MMMMMMMMMMMM.                  `    ````````....-:ohmNd/`                 `-:+sh
MMMMMMMMMMMs                                `...--/ydy:
MMMMMMMMmdy-                                      `.-.
MMMNy+-.
ms:                                          ```
*/
  • clock
(r = () =>
  setInterval(t => {
    for (
      j = o = "\n", y = 5;
      y--;
      document.body["inn" + "erHTML"] =
        "<pre>&lt" + (S = "script>\n") + o + "\n\n&lt/" + S
    )
      for (
        x = -01;
        63 - !y > x++;
        o += `(r=${r})()`[j++].fontcolor(c ? "#FF0" : "#444")
      )
        c =
          (x / 2) % 4 < 3 &&
          parseInt(
            "odRFacb67o2vi5gmOZmwFNteohbOh3sw".slice(
              (i = "9" < (D = Date()[16 + ((x / 8) | 0)]) ? 30 : D * 3),
              i + 3
            ),
            36
          ) &
            (1 << ((((x / 2) | 0) % 4) + 3 * y));
  }, 100))();

links

更多知识,请看下月记录