方朝端

20230522----重返学习-原生事件进阶-React中的合成事件-React中的样式私有化

day-075-seventy-five-20230522-原生事件进阶-React中的合成事件-React中的样式私有化

原生事件进阶

DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件委托title>
    <link rel="stylesheet" href="src/assets/reset.min.css" />
    <style>
      html,
      body {
        height: 100%;
        overflow: hidden;
      }

      .center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      #root {
        width: 300px;
        height: 300px;
        background: lightblue;
      }

      #outer {
        width: 200px;
        height: 200px;
        background: lightgreen;
      }

      #inner {
        width: 100px;
        height: 100px;
        background: lightcoral;
      }
    style>
  head>

  <body>
    <div id="root" class="center">#root
      <div id="outer" class="center">#outer
        <div id="inner" class="center">#innerdiv>
      div>
    div>
  body>
html>

<script>
  const html = document.documentElement;
  const body = document.body;
  const root = document.querySelector("#root");
  const outer = document.querySelector("#outer");
  const inner = document.querySelector("#inner");

  // 手动做的事件绑定
  window.addEventListener("click",() => {console.log(`捕获-window`);},true);
  window.addEventListener("click",() => {console.log(`冒泡-window`);},false);

  document.addEventListener("click",() => {console.log(`捕获-document`);},true);
  document.addEventListener("click",() => {console.log(`冒泡-document`);},false);

  html.addEventListener("click",() => {console.log(`捕获-html`);},true);
  html.addEventListener("click",() => {console.log(`冒泡-html`);},false);

  body.addEventListener("click",() => {console.log(`捕获-body`);},true);
  body.addEventListener("click",() => {console.log(`冒泡-body`);},false);

  root.addEventListener("click",() => {console.log(`捕获-root`);},true);
  root.addEventListener("click",() => {console.log(`冒泡-root`);},false);

  outer.addEventListener("click",() => {console.log(`捕获-outer`);},true);
  outer.addEventListener("click",() => {console.log(`冒泡-outer`);},false);

  inner.addEventListener("click",() => {console.log(`捕获-inner`);},true);
  inner.addEventListener("click",() => {console.log(`冒泡-inner`);},false);
script>

事件传播

示例：

结构示例：

DOCTYPE html>
<html>
  <body>
    <div id="root" class="center">#root
      <div id="outer" class="center">#outer
        <div id="inner" class="center">#innerdiv>
      div>
    div>
  body>
html>

<script>
  const html = document.documentElement;
  const body = document.body;
  const root = document.querySelector("#root");
  const outer = document.querySelector("#outer");
  const inner = document.querySelector("#inner");

  // 手动做的事件绑定
  window.addEventListener("click",() => {console.log(`捕获-window`);},true);
  window.addEventListener("click",() => {console.log(`冒泡-window`);},false);

  document.addEventListener("click",() => {console.log(`捕获-document`);},true);
  document.addEventListener("click",() => {console.log(`冒泡-document`);},false);

  html.addEventListener("click",() => {console.log(`捕获-html`);},true);
  html.addEventListener("click",() => {console.log(`冒泡-html`);},false);

  body.addEventListener("click",() => {console.log(`捕获-body`);},true);
  body.addEventListener("click",() => {console.log(`冒泡-body`);},false);

  root.addEventListener("click",() => {console.log(`捕获-root`);},true);
  root.addEventListener("click",() => {console.log(`冒泡-root`);},false);

  outer.addEventListener("click",() => {console.log(`捕获-outer`);},true);
  outer.addEventListener("click",() => {console.log(`冒泡-outer`);},false);

  inner.addEventListener("click",() => {console.log(`捕获-inner`);},true);
  inner.addEventListener("click",() => {console.log(`冒泡-inner`);},false);
script>

执行示例：

点击#inner后：

DOCTYPE html>
<html>
  <body>
    <div id="root" class="center">#root
      <div id="outer" class="center">#outer
        <div id="inner" class="center">#innerdiv>
      div>
    div>
  body>
html>

<script>
  const html = document.documentElement;
  const body = document.body;
  const root = document.querySelector("#root");
  const outer = document.querySelector("#outer");
  const inner = document.querySelector("#inner");

  // 执行顺序：
  window.addEventListener("click",() => {console.log(`捕获-window`);},true);
  document.addEventListener("click",() => {console.log(`捕获-document`);},true);
  html.addEventListener("click",() => {console.log(`捕获-html`);},true);
  body.addEventListener("click",() => {console.log(`捕获-body`);},true);
  root.addEventListener("click",() => {console.log(`捕获-root`);},true);
  outer.addEventListener("click",() => {console.log(`捕获-outer`);},true);
  inner.addEventListener("click",() => {console.log(`捕获-inner`);},true);

  inner.addEventListener("click",() => {console.log(`冒泡-inner`);},false);
  outer.addEventListener("click",() => {console.log(`冒泡-outer`);},false);
  root.addEventListener("click",() => {console.log(`冒泡-root`);},false);
  body.addEventListener("click",() => {console.log(`冒泡-body`);},false);
  html.addEventListener("click",() => {console.log(`冒泡-html`);},false);
  document.addEventListener("click",() => {console.log(`冒泡-document`);},false);
  window.addEventListener("click",() => {console.log(`冒泡-window`);},false);
script>

点击#outer后：

DOCTYPE html>
<html>
  <body>
    <div id="root" class="center">#root
      <div id="outer" class="center">#outer
        <div id="inner" class="center">#innerdiv>
      div>
    div>
  body>
html>

<script>
  const html = document.documentElement;
  const body = document.body;
  const root = document.querySelector("#root");
  const outer = document.querySelector("#outer");
  const inner = document.querySelector("#inner");

  // 执行顺序：
  window.addEventListener("click",() => {console.log(`捕获-window`);},true);
  document.addEventListener("click",() => {console.log(`捕获-document`);},true);
  html.addEventListener("click",() => {console.log(`捕获-html`);},true);
  body.addEventListener("click",() => {console.log(`捕获-body`);},true);
  root.addEventListener("click",() => {console.log(`捕获-root`);},true);
  outer.addEventListener("click",() => {console.log(`捕获-outer`);},true);
  
  outer.addEventListener("click",() => {console.log(`冒泡-outer`);},false);
  root.addEventListener("click",() => {console.log(`冒泡-root`);},false);
  body.addEventListener("click",() => {console.log(`冒泡-body`);},false);
  html.addEventListener("click",() => {console.log(`冒泡-html`);},false);
  document.addEventListener("click",() => {console.log(`冒泡-document`);},false);
  window.addEventListener("click",() => {console.log(`冒泡-window`);},false);
script>

点击#root后：

DOCTYPE html>
<html>
  <body>
    <div id="root" class="center">#root
      <div id="outer" class="center">#outer
        <div id="inner" class="center">#innerdiv>
      div>
    div>
  body>
html>

