2017年02月_ISaiSai

转载 Draft.js 随机数实现原理

主要是通过生成一个随机数字，然后进行toString(32)判断Math.floor(Math.random() * Math.pow(2, 24)).toString(32)如果发现重复，循环重新获取

2017-02-27 20:01:41 598

原创 Draft.js 中style 与entiy 区别的理解

在draft.js 中，有些事情似乎style 和entiy 都可以做两者之间选择方式的区别个人总结如下： 1.是否需要继续编辑，如果内部内容是文本，切需要继续做文本编辑，最好用style 2.是否包含其它数据：如果包含数据需要用实体

2017-02-25 13:38:01 534

原创目前可用的Draft.js rte编辑器

draft.js是个框架，无法直接使用，目前市面上能直接用的地址如下，相信未来会用更多基于draft.js的封装好可直接使用的编辑器问世 https://react-rte.org/demo

2017-02-25 10:17:17 1262

原创当编辑内容改变是后选中内容 Range 的startOffset会被重置

DMEO: 运行如下页面，输入部分文字，选中部分，之后在浏览控制台执行$(“#J_container”).html(“abcd”); 会发现控制台输出的startOffset 被设置为0<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src="

2017-02-24 19:06:23 1109

原创 javascript 使用FLOW做强类型验证

参考文档：https://flowtype.org/docs/getting-started.html依赖babel 和 babel的插件babel-plugin-transform-flow-strip-types 做静态类型检查劣势：需要额外依赖babel 转码DEMO// @flowvar str: number = 'hello world!';console.log(str);

2017-02-24 14:17:45 899

原创 draft.js block Type type 默认支持类型

blockContent blockType 默认支持如下类型[“ordered-list-item”,”header-six”,”header-four”,”header-one”,”unordered-list-item”,”atomic”,”unstyled”,”header-two”,”code-block”,”blockquote”,”header-five”,”header-three

2017-02-24 13:52:31 981

原创 javascript Object.is 与 === 的区别

Object.is与===基本相同，只在两个地方有差异，+0 -0 ，NaN和NaNObject.is 的 Polyfill 实现if (!Object.is) { Object.is = function(x, y) { // SameValue algorithm if (x === y) { // Steps 1-5, 7-10 // Steps 6.b-6.

2017-02-22 17:26:40 1361

原创使用react/lib/update 对数据进行操作

参考文档：https://facebook.github.io/react/docs/update.html react/lib/update 与 react-addons-update 等价包含apply，apply ， set, push,push,unshift,splice,splice,merge 方法，用以不改变原来数据，返回新的数据 apply：函数，入参是原始值，返回结果

2017-02-21 16:49:49 2973

原创 react-dnd helloworld

参考文档： https://react-dnd.github.io/react-dnd/examples-sortable-simple.html核心理解： 1.ItemTypes.CARD, cardTarget, connect 第一个参数是类型，第二个参数是事件注册，第三个参数是个函数，返回值要注入到组件总的内容2.beginDrag 的返回值，可以理解为原生的（dataTransfe

2017-02-21 15:45:29 3721

原创 ES7 decorator helloworld

参考文档http://greengerong.com/blog/2015/09/23/es7-zhi-decorators-shi-xian-aopshi-li/注意：依赖babel-preset-stage-2（stage-0和1 不行），和babel-plugin-transform-decorators-legacypackag脚本 "scripts": { "build": "ba

2017-02-20 16:59:42 781

原创 Jquery 3.1.1 Syntax error, unrecognized expression: #

使用$(“#”) 在 Jquery 2.xx中不会报错在Jquery3.1.1 中会报告错误： Syntax error, unrecognized expression: #

2017-02-16 16:41:34 3241

原创 webpack 拷贝文件

特殊情况下需要通过webpack拷贝文件可以引入https://github.com/kevlened/copy-webpack-plugin在webpack 在DEV下，copy 不会拷贝，需要webpack -p 的时候才会落入文件如下是 webpack.config.js 的demo，将thirdpart 下的abc.js 文件拷贝到build文件夹下 new CopyWebpackPl

2017-02-16 11:09:33 10308

原创 nodejs koa CROS 接入踩坑日志

由于需要跨域POST，必须接入CROS才能解决1.nodejs koa 服务端引入 koa-cros组件，配置{ credentials:true, origin: 'http://localhost:6080/'}如果credentials:true 则origin 不能设置为*,只能设置为唯一的值（多个也会报错），否则会报错（安全原因）2.jquery xhr请求修改增加

2017-02-15 17:20:49 2193

转载 react 单元测试，模拟操作后数据的变化

参考文档https://github.com/airbnb/enzyme/issues/341 http://www.ruanyifeng.com/blog/2016/02/react-testing-tutorial.html1.引入enzyme 的mount 2.引入jsdom 3.调用simulate 模拟操作 4.断言结果是否是预期import {mount} from 'en

2017-02-09 16:43:28 1429

转载 react 单元测试入门

1.引入react-addons-test-utils 2.引入断言器 chai 3.安装mocha 4.运行测试(mocha –compilers js:babel-core/register ) 需要配置mocha 支持es6及jsx,mocha 自动执行test文件夹下的所有测试用例babel配置{ "presets": [ "es2015",'react' ]} 参考文档：

2017-02-09 16:28:15 2089

原创 yum -b 参数学习

2017-02-07 10:56:08 4330

转载 webpack 启动后自动打开浏览器插件：open-browser-webpack-plugin

在webpack.config文件中添加var OpenBrowserPlugin = require('open-browser-webpack-plugin'); plugins: [ new OpenBrowserPlugin({ url: 'http://localhost:8080' }) ]则在webpack 启动成功后会打开浏览器参考文档 https:

2017-02-06 14:44:41 15203

ISaiSai的专栏