2017年01月_ISaiSai

原创 ES6 Symbol 学习

Symbol 主要用在底层库设计上，防止属性命名冲突 DEOM： var mySymbol = Symbol("abc"); var mySymbol2 = Symbol("abc"); var a = {}; a[mySymbol] = "b"; a[mySymbol2] = "d" console.log(a[mySymbol]) console

2017-01-17 21:15:23 670

转载 Object.defineProperty 学习

Object.defineProperty 可以为属性设置get set 访问器 DEMO： var a= {} Object.defineProperty(a,"b",{ set:function(newValue){ this.myvalue =newValue; console.log("set:"+newValu

2017-01-17 21:07:09 746

原创 git pull 不带参数处理

执行如下绑定关系后，可以直接git pull 不带分支参数 git branch --set-upstream-to=origin/daily/0.0.1 daily/0.0.1

2017-01-17 10:15:10 3715

原创 execCommand insertimage 插入图片

执行如下代码将在选中位置插入一张图片document.execCommand("insertimage", 0, "//www.baidu.com/img/bd_logo1.png");

2017-01-16 14:00:56 4522

原创通过React.cloneElement给所有子元素添加属性

参考文档：https://facebook.github.io/react/docs/react-api.html#cloneelementimport React,{Component} from 'react';import ReactDOM from 'react-dom';import Perf from 'react-addons-perf' // ES6class MyConta

2017-01-16 10:59:03 13158

转载 antd design 大小优化

antd design 直接引用的话体积较大，不压缩4M 可以通过 babel-plugin-import,实现按需加载,仅仅会加载用到的组件的js 和css https://www.npmjs.com/package/babel-plugin-importdemo{ test: /\.jsx$/, loader: "babel",

2017-01-14 14:18:53 5075

原创 react Performance Tools 入门

参考文档：https://facebook.github.io/react/docs/perf.html1.安装并引入 npm install react-addons-perf import Perf from ‘react-addons-perf’2.监控 Perf.start()xxxx页面代码逻辑 Perf.stop()3.打印结果 // 获取监控结果 var

2017-01-14 12:14:25 2308

思路：由于路由自上而下匹配，处理404只需在最后一个打底路由进行处理如果希望保持url不变，在路由的最后一行添加如下 * 代码 <Route path="*" component={NotFoundPage} />如果要变url,则在所有路由的最后添加如下代码，使用Redirect （需要 import Redirectimport { Router, Route, Redirect } from

2017-01-14 11:09:02 11687

原创 REACT Stateless Functional Component

stateless function component 在 0.14 版本中提供，适用于没有state ，输出内容的变化仅仅依赖于输入的propsthat has no state and returns the same markup given the same propsconst Hehe= (props) => <p>hehe</p>;

2017-01-13 15:51:02 1617

转载 webpack dev server 局域网内访问

参考文档：http://www.zhoulujun.cn/zhoulujun/html/tools/webpack/2016_0809_7876.htmlwebpack dev server 默认只能localhost 本机访问，如果希望局域网内其它机器访问进行测试需要修改添加 –host 0.0.0.0 参数webpack-dev-server --host 0.0.0.0

2017-01-12 14:02:07 12571 2

原创 git push 不带任何参数的

直接执行git push 不带任何参数，会将本地所有分支上的修改都提交（不是当前分支） git pull 不带任何参数的时候，是拉去的当前分支

2017-01-12 10:39:08 3301

翻译（翻译） draft.js Decorators 装饰器

Decorators帮助实现编辑器中非常复杂的样式，对一些元素进行封装CompositeDecorator复合装饰器针对内容文本的装饰器，当找到匹配的文本时，使用组件对其进行包装绘制创建Decorators 需要制定两个属性，一是如何找到（strategy）二是找到后用什么组件渲染（component） const decorator = new CompositeDecorator

2017-01-02 19:29:51 1444

翻译（翻译）draft.js Entities 实体

entities 是draft.js 抽象出来的基本粒子，我们常用到的@某人、链接及嵌入的其它元素都可以抽象为实体一个entities 包含 1. type 自己定义的字符串唯一标识这个实体 2. mutability 标识实体在用户编辑的时候展现出来的特性，分为 Immutable 不可变：有原子性，增、删、改一个地方则全部删除 Mutable 可变：例如链接，

2017-01-02 18:57:09 1925

翻译 (翻译)draft.js 创建简单的富文本编辑器

https://facebook.github.io/draft-js/docs/quickstart-rich-styling.html#content上一节创建了双向绑定的draft.js 的编辑器基础，这一节将创建一个简单的富文本编辑器。（通过键盘快捷键和按钮两种方式，实现最简单的加粗功能）主要用到了RichUtils 的toggleInlineStyle和handleKeyCommand两

2017-01-02 17:18:01 2578

翻译 (翻译)draft.js 入门

安装：(draft.js 依赖react，因此需要同时安装react) install –save draft-js react react-dom draft.js 的顶层API 模拟了Input ，包含editorState(对应input 的value，包含了编辑器的所有属性，包括内容、鼠标cursor、编辑历史等) 和onChange 两个属性，实现了双向的绑定import Reac

2017-01-02 16:53:03 4613

翻译（翻译）Draft.js编辑器简介

RICH TEXT EDITOR FRAMEWORK FOR REACT 基于reac的富文本编辑器框架 Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences. dr

2017-01-02 16:10:12 987

ISaiSai的专栏