我想试一下这个博客有多牛逼。。结果竟然支持在里面直接写react

页面的代码是

但是有个缺点：换号的时候会自动给我加 p 标签。我要想一个办法解决。。。

<script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.22.17/babel.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js"></script>


<script type="text/babel">
function App(){
  let  [a,setA] =  React.useState(1)
  
  return <>
<div>数字：{a}</div>
<button onClick={()=>{setA(a+1)}}>加一</button>
</>
}

// 使用createRoot来渲染应用
const rootElement = ReactDOM.createRoot(document.getElementById('root'));

rootElement.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
</script>

<div id="root"></div>

下面是运行后的结果：

如果您看到这篇文章,表示您的 blog 已经安装成功.

这是10年前的程序。。。

m1 芯片不能直接 npm install canvas，会报错。

Github上的解决方案：
https://github.com/Automattic/node-canvas/issues/1733

Ok, I somehow got it to work but I really don't know what I changed... I assume you ran brew install pkg-config cairo pango libpng jpeg giflib librsvg at some point? The only thing I remember doing was running brew doctor once, then npm uninstall canvas and npm i canvas --save

1. 安装依赖

brew install pkg-config cairo pango libpng jpeg giflib librsvg 

2. 删除 node_modules 重新安装

rm -rf node_modules
npm install

Chrome 实现了一个获取所有监听者的api(包括匿名函数声明的)。通过这个 api 可以轻松删除事件监听。
将知网所有限制复制的监听者全部删除，实现自由复制文本。

(function copyTextFromCNKI() {
    const listenerNames = {
        'contextmenu': document,
        'keydown': document,
        'mouseup': document.querySelector('div.content')
    }
    for (const[listenerName, ele] of Object.entries(listenerNames)) {
        const listeners_arr = window.getEventListeners(ele)[listenerName] 
        listeners_arr?.forEach((obj) => {
            const listener = obj?.listener
            listener && (ele.removeEventListener(listenerName, listener) && ele.removeEventListener(listenerName, listener, true))
        })
    }
})()

此方法同样适用于 百度文库

面试的时候被问到“平常用闭包都做过哪些事情？”

闭包的概念

《你不知道的JavaScript（上卷）》

当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行

关于闭包的概念，仅此一句就够了。

解读闭包

正常情况下，当词法作用域内的代码执行完毕后，在这个词法作用域内定义的变量都会被回收掉。
不正常的情况下，也就是有闭包的时候。这个词法作用域内定义的变量“可以被记住”，而不会被回收掉。记住这些变量的是一个函数。

function P(){
    let a = "a"
    let b = "b"
    return function innerFunc(){
        return a+b
    }
}
// 在作用域外部访问到了P作用域内部定义的ab变量
// ab 
P()()

在上面的例子中，innerFunc “记住了”所在的词法作用域（a和b变量），产生了闭包。
innerFunc 函数在 P 的作用域外部执行时，也能访问到内部的词法作用域。

使用闭包的例子

1.模拟定义一个对象的私有属性

const P = (function (){
    let _gender = ""
    function People(name,gender){
        this.name = name
        _gender = gender
    }
    People.prototype.getGender = function (){
        return _gender
    }
    return People
})()

const people = new P("小明","male")
//  { name: '小明' }
console.log(people)
// male
console.log(people.getGender())

2.给标签添加事件

有作用域的地方就有闭包

const container = [{},{},{}]

for (let i = 0;i<container.length;i++){
    container[i].run = function () {
        console.log("当前是第"+ ++i +"个容器")
    }
}
// 当前是第1个容器
container[0].run()
// 当前是第3个容器
container[2].run()

用 let 声明 i 变量，循环体运行了3次，一共就创建了3个块级作用域。然后通过三个匿名函数“记住了”这3个块级作用域（i变量 ）,创建了3个闭包。