摘要：
import { ajax } from 'rxjs/ajax' import { map } from 'rxjs' ajax({ url: 'https://httpbin.org/delay/2', method: 'POST', headers: { 'Content-Type': 'app 阅读全文
2022年7月6日
摘要：
将数据看作是商品, 生产数据的是生产者, 使用数据的是消费者. 生产者有很多, Function / Promise / Generator / Iterator / RxJS. 等等. 但这些生产者的类型却不一样, 它们被分为 Push(推模式) 和 Pull(拉模式). 拉模式的生产者更加常见, 阅读全文
摘要：
获取鼠标点击坐标 1. 常规写法: document.addEventListener("click", (e) => { console.log([e.clientX, e.clientY]); }); 2. RxJS 写法(使用 map 操作符): import { fromEvent, map 阅读全文
摘要：
下面要实现一个点击事件每秒触发一次的功能. 常规写法: let begin = Date.now(); document.addEventListener("click", () => { if (Date.now() - begin >= 1000) { console.log("一秒只会触发一次 阅读全文
摘要：
我理解的"事件", 是一个会"重复发生的动作", 并由此产生的各种后续行为. 点击鼠标是一个事件, 点击后的各种动作和状态, 就是这个事件的"产物". Vue 中监听一个 state 的变化, 这个 state 变化时就是一个"事件", 后续的逻辑是其"产物". 回调函数也是一个事件, 内部在进行到 阅读全文
摘要：
下面是一个计数器的常规写法, 可以看到, count 在函数体之外, 这个 count 就是一个状态, 它受到 click 监听函数的控制, 相当于是分开的两部分, 这种看起来没啥大毛病, 但并不优雅. 如果状态变多了, 或者它们受多个来源控制, 那状态就有可能乱掉, 容易引发混乱. let cou 阅读全文
摘要：
我一直觉得, 用最少的代码实现功能是非常酷的. 如果能把少写代码与逻辑清晰结合起来, 那就是再酷不过了. 因此想记住各种常用库的方法, 尽量使用起来, 减少代码量. 这也是我学他们的主要原因. 事件监听的惯常做法是这样的: document.addEventListener("click", () 阅读全文
2021年9月10日
摘要：
npx npm i -D @babel/preset-react webpack.config.js { "presets": [ [ "@babel/preset-env", { "targets": { "chrome": "90" }, "useBuiltIns": "usage" } ], 阅读全文
摘要：
webpack.analysis.js const { merge } = require('webpack-merge') const commonConfig = require('./webpack.common') const { BundleAnalyzerPlugin } = requi 阅读全文
摘要：
webpack.config.js module.exports = { module: { rules: [ { test: /\.(css|scss)$/, use: [ 'style-loader', { loader: 'css-loader', options: { importLoade 阅读全文
摘要：
index.html <!DOCTYPE html> <html> <head> <!-- 定义网页编码格式 --> <meta charset="UTF-8" /> </head> <body> <script> alert("右究"); </script> </body> </html> 阅读全文
摘要：
index.js document.addEventListener('click', () => { import(/* webpackPrefetch: true */ 'lodash').then(({ default: { join } }) => { console.log(join([1 阅读全文
摘要：
index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script> document.addEventListener("DOMContentLoaded", function () { console.log(doc 阅读全文
摘要：
index.js function Animal(race) { this.race = race; } Animal.prototype.eat = function () { console.log(`${this.race} is eatting.`); }; const bird = new 阅读全文
摘要：
operate install lower version of target loader. 阅读全文
摘要：
operate 保证 webpack-cli 和 webpack-dev-server 大版本号相同 阅读全文
摘要：
// sideEffects 的用法 阅读全文
摘要：
index.js import React, { Component } from 'react' import ReactDOM from 'react-dom' class Bar extends Component { constructor() { super() this.state = 阅读全文
摘要：
在 git status 时提示的是使用以下命令： git restore --staged file_name 也可以用老式的方法： git reset HEAD file_name 阅读全文
摘要：
index.js import React from 'react' import ReactDOM from 'react-dom' const UserNameInput = ({ getName }) => { return ( <input onInput={function (e) { g 阅读全文
摘要：
progress 阶段0：展示 阶段1：征集 阶段2：草案 阶段3：候选 阶段4：定案 阅读全文
摘要：
index.js import React from 'react' import ReactDOM from 'react-dom' const element = <h1>hello</h1> // 这是一个 React 元素 ReactDOM.render(element, document. 阅读全文
摘要：
https://www.iconfont.cn/ 资源管理 -> 我的项目 https://www.iconfont.cn/manage/index 新建项目 https://www.iconfont.cn/collections/index 搜索选择图标并添加至购物车 -> 添加至项目 -> 确定 阅读全文
摘要：
webpack.config.js const { resolve } = require('path') module.exports = { module: { rules: [ { test: /\.png$/, use: { loader: 'file-loader', options: { 阅读全文
摘要：
npm npm i -D url-loader webpack.config.js module.exports = { // ... module: { rules: [ { test: /\.png$/, use: 'url-loader', }, ], }, } 阅读全文
摘要：
app.js const http = require('http') const https = require('https') const Koa = require('koa') const app = new Koa() app.use(ctx => { ctx.body = 'Hello 阅读全文
摘要：
index.ts import * as _ from "lodash"; const list = [1, 2, 3, 4, 5]; const arr = _.chunk(list, 2); console.log(arr); // [[1, 2], [3, 4], [5]] 阅读全文
摘要：
index.js const list = [1, , 3]; Array.apply(null, list); // [1, undefined, 3] [...list]; // [1, undefined, 3] 阅读全文
摘要：
rule as any as Foo // 双重断言 阅读全文
摘要：
./app/public app/public └── index.html browser http://localhost:7001/public/index.html 阅读全文
摘要：
App.jsx import React from 'react' class App extends React.Component { render() { return <h3>Hello</h3> } } export default App index.js import React fr 阅读全文
摘要：
index.js const arrayLikeObj = { 0: 1, length: 2 }; [].slice.apply(arrayLikeObj); // [1, empty] Array.prototype.slice.apply(arrayLikeObj); // [1, empty 阅读全文
摘要：
index.ts function foo(bar: string, baz: number): (string | number)[] { return [bar, baz]; } bash tsc index.ts 阅读全文
摘要：
index.js requestIdleCallback(myNonEssentialWork); function myNonEssentialWork(deadline) { while (deadline.timeRemaining() > 0) { doWorkIfNeeded(); } } 阅读全文
摘要：
index.js import React from 'react' import ReactDOM from 'react-dom' function Name({ name }) { return <span style={{ color: 'tomato' }}>{name}</span> } 阅读全文
摘要：
index.js const a = Symbol("a"); const symbolWrapperObj = Object(a); const b = 11n; const bigIntWrapperObj = Object(b); 阅读全文
摘要：
index.js const root = document.getElementById('root') root.innerHTML = ` <h1>hello</h1> <strong> <span>world</span> </strong> ` 阅读全文
摘要：
index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <button id="btn1">打开窗口</button> <button id="btn2">检测</button> <script 阅读全文
摘要：
index.js function Foo() {} const foo = new Foo(); console.log(foo instanceof Foo); // true // 等价于 console.log(Foo.prototype.isPrototypeOf(foo)); // tr 阅读全文
摘要：
index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <button onclick="clickHandler()">open: sub.html</button> <script> // 阅读全文
