睡在我下铺的上铺的胖子-CSDN博客

原创对redux的认识（源码深度解读）

用redux写过一些小项目，感觉有段时间不用快要忘记。所以写下我对redux的理解（和react-redux结合使用）。作为笔记。redux版本是3.6.0。react-redux版本是5.0.4。首先打开github的redux项目，在源码中，主要有以下文件：这也是redux的组成部分。utils文件夹只有一个warning.js，用来打印错误信息。index.js用来导出相关内容。关键的是其

2017-06-05 23:25:34 653

原创 React-native错误，更新中......

1、使用abd reverse tcp:8081 tcp:8081react-native run-android最后一行报错。error: unknown host service找到5037端口，关掉对应的pid即可。netstat -aon|findstr "5037"在资源管理器中，切换到进程，单击菜单栏查看 -> 选择列 -> 勾选PID，找到对应的pid，结束进程。2、adb se

2017-02-17 14:34:14 7692 2

原创 babel-polyfill与babel-plugin-transform-runtime

babel-polyfillbabel-polyfill在应用中会模拟一个es2015+的环境，所以使用了babel-polyfill后可以使用内置对象如Promise和WeakMap，静态方法如Array.from和Object.assign，实例方法如Array.prototype.includes，以及generator函数（需要提供babel-plugin-transform-rege...

2018-07-22 18:16:06 5028

原创大文件断点续传

win10 node: v8.2.1 npm: v5.3.0 multer: v1.3.0使用1.由于对multer v1.3.0做了修改，所以不可以通过npm install multer这种形式，需要使用到修改过multer包去覆盖原来的。 2.对于文件上传的接口，比如/upload，需要携带参数targetFileName和start。 targetFileName: 服务端生成目标文件的

2017-11-18 11:56:02 5779 1

原创 Javascript--Event Loops

简介Javascript是单线程的。而在主线程之外，为了协调事件、用户交互、脚本、渲染、网络等，用户代理（user agents，一般指浏览器）必须使用一种机制来保证程序的正确运行。这种机制就是事件循环（event loops）。当主线程（栈）执行完毕后，就开始事件循环。事件循环有两种形式，分别是browsing contexts、workers(Web Worker)browsing contex

2017-10-18 00:23:16 614

原创从源码角度分析nodejs如何处理一个HTTP请求

使用nodejs创建一个http服务器是非常简单的。突然想到同学的一句话，“经济基础决定上层建筑”。这句话似乎是个万金油，在任何事情上都可以评论一二。所以这种简单其实是因为nodejs在内部帮我们封装了很多，隐藏了非常多的细节。本文旨在深入到这些细节，拨开这个面纱。为了行文方便，每段代码都加了标志CS。开始CS1var http = require('http');http.createServe

2017-09-18 20:58:42 3843 1

原创 express源码解析

占坑。

2017-09-14 10:34:02 486

原创 Function.prototype.bind及其polyfill分析

