Blog
Blog copied to clipboard
hankzhuo
📖 like to share tech-knowledge
这篇文章主要讲的是分析 react-router 源码，版本是 **v5.x**，以及 SPA 路由实现的原理。 单页面应用都用到了路由 router，目前来看实现路由有两种方法 hash 路由和 H5 History API 实现。 而 react-router 路由，则是用到了 history 库，该库其实是对 hash 路由、history 路由、memory 路由（客户端）进行了封装。 下面先看看 hash 和 history 是怎样实现路由的。 # hash...
## 前言 同样一个功能，可以用很多方法来实现，有时候由于项目时间紧张，导致很多时候只是实现了功能，往往忽视了代码质量。下面几种代码重构方法，以便大家可以写出更漂亮的代码。本文内容是我的读书笔记，摘自《Javascript设计模式与开发》。 ### 一，提炼函数 var getUserInfo = function(){ ajax( 'http:// xxx.com/userInfo', function( data ){ console.log( 'userId: ' + data.userId ); console.log( 'userName: ' + data.userName ); console.log( 'nickName: '...
## 简介 本篇文章讲解JavaScript 中垃圾回收机制，内存泄漏，结合一些常遇到的例子，相信各位看完后，会对JS 中垃圾回收机制有个深入的了解。 ## 内存生命周期 首先，不管什么程序语言，内存生命周期基本是一致的： - 分配你所需要的内存 - 使用分配到的内存（读、写） - 不需要时将其释放归还 在所有语言中第一和第二部分都很清晰。最后一步在低级语言中(C语言等)很清晰，但是在像JavaScript 等高级语言中，这一步是隐藏的、透明的。因为JavaScript 具有**自动垃圾收集机制**（Garbage collected ）。在编写 JS 时，不需要关心内存使用问题，所需内存分配以及无用内存的回收完全实现了自动管理。 ## 内存泄漏 内存泄漏（memory leaks），什么情况下回导致内存泄漏？可以简单理解为有些代码本来要被回收的，但没有被回收，还一直占用着操作系统内存，从而越积越多，最终会导致内存泄漏（可以理解为，内存满了，就溢出了）。 ## 管理内存（Memory Management） 分配给web浏览器的可用内存数量通常要比分配给桌面应用程序少。这样做的目的主要是处于安全方面考虑，目的是防止运行JS 的网页耗尽全部系统内存而导致系统崩溃。内存限制问题不仅会影响给变量分配内存，同时还会影响调用栈以及在一个线程中能够同时执行的语句数量。...
## 一，同步和异步区别？ 相信大家在工作过程中，肯定有或多或少听说过同步和异步。那么同步和异步到底是什么呢？它们之间有什么区别？举个栗子，煮开水，同步就是把水放上去烧，得一直等水开，中途不能做其他事情。而异步，则是把水放上去烧，让水在烧，你可以玩手机看电视，等水开了把火关掉。同样的，代码中也是一样，同步是现在发生的，异步是未来某个时刻发生的。 同步代码： // 烧开水 function boilWater() { var water; while(water_is_boiled) { // search } return water; } var boiledWater = boilWater(); // 做其他事情 doSomethingElse(); ## 二，JS 运行机制 在介绍异步编程前，先介绍下JavaScript运行机制，因为JS...
## 前言 设计模式几十种，阅读了《JavaScript设计模式与开发实践》这本书后，个人感觉js就是围绕对象来设计的，发现日常写代码能用上的并不多，下面是常用的几种设计模式。 ## 模式列表 - 单例模式 - 策略模式 - 模板方法模式 - 职责链模式 - 发布订阅模式 ## 设计模式 ### 单例模式 单一模式的核心是确保只有一个实例，并提供全局访问，在 JS 开发中，经常把用一个对象包裹，这样减少了全局变量的污染，比如 var a = {}。 普通写法: ``` javascript //...
这是分析 redux 源码系列第一篇。 下面是 Redux **版本4.0.1** 源码的解读。 ## `createStore` > createStore(reducer, [preloadedState], enhancer) `createStore` 方法接受三个参数，第一个参数为 `reducer`，第二个参数是 `preloadedState` （可选），第三个是参数是 `enhancer`。返回一个 对象 `store`。`store` 中包含方法 `dispatch`、`getState`、`subscribe`、`replaceReducer`、`[$$observable]`。 参数 `reducer` 有可能是一个 `reducer`，如果有个多个 `reducer`，则通过 `combineReducer` 函数执行后返回函数作为...
上一篇文章里，action 都是同步的，也就是说 dispatch(action)，经过中间件，更新得到 state 是同步的。 下面介绍几种 action 是异步执行的。 ## `redux-thunk` redux-chunk 是 redux 的一个中间件 middleware，核心是创建一个异步的 action。 具体是怎么实现的呢？首先了解一个概念，什么是 thunk? ### `thunk` thunk 是一个函数，函数内有一个表达式，目的是为了延时执行。 ```js let x = 1 + 2; let...
# 从现实中例子理解 Redux 第一次看 redux 文档时候，说实话我是看的比较抽象的，比如 `Action、 dipatch、Reducer、Store` 等概念，对于刚入 React 全家桶，这些概念会让人觉得有点绕。 但它太棒了，它是 React 全家桶里很重要的组成部分，如果你项目中使用 React 技术栈（当然 React 与 Redux 不是绑定关系），那么 Redux 思想是必须要了解下，当你使用过一段时间时候，真的会被其思想感染，只能说这些库的作者是真的强，给他们点赞。 偶然间，在国外技术论坛看到一些文章，把 Redux 解释的非常通俗易懂，把 Redux 与现实中例子结合起来，构成了非常清晰的、完整的一套逻辑。 ## Redux 是什么...
## 前言 由于 CSS3 的推出，让有些动画不在以 JS 来实现，仅仅依靠 CSS 就可以实现许多动画效果。提高了性能同时，又增加了很多趣味性。 接下来我会持续更新大家常用到的CSS效果，供大家学习。。。 ## 例子 ### 一，皮球掉地上反弹起来 [效果](https://jsbin.com/libijekice/1/edit?html,css,output) // html //css @keyframes bounce { 60%, 80%, to { transform: translateY(400px); animation-timing-function: ease; }...
## 引言 promise我看了好机会，但做题时候都会出错，后来我知道学一个知识点，光看不动手敲代码是不够的。下面几道题做完，真的受益匪浅，题目大部分来自网上，文章后面会提到。 首先，promise 基础知识可以看 mdn。 > [promise-mdn](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) ## 题目 ### 第一题 const request = (url) => { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET',...