<script>
  const html = document.documentElement;
  const body = document.body;
  const root = document.querySelector("#root");
  const outer = document.querySelector("#outer");
  const inner = document.querySelector("#inner");

  // 执行顺序：
  window.addEventListener("click",() => {console.log(`捕获-window`);},true);
  document.addEventListener("click",() => {console.log(`捕获-document`);},true);
  html.addEventListener("click",() => {console.log(`捕获-html`);},true);
  body.addEventListener("click",() => {console.log(`捕获-body`);},true);
  root.addEventListener("click",() => {console.log(`捕获-root`);},true);
  
  root.addEventListener("click",() => {console.log(`冒泡-root`);},false);
  body.addEventListener("click",() => {console.log(`冒泡-body`);},false);
  html.addEventListener("click",() => {console.log(`冒泡-html`);},false);
  document.addEventListener("click",() => {console.log(`冒泡-document`);},false);
  window.addEventListener("click",() => {console.log(`冒泡-window`);},false);
script>

事件传播的特点：

事件传播中的捕获阶段从window到document到html到body，直到事件源的祖先元素。
事件源的捕获与传播就是目标阶段。
事件传播中的捕获阶段从事件源的祖先元素到body，再到html到document到window。

一个DOM元素在事件传播的过程中的每一步都可以绑定多个事件。

都会执行。

<script>
  const inner = document.querySelector("#inner");

  inner.addEventListener("click",() => {console.log(`冒泡-inner-1`);},false);
  inner.addEventListener("click",() => {console.log(`冒泡-inner-2`);},false);
  inner.addEventListener("click",() => {console.log(`冒泡-inner`);},false);
script>

<script>
  const html = document.documentElement;
  const body = document.body;
  const root = document.querySelector("#root");
  const outer = document.querySelector("#outer");
  const inner = document.querySelector("#inner");

  // 执行顺序：
  window.addEventListener("click",() => {console.log(`捕获-window`);},true);
  document.addEventListener("click",() => {console.log(`捕获-document`);},true);
  html.addEventListener("click",() => {console.log(`捕获-html`);},true);
  body.addEventListener("click",() => {console.log(`捕获-body`);},true);
  root.addEventListener("click",() => {console.log(`捕获-root`);},true);
  outer.addEventListener("click",() => {console.log(`捕获-outer`);},true);
  inner.addEventListener("click",() => {console.log(`捕获-inner`);},true);

  inner.addEventListener("click",() => {console.log(`冒泡-inner-1`);},false);
  inner.addEventListener("click",() => {console.log(`冒泡-inner-2`);},false);
  outer.addEventListener("click",() => {console.log(`冒泡-outer`);},false);
  root.addEventListener("click",() => {console.log(`冒泡-root`);},false);
  body.addEventListener("click",() => {console.log(`冒泡-body`);},false);
  html.addEventListener("click",() => {console.log(`冒泡-html`);},false);
  document.addEventListener("click",() => {console.log(`冒泡-document`);},false);
  window.addEventListener("click",() => {console.log(`冒泡-window`);},false);
script>

event.stopPropagation()：只会阻止下一步的处理，但是对于当前这一步的当前所在DOM元素绑定的多个方法依然都会被触发执行。

阻止事件的传播，包括所有阶段：如冒泡阶段与捕获阶段都会被阻止。

<script>
  const html = document.documentElement;
  const body = document.body;
  const root = document.querySelector("#root");
  const outer = document.querySelector("#outer");
  const inner = document.querySelector("#inner");

  // 执行顺序：
  window.addEventListener("click",() => {console.log(`捕获-window`);},true);
  document.addEventListener("click",() => {console.log(`捕获-document`);},true);
  html.addEventListener("click",() => {console.log(`捕获-html`);},true);
  body.addEventListener("click",() => {console.log(`捕获-body`);},true);
  root.addEventListener("click",() => {console.log(`捕获-root`);},true);
  outer.addEventListener("click",() => {console.log(`捕获-outer`);},true);
  inner.addEventListener("click",() => {console.log(`捕获-inner`);},true);

  inner.addEventListener("click",(event) => {event.stopPropagation();console.log(`冒泡-inner-1`);},false);
  inner.addEventListener("click",() => {console.log(`冒泡-inner-2`);},false);
  outer.addEventListener("click",() => {console.log(`冒泡-outer`);},false);
  root.addEventListener("click",() => {console.log(`冒泡-root`);},false);
  body.addEventListener("click",() => {console.log(`冒泡-body`);},false);
  html.addEventListener("click",() => {console.log(`冒泡-html`);},false);
  document.addEventListener("click",() => {console.log(`冒泡-document`);},false);
  window.addEventListener("click",() => {console.log(`冒泡-window`);},false);
script>

冒泡-inner-1与冒泡-inner-2都会打印，但冒泡-outer及其后方都不会再执行了！

event.stopImmediatePropagation()：不仅会阻止下一步的处理，对于当前这一步的当前所在DOM元素上绑定的其它方法，如果还没有执行，也不会再执行了！

阻止事件的传播，包括所有阶段：如冒泡阶段与捕获阶段都会被阻止。

<script>
  const html = document.documentElement;
  const body = document.body;
  const root = document.querySelector("#root");
  const outer = document.querySelector("#outer");
  const inner = document.querySelector("#inner");

  // 执行顺序：
  window.addEventListener("click",() => {console.log(`捕获-window`);},true);
  document.addEventListener("click",() => {console.log(`捕获-document`);},true);
  html.addEventListener("click",() => {console.log(`捕获-html`);},true);
  body.addEventListener("click",() => {console.log(`捕获-body`);},true);
  root.addEventListener("click",() => {console.log(`捕获-root`);},true);
  outer.addEventListener("click",() => {console.log(`捕获-outer`);},true);
  inner.addEventListener("click",() => {console.log(`捕获-inner`);},true);

  inner.addEventListener("click",(event) => {event.stopImmediatePropagation();console.log(`冒泡-inner-1`);},false);
  inner.addEventListener("click",() => {console.log(`冒泡-inner-2`);},false);
  outer.addEventListener("click",() => {console.log(`冒泡-outer`);},false);
  root.addEventListener("click",() => {console.log(`冒泡-root`);},false);
  body.addEventListener("click",() => {console.log(`冒泡-body`);},false);
  html.addEventListener("click",() => {console.log(`冒泡-html`);},false);
  document.addEventListener("click",() => {console.log(`冒泡-document`);},false);
  window.addEventListener("click",() => {console.log(`冒泡-window`);},false);
script>

冒泡-inner-1会打印，但冒泡-inner-2与冒泡-outer及其后方都不会再执行了！

事件委托

事件例子：

DOCTYPE html>
<html>
  <body>
    <div id="root" class="center">#root
      <div id="outer" class="center">#outer
        <div id="inner" class="center">#innerdiv>
      div>
    div>
  body>
html>
<script>
  // 点击body中的任意元素，都会触发body的点击事件。
  document.body.addEventListener("click", function (ev) {
    let target = ev.target;
    let targetTag = target.tagName;
    let targetId = target.is;

    if(targetTag==='BODY'){
      console.log(`body`);
      return
    }
    if(targetId==='root'){
      console.log(`root`);
      return
    }
    if(targetId==='outer'){
      console.log(`outer`);
      return
    }

    console.log(`点击的是非预期元素`);
  },false);

  // 其它的处理逻辑比较复杂，可以单独绑定。
  document.querySelector(`#inner`).addEventListener('click',function(ev){
    console.log(`inner，这一行执行的代码比较多。`);
    ev.stopPropagation()
  },false)
script>

事件委托，也被叫做事件代理。
- 事件委托就是利用事件的传播机制来实现的一种项目解决方案。
- 例如：一个容器中有很多后代元素，其中大部分后代元素，在点击的时候，都会处理一些事情。有些元素被点击时做相同的事情，有些元素点击时做不同的事情。
  1. 传统方案：想操作那些元素，就把这些元素全部都获取到，然后逐一做事件绑定。
