Redux 源码解读

redux

已经快一年没有碰过 React 全家桶了,最近换了个项目组要用到 React 技术栈,所以最近又复习了一下;捡起旧知识的同时又有了一些新的收获,在这里作文以记之。

在阅读文章之前,最好已经知道如何使用 Redux(不是 React-Redux)。

一、准备环境

为了更好的解读源码,我们可以把源码拷贝到本地,然后搭建一个开发环境。Redux 的使用不依赖于 React,所以你完全可以在一个极为简单的 JavaScript 项目中使用它。这里不再赘述开发环境的搭建过程,需要的同学可以直接拷贝我的代码到本地,然后安装依赖,运行项目。

1
2
3
4
5
$ git clone https://github.com/zhongdeming428/redux && cd redux

$ npm i

$ npm run dev

Vue 异步组件

最近在做一个 Vue 项目的时候,突然发现了一个有意思的知识点。

有几位客服反馈说在点击某个链接跳转的时候,老是没得反应,导致选不了选项。我就很奇怪,内网环境下是没有问题的,所以代码出问题的可能性不大,怎么外网就有这种问题呢?后来仔细看了一下才发现,原来是运维那边出了点纰漏导致外网有些客户的 JavaScript 资源加载不出来,进而导致无法跳转。这里涉及到了 Vue 的异步组件知识,只有当切换到某个组件时,其单独打包的资源才会被加载。不同于统一打包的情况,这样做可以利用代码切割减少首屏加载时的资源大小,能够提升一定的加载速度,优化用户体验。接下来就自己重新做一下这个异步组件。

以下命令行操作均在 Linux 环境下进行。

一、搭建项目

先切换到你的项目根目录下,此时应该是一个空文件夹。

然后用 npm 命令初始化,添加具有一些默认选项的 package.json 文件。

1
$ npm init -y

然后开始创建必要的文件:

1
$ sudo touch .babelrc index.html

第一个 Servlet

简单记录一下我从头写一个 Servlet 的过程。

我安装的是 Tomcat 7 版本,在 Ubuntu 18.04 上运行,IDE 为 Intellij IDEA。

首先创建一个 Java Web 项目,进入你的 IDEA,然后点击 Create New Project。如下图所示:

创建项目.png

六种排序算法的JavaScript实现以及总结

最近几天在系统的复习排序算法,之前都没有系统性的学习过,也没有留下过什么笔记,所以很快就忘了,这次好好地学习一下。

首先说明为了减少限制,以下代码通通运行于Node V8引擎而非浏览器,源码在我的GitHub,感兴趣的话可以下载来然后运行试试。

为了方便对比各个排序算法的性能,这里先写了一个生成大规模数组的方法——generateArray

1
2
3
4
5
6
7
exports.generateArray = function(length) {
let arr = Array(length);
for(let i=0; i<length; i++) {
arr[i] = Math.random();
}
return arr;
};

只需要输入数组长度,即可生成一个符合长度要求的随机数组。

Vim 基本命令入门

_ _20180628165722
最近在学习 Linux,前面的基础知识学习了一下,进入了 Vim 的学习环节。感觉这个编辑器还是可以的,有特色,鼠标都不用,蛮炫酷。对于基本
的使用来讲还是很方便的。下面是一些我的学习笔记,大致就是一些常用的命令吧。这个博客就是使用 Vim 写的一个 Markdown 文档,就当是给自己练练手,加深学习的印象了。

前端工程师使用 Deepin 笔记

_ _20180704114914

笔者是一枚前端开发,在学习 Linux 的时候碰到了一个问题 —— 怎么练手?因为自己电脑上面装的是 Windows 系统,所以学习 Linux 的时候没办法进行练习,而敲指令是学习 Linux 最高效的途径,这就需要我装一个 Linux 虚拟机或者双系统了。最开始的时候我用 VMWare 的虚拟机装了个 Ubuntu,后来觉得 Linux 好像确实好用,虚拟机又太耗资源,再加上我的 Windows 越来越卡顿,我决定装一个双系统。

在 Deepin 中搭建 GitLab

入职半个月了,一直在接受业务知识以及企业文化知识的培训,下周终于要开始上岗入手项目了。由于公司使用自己搭建的 GitLab 服务作为项目版本控制器,所以我决定学习一下 GitLab,由于这货跟 GitHub 都是基于 Git,所以代码管理方面没有啥区别,主要学习的是 GitLab 服务的搭建。

一、安装步骤

输入一下命令更新源,然后安装依赖 openssh-serverca-certificates

1
2
$ sudo apt-get update
$ sudo apt-get install -y openssh-server ca-certificates

如果需要邮箱提醒服务,还需要安装 postfix,当然你也可以安装其他邮件服务。

浅谈 JavaScript 中的继承模式

最近在读一本设计模式的书,书中的开头部分就讲了一下 JavaScript 中的继承,阅读之后写下了这篇博客作为笔记。毕竟好记性不如烂笔头。

JavaScript 是一门面向对象的语言,但是 ES6 之前 JavaScript 是没有类这个概念的。即使 ES6 引入了 class,也只是基于 JavaScript 已有的原型继承模式的一个语法糖,并没有为 JavaScript 引入新的面向对象的继承模型。

但是 JavaScript 是一门非常灵活的语言,为了实现类和继承,JavaScript Developers 已经把原型玩出了花,下面介绍一下 JavaScript 中的继承模式。

JavaScript 中已有的继承模式包括以下六种:

  • 类式继承
  • 构造函数式继承
  • 组合式继承
  • 原型式继承
  • 寄生式继承
  • 寄生组合式继承

基于 Webpack 4 搭建 Vue 开发环境

自从工作之后,就已经很久没有写过博客了。时间被分割得比较碎,积累了一段时间的学习成果,才写下了这篇博客。

之前有写过 Webpack4 的文章,但是都比较偏入门,唯一的一篇实战篇 —— 基于Webpack搭建React开发环境,也是比较简单的,没有涉及到 CSS 抽取,第三方库打包等功能,这篇文章相对而言比较深入。但由于作者水平有限,难免存在谬误之处,欢迎大家指正。

还有没入门的童鞋可以参考我之前的文章:

一、初始化项目

在命令行中敲入如下命令:

1
$ mkdir Webpack-Vue && cd Webpack-Vue && npm init -y