web开发

Archives

文件夹

转自谈一谈创建React Component的几种方式 我们知道,当组件的props或者state发生变化的时候:React会对组件当前的Props和State分别与nextProps和nextState进行比较,当发现变化时,就会对当前组件以及子组件进行重新渲染,否则就不渲染。有时候为了避免组件进行不必要的重新渲染,我们通过定义shouldComponentUpdate来优化性能。例如如下代码: class CounterButton extends React.Component { constructor(props) { super(props); this.state = {count: 1}; } shouldComponentUpdate(nextProps, nextState) { if (this.props.color !== nextProps.color) { return true; } if (this.state.count !== nextState.count) { return true; } return false; } render() { return ( <button> this.setState(state => ({count: state.count + 1}))}> Count: {this.state.count} ); } } shouldComponentUpdate通过判断props.color和state.count是否发生变化来决定需不需要重新渲染组件,当然有时候这种简单的判断,显得有些多余和样板化,于是React就提供了PureComponent来自动帮我们做这件事,这样就不需要手动来写shouldComponentUpdate了: […]

场景是一个活动,主域名一样,子域名不同,需要cookie来获取登录态。 因为在默认情况下,跨域是不提供cookie的 需要将xhr的属性进行设置设置 withCredentials = true 同时服务端需要加一个http的头 Access-Control-Allow-Credentials: true 这边还要特殊说明一下兼容性问题,支持withCredentials属性的浏览器有Firefox 3.5+、Safari 4+和Chrome。IE10及更早版本都不支持。

本来可以安装weex官方的插件来处理 通过设置中的plugin来搜索weex可以找到两个插件,有兴趣可以试试。 不过因为上面的插件开发还不完善,这里是推荐先将就使用Vue template这个插件,基本可以不用看到语法红线。 将设置中的editer中的file types中的Vue template插件里面添加*.we扩展名的支持就设置完成了。   然后style中的数值没有px还是会报红,就在小灯泡中忽略好了。 通过以上的处理,就可以暂时和谐地在webstorm中编辑weex文件了。  

遇到一个需求是要把文章里面的链接文本找出来并转成a标签的链接,于是就搞了个正则,如下: “((https|http)?://)” + “(([0-9]{1,3}\.){3}[0-9]{1,3}” // IP形式的URL- 199.194.52.184 + “|” // 允许IP和DOMAIN(域名) + “([0-9a-z_!~*'()-]+[.])*” // 域名- www. + “([0-9a-z][0-9a-z-]{0,61})?[0-9a-z][.]” // 二级域名 + “[a-z]{2,6})” // first level domain- .com or .museum + “(:[0-9]{1,4})?” // 端口- :80 + “((/?)|” // a slash isn’t required if there is no file name + “(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)” + “( |\\s| |<br/>|$|[<>])”; //查找结尾 要注意带上查找结尾的部分会带上里面筛出来的符号,要记得反查去掉。 大概的代码如下,可以根据自己的需要再做修改。 function […]

AngularJs里面自带一个jsonp的方法,但是这个jsonp方法要求你的请求参数callback只能等于JSON_BACK,如: http://url?callback=JSON_BACK 否则你的$http.jsonp就不会正常返回你的回调。 当然如果你非要用其他的回调方法,按照jsonp的原理,你写一个全局方法对应上你的callback也可以,如: http://url?callbac=jsonp function jsonp(data){ console.log(data); }

在Jquery里面offset()方法是返回或设置匹配元素相对于文档的偏移(位置)。 如果不用Jquery想取得某dom元素的文档偏移,理所当然想到了源生的offsetTop/offsetLeft。   然而~ 源生的offsetTop/offsetLeft返回的并不是相对于文档,而是相对于父级。   那么~ 获得相对于文档的偏移,我们就需要做一下处理。 首先我们要用到offsetParent这个属性。   jquery也有个同名方法,作用是返回最近的祖先定位元素。 注意哦,不是父级,是祖先定位元素。   所以思路就是,把自己包括所有祖先的offsetTop/offsetLeft相加,就得到了文档的相对偏移。 function getElementMouseCoords(ele){ var o = ele, t = 0, l = 0; while(o.tagName != ‘BODY’){ t += o.offsetTop; l += o.offsetLeft; o = o.offsetParent; } return { top:t, left:l }; };

首先就是ListView不支持flex的横向布局,也就是不支持 flexDirection:’row’ 从文档上判断应该和他自带的下拉刷新这类东西有关系。   另外就是ListView并不跟render一起刷新渲染,如果想ListView刷新,就要注入新的值。 this.state.dataSource = ds.cloneWithRows([‘row 1’, ‘row 2’]), 这个时候可能要关注一下初始化ListVIew对象时的 rowHasChanged(r1,r2)。 r1和r2分别为注入后的值和注入前的值,根据rowHasChanged返回的值来判断是否需要刷新ListView。

本文案例、代码及主要内容基于知乎前端专栏翻译的文章《深入浅出React Native:使用JavaScript构建原生应用》《Introducing React Native: Building Apps with JavaScript》而写。 在原文的基础上做了一些校对,并增加了android得环境安装和调试的内容。 由我书写的注释将会显示左边这个紫色竖线(#523f6d),而原文的注释为蓝色的(#559bce)。 内容传送门 一、《深入浅出R跟我学用React Native构建原生应用(一) 二、《深入浅出R跟我学用React Native构建原生应用(二) 三、《深入浅出R跟我学用React Native构建原生应用(三) 四、《深入浅出R跟我学用React Native构建原生应用(四) 五、《深入浅出R跟我学用React Native构建原生应用(五) 六、《深入浅出R跟我学用React Native构建原生应用(六) 地理位置搜索 在 Xcode 中,打开 Info.plist 添加一个新的 key,在编辑器内部单击鼠标右键并且选择 Add Row。使用NSLocationWhenInUseUsageDescription 作为 key 名并且使用下面的值: PropertyFinder would like to use your location to find nearby properties 下面是当你添加了新的 key 后,所得到的属性列表: 你将把这个关键的细节提示呈现给用户,方便他们请求访问当前位置。 打开 SearchPage.js,找到用于渲染 Location 按钮的TouchableHighlight,然后为其添加下面的属性值: onPress={this.onLocationPressed.bind(this)} […]

本文案例、代码及主要内容基于知乎前端专栏翻译的文章《深入浅出React Native:使用JavaScript构建原生应用》《Introducing React Native: Building Apps with JavaScript》而写。 在原文的基础上做了一些校对,并增加了android得环境安装和调试的内容。 由我书写的注释将会显示左边这个紫色竖线(#523f6d),而原文的注释为蓝色的(#559bce)。 内容传送门 一、《深入浅出R跟我学用React Native构建原生应用(一) 二、《深入浅出R跟我学用React Native构建原生应用(二) 三、《深入浅出R跟我学用React Native构建原生应用(三) 四、《深入浅出R跟我学用React Native构建原生应用(四) 五、《深入浅出R跟我学用React Native构建原生应用(五) 六、《深入浅出R跟我学用React Native构建原生应用(六) 可点击样式 这些 React Native 的原生代码现在应该理解起来轻车熟路了,所以本教程将会加快速度。 在 SearchResults.js 中,destructuring 声明后面添加以下语句来定义样式: var styles = StyleSheet.create({ thumb: { width: 80, height: 80, marginRight: 10 }, textContainer: { flex: 1 }, separator: { height: 1, backgroundColor: […]