```
DOCTYPE html>
<html>
  <body>
    <div id="root" class="center">#root
      <div id="outer" class="center">#outer
        <div id="inner" class="center">#innerdiv>
      div>
    div>
  body>
html>
<script>
  document.querySelector(`body`).addEventListener("click", function (ev) {
      console.log(`body`);
  },false);

  document.querySelector(`#root`).addEventListener("click", function (ev) {
      console.log(`root`);
    if(targetId==='outer'){
      console.log(`outer`);
      return
    }

    console.log(`点击的是非预期元素`);
  },false);

  document.querySelector(`#outer`).addEventListener("click", function (ev) {
      console.log(`outer`);
  },false);

  document.querySelector(`#inner`).addEventListener('click',function(ev){
    console.log(`inner，这一行执行的代码比较多。`);
    ev.stopPropagation()
  },false)
script>
```
    - 这种方案不仅操作起来复杂，并且会开辟很多堆内存，性能也不是很好。
  2. 新方案：利用事件的传播机制，不逐一获取元素和单独绑定事件了，而是只给外层容器做一个事件绑定，这样不管点击其后代中的那一个元素，当前容器的点击事件也会触发，把容器元素上绑定的方法执行；在容器元素所绑定的方法中，我们只需要判断事件源是谁，从而处理不同的事件即可！===>事件委托。
    - 事件对象就是事件函数的第一个形参，一般用e或ev或event来接收。
    - 事件源通过事件对象的target属性来获取。
    - 判断事件源不一定要判断到具体的某个元素，而是该元素有一些共同特点，如元素标签为某一类型或者该元素为某个类，或者该元素有某个特定属性。
      - 事件对象.target 事件源。
      - 事件对象.target.targetTag 事件源的大写形式的标签类型。
      - 事件对象.target.class 事件源的字符串形式类名。
      - 事件对象.target.classList 事件源的数组形式类名。
      - 事件对象.target.id 事件源的id属性。
    - 如果其中某个元素点击的时候，要干的事情比较复杂，不想和事件委托的代码混在一起，我们可以单独为这个元素做事件绑定。
```
DOCTYPE html>
<html>
  <body>
    <div id="root" class="center">#root
      <div id="outer" class="center">#outer
        <div id="inner" class="center">#innerdiv>
      div>
    div>
  body>
html>
<script>
  // 点击body中的任意元素，都会触发body的点击事件。
  document.body.addEventListener("click", function (ev) {
    let target = ev.target;
    let targetTag = target.tagName;
    let targetId = target.id;

    if(targetTag==='BODY'){
      console.log(`body`);
      return
    }
    if(targetId==='root'){
      console.log(`root`);
      return
    }
    if(targetId==='outer'){
      console.log(`outer`);
      return
    }

    console.log(`点击的是非预期元素`);
  },false);

  // 其它的处理逻辑比较复杂，可以单独绑定。
  document.querySelector(`#inner`).addEventListener('click',function(ev){
    console.log(`inner，这一行执行的代码比较多。`);
    ev.stopPropagation()
  },false)
script>
```
    - 这种新方案的性能比传统方案提高40%以上！
- 例如：我们容器中的元素不是写死的，而是动态绑定(动态创建)的，而且是会持续动态创建。我们需要在点击每个元素的时候，做一些事情！
  1. 传统方案：每一次动态创建完容器中的新创建元素，都需要获取新创建元素，给这些新创建元素单独做事件绑定！
  2. 事件委托：只需要给容器的点击事件绑定方法，无论其内部元素是写死的，还是动态绑定的，只要点击了，都说明元素已经存在了，基于事件传播机制，我们只需要在外层容器中判断事件源，做不同的事情即可！
    - 判断事件源，可以通过事件源的类名或标签名。就执行一个特定的方法或操作。
    - 这也就说明事件委托可以给动态绑定的元素做事件绑定！
  - 例子：
    - 原DOM结构：
```
DOCTYPE html>
<html>
  <body>
    <div id="root" class="center">#root
      <div id="outer" class="center">#outer
      div>
    div>
  body>
html>
```
    - 后续变成的DOM结构：在#outer添加了#inner。
```
DOCTYPE html>
<html>
  <body>
    <div id="root" class="center">#root
      <div id="outer" class="center">#outer
        <div id="inner" class="center">#innerdiv>
      div>
    div>
  body>
