window.print 自定义页眉页脚

2023-11-28

<style>
  .header,
  .header-space,
  .footer,
  .footer-space {
    height: 100px;
  }
  .header {
    position: fixed;
    top: 0;
  }
  .footer {
    position: fixed;
    bottom: 0;
  }
</style>

<table>
  <thead>
    <tr>
      <td>
        <div class="header-space">&nbsp;</div>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="content">...</div>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>
        <div class="footer-space">&nbsp;</div>
      </td>
    </tr>
  </tfoot>
</table>
<div class="header">...</div>
<div class="footer">...</div>

more >>

展开全文 >>

手写javascript方法

2023-11-09

数组扁平化

效果：

[1, [2, [3]]].flat(2); // [1, 2, 3]

more >>

展开全文 >>

angular依赖注入

2023-11-01

掘金上看到一篇讲 angular 依赖注入的文章，非常的细致，记录一下

依赖注入是前端开发者也是 Angular 开发者一道很难迈过去的坎，依赖注入到底是啥？为什么要依赖注入？Angular 的依赖注入怎么有那么多概念，看了官方文档一遍后感觉是懂了，但是过一段时间发现又不懂了，这是前端开发者普遍遇到的问题，我司的前端也一样，那么这篇文章尝试用更容易理解的语言全面解析一下 Angular 的依赖注入，内容有点多，可以先收藏观看。

Angular 官方文档关于依赖注入介绍的其实挺详细的，但是组织的语言过于官方，不易理解，其次就是文档太过分散，没有把依赖注入聚合在一起，有些核心的概念可能在示例中出现了解读，你很难在一个地方找到所有依赖注入的讲解。
在开始之前，我简单列了一些关于 Angular 依赖注入的问题，如果你每个问题都非常了解可以划过这篇文章了。

more >>

展开全文 >>

flutter抓包、查看网络请求

2023-10-26

由于 flutter 的 http 请求代理不走系统，所以只能在代码中设置代理 ip, 使我们的抓包工具能获取到 http 的请求

flutter 使用 Charles 代理爬虫

class MyHttpOverrides extends HttpOverrides {
  bool _badCertificateCallback(X509Certificate cert, String host, int port) {
    return true;
  }

  @override
  HttpClient createHttpClient(SecurityContext? context) {
    return super.createHttpClient(context)
      ..badCertificateCallback = _badCertificateCallback
      ..findProxy = (uri) {
        return 'PROXY 192.168.1.193:8888;DIRECT;';//192.168.1.193:8888是代理ip端口

     }
    ;
  }
}

more >>

展开全文 >>

angular中的变化检测-zone.js

2023-08-29

Zone 是跨异步任务而持久存在的执行上下文。你可以将其视为 JavaScript VM 中的线程本地存储。本指南介绍了如何使用 Angular 的的 NgZone 自动检测组件中的更改以更新 HTML。

more >>

展开全文 >>

react基础知识

2023-08-16

React 的响应式原理

React 会创建一个虚拟 DOM(virtual DOM)。当一个组件中的状态改变时，React 首先会通过 “diff” 算法来标记虚拟 DOM 中的改变，第二步是调节(reconciliation)，会用 diff 的结果来更新真实 DOM。虚拟
DOM 作为一种缓存机制优化了 UI 渲染减少昂贵的 DOM 变化的数量。

开发者只需关注状态转移（数据），当状态发生变化，React 框架会自动根据新的状态重新构建 UI。
React 框架在接收到用户状态改变通知后，会根据当前渲染树，结合最新的状态改变，通过 Diff 算法，计算出树中变化的部分，然后只更新变化的部分（DOM 操作），从而避免整棵树重构，提高性能。状态变化后
React 框架并不会立即去计算并渲染 DOM 树的变化部分，相反，React 会在 DOM 的基础上建立一个抽象层，即虚拟 DOM 树，对数据和状态所做的任何改动，都会被自动且高效的同步到虚拟 DOM，最后再批量同步到真实 DOM
中，而不是每次改变都去操作一下 DOM。

为什么不能每次改变都直接去操作 DOM 树？
这是因为在浏览器中每一次 DOM 操作都有可能引起浏览器的重绘或回流：

如果 DOM 只是外观风格发生变化，如颜色变化，会导致浏览器重绘界面。
如果 DOM 树的结构发生变化，如尺寸、布局、节点隐藏等导致，浏览器就需要回流（及重新排版布局）。
而浏览器的重绘和回流都是比较昂贵的操作，如果每一次改变都直接对 DOM 进行操作，这会带来性能问题，而批量操作只会触发一次 DOM 更新。 more >>