react-router 之 routerWillLeave 实现 自定义Dialog

react-router可以在react中起到路由的作用,同时也有一个routerWillLeave,这个函数帮助我们再处理路由的时候,离开某个路由要做的某个判断起到了很好的作用,但是version2才有这个功能,这里记录下如何自定自己弹出框。由于react-router自带的功能不是很好,需要我们自己处理一下,于是google参考了stackoverflow上的一篇文章,先建立一个函数functionsetAsyncRouteLeaveHook(router,route,hook){letwithinHook=falseletfinalResult=undefinedletfinalResultSet=falserouter.setRouteLeaveHook(route,nextLocation=>{withinHook...

javascript 之 事件统计,防重复统计

事件统计防重复统计,不服来挑错functiontrack(eventName,params){varimg=newImage();if(typeofparams=='object'){params=JSON.stringify(params);}else{params='';}vart=newDate().valueOf();varrandom=Math.random();varreferrer=document.referrer;img.src='/track?event='+encodeURIComponent(eventName)+'&params='+encodeURIComponent(params)+'&t='+t+'&r='+random+'&referre...

Reactjs 在 Browser 环境下是如何开发的

以前使用reactjs做前端开发都是webpack打包然后在运行,这样的好处是,你开发的环境是一个纯碎在写nodejs的感觉,而且还能应用很多ES6的新特性,岂不快哉!最近在做后端,也由于使用webpack时间长,一直没有找到很好的办法去解决,自动打包缓慢的问题,还有就是每次开发你都要去根据具体情况写要给跟webpack相关的config文件。于是就试着用Browser的环境进行开发,结果今天尝试下后,果然还是很不错的。首先引入react,我这里使用reflux,然后再引入reflux,再引入babel。<scriptsrc="/js/react.min.js"type="text/javascript"charset="utf-8"></script><scriptsrc="/js/react-dom.m...

Android webview中的页面出现的部分Bug及解决方案

写移动页面时给一个图片添加样式如下img{border:.05remsolid#5c0008;border-radius:1rem;}在IOS上正常,部分安卓的手机却不能正常显示(例如vivo手机),查阅了资料后发现在安卓低版本的手机上border-radius这个css属性确实存在该问题以及发现一些其他的问题,特此记下!一、Android2.3自带浏览器不支持%通常我们实现一个圆只需要border-radius:50%就可以了,但是在Android2.3中是不支持百分比的,要兼容的话我们只能使用一个较大值例如border-radius:999px;二、Android及Safari低版本img的圆角问题(就是本文开头提到的问题)当img元素有border时设置border-radius会导致圆角变形(如图)bord...

uglify error log 处理

使用uglify在做js的处理过程中,会遇到js的各种问题,而导致uglify自己报错,但是往往我们不知道具体是哪个文件的js报错了。这样情况下uglify().on('error',gutil.log)gulp-util就能很好的解决我们的问题。

React 0.14 mocha组建单元测试(二)

使用react的情况下,一般也会用到redux,那么对于这种在react中使用redux的情况,写测试的时候就不能只用之前的文章里面介绍的方式写了。来看下组件例子importReact,{Component,findDOMNode}from'react'import{connect}from'react-redux'import{increase,decrease,fetchItems}from'../../actions/counter'classHomeextendsComponent{render(){const{item,number,isFetching,increase, ...

React 0.14 mocha组建单元测试(一)

先来一个简单的小组件:importReact,{Component}from'react'classBarextendsComponent{render(){return(<divclassName='bar'><h5>AndIamBar!</h5></div>);}}exportdefaultBar;好了,到这里就足够了,来看看测试如何写:importReactfrom'react';importexpectfrom'expect';importTestUtilsfrom'react-addons-test-utils';importBarfr...

分享react-router实例

终于搞了一个大大的router:ReactDOM.render((<Routerhistory={browserHistory}><Routepath='/'component={PanelContainer}onEnter={Public.reactCheckLogin}><IndexRoutecomponent={DiagramListShow}/><Routepath='panel/dataShow'component={DiagramListShow}/><Routepath='panel/diagramShow'component={DiagramShow}><IndexRoutecomponent={ApiDiagram}/><Routepath='apisum'component={ApiDiagram}/>...