javascript
关注
分享
扫一扫
文章平均质量分 71
zp1996323
web开发养成中
展开
-
koa源码
写在前面本文将会大家来看下koa的源码，当然本文需要大家了解koa的中间件机制，如果大家之前没有了解过其实现原理，可以关注下这篇文章。 koa的源码非常的精简，与express不同，koa只是为开发者搭起了一个架子，没有任何的功能，包括路由，全部由中间件实现；下面就来看下koa的实现：koa创建应用时，一般都会利用app.listen指定一个端口号，这个方法的本质就是http.createServ原创 2017-06-02 18:13:28 · 703 阅读 · 0 评论 -
跨域解决方案大全
什么是跨域注：本文完整示例地址 先来说一个概念就是同源，同源指的是协议，端口，域名全部相同。 同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略是处于对用户安全的考虑，如果非同源就会受到以下限制：cookie原创 2016-10-25 19:05:01 · 7952 阅读 · 2 评论 -
自己动手撸个模板引擎（50行左右）
写在前面模板的诞生是为了将显示与数据分离，模板技术多种多样，但其本质是将模板文件和数据通过模板引擎生成最终的HTML代码。目前有着很多这种模板引擎，诸如Node的ejs，jade，PHP的Smarty。当然在用过这么多的模板引擎后，也有着自己实现一个简易模板引擎的冲动。于是今天就实现了一个简单的模板引擎，这个模板引擎非常简单，并不会涉及到语法分析，词法分析等编译原理相关知识，做的仅仅是将模板的js代原创 2016-09-26 19:56:35 · 660 阅读 · 0 评论 -
Vue的缓存算法—LRU算法
最近在看Vue的源码，不得不说的是，Vue的源码十分优雅简洁，下面就来分享下Vue的缓存利用的算法LRU算法。LRU算法LRU是Least recently used的简写，主要原理是根据历史访问记录来淘汰数据，说白了就是这个算法认为如果数据被访问过，那么将来被访问的几率也高。其存储结构是一个双链表，最近被访问到的放在双链表的尾部，头部放的就是最早被访问到数据。关于算法的具体流程，可以来看下这个，这原创 2016-09-24 15:38:18 · 1692 阅读 · 0 评论 -
模板引擎Jade
前言：node.js的模板引擎有多种，如：ejs，Handlebars，jade。一开始首先学习了ejs，但是发现其有一个很大的弊端，那就是它不能继承（由于之前用的全部是thinkphp的模板，所以用起来非常别扭，只能进行include，而不能extend），于是转为jade，将html做了一层抽象的模板引擎。安装jade利用npm全局安装：$ npm install jade --global由于原创 2016-08-02 22:32:19 · 1377 阅读 · 0 评论 -
Node之Event模块
写在前面事件的编程方式具有轻量级、松耦合、只关注事务点等优势，在浏览器端，有着自己的一套DOM事件机制，其中含包括这诸如事件冒泡，事件捕获等；然而Node的事件机制没有事件冒泡等，其原理就是设计模式中的观察者模式。Node很多的模块继承这个事件模块，下面我们就来根据源码来学习下其API，做到知其然更知其所以然。引入模块const EventEmitter = require("events");c原创 2016-08-16 16:09:22 · 1667 阅读 · 0 评论 -
javascript中的作用域(词法and动态)
首先先说下在sublime下配置控制台，之前写过一篇在windows下配置的博客，今天来写一下在mac下配置的方法，步骤很简单： 1. 安装node，打开终端，输入命令node -v，如果出现版本号，那证明我js中作用域的问题可以说是老生常谈，个人认为js的作用域中存在着两种作用域，一种是词法作用域，一种是动态作用域。词法作用域词法作用域就是定义在词法阶段的作用域，也就是说由我们写代码时将变量写在原创 2016-07-04 11:53:26 · 453 阅读 · 0 评论 -
利用express+socket.io实现简易版聊天室
写在前面最近由于利用node重构某个项目，项目中有一个实时聊天的功能，于是就研究了一下聊天室，在线demo|源码，欢迎大家反馈。这个聊天室的主要利用到了socket.io和express。这个聊天室支持群聊，私聊，支持发送图片（PS：大家在体验时最好开启两个浏览器，自问自答）。下面就来和大家分享下实现过程：WebSocket HTML5一种新的协议。它实现了浏览器与服务器全双工通信。为了更好的原创 2016-10-21 10:17:34 · 2060 阅读 · 0 评论 -
自己实现MVVM（Vue源码解析）
前言本文会带大家手动实现一个双向绑定过程（仅仅涵盖一些简单的指令解析，如：v-text，v-model，插值），当然借鉴的是Vue1的源码，相信大家在阅读完本文后对Vue1会有一个更好的理解，源代码放到了github，由于本人水平有限，理解不到位的地方还请大家指出。MVVMMVVM使开发可以更加关注于数据，减少了很大的工作量，也使代码可读性，可维护性更高，MVVM核心的思想就是视图是状态的函数：Vi原创 2016-12-10 14:26:57 · 3654 阅读 · 0 评论 -
dva源码解析（一）
写在前面dva是蚂蚁金服推出的一个单页应用框架，对redux，react-router，redux-saga进行了上层封装，没有引入新的概念，但是极大的程度上提升了开发效率；下面内容为本人理解，如有错误，还请指出，不胜感激。redux的痛苦redux的优点很多，痛点也有，比如异步控制，redux-saga的出现使得异步操作变得优雅，但是基于redux-saga不得不承认的一点就是开发过程实在是太麻烦原创 2017-06-16 00:34:45 · 7821 阅读 · 0 评论 -
koa中间件机制详解
koa koa是由express原班人马打造的一个更小、更富有表现力、更健壮的web框架。在我眼中，koa的确是比express轻量的多，koa给我的感觉更像是一个中间件框架，koa只是一个基础的架子，需要用到的相应的功能时，用相应的中间件来实现就好，诸如路由系统等。一个更好的点在于，express是基于回调来处理，至于回调到底有多么的不好，大家可以自行搜索来看。koa1基于的co库，所以ko原创 2017-04-22 16:41:57 · 2375 阅读 · 1 评论 -
手动实现jsonwebtoken
写在前面本文会到你了解jwt的实现原理，以及base64编码的原理。同时本人也简单的实现了一下jwt的生成，点这里。jwt是什么 本质上它是一段签名的 JSON 格式的数据。由于它是带有签名的，因此接收者便可以验证它的真实性。同时由于它是 JSON 格式的因此它的体积也很小。 * JSON Web Token (JWT)是一种开放标准（RFC 7519），其中定义了一种紧凑 (compac原创 2017-04-13 14:57:26 · 2555 阅读 · 0 评论 -
理解async
写在前面本文将要实现一个顺序读取文件的最优方法，实现方式从最古老的回调方式到目前的async，也会与大家分享下本人对于thunk库与co库的理解。实现的效果：顺序读取出a.txt与b.txt，将读出的内容拼接成为一个字符串。同步读取const readTwoFile = () => { const f1 = fs.readFileSync('./a.txt'), f2 = f原创 2017-03-14 13:35:10 · 558 阅读 · 0 评论 -
给你的密码加盐
写在前面本文描述了本人，对于数据库中如何保存密码的认识过程。从最简单的明文保存到密码加盐保存，下面与大家分享下：第一阶段最开始接触web开发时，对于用户表的密码基本是明文保存，如：username | password---------|----------zp1996 |123456zpy |123456789这种方式可以说很不安全，一旦数据库泄漏，那么所以得用户信息就会被泄漏原创 2017-01-30 13:46:58 · 17583 阅读 · 1 评论 -
理解redux
redux为什么引入redux以react来说，state可以包含内部的状态以及业务数据，对于一个复杂的应用来说，state非常难以管理，一个model的变化可能引起另一个model的变化…依次下去，造成了难以维护的情况，别人很难一下子摸透你的state到底是怎么变得？所以需要引入一个东西来做数据管理，使数据变化变得清晰，redux做的就是这件事情。假如说react是士兵的话那么redux就是将军，原创 2017-02-14 20:40:01 · 1046 阅读 · 0 评论 -
对react技术栈的一些理解
目的本篇文章主要帮助大家了解下react技术栈相关的概念，以及为什么我们需要引入这些，他们能解决什么问题。React为什么选择react，而不是vue2vue2的优点vue1没有加入虚拟DOM，做服务端渲染很难，所以vue2引入了虚拟DOM的机制，而且由于vue2的响应式原理，所以天然的就比react的性能好，react的更新是通过顶层组件的state变化触发整个组件的重新渲染，而vue2由于其是通原创 2017-02-28 16:22:20 · 3149 阅读 · 1 评论 -
窥探react事件
写在前面本文源于本人在学习react过程中遇到的一个问题；本文内容为本人的一些的理解，如有不对的地方，还请大家指出来。本文是讲react的事件，不是介绍其api，而是猜想一下react合成事件的实现方式遇到的问题class EventTest extends Component { handleParentClick(e) { console.log('click paren原创 2017-01-08 20:04:37 · 580 阅读 · 1 评论 -
窥探zepto的事件模块
写在前面通过本文，您可以了解zepto的事件模块，$(selector).on之后到底发生了什么样的事情，如何实现的事件委托【$(selector).delegate】，如何实现的自定义事件等问题。由于篇幅有限，移除事件部分，代码没有贴出，大家可以看这里（完整版）。先来看下全部API（略去了off等移除事件方法）：$.proxy$.proxy(fn, context)，用于改变函数的上下文，实现柯里原创 2016-12-19 12:56:37 · 1334 阅读 · 0 评论 -
解析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 · 2597 阅读 · 0 评论 -
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 · 511 阅读 · 0 评论 -
js实现正弦函数余弦函数图像
效果: 余弦图像 效果: 正弦图像 PS: 其实正弦与余弦道理完全一致(红点是div)以下是实现这个的代码<!DOCTYPE html><html> <head> <meta charset="utf-8"></meta> <title>sin函数图像的实现</title> <style type="text/css">原创 2015-09-21 01:00:29 · 6328 阅读 · 0 评论 -
arguments对象
arguments对象是由函数的实参组成的一个类数组对象，具有length属性，可以像访问数组那样去访问这个对象，但又不具有数组那些方法（例如：pop()）。 看书一直疑惑到底为什么arguments对象的会与参数有着很大的关联，参数发生变化，arguments对象的对应属性也会跟着去变化？？？function foo (x) { console.log(arguments[0]); /原创 2015-10-23 00:46:08 · 492 阅读 · 0 评论 -
复制对象
在js中对象名，同时也是一个指针，加入直接将一个对象的名字赋值给另外一个对象，两个对象其实指向的是内存中的同一个对象，要想开辟新的内存来创建两个属性相同，但是地址不同的对象，需要自己构建函数。var obj = { x: 1}var obj1 = obj;obj1.x = 2;console.log(obj.x); // 2obj1的改变也会影响obj的变化，原因就是他们两个对象原创 2015-11-08 16:27:08 · 357 阅读 · 0 评论 -
关于浮点数的一些问题
最近在做项目的时候，再用javascript进行小数运算的时候，发现了一个bugconsole.log(3 * 0.8);我发现3 * 0.8时并不能的到我想要得2.4的结果，得到的却是一个2.4000000000000004 仔细研究下发现，计算机的二进制遵循的是IEEE 754标准，其实小数在转为二进制时永远都是无穷的，这个bug其实就是说计算机底层转换为二进制时产生的，不仅仅是js，很多原创 2015-09-17 14:43:43 · 570 阅读 · 0 评论 -
js的with语句
今天再看一段代码，感觉自已对with的理解很不到位啊，由于with语句在开发中基本不会使用，而且很多书上也不建议使用with来改变函数的作用域，并且在严格模式下with语句是禁用的。var obj = { x: 10, foo: function () { with(this) { var x = 20; } }}c原创 2015-11-04 18:27:09 · 3330 阅读 · 0 评论 -
replace的小坑
replace()一个非常常见的字符串的方法，看似非常简单，但是也有一个小坑在！！！ 先看一段常见的replace()的用法:var str = '123456';var newStr = str.replace(/\d/,'a');console.log(newStr); // a23456由于没有给第一个正则表达式加上全局匹配(g)，所以只把匹配到的第一个字符替换，如果我们想将其全部替换的原创 2015-10-05 03:09:14 · 677 阅读 · 0 评论 -
javascript函数科里化
函数科里化(Currying)是指是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。 下面的这个函数就是函数科里化的一个很好的解释: function sum(x,y) { if (x != undefined && y != undefined) { return x + y;原创 2015-09-15 18:07:16 · 945 阅读 · 0 评论 -
JavaScript函数基础
函数只定义一次，但是可以被执行或调用任意次，在js中函数就是对象，所以也可以为函数添加属性和方法。js的函数可以嵌套在其他函数中调用，这就是闭包。 函数定义的俩种方式：函数声明，函数表达式。 首先看一个概念，执行上下文，活动的上下文构成一个堆栈，堆栈的底部就是全局上下文，顶部就是当前活动的上下文。进入上下文就会获得程序的控制权，在执行完毕后，就会在堆栈上移除。在执行上文时会有3件事情，1是初始化原创 2015-10-24 18:11:50 · 372 阅读 · 0 评论 -
对parseInt的深入理解
parseInt()是一个js的取整函数,但是真正的了解这个函数吗var arr = [1,2,3];console.log(arr.map(parseInt));我在看到这段代码的时候以为这段的代码的结果就是[1,2,3]，然而事实却并不是这样的,我们在控制台中可以看到输出的是[1,NaN,NaN] 查了一下书，发现parsetInt是可以接受俩个参数的，在日常使用由于常常只对其传一个参数，所原创 2015-09-22 01:34:45 · 745 阅读 · 0 评论 -
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 · 549 阅读 · 0 评论 -
由ECMA规范来看连续赋值
首先我们来看一段代码：var a = {n: 1};var b = a;a.x = a = {n: 2}; console.log(a.x); console.log(b.x);这段代码会输出什么呢？ 我们首先来看一下对规范对于赋值操作A=B的解释，这一操作的背后究竟发生了什么？ 总共有4个步骤 1. 计算表达式A，得到A的地址refA 2. 计算表达式B，得到B的值valueB原创 2016-01-26 00:53:13 · 685 阅读 · 0 评论 -
原生js实现节点拖拽
因为项目要用到拖拽，所以写了一个拖拽函数来与大家分享下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="keywords" content="拖拽">原创 2015-12-07 22:32:35 · 3526 阅读 · 0 评论 -
What is JSON？
JSON之父这样解释JSON：JSON对象是一个容乃“名/值”对的无序集合，JSON的全称是(JavaScript Object Notation)也就是JavaScript对象表示法，JSON是一种轻量级的数据交换格式。语法： JSON不可以支持JavaScript中的特殊值undefined。 JavaScript字符串与JSON字符串最大的区别就是，JSON字符串必须使用双引号，而js中原创 2015-12-06 17:22:39 · 530 阅读 · 0 评论 -
jq的$(function(){})与window.onload的区别
最近一直在研究jq的源码，书写jq的代码我们通常会包裹在一个$(function(){})函数中，jq的$(function(){})也就是$(document).ready(function(){})的简写，与之对应的原生js的window.onload事件，这俩者之间到底有什么区别呢？$(function () { console.log("ready执行");});$(functio原创 2015-12-13 10:39:19 · 10180 阅读 · 0 评论 -
javascript实现汉诺塔
汉诺塔是一道经典的递归编程的经典题题目要求:汉诺塔问题来自一个古老的传说：在世界刚被创建的时候有一座钻石宝塔（塔A),其上有64个金碟。所有碟子按从大到小的次序从塔底堆放至塔顶。紧挨着这座塔有另外两个钻石宝塔（塔B和塔C）。从世界创始之日起，婆罗门的牧师们就一直在试图把塔A上的碟子移动到塔C上去，其间借助于塔B的帮助。每次只能移动一个碟子，任何时候都不能把一个碟子放在比它小的碟子上面。当牧师们完成任原创 2015-09-26 00:40:52 · 2879 阅读 · 2 评论