cbvirtua 1.0.89 → 1.0.91

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cbvirtua",
-  "version": "1.0.89",
+  "version": "1.0.91",
   "description": "",
   "main": "index.js",
   "scripts": {

package//346/226/260/345/273/272 /346/226/207/346/234/254/346/226/207/346/241/243 (2).txt"

@@ -0,0 +1,90 @@
+import type { Directive, DirectiveBinding } from 'vue'
+import { useTestStore } from '@/store/index'
+
+// 存储高度
+let originHeight = 0
+
+// 视口变化 监听函数
+const hanlderResize = (): void => {
+  const resizeHeight =
+    document.documentElement.clientHeight || document.body.clientHeight
+  if (originHeight < resizeHeight) {
+    // 安卓机下 用户收起键盘 同时input还有焦点
+    // 执行失去焦点逻辑
+    hanlderblur()
+  } else {
+    // 安卓机下 用户展开键盘 同时input还有焦点
+    // 执行获取焦点逻辑
+    handlerfocus()
+  }
+  originHeight = resizeHeight
+}
+
+
+// pinia 存储
+const testStore = useTestStore()
+
+// 失去焦点 展示 底部按钮
+const hanlderblur = (): void => {
+  testStore.setFooterMenuType(true)
+}
+
+// 获取焦点 隐藏 底部按钮
+const handlerfocus = (): void => {
+  testStore.setFooterMenuType(false)
+}
+
+
+// 自定义指令
+const keyboardExpansion: Directive = {
+    /**
+     el：指令绑定到的元素。这可以用于直接操作 DOM。
+     binding：一个对象，包含以下属性。
+        value：传递给指令的值。例如在 v-my-directive="1 + 1" 中，值是 2。
+        oldValue：之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
+        arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 "foo"。
+        modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。
+        instance：使用该指令的组件实例。
+        dir：指令的定义对象。
+    **/
+    mounted (el: Element, binding: DirectiveBinding<any>) {
+        // 查找 目标元素
+        // 这里 inputElement 指的是 input/textarea
+        const inputElement: Element | null = ['INPUT', 'TEXTAREA'].includes(el.tagName)
+        ? el
+        : el.querySelector('input') || el.querySelector('textarea')
+       // 绑定事件
+        inputElement?.addEventListener('blur', hanlderblur)
+
+        inputElement?.addEventListener('focus', handlerfocus)
+
+        // 判断 安卓机情况下 添加视口监听
+        if ((/android/i).test(navigator.userAgent)) {
+            originHeight = document.documentElement.clientHeight || document.body.clientHeight
+            window.addEventListener('resize', hanlderResize, false)
+        }
+    },
+    unmounted() {
+        if ((/android/i).test(navigator.userAgent)) {
+            // 指令元素 销毁前remove上面绑定的事件
+          window.removeEventListener('resize', hanlderResize, false)
+        }
+    }
+}bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
+
+inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
+
+update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
+
+我们会在稍后讨论渲染函数时介绍更多 VNodes 的细节。
+
+componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
+
+unbind：只调用一次，指令与元素解绑时调用。
+
+@media (min-aspect-ratio: 13/20) {
+  .button {
+    display: none;
+  }
+}
+

package//346/226/260/345/273/272 /346/226/207/346/234/254/346/226/207/346/241/243 (3).txt"

@@ -0,0 +1,142 @@
+MutationObserver
+2024-08-29
+296
+阅读4分钟
+
+前言
+MutationObserver 是一个dom观察器，当dom发生改变前(willchanged)，会执行其回调函数，自己观察会发现不少三方UI组件用到了
+
+其会将回调添加到当前执行栈的末尾，且在其他异步任务之前执行（（如I/O、计时器等）），对于高性能低延迟的场景非常好用，也避免了延迟调用出现的卡顿问题
+
+MutationObserver
+MutationObserver 创建观察很简单，直接 new MutationObserver 即可
+
+new MutationObserver 创建监听回调
+会在观察内容发生改变操作前，回调该函数，因为打印时会发件 target 节点的 childNodes 节点没有变化
+
+第一个参数为变化数组，会按照顺序记录先后的改变操作(增删等)，observer为我们的观察对象，可以取消、观察
+
+let obser = new MutationObserver(
+    (mutations: MutationRecord[], observer: MutationObserver) => {
+        console.log(mutations);
+    }
+);
+回调返回值大致结构如下所示，主要用到第一个参数，第二个参数后面介绍，可用可不用
+
+QQ_1724749432698.png
+
+observer 开启监听，设置监听规则
+通过调用其 observer 函数来启用监听，可以设置 config 参数，一般用 childList、subtree、characterDataOldValue 就足够了，参数使用如下所示
+
+const dom = document.getElementById("pppp");
+
+obser.observe(dom!, {
+    childList: true
+});
+config 属性如下所示，根据自己需要取即可
+
+/** 设置一个属性本地名（不包含命名空间）的列表，如果并非所有属性更改都需要被观察，并且 attributes 为 true 或被省略。 */ 
+attributeFilter?： string[]； 
+/** 设置为 true，如果 attributes 为 true 或被省略，并且需要记录目标属性更改前的值。 */ 
+attributeOldValue?： boolean； 
+/** 设置为 true，如果要观察目标属性的更改。如果指定了 attributeOldValue 或 attributeFilter，则可以省略此属性。 */
+attributes?： boolean； 
+/** 设置为 true，如果要观察目标数据的更改。如果指定了 characterDataOldValue，则可以省略此属性。 */
+characterData?： boolean； 
+/** 设置为 true，如果 characterData 为 true 或被省略，并且需要记录目标更改前的数据。 */ 
+characterDataOldValue?： boolean； 
+/** 设置为 true，如果要观察目标子节点的更改。 */
+childList?： boolean； 
+/** 设置为 true，如果要观察不只是目标，还有目标后代的更改。 */
+subtree?： boolean；
+disconnect取消监听
+通过 disconnect 取消监听，有时为了避免不必要的监听，可以在合适的时机取消监听，在重新开启监听
+
+obser.disconnect()
+案例(让被删除节点恢复案例，部分水印防伪功能)
+使用 MutationObserver 监听一个 pppp 的节点，检测到其删除操作后，我们给某个节点主动添加回来，一些水印防伪功能会用到，我们就做一个简易的防删除案例
+
+//查找dom，用于监听其子节点
+const dom = document.getElementById("pppp");
+
+//设置改变前的回调
+const obser = new MutationObserver(
+    (mutations: MutationRecord[], observer: MutationObserver) => {
+        mutations.forEach((node) => {
+            node.removedNodes.forEach((node) => {
+                dom?.appendChild(node);
+            });
+        });
+    }
+);
+//添加回调
+obser.observe(dom!, {
+    childList: true
+});
+这样完成了一个删除后的恢复功能，也可以根据需要调用 disconnect、observe方法，如果不想由于回调内部操作再次触发回调，需要这样做
+
+例如：上面的删除后的追加操作，如果里面是不是单纯追加，而是重置操作，可能还有删除和追加操作，则再次删除操作可能会触发回调地狱，需要额外添加判断条件，如果使用 disconnect + observe则可以有效避免
+
+此外，可能还会有很多情况，有时需要在操作的末尾，可能还会有其他dom操作，要延迟恢复监听的话，可以通过setTimeout 重新启动一个宏队列任务避免提前开启监听
+
+毕竟其回调会被追加到当前执行栈的末尾，可以通过 setTimeout 会重新启动一个宏队列任务(优先级在执行中的微队列任务之后)，以此解决监听时机问题
+
+const obser = new MutationObserver(
+        (mutations: MutationRecord[], observer: MutationObserver) => {
+        observer.disconnect();
+        
+        ...我们的操作
+        
+        observer.observe(dom!, {
+            childList: true,
+        });
+        //开启一个新的
+        // setTimeout(() => {
+        //     observer.observe(dom!, {
+        //         childList: true,
+        //     });
+        // }, 0);
+    }
+);
+整体代码
+function App() {
+    useEffect(() => {
+        const dom = document.getElementById("pppp");
+        //改变前的回调
+        const obser = new MutationObserver(
+            (mutations: MutationRecord[], observer: MutationObserver) => {
+                console.log(mutations);
+                observer.disconnect();
+                mutations.forEach((node) => {
+                    node.removedNodes.forEach((node) => {
+                        dom?.appendChild(node);
+                    });
+                });
+                observer.observe(dom!, {
+                    childList: true,
+                });
+                // setTimeout(() => {
+                //     observer.observe(dom!, {
+                //         childList: true,
+                //     });
+                // }, 0);
+            }
+        );
+        obser.observe(dom!, {
+            childList: true,
+        });
+    }, []);
+
+    return (
+        <div className="App">
+            <header className="App-header">
+                <img src={logo} className="App-logo" alt="logo" />
+                <p id="pppp">
+                    Edit <code>src/App.tsx</code> and save to reload.
+                </p>
+            </header>
+        </div>
+    );
+}
+最后
+自己也可以尝试将添加的文本信息换个颜色🤣