Function.prototype.bind执行会返回一个新的函数，并将this关键字设置为指定的值。并可以在执行该返回的函数之前传入参数。语法fun.bind(thisArg[, arg1[, arg2[, ...]]])thisArg：表示返回的函数中this的指向。[, arg1[, arg2[, ...]]]：表明参数是可选的。使用方法绑定thisvar obj = { name

2017-09-13 10:01:58 792

原创 selenium初探

这一周导师让我研究selenium。selenium支持很多语言，而我使用的是js来测试。需要安装selenium-webdriver: ^3.5.。基础篇我参考了很多文章，这里列下其中一下：http://jeremy-xu.oschina.io/2016/05/22/web%E7%95%8C%E9%9D%A2%E6%B5%8B%E8%AF%95%E5%AE%9E%E8%B7%B5%E4%B9%8

2017-08-20 18:40:50 996 1

原创有趣--等额本息还款

最近在知乎发现了一个有趣的事情。说一个我自己的事儿，吹吹牛：）某行信用卡专员总打电话过来，希望提供一个贷款额度给我，不胜其扰，又不忍直接拒之。某次电话又来，决定聊败她。卡专员：先生，我行为您提供5万的贷款额度，24个月分期还清，月还款仅2400元。我：对不起，我不需要这个产品，谢谢。卡专员：先生，您可能经济条件比较好，不着急用钱，但是有个储备不是挺好吗？我：对不起，我真的不需要。卡专员：您

2017-08-20 15:56:44 745

原创 websocket心跳的实现（包括全部代码）

本文主要讲的是如果设计websocket心跳已经需要考虑哪些问题。前言在使用websocket的过程中，有时候会遇到客户端网络关闭的情况，而这时候在服务端并没有触发onclose事件。这样会：多余的连接服务端会继续给客户端发数据，这些数据会丢失所以就需要一种机制来检测客户端和服务端是否处于正常连接的状态。这就是websocket心跳，这个名字非常生动形象，还有心跳说明还活着（保持正常连接），没

2017-08-12 16:35:48 40634 12

原创简化redux中的action和reducer

如何让action和reducer更简单，这就是本文所学需要记录的。可直接跳到改进部分。前言最近做的项目中，也使用了redux。redux是基于纯函数的，为了保证其纯度，它的reducer的要求是S’ = f(S)的这种形式。但是在实际项目中，我们有很多网络请求，那么要求reducer的形式是S’ = await f(Async)(S)的形态。但是在reducer中这是不允许的（为了保证其纯度），所

2017-08-12 11:32:21 5057

原创我的项目react-native-meituan总结与反思

react-native-meituangithub地址：https://github.com/yuwanlin/react-native-meituan.git 跨平台app。持续更新。目前是v1版本。通过这个小项目，掌握了react-native的一些组件的用法。本项目react-native的版本是0.44.2。一些变化自0.40版本开始，对于Image组件的source属性，不再支持re

2017-06-05 23:24:33 1559

原创我的项目react-bookstore总结与反思

react-bookstore线上地址：https://react-bookstore.herokuapp.com github地址：https://github.com/yuwanlin/react-bookstore学习了react相关技术，需要贯通一下。所以有了这个。会持续更新。项目不复杂，但我本来就是来练手的。我觉得达到了练手的效果。包括redux/react-redux的使用，以及使用r

2017-05-16 17:58:32 1088

原创 brew安装特定版本flow，解决问题！

在atom+react-native项目中安装了nuclide。然而使用flow的时候出现了问题。$ brew -vHomebrew 1.2.0$ flow versionFlow, a static type checker for JavaScript, version 0.45.0$ flowLaunching Flow server for /Users/real/Desktop/re

2017-05-06 18:03:51 7890 2

原创 webpack热模块替换（HMR）/热更新

这是一篇关于webpack热模块替换的最简单的配置（不需要react），也称作热更新。

2017-03-17 22:15:45 17303

原创 ES6学习笔记之class

概述ES6引入了class以接近传统的面向对象（java、c++）语法。我觉得这不是很有必要。因为在继承方面它和java/c++完全不一样，这样会对新手可能会造成困扰（虽然java我已经忘掉了）。实际上，class可以看做一个语法糖，它的绝大部分功能都可以由ES5做到，在此基础之上，增加了一些功能而已。使用class只是让js更像面向对象编程的语法而已。。在es6中，定义一个class可能会如下所示

2017-03-16 19:11:50 566

原创我的webpack，持续更新......

压缩js使用自带的webpack.optimize.UglifyJsPluginconst webpack = require('webpack');module.exports = function(env) { return { entry: { main: './index.js', }, output: { filename: '[chu

2017-03-13 22:54:23 2514 1

原创 ES6学习笔记之Symbol

参考自：http://es6.ruanyifeng.com/#docs/symbol概述Symbol是ES6新引入的一种原始数据类型。它是JS语言的第7种数据类型。前6中是number、string、boolean、undefined、null、object。let s = Symbol(); typeof s; // "symbol"Symbol能够产生独一无二的值，避免与之前的代码/其他

2017-03-13 17:52:33 461

原创 angularjs仿拉勾网webapp总结与记录

这是慕课网上的实战课程，使用的技术栈有bower+less+angular1.x+gulp。没有涉及到后端，数据是模拟的json数据。gulp其中gulp的配置在这里。less关于less部分，只使用了一些最基础的语法。如下：文件引用使用@import。@import 'a.less';@import 'b.less';定义变量使用的了一个

2017-02-25 23:29:22 6385 6

原创指令中的scope

一般而言，指令配置如下：//headBar.jsangular.module('app').directive('appHeadBar', function() { return { restrict: 'A', replace: true, templateUrl: 'view/template/headBar.html', scope: { t

2017-02-25 21:57:23 1220

原创 gulp插件

这是我用的一个。"devDependencies": { "gulp": "^3.9.1", "gulp-clean": "^0.3.2", "gulp-concat": "^2.6.1", "gulp-connect": "^5.0.0", "gulp-cssmin": "^0.1.7", "gulp-imagemin": "^3.1.1", "gulp-less

2017-02-25 10:20:06 1059

原创 modernizr

HTML5Shiv允许就浏览器识别出HTML5元素，并可以为其添加样式—-它只是简单地创建了HTML5对象，让CSS和JavaScript可以应用在元素本身。Modernizr做了同样的事情，并且在此基础上还添加了特性检测。HTML5Shiv会使像<video>这样的标签生效，但是它并不会使HTML5的视频在就浏览器得以播放。虽然这个标签是可用的，并能够添加样式，然而视频并不能在这些浏览器里播放。M

2017-02-25 09:42:05 941

转载 ES6学习笔记之Generator 函数的语法

简介基本概念Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。本章详细介绍Generator 函数的语法和 API，它的异步编程应用请看《Generator 函数的异步应用》一章。Generator 函数有多种理解角度。从语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象，

2017-02-22 16:42:42 1355

转载 ES6学习笔记之Iterator和for...of循环

原文地址：http://es6.ruanyifeng.com/#docs/iteratorIterator（遍历器）的概念JavaScript原有的表示“集合”的数据结构，主要是数组（Array）和对象（Object），ES6又添加了Map和Set。这样就有了四种数据集合，用户还可以组合使用它们，定义自己的数据结构，比如数组的成员是Map，Map的成员是对象。这样就需要一种统一的接口机制，来处理所有

2017-02-22 11:09:23 1636

转载 es6学习笔记之Promise

是的，很多东西都需要写下来。原文链接：http://es6.ruanyifeng.com/#docs/promise含义Promise是异步编程的一种解决方案。相比于回调函数和事件，更好更强大。Promise一个承诺，保存着某个未来才会结束的事件的结果（通常是异步操作事件的结果）。Promise对象有以下特点： - 对象的状态不受外界影响。只用异步操作的结果，可以决定Promise的状态。有三

2017-02-21 18:27:19 954

原创有趣的代码，持续更新...

1、原文链接// 我挺喜欢最上边的评论的，虽然我不知道是否正确<script>var a = {n:1}; var b = a; a.x = a = {n:2}; // 可以更换 a.x = a = {n:2}看看console.log(a.x);// --> undefined console.log(b.x);// --> [object Object] </script>

2017-02-19 23:30:21 4416

原创 React&RN关键点集锦，持续更新......

1、获取设备宽、高、像素比import Dimensions from 'Dimensions';import PixelRatio from 'PixelRatio';let totalWidth = Dimensions.get('window').width; // 宽度let totalHeight = Dimensions.get('window').height; // 高度le

2017-02-18 11:37:26 712

原创 JS常见代码块，持续更新......

个人使用过程中收集的…弄丢了几次，现在放到博客，更新中……1、拿到总的offsetLeftfunction getOffsetLeft(dom){ var actualLeft = dom.offsetLeft; var curr = dom.offsetParent; while(curr){ actualLeft += curr.offsetLeft; curr = c

2017-02-17 19:18:13 1418

原创 React组件的生命周期

一个React组件被渲染的过程有三个阶段。这个过程就叫做组件的生命周期。每个React组件都会经历这个过程。为了使这个过程可操控，React提供了一些方法，在组件生命周期过程中，通过这些方法我们可以得到某个阶段发生的通知。这些方法就叫作组件的生命周期方法，它们按特定顺序被调用。所有React组件的生命周期方法可以分为下面三个阶段。挂载（Mounting）：这个阶段发生在组件被插入DOM时。更新（

2017-02-17 10:51:13 1015

原创 ES6学习笔记二之数组的扩展

Array.from()Array.from() 方法从类似数组(array-like)或可迭代对象(iterable)创建一个新的数组实例（包括ES6新增的数据结构Set和Map）。Array.from(arrayLike[, mapFn[, thisArg]])如下是一个类数组的对象，Array.from将它转换为一个真正的数组。// [].slice.call(arrayLike); es5

2017-02-17 00:03:52 481

原创 ES6学习笔记一之js发展、let、const、解构赋值

ECMAScript和JavaScript的关系？1996年11月，JavaScript的创造者—-Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这种语言能成为国际标准。次年，ECMA发布262号文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言成为ECMAScript，这个版本就是1.0版。该标准一开始就是针对JavaScript语言制定

2017-02-13 23:17:23 1974

转载 XSS跨站总结

简介：跨网站脚本（Cross-site scripting，通常简称为XSS或跨站脚本或跨站脚本攻击）是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些

2017-02-12 18:10:13 1143

转载主流浏览器内核介绍（前端开发值得了解的浏览器内核历史）

内核首先得搞懂浏览器内核究竟指的是什么。浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。

2017-02-09 14:31:46 2548

原创前端性能优化的14条法则

文章是高性能网站建设指南（Steve Souders）的总结。性能黄金法则：只有10%~20%的最终用户响应时间花在了下载HTML文档上。其余的80%~90%时间花在了下载页面中的所有组件上。

2017-02-09 10:50:21 2432

原创 javascript模块化之CommonJS、AMD、CMD、UMD、ES6

这是一篇关于js模块化编程的总结记录javascript模块化之CommonJS、AMD、CMD、UMD、ES6

2017-02-05 18:20:21 21141 13

转载 webpack学习笔记一

原文链接：https://segmentfault.com/a/1190000006178770?_ea=1088498由于使用的是webpack版本是2.2.1，所以针对原文做了一些修改。针对webpack2的修改部分和添加的部分在最底部，文中已经改过来了。写在前面的话阅读本文之前，先看下面这个webpack的配置文件，如果每一项你都懂，那本文能带给你的收获也许就比较有限，你可以快速浏

2017-02-04 00:22:11 4939

原创 mongoose学习笔记一

名词解释Schema：一种以文件形式存储的数据库模型骨架，不具备数据库的操作能力Model：由Schema编译而成的假想（fancy）构造器，具有抽象属性和行为。Model的每一个实例（instance）就是一个document。document可以保存到数据库和从数据库返回。Instance：由Model创建的实例。概念解析 SQL术语/概念 MongoDB术语/概念解释

2017-02-01 23:53:24 3892

原创 windows平台react-native && android安装错误Error EPERM

1、初始化项目react-native init newProject2、手机连上usb口，在手机上的开发者模式中打开usb调试，如果手机屏幕出现提示密钥消息，点击确定。3、对于Android5.0或以上的操作系统，在react-native项目根目录管理员运行abd reverse tcp:8081 tcp:8081，意思是通过adb反向代理端口，将调试电脑的8081端口反向代理到测试机上。这里可

2017-01-23 10:06:11 3694 1

原创 MongoDB关键点集锦（更新中...）

1、MongoError: server instance in invalid state undefined参考segmentfault的一个解答看起来你用的是node-mongodb-native驱动。老版本确实有使用过DB作为顶级对象，不过现在的驱动通常建议把MongoClient用为顶级对象使用。直接参考驱动文档： https://github.com/mongodb/node

2017-01-19 22:05:51 947

Zeta Telnet

HTML5程序设计第二版源码

空空如也