html>
```
- 真实项目中，还有很多需求，必须基于事件委托来做。
  - 比如说：
    1. 点击容器中非某个元素，该元素就隐藏！
  - 所以：以后但凡再遇到事件绑定的需求，要首先想到是否有必要基于事件委托处理，如果确定有必要，则直接基于事件委托来处理！

React中的合成事件

import React from "react";
import "./DemoEvent.less";

export default class Demo extends React.Component {
  render() {
    return (
       {
          console.log("outer 冒泡「合成」");
        }}
        onClickCapture={() => {
          console.log("outer 捕获「合成」");
        }}
      >
         {
            console.log("inner 冒泡「合成」");
          }}
          onClickCapture={() => {
            console.log("inner 捕获「合成」");
          }}
        >
      
    );
  }

  componentDidMount() {
    // 原生事件的绑定。
    document.addEventListener("click",() => console.log("document 捕获"),true);
    document.addEventListener("click",() => console.log("document 冒泡"),false);

    document.body.addEventListener("click",() => console.log("body 捕获"),true);
    document.body.addEventListener("click",() => console.log("body 冒泡"),false);

    let root = document.querySelector("#root");
    root.addEventListener("click", () => console.log("root 捕获"), true);
    root.addEventListener("click", () => console.log("root 冒泡"), false);

    let outer = document.querySelector(".outer");
    outer.addEventListener("click", () => console.log("outer 捕获"), true);
    outer.addEventListener("click", () => console.log("outer 冒泡"), false);

    let inner = document.querySelector(".inner");
    inner.addEventListener("click", () => console.log("inner 捕获"), true);
    inner.addEventListener("click", () => console.log("inner 冒泡"), false);
  }
}

React中的合成事件SyntheticEvent
1. 什么是合成事件？
  - 合成事件是围绕浏览器原生事件，充当跨浏览器包装器的对象；它们将不同浏览器的行为合并为一个API，这样做是为了确保事件在不同浏览器中显示一致的属性！
  - 例如：
```
{}} onClickCapture={()=>{}} >
```
    - 这种在jsx元素上，基于onXxx绑定的事件，都是合成事件，就是React内部对这些事件操作，进行过特殊的处理。

React18中的合成事件绑定原理-事件委托：

const html = document.documentElement;
const body = document.body;
const root = document.querySelector("#root");
const outer = document.querySelector("#outer");
const inner = document.querySelector("#inner");

// React18合成事件原理。

const handlerSyntheticEv = function handlerSyntheticEv(ev){
  // 
  // ...
  return ev
}
root.addEventListener("click",function (ev) {
  //获取传播路径-默认是从内到外。
  // console.log(`ev.path-->`, ev.path);
  // console.log(`ev.composedPath()-->`, ev.composedPath());
  let path = ev.composedPath();
  let syntheticBaseEvent = handlerSyntheticEv(ev)
  path.reverse().forEach((elem) => {
    if (!elem.hasOwnProperty("onClickCaptrue")) {
      return;
    }
    elem.onClickCaptrue(syntheticBaseEvent);
  });
},true);
root.addEventListener("click",function (ev) {
  //获取传播路径-默认是从内到外。
  let path = ev.composedPath();
  let syntheticBaseEvent = handlerSyntheticEv(ev)
  path.forEach((elem) => {
    if (!elem.hasOwnProperty("onClick")) {
      return;
    }
    elem.onClick(syntheticBaseEvent);
  });
},false);

// jsx渲染：
outer.onClick=() => {console.log("outer 冒泡「合成」");}
outer.onClickCapture=() => {console.log("outer 捕获「合成」");}
inner.onClick=() => {console.log("inner 冒泡「合成」");}
inner.onClickCapture=() => {console.log("inner 捕获「合成」");}

DemoEvent.less

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.outer {
  .center;
  width: 200px;
  height: 200px;
  background: lightblue;

  .inner {
    .center;
    width: 100px;
    height: 100px;
    background: lightcoral;
  }
}

DemoEvent.jsx

import React from "react"
import './DemoEvent.less'

export default class Demo extends React.Component {
  render() {
    return  {
        console.log('outer 冒泡「合成」')
      }}
      onClickCapture={() => {
        console.log('outer 捕获「合成」')
      }}>

       {
          // ev 合成事件对象
          // ev.nativeEvent 原生事件对象

          // 合成事件对象的阻止事件传播：阻止合成事件的传播以及原生事件的传播
          // ev.stopPropagation() 

          // 原生事件对象的阻止事件传播：只能阻止原生的事件传播
          // ev.nativeEvent.stopImmediatePropagation()

          console.log('inner 冒泡「合成」', ev)
        }}
        onClickCapture={() => {
          console.log('inner 捕获「合成」')
        }}>
      
    
  }

  componentDidMount() {
    document.addEventListener('click', () => console.log('document 捕获'), true)
    document.addEventListener('click', () => console.log('document 冒泡'), false)

    document.body.addEventListener('click', () => console.log('body 捕获'), true)
    document.body.addEventListener('click', () => console.log('body 冒泡'), false)

    let root = document.querySelector('#root')
    root.addEventListener('click', () => console.log('root 捕获'), true)
    root.addEventListener('click', () => console.log('root 冒泡'), false)

    let outer = document.querySelector('.outer')
    outer.addEventListener('click', () => console.log('outer 捕获'), true)
    outer.addEventListener('click', () => console.log('outer 冒泡'), false)

    let inner = document.querySelector('.inner')
    inner.addEventListener('click', () => console.log('inner 捕获'), true)
    inner.addEventListener('click', (ev) => {
        // ev 原生事件对象
        // ev.stopImmediatePropagation()
        console.log('inner 冒泡')
    }, false)
  }
}

在jsx视图编译的时候，当遇到某个元素上出现onXxx合成事件绑定，其实并没有给元素做事件绑定，只是给这个元素设置了一个onXxx的私有属性，属性值就是我们绑定的方法。
- jsx代码：
```
 {console.log("inner 冒泡「合成」"); }}
  onClickCapture={() => {console.log("inner 捕获「合成」");}}
