blog
blog copied to clipboard
Pines-Cheng
技术博客
## 前言 [Taro](https://github.com/NervJS/taro) 是由凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。 使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、App 端等）运行的代码。实现 **一次编写，多端运行**。 关于 Taro 的更多详细的信息可以看官方的介绍文章 [Taro - 多端开发框架](https://aotu.io/notes/2018/06/07/Taro/index.html) ，或者直接前往 GitHub 仓库 [NervJS/taro](https://github.com/NervJS/taro) 查看 Taro 文档及相关资料。  Taro 项目实现的功能强大，项目复杂而庞大，涉及到的方方面面（多端代码转换、组件、路由、状态管理、生命周期、端能力的实现与兼容等等）多，对于大多数人来说，想要深入理解其实现机制及原理，还是比较困难的。 `Taro 技术揭秘`系列文章将为你逐步揭开...
`正则表达式 (regular expression)`是一个描述字符模式的对象。JavaScript的 `RegExp类` 表示正则表达式，String 和 RegExp 都定义了方法，后者使用正则表达式进行强大的**模式匹配**和**文本检索与替换**功能。 **JavaScript 的正则表达式语法是 Perl5 的正则表达式语法的大型子集**，所以对于有Perl编程经验的程序员来说，学习JavaScript 中的正则表达式是小菜一碟。 ## 定义 JavaScript中的正则表达式用 `RegExp对象` 表示，可以使用 RegExp() 构造函数来创建 RegExp 对象。 不过RegExp对象更多的是通过一种特殊的直接量语法来创建。就像通过引号包裹字符的方式来定义字符串直接量一样，正则表达式直接量定义为包含在一对斜杠 `(/)` 之间的字符，例如: ```javascript var pattern=/s$/; ``` 运行这段代码创建一个新的...
最近在做React 图片懒加载的，原本以为比较简单，轻轻松松就能搞定，结果碰到了一系列的问题，可谓是一波三折，不过经过这次折腾，对图片懒加载及相关的实现有了更深刻的了解，特此记录一下。 ## [jasonslyvia/react-lazyload](https://github.com/jasonslyvia/react-lazyload) 一开始的时候，没打算自己造轮子。直接在网上搜索到了 `react-lazyload` 的库，用上以后，demo测试也没问题，可是在商品列表却没生效。于是直接去看源码找原因。 图片懒加载一般涉及到的流程为：滚动容器 -> 绑定事件 -> 检测边界 -> 触发事件 -> 图片加载 ### 基本使用 ```javascript import React from 'react'; import ReactDOM from 'react-dom'; import LazyLoad from...
HTTP报文浅析
## 报文流（The Flow of Messages） HTTP 报文是在 HTTP 应用程序之间发送的数据块。这些数据块以一些文本形式的 `元信息(meta-information)`开头，这些信息描述了报文的内容及含义，后面跟着可选的数据部分。 HTTP 使用术语 流入(inbound) 和 流出(outbound) 来描述事务处理(transaction) 的方向。报文流入源端服务器，工作完成之后，会流回用户的 Agent 代理中。 HTTP 报文会像河水一样流动。不管是请求报文还是响应报文，所有报文都会向 下游(downstream)流动。所有报文的发送者都在接收者的上游 (upstream)。 ## 报文的语法(Message Syntax) HTTP 报文是简单的格式化数据块。每条报文都包含一条来自客户端的请求，或者一条来自服务器的响应。它们由三个部分组成：对报文进行描述的 `起始行(start line)`、包含属性的...
在实际的工作中，我们可能还有些疑惑，当有多个选择器作用在一个元素上时，哪个规则最终会应用到元素上？其实这是通过层叠机制来控制的，这也和样式继承(元素从其父元素那里获得属性值)有关。 ## 层叠 CSS 是 Cascading Style Sheets 的缩写，这暗示层叠（cascade）的概念是很重要的。在最基本的层面上，它表明CSS规则的顺序很重要，但它比那更复杂。什么选择器在层叠中胜出取决于三个因素（这些都是按重量级顺序排列的——前面的的一种会否决后一种）： - 重要性（Importance） - 特殊性（Specificity）也有译为 优先级 - 源代码次序（Source order） ### 重要性 #### !important 在CSS中，有一个特别的语法可以让一条规则总是优先于其他规则：!important。把它加在属性值的后面可以使这条声明有无比强大的力量。 > 注意: 重载这个 !important 声明的唯一方法是在后面的源码或者是一个拥有更高特殊性的源码中包含相同的 !important 特性的声明。 知道...
每天都有数以亿计的各种媒体对象经由 HTTP 传送，如图像、文本、影片以及软件程序等。HTTP 要确保它所承载的“货物”满 足以下条件: - 可以被正确地识别(通过Content-Type首部说明媒体格式，Content- Language 首部说明语言)，以便浏览器和其他客户端能正确处理内容。 - 可以被正确地解包(通过Content-Length首部和Content-Encoding首部)。 - 是最新的(通过实体验证码和缓存过期控制) - 符合用户的需要(基于Accept系列的内容协商首部) - 在网络上可以快速有效地传输(通过范围请求、差异编码以及其他数据压缩方法) - 完整到达、未被篡改(通过传输编码首部和Content-MD5校验和首部) ## HTTP 实体首部 HTTP 实体首部描述了 HTTP 报文的内容。HTTP/1.1 版定义了以下 10 个基本字体首部字段。 -...
> 连接管理是一个 HTTP 的关键话题：打开和保持连接在很大程度上影响着网站和 Web 应用程序的性能。在 HTTP/1.x 里有好些个模型：`短连接（short-lived connections）`, `持久连接（persistent connections）`, 和 `HTTP 管道（HTTP pipelining）`。 HTTP 的传输协议主要依赖于 TCP 来提供从客户端到服务器端之间的连接。  在早期，HTTP 使用一个简单的模型来处理这样的连接—— `短连接`。这些连接的生命周期是短暂的：每发起一个请求时都会创建一个新的连接，并在收到应答时立即关闭。 这个简单的模型对性能有先天的限制：**打开每一个 TCP 连接都是相当耗费资源的操作**。客户端和服务器端之间需要交换好些个消息。当请求发起时，网络延迟和带宽都会对性能造成影响。现代浏览器往往要发起很多次请求(十几个或者更多)才能拿到所需的完整信息，证明了这个早期模型的效率低下。 有两个新的模型在 HTTP/1.1 诞生了。首先是`长连接模型`，它会保持连接去完成多次连续的请求，减少了不断重新打开连接的时间。然后是 `HTTP...
> 好书强烈推荐 ## 密码学家的工具箱 - 对称密码 - 公钥密码 - 单向散列函数 - 消息认证码 - 数字签名 - 伪随机数生成器  ## Enigma密码机 推荐电影：模仿游戏 The Imitation Game (2014) ## 对称密码 ### DES 数据加密标准（英语：Data Encryption...
### 需求 公司出于自身隐私保护需要,不想把自己的代码开源到包管理区，但是又急需一套完整包管工具，来管理越来越多的组件、模块和项目。对于前端，最熟悉的莫过于npm，bower等；但是bower的市场兼容性明显没有npm强壮，加之commonjs规范的日益成熟。npm应该是前端包管理的不二选择。 公司对于搭建本地私有npm库有如下要求： 1. 私有包托管在内部服务器中 2. 项目中使用了公共仓库上的公共包，也使用了内部服务器上的私有包 3. 希望下载的时候，公共包走公共仓库，私有包走内部服务器的私有仓库 4. 服务器硬盘有限，希望只缓存下载过的包，而不是全部同步。 5. 对于下载，发布npm包有对应的权限管理，安装方便，配置简单，依赖少。 ### 关于sinopia？ [Sinopia](https://github.com/rlidwka/sinopia) 是一个零配置的私有的带缓存功能的npm包管理工具，作者是是[rlidwka](https://github.com/rlidwka)，一个大神，也是一只猫～ 往社区内贡献过很多代码，包括 jshttp, markdown-it 等等，也是 Node.js 核心代码库的活跃贡献者。 使用sinopia，你不用安装CouchDB或MYSQL之类的数据库，Sinopia有自己的迷你数据库，如果要下载的包不存在，它将自动去你配置的npm地址上去下载，而且硬盘中只缓存你现在过的包，以节省空间。 #### 为什么选择sinopia sinopia有以下几个优势值得关注： 1. 不同步拉取npm库，占据大量硬盘，没有硬盘被撑爆的问题；...