zp1996323-CSDN博客

原创 dva源码解析（一）

写在前面dva是蚂蚁金服推出的一个单页应用框架，对redux，react-router，redux-saga进行了上层封装，没有引入新的概念，但是极大的程度上提升了开发效率；下面内容为本人理解，如有错误，还请指出，不胜感激。redux的痛苦redux的优点很多，痛点也有，比如异步控制，redux-saga的出现使得异步操作变得优雅，但是基于redux-saga不得不承认的一点就是开发过程实在是太麻烦

2017-06-16 00:34:45 7783

原创 koa源码

写在前面本文将会大家来看下koa的源码，当然本文需要大家了解koa的中间件机制，如果大家之前没有了解过其实现原理，可以关注下这篇文章。 koa的源码非常的精简，与express不同，koa只是为开发者搭起了一个架子，没有任何的功能，包括路由，全部由中间件实现；下面就来看下koa的实现：koa创建应用时，一般都会利用app.listen指定一个端口号，这个方法的本质就是http.createServ

2017-06-02 18:13:28 672

原创 koa中间件机制详解

koa koa是由express原班人马打造的一个更小、更富有表现力、更健壮的web框架。在我眼中，koa的确是比express轻量的多，koa给我的感觉更像是一个中间件框架，koa只是一个基础的架子，需要用到的相应的功能时，用相应的中间件来实现就好，诸如路由系统等。一个更好的点在于，express是基于回调来处理，至于回调到底有多么的不好，大家可以自行搜索来看。koa1基于的co库，所以ko

2017-04-22 16:41:57 2342 1

原创手动实现jsonwebtoken

