今越星礼
浅说虚拟列表的实现原理
在 [列表数据的展示优化](https://github.com/dwqs/blog/issues/63) 一文中，提到了对于列表形态的数据展示的按需渲染。这种方式是指根据容器元素的高度以及列表项元素的高度来显示长列表数据中的某一个部分，而不是去完整地渲染长列表，以提高无限滚动的性能。而按需显示方案的实现就是本文标题中说的虚拟列表。 >虚拟列表的实现有多种方案，本文以 [react-virtual-list](https://github.com/dwqs/react-virtual-list) 组件为基础进行分析 ## 什么是虚拟列表？ 在正文之前，先对虚拟列表做个简单的定义。 根据上文，虚拟列表是按需显示思路的一种实现，即**虚拟列表是一种根据滚动容器元素的可视区域来渲染长列表数据中某一个部分数据的技术。** 简而言之，虚拟列表指的就是「可视区域渲染」的列表。有三个概念需要了解一下： * **滚动容器元素**：一般情况下，滚动容器元素是 `window` 对象。然而，我们可以通过布局的方式，在某个页面中任意指定一个或者多个滚动容器元素。只要某个元素能在内部产生横向或者纵向的滚动，那这个元素就是滚动容器元素考虑每个列表项只是渲染一些纯文本。在本文中，只讨论元素的纵向滚动。 * **可滚动区域**：滚动容器元素的内部内容区域。假设有 100 条数据，每个列表项的高度是 50，那么可滚动的区域的高度就是 100 * 50。可滚动区域当前的具体高度值一般可以通过(滚动容器)元素的 `scrollHeight` 属性获取。用户可以通过滚动来改变列表在可视区域的显示部分。 * **可视区域**：滚动容器元素的视觉可见区域。如果容器元素是 `window` 对象，可视区域就是浏览器的视口大小(即[视觉视口](https://user-images.githubusercontent.com/7871813/43363609-26e0d164-933b-11e8-85e5-1ec21d5ba398.png))；如果容器元素是某个 `div`...
在 Web 安全领域中，XSS 和 CSRF 是最常见的攻击方式。本文将会简单介绍 XSS 和 CSRF 的攻防问题。 >声明：本文的示例仅用于演示相关的攻击原理 ## XSS XSS，即 Cross Site Script，中译是跨站脚本攻击；其原本缩写是 CSS，但为了和层叠样式表(Cascading Style Sheet)有所区分，因而在安全领域叫做 XSS。 XSS 攻击是指攻击者在网站上注入恶意的客户端代码，通过恶意脚本对客户端网页进行篡改，从而在用户浏览网页时，对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。 攻击者对客户端网页注入的恶意脚本一般包括 JavaScript，有时也会包含 HTML 和 Flash。有很多种方式进行 XSS 攻击，但它们的共同点为：将一些隐私数据像...
阮老师在其推特上放了一道题： ```js new Promise(resolve => { resolve(1); Promise.resolve().then(() => console.log(2)); console.log(4) }).then(t => console.log(t)); console.log(3); ``` 看到此处的你可以先猜测下其答案，然后再在浏览器的控制台运行这段代码，看看运行结果是否和你的猜测一致。 ## 事件循环 众所周知，JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。根据 [HTML 规范](https://www.w3.org/TR/html5/webappapis.html#event-loops)： >To coordinate events, user interaction, scripts, rendering,...
### 前言 >本文源码分析基于 v2.2.0 以及本文 demo 的测试环境：Macbook Pro(Core i7 2.2G, 16G), Chrome 69，React 16.4.1 从[文档](https://github.com/clauderic/react-tiny-virtual-list)来看，该库支持横向和纵向两个方向的滚动(通过 `scrollDirection` 属性设置，默认是垂直方向)，我们选择 **垂直方向** 来分析。 另外有两个需要说明的一个属性是 `itemSize` 和 `estimatedItemSize`。`itemSize` 用于设置列表项的高度： * 可以是一个固定值，如 100，此时列表项是固高的 * 可以是一个包含所有列表项高度的数据，如 [50,...
**1、使用 `typeof bar === "object"` 判断 `bar` 是不是一个对象有神马潜在的弊端？如何避免这种弊端？** 使用 `typeof` 的弊端是显而易见的(这种弊端同使用 `instanceof`)： ``` let obj = {}; let arr = []; console.log(typeof obj === 'object'); //true console.log(typeof arr === 'object');...
在诸多 Vue.js 应用中, Lodash, Moment, Axios, Async等都是一些非常有用的 JavaScript 库. 但随着项目越来越复杂, 可能会采取组件化和模块化的方式来组织代码, 还可能要使应用支持不同环境下的服务端渲染. 除非你找到了一个简单而又健壮的方式来引入这些库供不同的组件和模块使用, 不然, 这些第三方库的管理会给你带来一些麻烦. 本文将介绍一些在 Vue.js 中使用第三方库的方式. ## 全局变量 在项目中添加第三方库的最简单方式是讲其作为一个全局变量, 挂载到 `window` 对象上: *entry.js* ``` window._ = require('lodash'); ```...
数制基础
>计算机的世界里只有二进制 二进制是一种数制。数制是"数据制度"的简称，是指数据的进位计数规则，表示数据逢几进位，又称"进位计数制"。如我们常用的十进制就是逢十进位，计算机中的二进制则是逢二进位。 在计算机系统中，我们常见的数制有四种：十进制、二进制、八进制和十六进制。当然，还有其它不常见的[数制](https://zh.wikipedia.org/wiki/%E8%BF%9B%E4%BD%8D%E5%88%B6)，如三进制、十二进制、二十进制以及六十进制等。不同的数制有不同的基数，在一种数制中所能使用的数码的个数称为该数值的基数。基数一般和数制类型对应，如二进制的基数为"2"，八进制的基数为"8"，十六进制的基数为"16"。每个进制都有一个最大数码和最小数码，前者通常是"基数"减1，后者通常是0。 由于有不同的数制，所以对于计算机程序中出现的任何一个"数"都需要专门的标志来进行区分。 ## 数制区分 ### 十进制(Decimal) 十进制是最常用的进制，基数是10，也就是说十进制有10个数字符号：0、1、2、3、4、5、6、7、8、9。**十进制数的标志为 D**，如(1250)D，也可用下标"10"来表示，如(1250)10。 ### 二进制(Binary) 如上文所说，计算机的世界里只有二进制。二进制是计算机运算时所采用的数制，基数是2，只有0和1两个数字符号。**二进制的标志位 B**，如(1001010)B，或者用下标"2"来表示，如(10011)2。 ### 八进制(Octal) 八进制的基数是8，其有8个数字符号：0、1、2、3、4、5、6、7。**八进制的标志位 O 或者 Q**，如(4563)O(大写的字母 O)、(4563)Q，或者用下标"8"来表示，如(4563)8。在 JavaScript 中，会把前缀为0(数值零)的数值解释为八进制，如123是十进制，0123则是八进制。 ### 十六进制(Hexadecilma) 十六进制的基数是16，其有16个数字符号：0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F。可以看到，16个数字符号除了十进制中的10个数外，还有6个英文字符(不区分大小写)，这6个英文字符分别代表十进制中的10至15。**十六进制数的标志位 H**，如(4563)H，或者用下标"16"来表示，如(4563)16。在 JavaScript 中，会把前缀为0(数值零)和 x...
## 引言 在 JavaScript 中有两条不成文的说法： * 一切皆对象 * 函数是一等公民 因而函数不仅是一等公民，也是具有属性的特殊对象。这一点，也可以从原型链上得到佐证： ```js function t () {} t.__proto__ === Function.prototype // true t.__proto__.__proto__ === Object.prototype // true ``` 函数是继承自 `Object` 的，因而函数也具备 `toStirng`、`valueOf`...
### CatalystInstanceImpl [前文](https://github.com/dwqs/blog/issues/75)提到了 `CatalystInstance` 是一个接口类型，但其继承了 `JSBundleLoaderDelegate` 接口，后者定义了不同的 js bundle 加载方法声明： ```java // reac-native/ReactAndroid/src/main/java/com/facebook/react/bridge/JSBundleLoaderDelegate.java // ... public interface JSBundleLoaderDelegate { // 从 Android assets 加载 bundle void loadScriptFromAssets(AssetManager assetManager, String assetURL,...
对于一个项目，常用的一些npm简单命令包含的功能有：初始化一个文件夹( [npm init](https://docs.npmjs.com/cli/init) )，下载npm模块( [npm install](https://docs.npmjs.com/cli/install) )，创建测试( [npm test](https://docs.npmjs.com/cli/test) ) 和自定义脚本( [npm run](https://docs.npmjs.com/cli/run-script) )。但是，进一步了解一些 npm 的使用技巧可以彻底改变你的日常开发任务。 **注:** 如果你需要关于初学npm的参考，可以参阅我们的[初学者指南](https://www.sitepoint.com/beginners-guide-node-package-manager/)。如果你对 npm 和 Yarn 之间的差异感到困扰，可以参阅我们发表的文章：[Yarn vs npm:你需要知道的一切](https://www.sitepoint.com/yarn-vs-npm/) ## 1. 获取帮助 [npm 文档](https://docs.npmjs.com/) 和...