玉儿Qi-CSDN博客

原创几个函数式编程术语

偏应用函数 Partial Application栗子：// 创建偏应用函数，偏应用函数将会返回另一个函数。// 带一个函数参数和该函数的部分参数const partial = (f, ...args) => // 返回一个函数：这个函数的参数在调用函数的时候传入。 (...moreArgs) => // 使用全部参数调用原始函数 f(...args, ...more

2017-08-31 15:10:16 282

原创 React踩坑指南——setState不生效的解决方法

不生效的写法：const theQuery = Object.assign( {}, { id: '', beginDate: '', endDate: '' // 查询条件}, _query.toJS() );this.setState(theQuery);action.getRefundList(theQuery)可以生效的写法1：const theQuery = Object

2017-08-29 11:00:32 22925 7

Redux-devTools转自简书：http://www.jianshu.com/p/a2d4c1856560redux-devtools 是一个非常棒的工具，它可以让你实时的监控Redux的状态树的Store创建：import React from 'react'//从redux-devtools中引入createDevToolsimport { createDevTools } from '

2017-08-27 17:51:34 250

转载复习Redux

简介1、一句话概括Redux 是 JavaScript 状态容器，提供可预测化的状态管理。2、action、reducer 和 store所有的state都以一个对象树的形式，存储在一个单一的store中。唯一改变state的办法是触发action——1个描述发生什么的对象。为了描述action如何改变state，需要编写reducers。import { createStore } from 'r

2017-08-26 21:55:54 450

转载【转】前端框架基础：Babel & package.json & npm & nodemon

Babel 入门教程 http://www.ruanyifeng.com/blog/2016/01/babel.htmlpackage.json http://javascript.ruanyifeng.com/nodejs/packagejson.html#toc2npm入门： https://chenyiqiao.gitbooks.io/documentation_for_npm/cont

2017-08-17 11:53:27 681

原创 JavaScript -- 事件

事件处理程序HTML事件处理程序<input type="button" value="Click Me" onclick="alert('Clicked')" />或者<script type="text/javascript"> function showMessage(){ alert("Hello world!"); }</script><input ty

2017-08-03 18:46:53 250

原创 Node -- 构建HTTP服务

在Node中构建HTTP服务非常容易：var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World\n');}).listen(1337, '127.0.0.1'

2017-08-03 15:33:17 321

原创 ES6 -- Promise对象

Promise是一种异步编程的解决方案，ES6提供原声的Promise，它比传统的解决方案，回调函数和事件，更加合理和强大。Promise对象有以下两个特点：1、对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending, resulved, rejected。只有异步操作的结果，可以决定是哪一种状态。2、状态一旦改变，就不会再变化，并且任何时候都可以得到这个结果。实用P

2017-08-02 09:16:18 453

原创 Redux(2)路由

过去，路由是服务端专有的部分。自从富客户端应用越来越广泛的出现在web上，我们已经不能忽视前后端之间发生巨大的变化。在React生态环境中，React Router是公认最优秀的路由解决方案。我们可以通过Router，Route这两个标签以及一系列属性定义整个React应用的路由方案。然而在Redux应用中，我们遇到了一些新的问题。其中一个就是，应用程序的所有状态都应该保存在一个单一的store中，

2017-07-24 18:46:33 1347

原创 Redux（1）

Redux简介Redux的核心代码可以理解成一个库，但同时也强调了一种架构思想。上面这个图是Redux的核心运作流程。Redux本身指redux这个npm包，它提供若干API让我们使用reducer创建store，并能够更新store中的数据或获取store中最新的状态。Redux三大原则单一数据源整个应用的状态都保存在一个对象中，即，一个应用永远只有唯一的数据源。状态只读在Redux中，我们并不会

2017-07-12 09:24:40 241

原创 Node -- 构建Web应用

基础功能Node是十分贴近网络协议的，它非阻塞、事件机制使得我们在网络编程时十分轻便。下面的内容，将从http模块中服务器端的request事件开始分析。官方经典的HelloWorld代码：var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type

2017-07-10 11:53:33 317

转载 CSS3新特性[转]

新的选择器element1~element2: 选择前面有element1元素的每个element2元素。[attribute^=value]: 选择某元素attribute属性是以value开头的。[attribute$=value]: 选择某元素attribute属性是以value结尾的。[attribute*=value]: 选择某元素attribute属性包含value字符串的。E:

2017-07-09 21:05:06 264

原创 Redux入门笔记

附上阮一峰大神教程传送门： http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.htmlstorestore就是保存数据的地方，整个应用只有唯一的一个store。换句话说，整个应用的state都被存储在一棵object tree中，并且这个object tree只存在于唯一一个store中。Redu

2017-07-06 10:38:56 295

原创 React Router笔记 -- 摘自阮一峰大神博客

React-Router是React体系中的路由库，它通过管理URL，实现组件的切换和状态的变化。基本用法Router是一个React组件：import { Router } from 'react-router';render(<Router/>, document.getElementById('app'));Router组件本身只是一个容器，真正的路由要通过Route组件定义：import

2017-07-05 17:35:57 1700

转载什么是用户token（令牌）-- 转

在目前的互联网或者计算机网络技术中，经常会听到token或者“令牌”这个词。那有没有想过，token或者说令牌到底是什么东西，有什么作用，为什么token的中文翻译是“令牌”？其实这个问题也困扰了我很长的时间。长久以来我都是从token的形式上猜测他应该是类似密码一样的东西，只不过是服务器或者说网站帮你生成的临时密码。但密码这个东西总是伴随着帐号或者用户名一起的，离开了帐号，密码就没有了意义。按照这

2017-07-05 12:10:27 15502 3

原创 Node -- 网络编程

终于，到了重头戏！！！加油啊～～～Node是一个面向网络而生的平台，它具有事件驱动、无阻塞、单线程等特性。利用Node可以十分方便的搭建网络服务器。在web领域，大多数的编程语言需要专门的Web服务器作为容器，但是对于Node而言，只需要几行代码就可以构建服务器，无需额外的容器。构建TCP服务TCPTCP全名为传输控制协议，在OSI模型中属于传输层协议。许多应用层协议都是基于TCP构建，例如HTTP

2017-07-03 18:49:06 254

原创 Node -- 理解Buffer

在Node中，应用需要处理网络协议、操作数据库、处理图片、接收上传文件等，在网络流和文件的操作中，还需要处理大量二进制数据。于是Buffer对象应运而生了。Buffer结构Buffer是一个像Array的对象，但是主要用来操作字节。模块结构Buffer是一个典型的JavaScript和C++结合的模块，它将性能相关部分用C++实现，将非性能部分用JS实现。由于Buffer太过常见了，Node在进程启

2017-07-03 17:09:53 460

原创 Node -- 异步编程

函数式编程在JS中，函数为一等公民。函数可以作为参数／返回值。高阶函数高阶函数就是把其他函数作为参数或者返回值的函数。栗子：function foo(x) { return function () { return x; };}结合Node提供的最基本的事件模块可以看到，事件的处理方式正是基于高阶函数的特性来完成的。在自定义事件实例中，通过为事件注册不同的回调函

2017-07-03 05:15:05 355

原创 NodeJS -- 异步I/O

为什么要异步I/ONode是面向网络而设计的，因此，异步IO格外重要。下面，我们从两个方面来说。原因1：用户体验异步的概念之所以首先在Web中火起来，是因为在浏览器中，JS单线程执行，而且它还和UI渲染公用一个线程。这意味着，JS执行的过程中，UI渲染和响应都是处于停滞状态的。另一方面，随着网站或应用不断膨胀，数据将会分布到多台服务器上，分布式将会是常态。这也会放大同步和异步在性能方面的差异。异步I

2017-06-30 17:24:19 527

转载用webstorm开发NodeJS项目

附上传送门： http://geekwen.com/archives/20160620-webstorm-nodejs/

2017-06-30 11:19:52 1625

原创 Mac如何添加生成ssh

检测是否已经有ssh首先，需要测试本机是否已经有ssh:打开终端命令行，输入：cat ~/.ssh/id_rsa.pub如果没有的话将会显示找不到文件夹生成新的sshssh-keygen -t rsa -C "[email protected]" -b 4096将 [email protected] 替换为你自己的邮箱名之后它将会要求你输入存储密匙的文件名，我们直接点击回车，使用

2017-06-30 09:44:09 5458 1

原创 Jenkins -- 通过config.xml操作用户权限

关于如何配置Jenkins权限，网上随便谷百下“Jenkins权限配置”就有大量文章，在这里就不重复说明了。总结一下就是，Jenkins是通过将权限赋予给角色，再将角色分配给用户来配置用户权限的。在这里，我想说的是如何通过直接操作服务器上的config.xml文件来将角色分配给用户。这个文件在服务器的地址为 Jenkins_home/config.xml，示例如下：<useSecurity>tr

2017-06-29 10:31:50 7007 4

原创 Node -- 模块机制

JavaScript从诞生以来，就缺乏一项功能：模块。不像其他高级语言，Java有类，python有import机制，JS只能通过script标签来引入代码，显得杂乱无章。在Node出现之前，服务器端JS基本没有市场。但是经历十多年的发展后，社区也为JS制定了相应的规范，其中CommonJS规范的提出算是最为重要的里程碑。CommonJS规范CommonJS规范为JS制定了一个美好的愿景：希望JS能

2017-06-28 17:58:47 327

原创 Node学习 -- 入门简介

Node的特点1、异步I/O例如，在Node中读取文件，与前端的Ajax调用方式非常类似：var fs = require('fs');fs.readFile('/path', function (err, file) { c onsole.log('读取文件完成')}); console.log('发起读取文件');2、事件与回调函数在JS中，函数是一等公民，回调函数无处不在。回调函

2017-06-28 16:07:02 258

转载 Jenkins配置基于角色的项目权限管理--转

仅附上原文传送门： http://www.cnblogs.com/davidwang456/p/3701972.html

2017-06-28 13:23:36 203

转载 JavaScript正则表达式

原文链接：https://segmentfault.com/a/1190000007602848JS中，RegExp对象表示正则表达式，它是对字符串执行模式匹配的强大工具。基本语法方法1:/pattern/attributes方法2:new RegExp(pattern, attributes);两种方法中的attributes成为修饰符，可能是g,i,m三种不同的取值g:globel，表示执行全局

2017-06-28 10:55:42 192

转载移动端适配的解决方案

原文参考链接： https://github.com/amfe/article/issues/17移动端适配的flexible解决方案： https://github.com/amfe/lib-flexible基本概念：1、物理像素物理像素就是设备上的像素点。2、设备独立像素这是一个虚拟像素，可以认为是计算机坐标系统中的一点。会根据相关的系统转换为物理像素。3、设备像素比（dpr）设

2017-06-27 16:55:45 372

原创代码杂项 -- 2017-6-27

Navigator 对象Navigator 对象包含有关浏览器的信息。<script> txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>"; txt+= "<p>浏览器名称: " + navigator.appName + "</p>"; txt+= "<p>浏览器版本: " + navigator.appVersion +

2017-06-27 11:38:57 256

转载 JS防抖

在前端开发的过程中，有时候我们需要对一些事件进行相应，但是，有时候，这些事件可能会十分频繁的触发。比如：1、window 的 resize、scroll2、mousedown、mousemove3、keyup、keydown为了解决这样的问题，一般会有两种方案来解决：防抖和节流（debounce and throttle）本篇将讲述第一种方案：防抖防抖防抖的原理就是，触发事件的回调函数会在事

2017-06-27 09:39:48 413

原创 ES6 -- 修饰器

decorator是ES7引入的功能，它是一个函数，用来修改类甚至于是方法的行为。类的修饰一个简单的栗子：@testableclass MyTestableClass { // ...}function testable(target) { target.isTestable = true;}MyTestableClass.isTestable // true

2017-06-26 17:51:32 3925

原创 React -- 组件间抽象

在React组件的构建过程中，常常有这样的场景，有一类功能需要被不同的组件公用。此时就涉及到了抽象的话题。下面我们重点讨论：mixin和高阶组件。mixinmixin 的目的，就是为了创造一种类似多重继承的效果，或者说，组合。实际上，包括C++等一些年龄较大的OOP语言，都有一个强大但是危险的多重继承特性。现代语言权衡利弊，大都舍弃了它，只采用单继承。但是单继承在实现抽象的时候有很多不便，为了弥补缺

2017-06-22 15:33:02 994

原创 React -- 组件间通信

分为三种类型的通信关系： 1、父组件向子组件通信 2、子组件向父组件通信 3、没有嵌套关系的组件之间的通信父组件向子组件通信父组件通过子组件的props向子组件传递需要的信息。子组件向父组件通信两种方法： 1、利用回调函数 2、利用自定义事件机制一个栗子：ListItem类：class ListItem extends Component { static defaultProp

2017-06-22 09:42:25 1576 1

原创 React -- 样式处理

基本样式设置可以通过直接设置className prop来确定类名以确定样式，或者通过style prop来设置行内样式。需要注意的是，style prop需要是一个对象。栗子：const style = { color: 'white', backgroundImage: `url(${imgUrl})`, //注意如下写法，会自动转换为-webkit-transitio

2017-06-21 15:36:35 3168

原创 React -- 表单

牢记：在React中，一切数据都是状态。应用表单组件1、文本框 input&textareamport React, { Component } from 'react';class App extends Component { constructor(props) { super(props); this.handleInputChange = this.

2017-06-20 17:09:13 242

原创 JavaScript -- 几道面试题

第一题：for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, 1000 * i);}经典题目，setTimeout 会延迟执行，当轮到执行 console.log 的时候，其实 i 已经变成 5 了，所以会没隔一秒输出一个5，共输出五个5。第二题：上面的题目怎样改可以输出0-4？for (v

2017-06-20 10:19:22 319

转载 JavaScript -- 函数柯里化

基础知识函数形参：可通过function.length得到形参个数function A(a, b) {}// a跟b就是形参console.log(A.length); //2函数实参：可通过arguments获得function B(a, b) { console.log(arguments);}B(1,2,3); // 1,2,3柯里化是什么：sum(1,2,3); //6sum

2017-06-20 09:57:35 263

原创 React学习 -- 事件系统

React中virtualDOM是以对象的形式存在的，所以想要在这些对象上绑定事件，就会非常简单。React基于VirtualDOM实现了一个合成事件层，我们所定义的事件处理器会接收到一个合成事件对象的实例。合成事件的绑定方式<button onClick={this.handleClick}>Test</button>这种写法和原生的HTML事件监听器属性非常相似。但是，仔细观察，就会发现还是有所

2017-06-17 21:28:34 938

原创 React学习-- React源码（6）React Patch方法

React构建虚拟标签，执行组件的生命周期，更新state，计算diff等，这一系列的操作都是在virtualDOM中执行的，此时浏览器并未显示出更新的数据。React Patch实现了最后这关键的一步，将tree diff算法计算出来的差异队列更新到真实的DOM节点上，最终让浏览器能够渲染出更新的数据。Patch主要是通过遍历差异队列实现的，遍历差异队列时，通过更新类型进行相应的插入、移动和移除等

2017-06-16 10:02:10 1922

原创 React学习-- React源码（5）diff算法

diff作为VirtualDOM的加速器，其算法上的改进优化是React整个界面渲染的基础和性能的保障。diff会帮助我们就散出VirtualDOM中真正变化的部分，并只针对该部分进行原生DOM操作，而不是渲染整个页面。从而保证了每次操作更新后页面的高效渲染。传统的diff算法计算一颗树形结构转换成另一颗树形结构的最少操作，是一个很复杂的问题。传统diff算法通过循环递归对节点进行依次对比，效率低下

2017-06-16 09:51:57 1097

原创 React学习-- React源码（4）setState机制

React通过this.state来访问state，通过this.setState来更新state。当setState被调用的时候，React会重新调用render方法来重新渲染组件。setState异步更新setState通过一个队列机制实现state更新。当执行setstate时，会将需要更新的state合并后放入状态队列，而不是立即更新state。这样的队列机制可以高效的批量更新state。需

2017-06-15 16:47:19 1784

空空如也

空空如也