>
```
- 渲染的结果：
```
inner.onClick=函数
inner.onClickCapture=函数
```
```
inner.onClick={() => {console.log("inner 冒泡「合成」"); }}
inner.onClickCapture={() => {console.log("inner 捕获「合成」");}}
```
- 没有做任何的浏览器事件绑定，仅仅是给inner设置了两个私有属性！
在React内部，会给#root容器的点击行为，做事件绑定，捕获和冒泡阶段都处理了！React所有的视图编译完毕后，都会插入到#root容器中，这样点击任何一个元素，都会把#root的点击行为触发！
- 在React内部，默认对大部分浏览器标准事件都进行了这样的委托处理。
  - 这些做了委托处理的浏览器标准事件的前提：它们是支持事件传播机制的标准事件。
- 在React内部，对于不支持事件传播机制的事件，在jsx渲染的时候，就单独给元素做了相关的事件绑定！
- jsx代码：
```
root.addEventListener("Xxx", function(){
  //获取传播路径。
  //按照从外到内的顺序，把元素的onXxxCapture合成事件的私有属性，依次触发执行。
}, true);
root.addEventListener("Xxx", function(){
  //获取传播路径。
  //按照从内到外的顺序，把元素的onXxx合成事件的私有属性，依次触发执行。
}, false);
```

React中的合成事件对象：
- 合成事件对象的阻止事件传播函数：阻止合成事件的传播以及原生事件的传播。
  - 合成事件对象没有stopImmediatePropagation()。
- 原生事件对象的阻止事件传播：只能阻止原生的事件传播。

React16中，其合成事件的底层处理机制和React18有很大的区别：

首先绑定的合成事件，对于有传播机制的标准事件来讲，也不是做的事件绑定，而是变为元素的onXxx/onXxxCapture私有属性！
只不过React16不是给#root做事件委托，而是委托给了document，并且只做了冒泡阶段的委托。
- 即合成事件的捕获与冒泡都是在事件冒泡到document时才执行的。
1. 获取传播路径-默认是从内到外。
2. 处理合成事件对象;
  - 这里和React16中的合成事件对象与React中的合成事件对象不一样。
    - React16中的合成对象是做了get与set劫持。
3. 把传播路径按照倒序，依次执行元素.onXxxCapture()方法;
4. 把传播路径按照正序，依次执行元素.onXxx()方法;

  const html = document.documentElement;
  const body = document.body;
  const root = document.querySelector("#root");
  const outer = document.querySelector("#outer");
  const inner = document.querySelector("#inner");

  // React16合成事件原理。
  const handlerSyntheticEv = function handlerSyntheticEv(ev){
    // 
    // ...
    return ev
  }
  document.addEventListener("click",function (ev) {
    //获取传播路径-默认是从内到外。
    //处理合成事件对象;
    //把传播路径按照倒序，依次执行元素.onXxxCapture()方法;
    //把传播路径按照正序，依次执行元素.onXxx()方法;
    // console.log(`ev.composedPath()-->`, ev.composedPath());
  },false);

  // jsx渲染：
  outer.onClick=() => {console.log("outer 冒泡「合成」");}
  outer.onClickCapture=() => {console.log("outer 捕获「合成」");}
  inner.onClick=() => {console.log("inner 冒泡「合成」");}
  inner.onClickCapture=() => {console.log("inner 捕获「合成」");}

DemoEvent.less

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.outer {
  .center;
  width: 200px;
  height: 200px;
  background: lightblue;

  .inner {
    .center;
    width: 100px;
    height: 100px;
    background: lightcoral;
  }
}

DemoEvent.jsx

import React from "react"
import './DemoEvent.less'

export default class Demo extends React.Component {
  render() {
    return  {
        console.log('outer 冒泡「合成」')
      }}
      onClickCapture={() => {
        console.log('outer 捕获「合成」')
      }}>

       {
          // ev 合成事件对象
          // ev.nativeEvent 原生事件对象

          // 合成事件对象的阻止事件传播：阻止合成事件的传播以及原生事件的传播
          // ev.stopPropagation() 

          // 原生事件对象的阻止事件传播：只能阻止原生的事件传播
          // ev.nativeEvent.stopImmediatePropagation()

          console.log('inner 冒泡「合成」', ev)
        }}
        onClickCapture={() => {
          console.log('inner 捕获「合成」')
        }}>
      
    
  }

  componentDidMount() {
    document.addEventListener('click', () => console.log('document 捕获'), true)
    document.addEventListener('click', () => console.log('document 冒泡'), false)

    document.body.addEventListener('click', () => console.log('body 捕获'), true)
    document.body.addEventListener('click', () => console.log('body 冒泡'), false)

    let root = document.querySelector('#root')
    root.addEventListener('click', () => console.log('root 捕获'), true)
    root.addEventListener('click', () => console.log('root 冒泡'), false)

    let outer = document.querySelector('.outer')
    outer.addEventListener('click', () => console.log('outer 捕获'), true)
    outer.addEventListener('click', () => console.log('outer 冒泡'), false)

    let inner = document.querySelector('.inner')
    inner.addEventListener('click', () => console.log('inner 捕获'), true)
    inner.addEventListener('click', (ev) => {
        // ev 原生事件对象
        // ev.stopImmediatePropagation()
        console.log('inner 冒泡')
    }, false)
  }
}

React16中除了合成事件底层处理机制和React18不同，对于合成事件对象的处理，和React18也是不一样的！
- 在React16版本中，存在事件对象池，用的合成事件对象只有一个，每一次事件触发，都是把合成事件对象的值，改为最新的值！但是一旦用完，则把这些值又释放掉了！
  - React16中的合成对象是做了get与set劫持。
- 在React18版本中，取消了事件对象池机制，每一次事件触发都是创建新的合成事件对象，之前创建的合成事件对象，在没有用处的情况下，会被销毁掉！

React中的样式私有化

在React项目中，我们在.css/.less/.sass等文件中编写的样式，默认都是全局样式。
- 这样在组件合并渲染的时候，很可能导致各组件之间编写的样式发生冲突。
  - 因为不同组件之间的类名可能由不同的人来写，类名就可能会起一样了。
  - 所以我们期望：在各组件中写的样式，可以只对当前组件起作用。
    - 这也就是组件样式的私有化处理方案。
- 例子：
  - Demo1.jsx
```
import React from "react";
import './Demo1.less'
export default class Demo1 extends React.Component {
  render() {
    return (
      
        
          组件1
          span
        
      
    );
  }
}
```
  - Demo1.less
```
.demo {
  background: skyblue;
  .title {
    font-size: 18px;
    color: red;
  }
}
```
  - Demo2.jsx
```
import React from "react"
import './Demo2.less'
export default class Demo2 extends React.Component {
  render() {
    return 
      组件2
    
  }
}
```
  - Demo2.less
```
.demo {
  background: skyblue;
  .title {
    font-size: 18px;
    color: red;
  }
}
```
  - Demo1.jsx与Demo2.jsx中的样式用的都是全局的样式。具体那个生效，就看那个的权重及所处的前后位置了。
样式私有化处理方案：
1. 样式私有化处理方案一：人为有意识地、有规范地规避冲突问题。
  - 这种是主流的蛮常用方案。
  1. 使用less、sass、stylus等预编译语言，主要是是利用其提供的嵌套功能。
  2. 制定组件命名规范，尤其是组件根节点样式的命名规范，保证所有组件在复用多次的情况下当前组件根节点的样式类名是唯一的。
    - 例如：
      - 使用类似于组件所在的文件夹路径-组件名-box的命名规范。
        
        /src/components/TabBar.jsx 根节点的样式类名为common-tabbar-box;
        
        /views/home/TableList.jsx 根节点的样式类名为home-table-list-box;
        
        /views/device/Login.jsx 根节点的样式类名为device-table-list-box;
        
        /views/Login.jsx 根节点的样式类名为login-box;
        
        //假设目录为： |-components |-TabBar.jsx -> common-tabbar-box |-... |-views |-home |-TableList.jsx -> home-table-list-box |-... |-device |-TableList.jsx -> device-table-list-box |-... |-Login.jsx -> login-box |-...
  3. 而组件内部所有元素的样式，都要保证在该组件的样式类名下编写。
```
.device-table-list-box{
  .title{ 
    ... 
    .num{ ... }
  }
  span{ ... }
}
```
  - 存在的弊端：
    - 如果选择器有过长的前缀，会影响渲染的性能。
```
//从右到左渲染
.box a{}//先找到所有的a标签，再筛选出哪些在 .box 下。
a{}//找到所有的a标签。所以这个选择器的性能好。
```
      - 如果是多级，那么就要查找多层，会导致筛选过程浪费大量性能。
      - 因为这个是类似于DOM树的结构来写的css树，所以导致从其末尾一步一步向主干查询，会有很多的筛选流程及无效筛选。比如筛选着筛选着，发现没一个DOM元素符合该选择器。
    - 在样式表中编写的样式都是静态样式，无法基于js等业务逻辑控制其动态化。
      - 这个是所有css与js与html分离都有的问题，不用太过在意。
  - 例子：
    - Demo1.jsx
```
import React from "react";
import './Demo1.less'
export default class Demo1 extends React.Component {
  render() {
    return (
      
        
          组件1
          span
        
      
    );
  }
}
```
    - Demo1.less
```
.views-demo1-box {
  background: skyblue;
  .title {
    font-size: 18px;
    color: red;
  }
}
```
    - Demo2.jsx
```
import React from "react"
import './Demo2.less'
export default class Demo2 extends React.Component {
  render() {
    return 
      组件2
    
  }
}
```
    - Demo2.less
```
.views-demo2-box {
  background: skyblue;
  .title {
    font-size: 18px;
    color: red;
  }
}
```
2. 样式私有化处理方案二：CSS Modules。
  - 这是一种基于技术手段，保证编写样式类名的唯一性。
  1. 样式表的命名：xxx.module.css与xxx.module.less。如果不使用less后缀与scss后缀等，可以不再使用less/sass等预编译语言了。
  2. 在webpack编译的时候，会把.module.css中所有的样式类名，都进行编译处理，按照规则变为唯一的新式类。
    - 例如：在Demo1.module.css文件中:
```
.demo {...}
.title {...}
.title span {...}
```
    - 经过编译后的样式:
```
.Demo1_demo__bLprq {...}
.Demo1_title__EpCHF {...}
.Demo1_title__EpCHF span {...}
```
  3. 在组件中使用的时候：
```
import sty from './Demo1.module.css'
/* sty = {
    demo: "Demo1_demo__bLprq",
    title: "Demo1_title__EpCHF"
} */

    
```
3. 样式私有化处理方案三：基于技术手段，把css写在js中。这样的处理思想，我们称之为css in js;
  - 依赖第三方插件来进行处理：
    - React-JSS。
    - styled-components，常用的。
    - …。
4. 所有样式都写成内联样式行内样式。
  - 这种不太常见，难维护，比较少见。
  - 不用偶尔小范围也有使用，比如做动态样式时。

React-JSS的使用

styled-components的使用

安装vscode插件：vscode-styled-components。

使用步骤：

导入插件，基于插件编写样式「相当于创建一个样式组件，其内部包含的是需要的样式」

  import styled from "styled-components"
  const colorRed = 'red'
  const DemoBox = styled.div`
      ...
      .title{
          ...,
          color: ${colorRed};
      }
  `

视图中，直接基于创建的组件来渲染样式即可

  export default class Demo1 extends React.Component {
      render() {
          return 
              ...
          
      }
  }

编译的原理：在渲染DemoBox组件的时候，会被渲染为一个div标签，并且给其设置一个唯一的样式类名。
- 而我们写的样式，最后也会编译为正常的CSS样式，不过都是在 “sc-bcXHqe bscqLV” 唯一的样式类下编写的！
基于css-in-js
- 一方面基于技术手段保证了样式的私有化
- 另一方面，因为CSS样式是写在JS中的，我们就可以根据业务逻辑，动态控制其渲染的样式
实战开发中的细节问题：
- 公共样式的设置。
- 公共样式优先级。
  - 如果冲突了，想让谁生效，就提高谁的优先级。
  - 在多个“样式组件”嵌套的情况下，如果对相同元素都设置了样式，最后以谁的样式为主，就看优先级，如果想指定以谁为主，也是提高其优先级（!important）
- 动态样式：

css性能问题

//从右到左渲染
.box a{}//先找到所有的a标签，再筛选出哪些在 .box 下。
a{}//找到所有的a标签。所以这个选择器的性能好。

进阶参考

你可能感兴趣的:(重返学习,react.js,React,react.js,学习,javascript)

情绪觉察日记第37天露露_e800
今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习 python
一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
铭刻于星（四十二）随风至
69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
UI学习——cell的复用和自定义cell Magnetic_h ui 学习
目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
学点心理知识，呵护孩子健康静候花开_7090
昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值）研学随笔 arcgis 经验分享
我们在使用ArcGIS时通常经常用到栅格计算器，今天主要给大家介绍我日常中经常用到的几个公式，供大家参考学习。将特定值（-9999）赋值为0，例如-9999.Con("raster"==-9999,0,"raster")2.给空值赋予特定的值（如0）Con(IsNull("raster"),0,"raster")3.将特定的栅格值(如1)赋值为空值，其他保留原值SetNull("raster"==
【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数广龙宇一起学Rust #Rust设计模式 rust 设计模式开发语言
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
回溯 Leetcode 332 重新安排行程 mmaerd Leetcode刷题学习记录 leetcode 算法职场和发展
重新安排行程Leetcode332学习记录自代码随想录给你一份航线列表tickets，其中tickets[i]=[fromi,toi]表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。所有这些机票都属于一个从JFK（肯尼迪国际机场）出发的先生，所以该行程必须从JFK开始。如果存在多种有效的行程，请你按字典排序返回最小的行程组合。例如，行程[“JFK”,“LGA”]与[“JFK”,“LGB
Python数据分析与可视化实战指南 William数据分析 python python 数据
在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学
2019-12-22-22:30 涓涓1016
今天是冬至，写下我的日更，是因为这两天的学习真的是能量的满满，让我看到了自己，未来另外一种可能性，也让我看到了这两年这几年的过程中我所接受那些痛苦的来源。一切的根源和痛苦都来自于人生，家庭，而你的原生家庭，你的爸爸和妈妈，是因为你这个灵魂在那一刻选择他们作为你的爸爸和妈妈来的，所以你得接受他，你得接纳他，他就是因为他的存在而给你的学习和成长带来这些痛苦，那其实是你必然要经历的这个过程，当你去接纳的
将cmd中命令输出保存为txt文本文件落难Coder Windows cmd window
最近深度学习本地的训练中我们常常要在命令行中运行自己的代码，无可厚非，我们有必要保存我们的炼丹结果，但是复制命令行输出到txt是非常麻烦的，其实Windows下的命令行为我们提供了相应的操作。其基本的调用格式就是：运行指令>输出到的文件名称或者具体保存路径测试下，我打开cmd并且ping一下百度：pingwww.baidu.com>./data.txt看下相同目录下data.txt的输出：如果你再
四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
GitHub上克隆项目 bigbig猩猩 github
从GitHub上克隆项目是一个简单且直接的过程，它允许你将远程仓库中的项目复制到你的本地计算机上，以便进行进一步的开发、测试或学习。以下是一个详细的步骤指南，帮助你从GitHub上克隆项目。一、准备工作1.安装Git在克隆GitHub项目之前，你需要在你的计算机上安装Git工具。Git是一个开源的分布式版本控制系统，用于跟踪和管理代码变更。你可以从Git的官方网站（https://git-scm.
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
Day1笔记-Python简介&标识符和关键字&输入输出 ~在杰难逃~ Python python 开发语言大数据数据分析数据挖掘
大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程
人工智能时代，程序员如何保持核心竞争力？ jmoych 人工智能
随着AIGC（如chatgpt、midjourney、claude等）大语言模型接二连三的涌现，AI辅助编程工具日益普及，程序员的工作方式正在发生深刻变革。有人担心AI可能取代部分编程工作，也有人认为AI是提高效率的得力助手。面对这一趋势,程序员应该如何应对?是专注于某个领域深耕细作，还是广泛学习以适应快速变化的技术环境?又或者，我们是否应该将重点转向AI无法轻易替代的软技能？让我们一起探讨程序员
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
阶段总结反思轻争
马上就要进入10月份了，今天做一下前段时间的总结和反思。前段时间，日更、英语、健身、护肤坚持的比较好。阅读、书法坚持的不好。1.中间被迫停更半个多月，其余时间一直在坚持日更挑战。偶尔也有不想写的时候，就做一下摘抄。因为阅读（输入）没跟上来，所以写作（输出）质量有待进一步加强。2.英语做到了一周至少学习5天，每次不少于30分钟，但是小班课没有跟上更新速度，下一步要争取利用零碎时间补听小班课。3.减肥
ARM驱动学习之基础小知识 JT灬新一 ARM 嵌入式 arm开发学习
ARM驱动学习之基础小知识•sch原理图工程师工作内容–方案–元器件选型–采购（能不能买到，价格）–原理图（涉及到稳定性）•layout画板工程师–layout（封装、布局，布线，log）（涉及到稳定性）–焊接的一部分工作（调试阶段板子的焊接）•驱动工程师–驱动，原理图，layout三部分的交集容易发生矛盾•PCB研发流程介绍–方案，原理图(网表)–layout工程师（gerber文件）–PCB板
ARM驱动学习之5 LEDS驱动 JT灬新一嵌入式 C 底层 arm开发学习单片机
ARM驱动学习之5LEDS驱动知识点：•linuxGPIO申请函数和赋值函数–gpio_request–gpio_set_value•三星平台配置GPIO函数–s3c_gpio_cfgpin•GPIO配置输出模式的宏变量–S3C_GPIO_OUTPUT注意点：DRIVER_NAME和DEVICE_NAME匹配。实现步骤：1.加入需要的头文件：//Linux平台的gpio头文件#include//三
ARM驱动学习之4小结 JT灬新一嵌入式 C++arm开发学习 linux
ARM驱动学习之4小结#include#include#include#include#include#defineDEVICE_NAME"hello_ctl123"MODULE_LICENSE("DualBSD/GPL");MODULE_AUTHOR("TOPEET");staticlonghello_ioctl(structfile*file,unsignedintcmd,unsignedlo
展现思维导图魅力，不断挖掘人生宝藏思维导图讲师Mandy
第13期最强思维导图训练营已经结束一周了，但是我依旧是感觉所有学员还在努力的学习，这些学员中有教师、学生、白领、公务员、宝妈等等，只要你努力，只要你想改变自己，任何行业，任何岗位都可以参与进来，28天足以让你见成效，在这28天中，我们的学员不仅仅是收获了一枚毕业证，最重要的是让自己的思维方式得到升级，今天的你为自己投资，明天的你就会感谢你今天的付出，我们来听一听来自13期最强思维导图训练营优秀学员
2019-3-23晨间日记红红火火小耳朵
今天是什么日子起床：7点40就寝：23点半天气：有太阳，不过一会儿出来一会儿进去特别清爽的凉意，还蛮舒服的心情：小激动要给女朋友过生日啦纪念日：田田女士过生日任务清单昨日完成的任务，最重要的三件事：1.英语一对一2.运动计划3.认真护肤习惯养成：调整状态周目标·完成进度英语七天打卡（5/7）轻课阅读（87/180）音标课（25/30）读书（福尔摩斯一章）学习·信息·阅读#英语课#Cookingte
【华为OD技术面试真题精选 - 非技术题】 -HR面，综合面_华为od hr面一个射手座的程序媛程序员华为od 面试职场和发展
最后的话最近很多小伙伴找我要Linux学习资料，于是我翻箱倒柜，整理了一些优质资源，涵盖视频、电子书、PPT等共享给大家！资料预览给大家整理的视频资料：给大家整理的电子书资料：如果本文对你有帮助，欢迎点赞、收藏、转发给朋友，让我有持续创作的动力！网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以点击这里获
教育用心灵温暖心灵
@陈春丽长期学习班冯倩。今天一早就听到说高职合并，取消中专教育的教育信息。感觉是虽然知道，再听还是吓一跳。国家重视职业教育为何还要取消中专技术学校的教育？再听高中就要进行技术教育了，一部分人学习好继续努力学习考大学，一部分人在高中就可以进行职业教育接受职业教育了还要中专技术教育学校干什么呢！a有些职业教育学校转型升级快，不是孩子上完给找工作，而是学校帮孩子创业，我觉得是不错的方向！新闻新你得实时更
数字里的世界17期：2021年全球10大顶级数据中心，中国移动榜首张三叨
你知道吗？2016年，全球的数据中心共计用电4160亿千瓦时，比整个英国的发电量还多40％！前言每天，我们都会创造超过250万TB的数据。并且随着物联网（IOT）的不断普及，这一数据将持续增长。如此庞大的数据被存储在被称为“数据中心”的专用设施中。虽然最早的数据中心建于20世纪40年代，但直到1997-2000年的互联网泡沫期间才逐渐成为主流。当前人类的技术，比如人工智能和机器学习，已经将我们推向
学习“论语”-第59天春峰轩
12.14子张问政。子曰：“居之无倦，行之以忠。”子张问为政之道。孔子说：“在位尽职不懈怠，执行政令要忠诚。”12.15子曰：“博学于文，约之以礼，亦可以弗畔矣夫！”孔子说：“君子广泛地学习文献，并且用礼节约束自己，也就不会离经叛道了。”12.16子曰：“君子成人之美，不成人之恶。小人反是。”孔子说：“君子成全别人的好事，而不助长别人的坏处。小人则与此相反行事。”知识点:“成人之美，不成人之恶”贯
关于旗正规则引擎中的MD5加密问题何必如此 jsp MD5 规则加密
一般情况下，为了防止个人隐私的泄露，我们都会对用户登录密码进行加密，使数据库相应字段保存的是加密后的字符串，而非原始密码。在旗正规则引擎中，通过外部调用，可以实现MD5的加密，具体步骤如下： 1.在对象库中选择外部调用，选择“com.flagleader.util.MD5”，在子选项中选择“com.flagleader.util.MD5.getMD5ofStr({arg1})”； 2.在规
【Spark101】Scala Promise/Future在Spark中的应用 bit1129 Promise
Promise和Future是Scala用于异步调用并实现结果汇集的并发原语，Scala的Future同JUC里面的Future接口含义相同，Promise理解起来就有些绕。等有时间了再仔细的研究下Promise和Future的语义以及应用场景，具体参见Scala在线文档：http://docs.scala-lang.org/sips/completed/futures-promises.html
spark sql 访问hive数据的配置详解 daizj spark sql hive thriftserver
spark sql 能够通过thriftserver 访问hive数据，默认spark编译的版本是不支持访问hive，因为hive依赖比较多，因此打的包中不包含hive和thriftserver,因此需要自己下载源码进行编译，将hive，thriftserver打包进去才能够访问，详细配置步骤如下： 1、下载源码 2、下载Maven,并配置此配置简单，就略过
HTTP 协议通信周凡杨 java httpclient http 通信
一：简介 HTTPCLIENT，通过JAVA基于HTTP协议进行点与点间的通信！二：代码举例测试类： import java
java unix时间戳转换 g21121 java
把java时间戳转换成unix时间戳： Timestamp appointTime=Timestamp.valueOf(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date())) SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd hh:m
web报表工具FineReport常用函数的用法总结（报表函数）老A不折腾 web报表 finereport 总结
说明：本次总结中，凡是以tableName或viewName作为参数因子的。函数在调用的时候均按照先从私有数据源中查找，然后再从公有数据源中查找的顺序。 CLASS CLASS(object):返回object对象的所属的类。 CNMONEY CNMONEY(number,unit)返回人民币大写。 number:需要转换的数值型的数。 unit:单位，
java jni调用c++ 代码报错墙头上一根草 java C++jni
# # A fatal error has been detected by the Java Runtime Environment: # # EXCEPTION_ACCESS_VIOLATION (0xc0000005) at pc=0x00000000777c3290, pid=5632, tid=6656 # # JRE version: Java(TM) SE Ru
Spring中事件处理de小技巧 aijuans spring Spring 教程 Spring 实例 Spring 入门 Spring3
Spring 中提供一些Aware相关de接口，BeanFactoryAware、 ApplicationContextAware、ResourceLoaderAware、ServletContextAware等等，其中最常用到de匙ApplicationContextAware.实现ApplicationContextAwaredeBean，在Bean被初始后，将会被注入 Applicati
linux shell ls脚本样例 annan211 linux linux ls源码 linux 源码
#! /bin/sh - #查找输入文件的路径 #在查找路径下寻找一个或多个原始文件或文件模式 # 查找路径由特定的环境变量所定义 #标准输出所产生的结果通常是查找路径下找到的每个文件的第一个实体的完整路径 # 或是filename :not found 的标准错误输出。 #如果文件没有找到则退出码为0 #否则即为找不到的文件个数 #语法 pathfind [--
List,Set,Map遍历方式 (收集的资源,值得看一下) 百合不是茶 list set Map遍历方式
List特点：元素有放入顺序，元素可重复 Map特点：元素按键值对存储，无放入顺序 Set特点：元素无放入顺序，元素不可重复（注意：元素虽然无放入顺序，但是元素在set中的位置是有该元素的HashCode决定的，其位置其实是固定的） List接口有三个实现类：LinkedList，ArrayList，Vector LinkedList：底层基于链表实现，链表内存是散乱的，每一个元素存储本身
解决SimpleDateFormat的线程不安全问题的方法 bijian1013 java thread 线程安全
在Java项目中，我们通常会自己写一个DateUtil类，处理日期和字符串的转换，如下所示： public class DateUtil01 { private SimpleDateFormat dateformat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); public void format(Date d
http请求测试实例（采用fastjson解析） bijian1013 http 测试
在实际开发中，我们经常会去做http请求的开发，下面则是如何请求的单元测试小实例，仅供参考。 import java.util.HashMap; import java.util.Map; import org.apache.commons.httpclient.HttpClient; import
【RPC框架Hessian三】Hessian 异常处理 bit1129 hessian
RPC异常处理概述 RPC异常处理指是，当客户端调用远端的服务，如果服务执行过程中发生异常，这个异常能否序列到客户端？如果服务在执行过程中可能发生异常，那么在服务接口的声明中，就该声明该接口可能抛出的异常。在Hessian中，服务器端发生异常，可以将异常信息从服务器端序列化到客户端，因为Exception本身是实现了Serializable的
【日志分析】日志分析工具 bit1129 日志分析
1. 网站日志实时分析工具 GoAccess http://www.vpsee.com/2014/02/a-real-time-web-log-analyzer-goaccess/ 2. 通过日志监控并收集 Java 应用程序性能数据(Perf4J) http://www.ibm.com/developerworks/cn/java/j-lo-logforperf/ 3.log.io 和
nginx优化加强战斗力及遇到的坑解决 ronin47 nginx 优化
　　　先说遇到个坑，第一个是负载问题，这个问题与架构有关，由于我设计架构多了两层，结果导致会话负载只转向一个。解决这样的问题思路有两个：一是改变负载策略，二是更改架构设计。　　　由于采用动静分离部署，而nginx又设计了静态，结果客户端去读nginx静态，访问量上来，页面加载很慢。解决：二者留其一。最好是保留apache服务器。　　　来以下优化：　　　
java-50-输入两棵二叉树A和B，判断树B是不是A的子结构 bylijinnan java
思路来自： http://zhedahht.blog.163.com/blog/static/25411174201011445550396/ import ljn.help.*; public class HasSubtree { /**Q50. * 输入两棵二叉树A和B，判断树B是不是A的子结构。例如，下图中的两棵树A和B，由于A中有一部分子树的结构和B是一
mongoDB 备份与恢复开窍的石头 mongDB备份与恢复
Mongodb导出与导入 1: 导入/导出可以操作的是本地的mongodb服务器,也可以是远程的. 所以,都有如下通用选项: -h host 主机 --port port 端口 -u username 用户名 -p passwd 密码 2: mongoexport 导出json格式的文件
[网络与通讯]椭圆轨道计算的一些问题 comsci 网络
如果按照中国古代农历的历法，现在应该是某个季节的开始，但是由于农历历法是3000年前的天文观测数据，如果按照现在的天文学记录来进行修正的话，这个季节已经过去一段时间了。。。。。也就是说，还要再等3000年。才有机会了，太阳系的行星的椭圆轨道受到外来天体的干扰，轨道次序发生了变
软件专利如何申请 cuiyadll 软件专利申请
软件技术可以申请软件著作权以保护软件源代码，也可以申请发明专利以保护软件流程中的步骤执行方式。专利保护的是软件解决问题的思想，而软件著作权保护的是软件代码（即软件思想的表达形式）。例如，离线传送文件，那发明专利保护是如何实现离线传送文件。基于相同的软件思想，但实现离线传送的程序代码有千千万万种，每种代码都可以享有各自的软件著作权。申请一个软件发明专利的代理费大概需要5000-8000申请发明专利可
Android学习笔记 darrenzhu android
1.启动一个AVD 2.命令行运行adb shell可连接到AVD,这也就是命令行客户端 3.如何启动一个程序 am start -n package name/.activityName am start -n com.example.helloworld/.MainActivity 启动Android设置工具的命令如下所示： # am start -
apache虚拟机配置，本地多域名访问本地网站 dcj3sjt126com apache
现在假定你有两个目录，一个存在于 /htdocs/a，另一个存在于 /htdocs/b 。现在你想要在本地测试的时候访问 www.freeman.com 对应的目录是 /xampp/htdocs/freeman ,访问 www.duchengjiu.com 对应的目录是 /htdocs/duchengjiu。 1、首先修改C盘WINDOWS\system32\drivers\etc目录下的
yii2 restful web服务[速率限制] dcj3sjt126com PHP yii2
速率限制为防止滥用，你应该考虑增加速率限制到您的API。例如，您可以限制每个用户的API的使用是在10分钟内最多100次的API调用。如果一个用户同一个时间段内太多的请求被接收，将返回响应状态代码 429 (这意味着过多的请求)。要启用速率限制, [[yii\web\User::identityClass|user identity class]] 应该实现 [[yii\filter
Hadoop2.5.2安装——单机模式 eksliang hadoop hadoop单机部署
转载请出自出处：http://eksliang.iteye.com/blog/2185414 一、概述 Hadoop有三种模式单机模式、伪分布模式和完全分布模式，这里先简单介绍单机模式，默认情况下，Hadoop被配置成一个非分布式模式，独立运行JAVA进程，适合开始做调试工作。二、下载地址 Hadoop 网址http:
LoadMoreListView+SwipeRefreshLayout（分页下拉）基本结构 gundumw100 android
一切为了快速迭代 import java.util.ArrayList; import org.json.JSONObject; import android.animation.ObjectAnimator; import android.os.Bundle; import android.support.v4.widget.SwipeRefreshLayo
三道简单的前端HTML/CSS题目 ini html Web 前端 css 题目
使用CSS为多个网页进行相同风格的布局和外观设置时，为了方便对这些网页进行修改，最好使用（）。http://hovertree.com/shortanswer/bjae/7bd72acca3206862.htm 在HTML中加入<table style=”color:red; font-size:10pt”>，此为（）。http://hovertree.com/s
overrided方法编译错误 kane_xie override
问题描述：在实现类中的某一或某几个Override方法发生编译错误如下： Name clash: The method put(String) of type XXXServiceImpl has the same erasure as put(String) of type XXXService but does not override it 当去掉@Over
Java中使用代理IP获取网址内容（防IP被封，做数据爬虫） mcj8089 免费代理IP 代理IP 数据爬虫 JAVA设置代理IP 爬虫封IP
推荐两个代理IP网站： 1. 全网代理IP：http://proxy.goubanjia.com/ 2. 敲代码免费IP：http://ip.qiaodm.com/ Java语言有两种方式使用代理IP访问网址并获取内容，方式一，设置System系统属性 // 设置代理IP System.getProper
Nodejs Express 报错之 listen EADDRINUSE qiaolevip 每天进步一点点学习永无止境 nodejs 纵观千象
当你启动 nodejs服务报错： >node app Express server listening on port 80 events.js:85 throw er; // Unhandled 'error' event ^ Error: listen EADDRINUSE at exports._errnoException (
C++中三种new的用法 _荆棘鸟_ C++new
转载自：http://news.ccidnet.com/art/32855/20100713/2114025_1.html 作者: mt 其一是new operator，也叫new表达式；其二是operator new，也叫new操作符。这两个英文名称起的也太绝了，很容易搞混，那就记中文名称吧。new表达式比较常见，也最常用，例如： string* ps = new string("
Ruby深入研究笔记1 wudixiaotie Ruby
module是可以定义private方法的 module MTest def aaa puts "aaa" private_method end private def private_method puts "this is private_method" end end