写在前面本文会到你了解jwt的实现原理，以及base64编码的原理。同时本人也简单的实现了一下jwt的生成，点这里。jwt是什么本质上它是一段签名的 JSON 格式的数据。由于它是带有签名的，因此接收者便可以验证它的真实性。同时由于它是 JSON 格式的因此它的体积也很小。 * JSON Web Token (JWT)是一种开放标准（RFC 7519），其中定义了一种紧凑 (compac

2017-04-13 14:57:26 2541

原创理解async

写在前面本文将要实现一个顺序读取文件的最优方法，实现方式从最古老的回调方式到目前的async，也会与大家分享下本人对于thunk库与co库的理解。实现的效果：顺序读取出a.txt与b.txt，将读出的内容拼接成为一个字符串。同步读取const readTwoFile = () => { const f1 = fs.readFileSync('./a.txt'), f2 = f

2017-03-14 13:35:10 544

原创对react技术栈的一些理解

目的本篇文章主要帮助大家了解下react技术栈相关的概念，以及为什么我们需要引入这些，他们能解决什么问题。React为什么选择react，而不是vue2vue2的优点vue1没有加入虚拟DOM，做服务端渲染很难，所以vue2引入了虚拟DOM的机制，而且由于vue2的响应式原理，所以天然的就比react的性能好，react的更新是通过顶层组件的state变化触发整个组件的重新渲染，而vue2由于其是通

2017-02-28 16:22:20 3134 1

原创理解redux

redux为什么引入redux以react来说，state可以包含内部的状态以及业务数据，对于一个复杂的应用来说，state非常难以管理，一个model的变化可能引起另一个model的变化…依次下去，造成了难以维护的情况，别人很难一下子摸透你的state到底是怎么变得？所以需要引入一个东西来做数据管理，使数据变化变得清晰，redux做的就是这件事情。假如说react是士兵的话那么redux就是将军，

2017-02-14 20:40:01 1018

原创给你的密码加盐

写在前面本文描述了本人，对于数据库中如何保存密码的认识过程。从最简单的明文保存到密码加盐保存，下面与大家分享下：第一阶段最开始接触web开发时，对于用户表的密码基本是明文保存，如：username | password---------|----------zp1996 |123456zpy |123456789这种方式可以说很不安全，一旦数据库泄漏，那么所以得用户信息就会被泄漏

2017-01-30 13:46:58 17555 1

原创窥探react事件

写在前面本文源于本人在学习react过程中遇到的一个问题；本文内容为本人的一些的理解，如有不对的地方，还请大家指出来。本文是讲react的事件，不是介绍其api，而是猜想一下react合成事件的实现方式遇到的问题class EventTest extends Component { handleParentClick(e) { console.log('click paren

2017-01-08 20:04:37 568 1

原创窥探zepto的事件模块

写在前面通过本文，您可以了解zepto的事件模块，$(selector).on之后到底发生了什么样的事情，如何实现的事件委托【$(selector).delegate】，如何实现的自定义事件等问题。由于篇幅有限，移除事件部分，代码没有贴出，大家可以看这里（完整版）。先来看下全部API（略去了off等移除事件方法）：$.proxy$.proxy(fn, context)，用于改变函数的上下文，实现柯里

2016-12-19 12:56:37 1317

原创自己实现MVVM（Vue源码解析）

前言本文会带大家手动实现一个双向绑定过程（仅仅涵盖一些简单的指令解析，如：v-text，v-model，插值），当然借鉴的是Vue1的源码，相信大家在阅读完本文后对Vue1会有一个更好的理解，源代码放到了github，由于本人水平有限，理解不到位的地方还请大家指出。MVVMMVVM使开发可以更加关注于数据，减少了很大的工作量，也使代码可读性，可维护性更高，MVVM核心的思想就是视图是状态的函数：Vi

2016-12-10 14:26:57 3640

原创跨域解决方案大全

什么是跨域注：本文完整示例地址先来说一个概念就是同源，同源指的是协议，端口，域名全部相同。同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略是处于对用户安全的考虑，如果非同源就会受到以下限制：cookie

2016-10-25 19:05:01 7909 2

原创利用express+socket.io实现简易版聊天室

写在前面最近由于利用node重构某个项目，项目中有一个实时聊天的功能，于是就研究了一下聊天室，在线demo|源码，欢迎大家反馈。这个聊天室的主要利用到了socket.io和express。这个聊天室支持群聊，私聊，支持发送图片（PS：大家在体验时最好开启两个浏览器，自问自答）。下面就来和大家分享下实现过程：WebSocket HTML5一种新的协议。它实现了浏览器与服务器全双工通信。为了更好的

2016-10-21 10:17:34 2042

原创自己动手撸个模板引擎（50行左右）

写在前面模板的诞生是为了将显示与数据分离，模板技术多种多样，但其本质是将模板文件和数据通过模板引擎生成最终的HTML代码。目前有着很多这种模板引擎，诸如Node的ejs，jade，PHP的Smarty。当然在用过这么多的模板引擎后，也有着自己实现一个简易模板引擎的冲动。于是今天就实现了一个简单的模板引擎，这个模板引擎非常简单，并不会涉及到语法分析，词法分析等编译原理相关知识，做的仅仅是将模板的js代

2016-09-26 19:56:35 646

原创 Vue的缓存算法—LRU算法

最近在看Vue的源码，不得不说的是，Vue的源码十分优雅简洁，下面就来分享下Vue的缓存利用的算法LRU算法。LRU算法LRU是Least recently used的简写，主要原理是根据历史访问记录来淘汰数据，说白了就是这个算法认为如果数据被访问过，那么将来被访问的几率也高。其存储结构是一个双链表，最近被访问到的放在双链表的尾部，头部放的就是最早被访问到数据。关于算法的具体流程，可以来看下这个，这

2016-09-24 15:38:18 1675

原创 mac下mysql修改默认密码

今天给mac安装了mysql，安装过程非常的顺利，但是在用一个可视化工具进行连接时，需要输入密码，网上大部分说mysql的密码为空，结果输入后会报错：ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)，尝试密码为rootERROR 1045 (28000): Access denied

2016-09-18 13:10:40 2841

原创 img的间隙

*{ padding: 0px; margin: 0px;}.test{ border: 1px solid red; width: 600px;}<div class="test"> <img src="test.jpg" /></div>上述代码产生的效果如图所示，但是另人感到惊奇的是，img与div之间存在着一个间隙，这个间隙是怎么产生的？应该

2016-09-03 20:56:58 548

原创 Centos7下启用端口

今天写了一下node的小demo，于是想放到阿里云服务器上，但是访问时却发生了错误。考虑了下，觉得问题在于端口号上，我写的nodedemo是监听的3000端口，然而linux下有防火墙默认只有80端口开放，于是尝试了下将服务器的3000端口打开，期间还是遇坑不少，下面就梳理下整个过程：关闭防火墙网上的大部分资料都是用iptables防火墙的，但是阿里云的centos 7默认防火墙是firewall。

2016-08-27 20:24:56 33206 1

原创 Centos 7下安装node.js

今天买了一个阿里云的学生服务器，系统为Centos 7，做为一个前端学习者，必不可少的就是给服务器安装Node，作为linux小白的我，期间还是与坑不少，这里就来记录一下安装的过程：安装nodeNode的安装需要依赖很多，如gcc等，首先我们需要将这些安装成功，用rpm命令查看下，果然我们并没有gcc等，所以要用yum进行安装：yum -y install gcc gcc-c++ kernel-de

2016-08-23 20:06:31 526

原创 Node之Event模块

写在前面事件的编程方式具有轻量级、松耦合、只关注事务点等优势，在浏览器端，有着自己的一套DOM事件机制，其中含包括这诸如事件冒泡，事件捕获等；然而Node的事件机制没有事件冒泡等，其原理就是设计模式中的观察者模式。Node很多的模块继承这个事件模块，下面我们就来根据源码来学习下其API，做到知其然更知其所以然。引入模块const EventEmitter = require("events");c

2016-08-16 16:09:22 1649

原创模板引擎Jade

前言：node.js的模板引擎有多种，如：ejs，Handlebars，jade。一开始首先学习了ejs，但是发现其有一个很大的弊端，那就是它不能继承（由于之前用的全部是thinkphp的模板，所以用起来非常别扭，只能进行include，而不能extend），于是转为jade，将html做了一层抽象的模板引擎。安装jade利用npm全局安装：$ npm install jade --global由于

2016-08-02 22:32:19 1359

原创 mac下安装MongoDB

最近，由于我正在学习node.js，node.js进行交互的数据库，大部分的资料中都是采取的MongoDB，对于怎么安装MongoDB，网络上太多的资料，但是大部分的资料可能有些过时，所以今天就自己来整理了下安装的过程。首先在MongoDB的官网上下载taz文件，然后将其进行解压，可以手动进行压缩，也可以使用命令行的方式，利用curl和tar命令。默认我们的文件夹被下载到了apple目录下，

2016-07-30 13:31:23 4118

原创小Tips—sublime使Handlebars高亮

今天在学习Handlebars模板时，将其后缀名保存为.hbs，但是发现sulime对这个后缀名的文件并不提供高亮支持，所以Google了下，找到以下解决方案：打开sublime的Browse Packages文件夹：在文件夹内找到html文件夹下的HTML.tmLanguage文件，在fileTyps的类型下添加上相应的后缀名即可。

2016-07-29 12:35:12 1227

原创基础排序算法优化

这篇博客，主要是最近学习算法导论时的一些收获，是关于直接选择排序，直接插入排序，二分查找的一些优化。直接选择排序数据结构课本上的直接选择排序就是每次选出一个最小的拿到最前面来：function StraightSelectSort (arr) { var i = 0, len = arr.length - 1, cur, k, j; for (; i

2016-07-24 16:02:04 383

原创求解矩阵的逆的代码实现

求解矩阵的你主要应用的是高斯—若尔当方法，其运算步骤如下所示：现在我们需要进行求解逆的矩阵是 {1237} \left\{ \begin{matrix} 1 & 3 \\ 2 & 7 \end{matrix} \right\} 首先我们需要在其右边添加一个单位矩阵： {12371001} \left\{ \begin{matrix} 1 & 3 &

2016-07-19 15:09:13 5823

原创连续子列最大和问题

今天，在做PAT的一道题时遇到了一道题，其要解决的问题是如何在一个序列中，找出其拥有最大和的连续子列，例如： {−2,11,−4,13,−5,−2}\{ -2, 11, -4, 13, -5, -2\}得出：{11,−4,13}\{ 11, -4, 13 \} 首先会想到的一种方法，很暴力很慢，那就是用两个循环将子序列的首尾确定然后在用一个循环进行∑\sum，于是就写出了如下代码：#incl

2016-07-19 12:44:55 441

原创 javascript中的作用域(词法and动态)

首先先说下在sublime下配置控制台，之前写过一篇在windows下配置的博客，今天来写一下在mac下配置的方法，步骤很简单： 1. 安装node，打开终端，输入命令node -v，如果出现版本号，那证明我js中作用域的问题可以说是老生常谈，个人认为js的作用域中存在着两种作用域，一种是词法作用域，一种是动态作用域。词法作用域词法作用域就是定义在词法阶段的作用域，也就是说由我们写代码时将变量写在

2016-07-04 11:53:26 438

原创归并排序详解

归并排序（MergeSort），正如其名字一样，需要我们先进行递归分解，在来进行合并。我们的数字以中间位置为界，左边与右边分别是已经排序好的数组，arr为[1, 15, 17, 20, 2, 13, 16, 19]，现在我们将其左边部分视为一个排序好的序列，右边部分视为一个排序好的序列，所以我们可以写出代码：void MergeArray (int* arr, int left, int mid

2016-06-23 13:42:18 399

原创最小编辑距离问题（Edition Distance）

注：这篇博客讨论的算法是怎样求解两个字符串的最小编辑距离，其目的是为了下一篇的虚拟DOM，来做一个预备工作，这里主要讨论的用LevenshteinDistanceLevenshtein Distance，主要通过的是动态规划。什么是最小编辑距离：给定一个长度为m和n的两个字符串，设有以下几种操作：替换（R），插入（I）和删除（D）且都是相同的操作。寻找到转换一个字符串插入到另一个需要修改的最小（操作

2016-06-17 22:54:57 7119

原创 History API

注：本文写的demo，全部在 demo地址，可以clone到本地，然后在localhost下打开。好下面我们进入正题：之前我在做分页的时候，全部采取的都是给页面后面加上参数的方式，如：第一页url地址为：http://www.lsgogroup.com/admin.php?s=/Article/index/p/1.html，第二页url地址为http://www.lsgogroup.com/admi

2016-05-25 11:51:25 532

原创 stacking context

注：本文参考自张鑫旭大神博客：http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/今天在sf社区中看到一个问题，在这里简单的还原一下：<!DOCTYPE html><html> <head> <meta charset="utf-8" />

2016-05-23 16:37:36 1055

原创 css中的baseline

这是css中的一个容易被人忽略的概念，今天在知乎上看到一个问题，这个问题应该是关于baseline，才去补习了一下关于baseline的知识，首先我来还原一下问题：<div style="position:absolute;left:0;top:0;background:black;color:white;font-size:24px;"> <span style="background:r

2016-05-19 22:57:26 16694 1

原创小Tips—为Apache 2.x添加压缩功能

压缩我们的静态资源可以减少HTTP响应的大小来减小响应时间，从我们浏览器中请求中我们可以看出浏览器对压缩的支持，根据Accept-Encoding:gzip, deflate, sdch，我用的是谷歌浏览器，其表示谷歌浏览器支持3中压缩方式，从响应头中可以看到我们选取的是哪中压缩方式，Content-Encoding，如果没有该字段，表明我们的服务器并没有执行相应的压缩操作。压缩在减小响应的同时，会

2016-05-13 21:43:59 437

原创 Event Loop

Event Loop是一种计算机系统的运行机制，在js这种单线程的语言中，其起着很重要的作用。console.log(1);setTimeout( () => console.log(2) );console.log(3);这个我们都很经常遇到，输出也是很容易想到是1,3,21,3,2，但是究竟为什么会这样呢？之前我往往会说js有一个执行队列，setTimeout内的函数被挂起到了执行队列的最后

2016-05-12 22:31:06 496

原创解析js面试题(上）

注：本篇博客的题目出自于博主，小平果118博客，题目地址：http://blog.csdn.net/i10630226/article/details/49765737，由于该博客并没有抛出来来答案和解析，我在这里以自己的理解来做一下这些题目。欢迎大家与我交流！下面进入正题，来看题目：1，以下表达式的运行结果是：["1","2","3"].map(parseInt)A.["1","2","3"]B.

2016-05-05 14:06:08 2549

原创动态规划—矩阵连乘问题

矩阵的连乘问题也可以像我们之前讲到过的矩阵的快速幂一样来进行一下优化，也就是减少我们乘的次数。假如我们现在有6个矩阵进行连乘，如A1(30∗35)A1 (30*35)，A2(35∗15)A2 (35*15)，A3(15∗5)A3 (15 * 5)，A4(5∗10)A4 (5 * 10)，A5(10∗20)A5(10*20)，A6(20∗25)A6(20*25)，这样的6个矩阵进行连乘的话，如果按

2016-04-17 22:34:49 1319

原创黄金分割法与Fibonacci法

最近在上一门最优化算法的课，于是就打算写一篇博客来将自己所学的知识做一个巩固，这两种方法都是用来选取函数的极值点，属于的一维搜索方法中的试探法，方式也是很简单那就是在值域[a,b][a, b]内选取两个点，通过两个值的函数值来缩小值域的取值范围下面我们来看一下用两种方法，怎么求出函数在区间[0,1][0,1]内的极大值点，容许误差为10−610^{-6}，函数图像呢如下：斐波那契法：var

2016-04-15 20:10:27 4545

原创设计模式—适配器模式

首先我们来看一下适配器是什么，在生活中有哪些适配器的列子呢？比如我们的国外电压为110V110V，而我们国家的电压为220V220V，这就造成了很多时候我们在国外带回来的电器不能够使用，这时我们就可以使用一下电源适配器，类比到软件开发中就是：适配器模式的作用是解决两个软件试题间的接口不兼容的问题，我们在以一个例子来解释一下，比如我们的公司A开发的客户端，公司B开发的类库，之前由于没有进行命名规则的统

2016-04-14 13:28:30 329

原创矩阵的快速幂

矩阵的应用的场景是计算矩阵A的n次幂，也就是为了加速AnA^n的过程，我们可以通过矩阵的结合律来使我们的矩阵次数减少从而来达到加速矩阵连乘的问题。我们通过一个例子来看一下，假如我们需要计算A6A^6的话，常规我们需要乘5次，但是我们要利用结合律来改进我们的连乘问题，(A∗A)∗(A∗A)∗(A∗A)(A*A)*(A*A)*(A*A)，这样一来我们只需要计算三次乘法就足够了，好那么我们将具体进行抽象，

2016-04-13 20:14:37 379

原创谈一谈float

float浮动，我们会常常用于我们的css布局中，提到浮动的行为，我们不得不提及一下BFC，在普通流（normal flow）中所有的盒子会参与一种格式上下文，这个盒子可能是块盒也可能是行内盒，块盒参与的是块级格式化上下文（Block Formatting Context），也就是我们所说的BFC；行内盒参与的是行内级格式化上下文（Inline Formatting Context.），也就是我们所

2016-04-09 16:49:35 540

空空如也

空空如也