2016年12月_ISaiSai

原创 react dangerouslySetInnerHTML

如果服务端在接口上已经对html进行了转义，并且可以完全信任服务端的接口数据，可以使用dangerouslySetInnerHTMLvar test = "“test”<div>hehe</div>";<div dangerouslySetInnerHTML={{__html:test}}></div>

2016-12-29 15:41:41 1837

转载 ReactRouter 离开页面的钩子

componentDidMount() { this.props.router.setRouteLeaveHook( this.props.route, this.routerWillLeave ) } routerWillLeave(nextLocation) { return '确认要离

2016-12-28 15:23:27 11397

原创 react CSS module 学习

原始代码： import React from 'react';import './B.less' ;export default (props) => { function handleClick() { props.onChange("abc"); } return <div className="myFirst" onClick={handleCl

2016-12-28 12:16:57 688

原创 webpack babel 禁止编译 node_modules

webpack.config 中使用 exclude 排除掉node_modules { test: /\.jsx$/, exclude: /node_modules/, loader: "babel", query: { presets:

2016-12-28 11:48:23 15500

原创 Stateless Functional Component 学习

react 无状态组件，有更高的性能，简洁的代码特点： 1. 没有state 2. 不需要管理生命周期 3. 仅仅用来拿属性进行页面绘制 4. 返回的是一个函数demo如下：import React from 'react';export default (props) => { function handleClick() { props.onChange(

2016-12-28 11:29:30 1788

原创 xml 浏览器打开报错Input is not proper UTF-8, indicate encoding !

xml 中如果包含部分 ascii 控制字符（小数字）则 chrome会报告如下类型错我：This page contains the following errors:error on line 20 at column 89: Input is not proper UTF-8, indicate encoding !Bytes: 0x08 0xE8 0xBA 0xB2Below is

2016-12-27 21:01:36 6557 1

xxx.replace(/\u0000|\u0001|\u0002|\u0003|\u0004|\u0005|\u0006|\u0007|\u0008|\u0009|\u000a|\u000b|\u000c|\u000d|\u000e|\u000f|\u0010|\u0011|\u0012|\u0013|\u0014|\u0015|\u0016|\u0017|\u0018|\u0019|\u001a

2016-12-27 20:57:42 3954

原创 webpack 线上发布优化

使用webpack -p 并且webpack.config.js 增加如下代码 var webpack = require(‘webpack’); plugins: [ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('produc

2016-12-26 18:30:40 1005

原创 babel startWith 问题

babel 默认不会处理startWith等函数，需要额外引用babel-polyfill,提供对这些函数的支持npm install --save babel-polyfillimport 'babel-polyfill'; 参考文档：http://www.ruanyifeng.com/blog/2016/01/babel.html

2016-12-26 17:39:14 953

原创 jquery data 小写的坑

jquery data 后面都要转化为小写，才能渠道怎么会有这么大的坑？？？？？

2016-12-20 14:07:11 1448

原创 Reflux.connect mixin 学习

Reflux.connect 做的事情 1. 使用store 中的 getInitialState，设置默认值 2. 在componentDidMount 中注入 linstento 及linstento 的回调函数，设置state

2016-12-18 20:57:31 756

原创 Reflux helloworld

如下代码是reflux 的骨架import React from 'react';import Reflux from 'reflux'var ReactDOM = require('react-dom');var mainAction = Reflux.createActions([ 'sayHello']);var mainStore = Reflux.createStore(

2016-12-18 20:44:55 404

原创 react classnames

安装： npm install classnames功能：将true的class 显示出来，false 的隐藏参考文档：https://manofhustle.com/2015/01/19/dynamically-add-classes-react-classset/demo:var classNames = require('classnames');var HelloWorld

2016-12-18 20:28:57 3907

转载 react autoFocus 获得焦点

<input type="text" autoFocus />运行起来后 input 获得焦点

2016-12-18 20:20:48 11844 1

原创 react LinkedStateMixin 已经过时

页面会报告已经警告Warning: `valueLink` prop on `input` is deprecated; set `value` and `onChange` instead.Note: LinkedStateMixin is deprecated as of React v15. The recommendation is to explicitly set the value a

2016-12-18 20:11:17 1586

原创 react setState 的回调函数

参考文档：https://facebook.github.io/react/docs/react-component.html#setstatesetState 第一个参数是要改变的state对象第二个参数是 state 导致的页面变化完成后的回调，等价于componentDidUpdate

2016-12-18 19:21:36 9103

原创 React Mixin HelloWorld

import React from 'react';var ReactDOM = require('react-dom'); var HelloWorldMixin = { sayHello: function () { return "hello world!" }};var HelloWorld = React.createClass({ mixins

2016-12-18 18:57:41 486

转载 Object.assign 学习

1.object assign 是浅拷贝 var c = {"userAge": 1}; var a = {"userName": "a", other: c} var x = {}; var x = Object.assign(x, a); x.other.userAge = "100"; console.log(c.userAge);2.object a

2016-12-18 18:07:29 633

原创 jquery jsonp async:false 无效

jquery 如果通过jsonp 调用，不能够同步执行参考文档：It is completely impossible to do synchronous JSONP. JSONP works by creating a

2016-12-18 17:35:15 2656

原创 chrome 原生promise 实现 promise.map

function yibu(i) { return new Promise(function (resolve, reject) { setTimeout(function () { console.log("hello" + i) resolve(); }, 1000)

2016-12-18 17:31:09 2419

原创 nodejs curl 输出内容

var child_process = require("child_process");var curl = 'curl http://www.baidu.com'var child = child_process.exec(curl, function(err, stdout, stderr) { console.log(stdout);});

2016-12-17 17:00:09 4176

转载 mvn 包冲突处理

mvn dependency:tree > tree.txt

2016-12-14 20:33:50 336

原创 focusin 和focus 的执行顺序

focusin 会先执行（一直冒泡的顶层）之后才是元素的focus 执行因此无法在元素的focus中终止掉父元素的focusin 事件只能在元素的focusin 事件中终止<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src="./jquery

2016-12-14 10:05:24 1082

原创 jquery 事件代理中的取消冒泡传递

jquery 如果不是直接绑定到元素上的事件（通过delegate 绑定的，也无法取得直接元素，）如果想终止事件冒泡，可以在低一级注册代理事件并将其stopPropagation（）掉<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src="./jq

2016-12-14 09:51:26 937

翻译 Draft.js react 编辑器 HelloWorld

安装 npm install –save draft-js 核心概念 Entity：抽象的元素 decorator：对文档的解释方法（核心开发内容） decorator的strategy：查找方法 decorator的component：绘制方法参考文档 http://facebook.github.io/draft-js/docs/overview.htmlimport R

2016-12-12 14:48:39 7245

原创 imagemagic 半透明蒙层

convert rose: -fill ‘#0008’ -draw ‘rectangle 0,0,2000,2000’ bantouming.jpg方法：在图片上绘制一个半透明的非常多大的长方形

2016-12-11 21:46:45 1192

原创 imageMagic mac helloworld

brew install imagemagick安装完成后命令会在/usr/local/bin 里面（/usr/local/Cellar/imagemagick/6.9.2-3/bin/convert）保证命令行中执行有 convert 命令（imagemagic 的核心命令合并图片用的）执行最简单代码： convert -size 100x100 canvas:khaki can

2016-12-11 21:07:48 502

原创 generator 转 promise

通过co 进行转化co(function* () { //xxxxx });

2016-12-09 11:32:25 536

原创 nodejs取得当前执行路径

process.cwd() 当前执行程序的路径（执行命令行时候的路径,不是代码路径例如在根目录下执行 node ./xxx/xxx/a.js 则 cwd 返回的是根目录地址）__dirname: 代码存放的位置process.execPath: 当前执行的node路径（如：/bin/node）DEMO：console.log(process.execPath)co

2016-12-03 10:09:30 42106

ISaiSai的专栏