Fork me on GitHub

一文彻底搞懂providedIn的所有选项，除了root还能选择啥

当我们在创建 angular 的服务时，providedIn的选项默认都是root，有的小伙伴就会问了，这个providedIn是做什么的，除了 root 还能填其他值嘛 🤔。

查阅angular(v15)文档，发现providedIn总共有 5 种值

  • root：在大多数应用程序中是指应用程序级注入器。
  • any：在每个惰性加载的模块中提供一个唯一实例，而所有热切加载的模块共享一个实例。
  • null：等效于  undefined 。可注入物不会在任何范围内自动提供，必须添加到@NgModule 、 @Component或@Directive的  providers  数组中。
  • platform：由页面上所有应用程序共享的特殊单例平台注入器。
  • Type<any> - 将可注入物与  @NgModule  或其他  InjectorType  相关联。此选项已弃用。

angular 官网的文档一如既往的不给力 😳，只有选项，并没有示例说明，下面我们通过几个具体的例子，来看看这几个选项具体的表现 😎

more >>

展开全文 >>

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

展开全文 >>

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

展开全文 >>

flutter安装包切换国内源

在学习Flutter，发现无法安装，控制台提示

Got TLS error trying to find package flutter_inappwebview at https://pub.dev.

经过网上查找资料，发现：

如果在中国安装 flutter，配置国内镜像是很好的解决办法。 到此，解决方法找到。

配置本地环境方法

对于 Linux 和 MacOS 来说，添加如下两条环境变量即可：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

对于 Window

创建上述两个系统变量即可

name: PUB_HOSTED_URL;
value: https://pub.flutter-io.cn

name: FLUTTER_STORAGE_BASE_URL;
value: https://storage.flutter-io.cn

展开全文 >>

什么是iconfont

iconfont 是什么：

顾名思义，IconFont 就是字体图标。严格地说，就是一种字体，但是，它们不包含字母或数字，而是包含符号和字形。您可以使用 CSS 设置样式，就像设置常规文本一样，这使得 IconFont 成为 Web 开发时图标的热门选择。

IconFont 的使用方式和 传统的 WebFont 如出一辙，又把大量的图标变成了一个字体文件，减少了请求数，而且有效减小请求体积。当一个网页有自己的图标字体库之后，可以复用在很多地方，减少很多二次开发成本。因此现代网页多会使用 IconFont 来展示图标，那么如何使用并且生成 IconFont 也就变成了前端开发人员必知必会的能力。

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

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