Fork me on GitHub

unicode中文字节为什么有的占2个有的占3个

本文为掘金文章转载

背景

上周在评审测试用例时，有一个营销话术的接口字段，业务上要求不能超过 200 字，会上有人问，后端数据表中的这个字段，最多能存储多少个中文字符，有没有对存储字数做限制。我插入了一句，那要看数据表中这个字段定义的是什么数据类型（CHAR、VARCHAR，TEXT 等），一个中文占两个字节，用这种数据类型的字节数除以 2，就是能存储的中文字符数。然后另一个同事说，UTF-8 编码，一个中文占用 3 个字节。这句话颠覆了我之前的认知，在我的印象里，一个中文占用两个字节，怎么会是三个。我决定查一查，看看谁对谁错。

一石激起千层浪

本以为搜索一下就能获得答案，可是发现这个知识点，有些渊源，一言难尽。说得太概括，人难免还是会有疑问。需要追根溯源，才能讲清楚。在查找答案的过程中，发现网上的文章良莠不齐，对于同一个知识点，不同的文章说法相互矛盾，让人思维有些凌乱，对于这种情况，我选择取这些文章的交集，摒弃矛盾与冲突。

more >>

展开全文 >>

window.print 自定义页眉页脚 

<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 >>

展开全文 >>

angular依赖注入

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

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

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

more >>

展开全文 >>

flutter抓包、查看网络请求

由于 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 >>

展开全文 >>

react基础知识

React 的响应式原理

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

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

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

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

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

前端攻城狮
记录分享自己工作、学习中学到的知识