Blog
Blog copied to clipboard
mengtuifrontend
芦叶满汀洲，寒沙带浅流。二十年重过南楼。柳下系船犹未稳，能几日，又中秋。 黄鹤断矶头，故人今在否？旧江山浑是新愁。欲买桂花同载酒，终不似，少年游。
# redux 原理 单一数据源，即项目的数据源只有一个，整个应用的数据都保存在一个js对象中，这样我们的页面之间或者不同组件之间可以进行数据的共享。redux的核心就是store，redux中的 `createStore` 方法会根据 `reducer` 返回store，而且 `createStore` 暴露出一些方法方便我们使用 * `getState` 获取store中的数据 * `dispatch` 触发一个action * `subscribe` 注册一个监听，当store发生变化的时候调用 * `replaceReducer` 更新当前store中的reducer ## createStore 直接上源码，已经在源码中做了注释 ```js function createStore(reducer, preloadedState, enhancer)...
# 了解 CSS 变量 如果用过 less\scss\stylus 等预处理 CSS 语言，那么你就不会对使用变量来简化我们的 CSS 开发工作感到陌生。但是你知道吗？CSS 现在也支持原生的变量了: `var()`。 ## 基本用法 CSS 原生的变量如何使用？我们来看下： ```css .selector { --size: 16px; font-size: var(--size) } ``` 这个简单的例子中，`.selector` 的 `fontSize` 值就是...
# 本地存储方案介绍 —— KV Storage 介绍 上一篇文章我们提到了 `localStorage` 和 `localForage`，我们了解了 LS 的问题所在，以及社区中通常使用的替代 LS 的解决方案。现在，由 WICG（Web Incubator Community Group）提出了一个新的提案，一起来看看这份“真香”。 ## KV Storage KV Storage (Key Value Storage 简称，文章且称之为 KVS) 的出现是因为目前越来越多的应用都在依赖和使用 `localForage`...
# 本地存储方案介绍 —— 现有方案 > 文章将从 LocalStorage 开始讲起，聊到 localForage，在后续的篇章中将会说一说新的存储方案。 本地存储功能在我们站点应用中十分常见，`LocalStorage`，`SessionStorage` 等都是大家经常使用的。然后目前也有很多应用选择避免使用 LS、SS，而改用基于本地数据库（`indexedDB`, `WebSQL` 之类）的解决方案，这是为什么呢？ 为什么好好的，大家都不使用 `LocalStorage/SessionStorage` 了？ ## LS 的弊端 LS 一推出就以其简单的 API 大受欢迎。基于 [storage 规范](https://www.w3.org/TR/webstorage/#storage)(嗯，这个不是 HTML5 的内容)，LS 拥有十分简单的 API：...
# ECMAScript 略述 前言：Javascript 是一门灵活的编程语言，吸引着全世界的程序员为其构建整个生态，在 Github 语言使用榜单上，JS 一直是名列前茅。如此热门的一门语言，它自身的演化又是如何的呢？今天我们就来聊一聊，JS 的演进之路。我们会聊到 JS 与 ES 的关系，ES 规范、规范的制订过程等。最后，希望大家能够通过本篇文章了解到 ECMAScript 的一些知识。 ## ECMAScript 与 Javascript ###### ECMAScript 与 Javascript 是什么关系？这个可能是很多非前端行业的人都很好奇的一个问题，这里我们先来解答一下。 首先我们要了解到的是，ECMAScript 它是一套语言规范，即 ECMA-262 规范，制订该规范的组织叫 TC39。...
# 漫聊前端缓存 缓存对于我们前端来说是一个用于提高网页性能非常重要的工具。简单的“缓存”两字，其中包含了许多有趣的知识，其中对于缓存细粒度的讨论也一直不绝于耳。 目前见过的缓存细粒度分为三类： - 以全部文件为最小单位； - 以单独文件为最小单位； - 以字符为最小单位。 下面让我们一起看看这三种方案的到底是如何处理生产环境下的缓存的。 ## 以全部文件为最小单位 这种做法相当的粗暴而且历史悠久，无论开发过程中的文件有多少个，整个打包成一个文件后在页面中引用。这样做带来的好处是可以最大的减少对资源的请求数，至今仍使用这种方法进行线上缓存处理的网站还有很多（特别是某些后端框架自带合并资源功能时）。然而这种方案的缺点也十分明显。 由于太粗暴，开发环境中的一个文件被修改，就会导致整个页面的资源都将失效。客户端不得不因为一小部分的修改，而重新下载所有的内容，这是移动互联网大环境下不能被容忍的（流量就是钱，客户也是，公司也是）。 另外一点是对于开发人员来说维护困难。由于每个页面的业务逻辑都不相同，所以每个页面引用的资源文件也不会相同。但是当一个整站共用的文件出现了修改，那么整站的资源内容都要重新打包上传，如果不是某些框架或者工具为你处理的话，相信大家都会疯掉。 ### 改良版本一 —— 一分为二 针对上述两个硬伤，马上出现了方案的改良版。将整站通用的资源打包一份，页面级的资源打包一份。页面上引用的资源数不再是一，而是二了。 改良后的方案，在遇到整站共用的内容发生修改时，仅仅重新打包整站共用资源即可，大大降低了维护成本。而遇到页面级逻辑发生修改时，用户也仅仅是重新下载新的页面级资源，相比以前好得多了。 ### 改良版本二 —— 三层架构 所谓的三层架构，即将资源划分成 `通用底层 - 通用组件层...
# Chrome 的新功能预览 - TWA > 在 APP 开发中，通常都会使用 `webview` 组件承载一个网页应用。最近 Chrome 团队宣称安卓 APP 可以直接使用 Chrome 浏览器全屏打开一个网页了。这种技术被称为 `TWA (Trusted Web Activity)` ## 为什么需要 TWA TWA 基于安卓应用程序和网页站点属于同一开发者的信任前提，提供在应用内贡献 Chrome 浏览器中站点的资源，包括 `cookie` 等。...
# 认识 Markdown 语法 在介绍 Markdown 之前，我们先来看一下同样是标记语言的，广为人知的，万众瞩目的 HTML。 HTML 的全称是超文本标记语言 (Hypertext Markup Language)，它以标记表示区块，可以承载文本、图片、流媒体等介质。一段普通的 HTML 段落，看起来是这样的： ```HTML 请继续往下看，千万不要离开哦。 ``` 在非技术同学的眼里，虽然也能看得懂这段代码大致表达的意思，但是还是缺少一些可读性。所以在准备写一篇博客时，常见的是从 word 编写完后，将样式带进富文本编辑器中，而不是打开`源码`按钮直接进行编辑，因为大多数人对 HTML 还是觉得难以下手。针对这种情况，有一种更简单的方式可以推荐给这类人群，那就是 `Markdown`。同样实现上面的段落，Markdown 的语法看起来是这样的： ``` 请继续往下看，千万不要[离开](http://xiaohuangwang.com)哦。 ``` Markdown 就是这么简洁！通常我们在...
Metadata
Owner
Metadata
芦叶满汀洲，寒沙带浅流。二十年重过南楼。柳下系船犹未稳，能几日，又中秋。 黄鹤断矶头，故人今在否？旧江山浑是新愁。欲买桂花同载酒，终不似，少年游。