2017年09月_ISaiSai

原创 fetch 使用 form data 方式提交

import queryString from 'query-string';fetch 参数如下, 1.需要设置content-type application/x-www-form-urlencoded 2.body 进行param 转化为a=1&b=2 的形式则提交到服务端的内容与post内容相同 headers: { "Content-Type":

2017-09-28 17:08:16 10737 1

原创 npm 版本的jquery.param queryString.stringify

jquery.param({a:1,b:2}) 会生成a=1&b=2 如果需要npm 版本的可以引入query-string,实现相同的功能 https://github.com/sindresorhus/query-stringimport queryString from 'query-string';const stringified = queryString.stringify

2017-09-28 17:01:38 1287

原创 webpack 报错Cannot find module 'opn'

rm -rf node_modules npm install删除node_module,重新安装问题解决原因不明

2017-09-27 21:10:38 9949 1

原创 nodejs gzip 解压缩base64

zlib 是nodejs 自带的，可以直接使用如下代码将base64的gzip 压缩，解压出来const zlib = require('zlib');var buffer = new Buffer('H4sIAAAAAAAAAIuOBQApu0wNAgAAAA==', 'base64');zlib.unzip(buffer, function(err, buffer) { if (!

2017-09-27 07:59:09 3678

原创 webpack less-loader 的modifyVars配置方式

在module rules 中的less-loader 下配置options modifyVars。实现更改less 中的变量{ test: /\.less/, use: [ { loader: "style-loader"

2017-09-26 15:27:12 19534 1

原创 react-router withRouter

react-router 提供了一个withRouter组件 withRouter可以包装任何自定义组件，将react-router 的 history,location,match 三个对象传入。无需一级级传递react-router 的属性，当需要用的router 属性的时候，将组件包一层withRouter，就可以拿到需要的路由信息import {withRouter} from 're

2017-09-26 14:03:10 25643 2

转载 Import in body of module; reorder to top import/first

import 必须在其它所有业务代码前面（eslint 暴出）

2017-09-26 09:54:16 8734

原创 react-router 与react-reduct 配合使用时，页面不刷新问题

参考文档：https://reacttraining.com/react-router/core/guides/redux-integration/blocked-updates异常现象点击Link url 变化但是页面不更新出现此问题的条件： 1.使用了react-reduct 的connect 2.Router与Root 之间有有layout布局元素解决办法：withRoute

2017-09-25 19:57:23 5905

原创 webpack-dev-server 支持 react-router BrowserHistory

使用BrowserHistory 的时候，由于是新地址，webpack webpack-dev-server 无法进行导航，只能404 ，可以通过设置webpack.config.js 中的devServer，设置如下 devServer: { historyApiFallback:{ index:'src/index.html' },

2017-09-25 18:04:50 3191

原创 react-router-redux 5.0 helloworld

最新版本 react-router-redux 5.0 路由DEMO使用了 redux-react,react-saga,react-router,react-router-redux 实现了路由跳转（react-router-redux）、异步数据操作（saga） import React, {Component} from 'react'import ReactDOM from 'rea

2017-09-25 16:47:30 4200 1

原创 redux-saga HellWorld入门异步计数器(react-redux)

点击加减按钮，延迟1秒操作加减动作（模拟异步网络请求）最终调用Action “Done” 将结果展示import React from 'react'import ReactDOM from 'react-dom'import {createStore, applyMiddleware} from 'redux'import {Provider, connect} from 'react-

2017-09-25 16:28:02 780

原创 react-react 入门 helloworld 计数器

最简单的一个react-redux 示例，实现点击加一的计数器import React from 'react'import ReactDOM from 'react-dom'import {createStore} from 'redux'import {Provider, connect} from 'react-redux'function reducers(state = 1, act

2017-09-25 12:17:34 933

原创 Objects are not valid as a React child 错误处理

Objects are not valid as a React child (found: object with keys {value, onChange}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object)

2017-09-25 11:55:01 37576 2

转载 javascript 读取本地txt文件

使用fileAPI 可以实现本地文件读取，可以实现将本地文件内容直接post，而不是文件本身参考文档https://www.html5rocks.com/zh/tutorials/file/dndfiles/ <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>

2017-09-22 10:04:32 16135

原创 webpack 升级

升级参考文档： https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed最大的改动是原来的 loaders 改成了rules 并且loader必须添加“-loader” 后缀原来的（webpack 已支持moudles） presets: [‘es2015’] 修

2017-09-18 17:21:48 2456 1

转载 webpack 升级Getting error: configuration.resolve.extensions[0] should not be empty

webpack 升级后，extensions 数组中不能使用空字符串，需要使用* 代替。否则报错Getting error: configuration.resolve.extensions[0] should not be empty 参考文档：https://github.com/webpack/webpack/issues/3043I am not sure that this i

2017-09-18 16:33:16 3484

原创 webStrom 开发node项目长时间index，卡死问题解决

在node_modules 文件夹上点击右键，make directory as —>excluded 问题解决怀疑是 node_modules 文件夹太大导致

2017-09-15 15:38:42 1035

转载 nodejs extend包

Object.assign只能实现后面对象的第一级属性拷贝的前面的对象中，如果需要深度拷贝属性，需要依赖extend包参考文档https://github.com/justmoon/node-extendnpm install extend如下将输出 {“userName”:{“first”:”C”,”second”:”B”},”age”:2}const extend = require(

2017-09-11 17:04:02 4034

转载 Nodejs Error: Cannot find module 当前文件夹下的模块

当执行如下代码是，nodejs 报错 Cannot find module(a.js 为当前文件夹下的同级文件)var x = require("a.js") 修改为 ./ 后正常var x = require("./a.js") 或者执行node命令入口时添加 (index.js 为主入口文件)NODE_ENV . node index.js主要目的：将当前文件夹”.” 添加到node 查找模块的

2017-09-11 16:44:55 5164

原创 Draft.js 自己定义块组件

参考文件 https://draftjs.org/docs/advanced-topics-block-components.html#content步骤： 1.定义各一个自己的react 组件 2.Editor 上添加一个属性 blockRendererFn={myBlockRenderer} ， 3.在自定义 myBlockRenderer 函数中，编写业务逻辑，确认什么样的实体或者

2017-09-11 11:35:43 2336

原创 javascript bind 后端的函数不相等

采坑记录：函数bind 后，即使bind 相同的对象，返回的结果也不相同，demo 如下，返回false bind后返回新函数function f() { console.log("test:" + this.userName)}var a = { userName: "a"}var x = f.bind(a);var y = f.bind(a);console.log

2017-09-11 10:40:42 361

转载利用document.implementation.createHTMLDocument创建新的document

如果需要将一段html 转换为 Document Object Model （文档对象模型）,而不影响到当前的html内容，可以通过document.implementation.createHTMLDocument创建一个新的document实现// 创建一个全新的 document（和当前的document不同），参数test是新document的 title标题字段var doc =

2017-09-09 15:28:23 3991

转载 lodash difference 函数demo

difference 函数，比较前后两个数组，仅仅保存前面数组在后面数组中不存在的数据如下demo 输出1，5var _ = require('lodash');console.log(_.difference([2, 1,5,4], [2, 3,4])); 参考文档 https://lodash.com/docs/4.17.4#difference

2017-09-08 14:29:49 975

原创 Draftjs 输出结果转换回html（converToHtml）

draft.js 通过convertToRaw 方法输出的JSON内容如何转换回html？ draft.js 没有自带类似 converToHtml 方法，需要依赖第三方包。如下介绍的两个第三方包都不依赖 draft.js backdraft-js 是最简单的一个 https://github.com/evanc/backdraft-js程序只有50多行代码，只能处理行inlineSty

2017-09-07 20:23:12 4456

原创 Imutable 使用withMutations 提升性能

参考文档https://stackoverflow.com/questions/28510753/when-should-i-use-withmutations-on-a-map-in-immutable-js https://facebook.github.io/immutable-js/withMutations 主要用来提升性能，将需要多次创建的Imutable合并成一次。主要使用在需

2017-09-07 11:08:09 2315

原创 Imutable Record 类型

参考文档:http://facebook.github.io/immutable-js/docs/#/Record/RecordRecord 感觉像是一个强类型，只能包含定义时候的属性，不能新增或删除属性入门demo，可以看到和普通的map没有什么特别不同const { Record } = require('immutable')const ABRecord = Record({ a: 1,

2017-09-07 10:24:59 555

原创 Immutable 入门

目的： 1.提高react render效率（shouldComponentUpdate 比较 imutable的前后两个props，减少render次数，缩短生命周期,在） 2.所有数据都是一份新的，减少出错概率文档:http://facebook.github.io/immutable-js/ 安装 npm install immutable基本创建及读取const {Map,

2017-09-05 20:27:12 1302

ISaiSai的专栏