02 2021 档案
摘要：WebSocket 简介 WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。一开始的握手需要借助HTTP请求完成。 原理&机制 原理 网站上的即时通讯是很常见的，比如网页的QQ，微信等。按照以往的技术能力通常是采用轮询等技术解决
阅读全文
摘要：前言 各种技术框架，比如 vue、react 和小程序，实现父子组件和兄弟组件通信的方案有很多，大多方案都强依赖于框架本身。这里介绍一种通过发布和订阅的方式来实现组件通信的方案，纯 JavaScript 实现，可以适用于各种框架。 发布订阅模式 发布订阅模式包含三部分内容，发布者、订阅者和数据处理中
阅读全文
摘要：前言 沉浸式标题栏，简单来说，即是透明栏，标题栏和状态栏不再是传统的黑色或白色，而是透明的，使得手机应用界面占据整个屏幕空间，页面从上向下滚动时，状态栏和标题内容慢慢由透明变成不透明，退出沉浸模式。以上交互，主要通过设置状态栏 StatusBar 和 透明度 opacity 来实现。 设置 opac
阅读全文
摘要：介绍一些小程序的扩展的工具类库。 目录： 1、瘦身工具 通过剔除无用文件、压缩图片、复用代码等方式减少小程序代码包体积。 1.1 安装 npm install -g miniprogram-slim 1.2 使用 Usage: miniprogram-slim <command> Options:
阅读全文
摘要：简介 whistle是基于Node实现的跨平台web调试代理工具，同类型的工具有Fiddler和Charles，主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器使用。 在使用了Fiddler、Charles以及whistle这三款代理工具之后，总结
阅读全文
摘要：抓包 作为一名前端开发，利用代理工具抓包是最基础的技能。通过抓包，我们可以获取的信息有下面这些： 具体的url 请求的Method，Status等信息 请求接口携带的参数 请求头信息（cookie、UA、请求参数等） 返回头信息（返回结果、是否支持跨域等） 这部分和其他的代理工具没什么区别，都在Ne
阅读全文
摘要：组件库的存在可以大大提高开发效率。但就像盖房子一样，地基先打好，并且可能需要晾晒几天，之后的建筑才能更牢固。今天我就自己按照官方文档搭建的storybook组件库给大家做一个分享。 流程 创建项目库： 引入storybook 配置storybook环境代码及处理报错 编写组件 增加Class作用域
阅读全文
摘要：俗话说：工欲善其事，必先利其器，工匠想要做好他的的工作，一定要先让工具锋利。设计师想做好设计，提高工作效率，就得熟悉sketch的一些软件的的小技巧，或者经验总结，提升我们的作图效率和规范我们的设计稿； 技巧一：分割线-用 fill 代替 border 做设计稿的时候，大部分同学都用375 * 66
阅读全文
摘要：TypeScript流行开来，大型项目的开发目前大多都已经加入了这一强类型校验语言，那么我们之前搭建的组件库引入TypeScript就显得势在必行。怎样在已有组件库项目中配置相关内容并且很好兼容之前组件。本文就是我的践行之路，写出来自己的经历，供大家借鉴，指正。 ## 背景 React + Stor
阅读全文
摘要：在React项目中做数据管理，Redux已经占据半边天下，为什么会出现Mobx呢，它是什么，能给我们带来什么，和Redux相比有什么优缺点呢，今天，我就自己学习的一点知识，为大家做一个简单的分享，希望让你对Mobx有一个大致的了解。 目录 Mobx是什么 编程思维方式的不同 Store的区别 储存数
阅读全文
摘要：作为设计师，在拿到设计需求后，不要着急做需求，先分析需求，且在思考设计视觉时一定记得从业务本身的属性出发，多跟运营以及产品沟通，分析挖掘到更多的潜在需求，才能从根本上解决问题，设计出符合产品调性的页面。 一般说来，在电商购物类的app中，用户想要到达商品详情页的路径有以下3种： 通过搜索直达商品列表
阅读全文
摘要：大家好，今天我们来谈谈前端每个人都在写的东西，组件。 在当下react和vue这么流行的大环境下，相信你一定写过组件。如果你感觉你是职场小白，只从github或者npm下载过一些组件使用，自己没有写过，那么你就错了，你一定写过。因为往大一点说，一个页面可以是一个组件，往小了说，一个按钮也是一个组件，
阅读全文
摘要：为什么我们要使用本地缓存？ 空间换时间-消耗内存空间提升速度 某些热key重复hit到很多次 缓存的总容量不会超过内存的总量 GuavaCache 构造 LoadingCache<String, String> build = CacheBuilder.newBuilder() // key的最大数
阅读全文
摘要：证书的安装不依赖于代理工具，Fiddler、Charles、Whistle都可以依照下面的步骤安装。(注意：证书的下载方式在不同代理工具中是不同的，这里默认已经下载了证书) 安装证书的核心在信任证书的这步操作上，这两个字其实也是本文的核心。 Windows 双击下载好的证书文件，点击安装 选择存储位
阅读全文
摘要：用户隐私安全在产品设计中是很重要的一个环节。我们每天都会使用到各式各样的APP，有金融的，社交的，电商的...而这些APP里面又储存着我们重要的隐私信息。如登录密码、存款金额、身份信息等。因此今天总结一下，一些主流产品在用户隐私方面的做法与设计点，为我们日后对用户隐私信息设计时，能有一些思考和帮助。
阅读全文
摘要：类组件（class） 类组件的缺点： 大型组件很难拆分和重构，也很难测试 业务逻辑分散在组件的各个方法中，导致重复逻辑或关联逻辑 组件类引入复杂的编程模式，比如render、props import React, { Component } from "react"; export default
阅读全文
摘要：前言 为什么要处理前端异常，有以下几方面的原因： 提高代码健壮性：对于开发人员来说，这点很重要，代码的健壮性越好，系统越不容易崩溃； 提升系统稳定性：异常会导致正常流程无法进行、页面样式错乱、崩溃甚至白屏等问题，严重的会给业务造成损失； 增强用户体验：代码的错误不应该影响页面的正常显示和用户交互，出
阅读全文
浙公网安备 33010602011771号