大流星
# React开发中应该规避的问题 下面说到的React开发中注意的问题，部分是自己遇到过的点，部分是收集的，也算是React代码优化部分，这次做一个整理，希望可以帮助到你 - [1.shouldComponentUpdate](#shouldcomponentupdate) - [2.React.PureComponent](#react-purecomponent) - [3.不可变Immutable](#不可变immutable) - [4.React的key标识](#react的key标识) - [5.虚拟化长列表](#虚拟化长列表) - [6.React.memo函数组件](#react-memo) - [7.不滥用props和state](#不滥用props和state) - [8.拆分组件](#拆分组件) ## 避免重复渲染 当组件的props 或者 state 改变时，可能会出现重复setState的情况，对于重复的操作，我们可以通过下面的方法来避免重复渲染： ### shouldComponentUpdate **shouldComponentUpdate** 返回true，确认真实DOM需要改变时，返回true。一般的做法是比较组件的props和state是否真的发生变化，如果发生变化则返回true，否则返回false。 ```javascript...
# 小程序开发指南之性能优化 [作者：HerryLo](https://github.com/HerryLo) [原文永久链接： https://github.com/AttemptWeb/Record...](https://github.com/AttemptWeb/Record/issues/18) 将从**代码层面**和**项目层面**，聊一聊微信小程序的性能优化问题，希望有所帮助。也是自己最近的一个总结。(前置知识：微信小程序的视图层是WebView支持，逻辑层是JSCore支持，逻辑层通过setData与视图层发生交互。每一个页面都是一个WebView页面）[详见：小程序的运行环境](https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/env.html) 下面的内容不论是使用Taro框架开发，还是微信小程序原生开发，都是适用的。 * [代码层面](#代码层面) * [拆分组件](#👇·-拆分组件) * [图片压缩](#👇·-图片压缩) * [减少不必要数据](#👇·-减少不必要数据) * [避免频繁setData](#👇·-避免频繁setdata) * [使用webView组件开发](#👇·-使用webView组件开发) * [项目层面](#项目层面) * [拆分小程序](#👇·-拆分小程序) * [分包预加载](#👇·-分包预加载) * [尽量升级版本库](#👇·-尽量升级版本库) ## 代码层面 通过代码细节提升性能，而且在这方面，空间是非常大的。对于比较早期的小程序项目，由于代码细节方面没有过多的考虑，也导致了开发出的小程序非常的消耗性能。下面将提到的一些点，不论是正在开发的项目，还是在维护的项目，都会有一定的帮助。...
> 感谢 [yck: 剖析 React 源码解析](https://github.com/KieSun/Dream/issues/19)，本篇文章是在读完他的文章的基础上，将他的文章进行拆解和加工，加入我自己的一下理解和例子，便于大家理解。觉得[yck](https://github.com/KieSun)写的真的很棒 。**React 版本为 16.8.6**，关于源码的阅读，可以移步到[yck react源码解析](https://github.com/KieSun/react-interpretation) > 本文永久有效链接: [react解析: render的中的update(四)](https://github.com/AttemptWeb/Record/issues/14) [上一章节](./2019-08-10)说到，**不存在root数据节点**，即通过[createFiberRoot 函数创建FiberRoot](./2019-08-10.html#创建fiberroot核心函数)，```FiberRoot```对象是整个React应用的起点，同时也记录了整个React应用更新过程中的各种信息。 下面将要聊到的就是，当root呗创建后，还会发生什么👇👇 ### legacyRenderSubtreeIntoContainer 函数 下面衔接上一部分内容，不懂得可以查看[上一章节](./2019-08-10)。 > [yck: ReactDOM 源码 554行 legacyRenderSubtreeIntoContainer](https://github.com/KieSun/react-interpretation/blob/master/packages/react-dom/src/client/ReactDOM.js#L554) ```javascript function legacyRenderSubtreeIntoContainer(...
``` var data = { name: 'kindeng' }; function observe(data) { if (!data || typeof data !== 'object') { return; } Object.keys(data).forEach(function(key) { defineReactive(data, key, data[key]); }); }; // 取出所有属性遍历...
垃圾分类助手 目前的问题： 修复✅ 1. 搜索床和干垃圾之类的名词，弹窗展示有问题，数据兼容处理 修复✅ 2. 目前不存在详情页展示 修复✅ 3. 点击输入框之后，点击键盘隐藏，图片消失 4. 添加分享按钮可拖动 后面会继续更新！！！感兴趣的可以扫码进入哦 
# OpenLayers之信息窗体 看过之前的文章，对于OpenLayers会有一个大致的了解。下面我们继续讲解 OpenLayer如何创建信息窗口。 下面示例是以 **OpenLayersV8.2.0版本 作为依赖包**。 ## 信息窗体 在Openlayer中，信息窗体属于覆盖物（Overlay），和高德地图的信息窗体类似。Web端，信息窗体与点标记的区别是：前者是通过DOM节点构成，后者是矢量图形。 我们也可以通过覆盖物（Overlay）来创建点标记，不过这个要看开发场景，如果数据量巨大，推荐使用矢量点标记，反之覆盖物点标记也可以。 ### Overlay `ol.Overlay`是覆盖物API，主要用途就是在地图之上覆盖DOM元素，作为弹窗、提示窗、标注信息等，通过给定的经纬度，它会固定在对应的点位上，移动地图或拖动地图，覆盖物（Overlay）与地图的相对位置不变。 - `ol.Overlay`：显示在地图上并附加到单个地图位置的元素。与Control一样，套印格式也是可见的小部件。与“控件”不同，它们不在屏幕上的固定位置，而是与地理坐标绑定，因此平移地图将移动“覆盖”。 ```javascript const popup = new Overlay({ element: document.getElementById('popup'), autoPan: true, positioning: 'bottom-center', stopEvent: false,...
# 图解javascript作用域 [本文原文地址](https://github.com/AttemptWeb/Record/issues/39) [此文章是回答知乎问题总结而来](https://www.zhihu.com/people/liu-heng-88-71/answers)。 ### 作用域访问规则 ```javascript let count = 0; function func() { console.log(count); } func(); ``` 下面我们来看看变量`count`是如何被打印出来： 1. `func`函数调用，`console.log`打印`count`变量，查找当前函数作用域，是否存在变量`count`； 2. 不存在继续向上查找，查找模块作用域，发现`count`变量存在，并且打印出变量的值。 如果模块作用域依然不存在`count`变量？ 会继续向上查找，查找全局作用域是否存在`count`变量，如果依然不存在，提示`undefined`。 如下图所示：  通过上面的示例代码，我们可以知道一个规则，**作用域访问顺序**：函数作用域 ——> 模块作用域...
# 浅读-软件设计哲学 [原文链接](https://zhuanlan.zhihu.com/p/590534099) 软件为何越来越难维护？甚至于不想去维护？ 在软件迭代中，不关注软件系统结构，导致软件复杂度累加，软件缺乏系统设计，模块混乱，一旦需要增加、修改或优化，改变的代价无法评估，甚至于为了解决一个bug或优化，引入一个新的bug。【高耦合低内聚，降低复杂度】 ### 1. 复杂度本质 复杂度与软件系统结构息息相关。复杂度越大，修改或理解系统的难度也越大。 复杂度一般的三种症状： - 变化放大，需要修改一个地方，却发现改动的点涉及全站，导致难度倍增； - 认知负荷，开发者需要完成一项任务的知识量； - 未知，开发者在修改代码后，不知道它的实际影响面。 复杂度的原因： - 依赖性，模块的相互依赖关系(模块间过度依赖)； - 模糊性，重要信息模糊不清(例如：变量名、系统文档、代码注释等)。 **简化模块依赖 和 减少模糊性 可以有效降低软件复杂度** ### 2. 战略编程 在现代商业软件开发中，通常采用增量开发(敏捷开发)，不断的迭代开发，增加新的功能，如同堆积木一般。 以最快的速度，完成开发任务，崇尚战术编程思维，进行软件开发编程。由于是以完成任务导向，在开发过程，不会过多考虑软件系统设计，导致复杂度累加，迭代难度加大。...
# OpenLayers之点标记 原文链接：https://herrylo.github.io/front/ 看过之前的文章，对于OpenLayers会有一个大致的了解。下面我们继续讲解 OpenLayer如何创建点标记。 下面示例是以 OpenLayersV8.2.0版本 作为依赖包**。** ## 点标记 在地图上经常会打点上图，这是一个常见业务场景需求。像 打点标记，矢量边界线，点位提示窗等，也会经常需要，这些我们后面都会说道，现在来看看，OpenLayer中点标记如何上图。 OpenLayer中点标记（Marker）属于矢量图形，即矢量点。GIS地图上，日常开发上图的点、线、面、几何体都属于矢量图形。由于点标记的使用最为频繁常见，所以将它单独拿出来讲解。 OpenLayer中，点标记创建需要 `Feature`、`Geometry`、`Style`三者共同组合完成。`Feature`作为点标记的实体，`Geometry`创建几何体（点、线、圆、多边形），`Style`创建样式（颜色、粗细、文本等）。 当然，点标记创建完成后，需要添加到矢量图层，如果只创建不添加，就类似于只创建DOM节点，但是不append到是视图上。（点标记添加实际流程：需要先添加到矢量`Source`的要素上，`Layer`再使用矢量数据源） 下面我们来看看关于创建点标记的API和示例。 官方示例：[Icon Point](https://openlayers.org/en/v8.2.0/examples/icon-negative.html) ### Feature 1. `[ol.Feature](https://openlayers.org/en/v8.2.0/apidoc/module-ol_Feature-Feature.html)`：具有几何图形和其他属性特性的地理要素的矢量对象 ```javascript // 创建要素对象 const Feature = new...
# 直播流IOS无法播放问题排查 作者：[Herrylo](https://herrylo.github.io/front/2023-09-11.html)  问题：IOS手机无法播放flv协议视频，改为hls协议后，IOS播放H264视频编码格式正常，但是H265无法播放 解决：使用 花椒播放器，在IOS上通过 Webassembly编解码，播放flv协议视频解决此问题。 视频插件：花椒播放器 [https://github.com/ErosZy/WXInlinePlayer](https://github.com/ErosZy/WXInlinePlayer) 示例地址：[https://eroszy.github.io/WXInlinePlayer/example/index.html](https://eroszy.github.io/WXInlinePlayer/example/index.html) ## RTMP Adobe 公司开发的一个基于TCP的`**应用层协议**`，也就是说，`RTMP`和`HTTP/HTTPS`一样，是应用层的一个协议族。`RTMP`在`TCP`通道上一般传输的是`flv`格式流**。** ## FLV FLV(Flash Video)是Adobe公司推出的一种 `**流媒体格式**`，由于其封装后的音视频文件体积小、封装简单等特点，非常适合于互联网上使用。目前主流的视频网站基本都支持 `flv` 。采用`flv`格式封装的文件后缀为`.flv`。 注意：`RTMP`是网络传输协议，而`flv`则是视频的封装格式。 ## HLS HLS 全称是 HTTP Live Streaming，是一个由...