本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!
1、React项目配置1(如何管理项目公共js方法)---2018.01.11
2、React项目配置2(自己封装Ajax)---2018.01.12
3、React项目配置3(如何管理项目API接口)---2018.01.15
4、React项目配置4(如何在开发时跨域获取api请求)---2018.01.16
5、React项目配置5(引入MockJs,实现假接口开发)---2018.01.17
6、React项目配置6(前后端分离如何控制用户权限)---2018.01.18
开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
在开发中,我们会用到很多js公共方法,我们通常把它们都放在一个统一的js文件中!
比如:获取URL参数、判断是否是手机号等等公用方法!
我们先来写出这个方法!
在app -> public -> js 下新建 utils.js
我们写入这两个方法,然后导出这两个方法
/** * 截取URL参数 * @param {string} name 截取的key * @param {string} [url] 被截取的url * @returns {string} 截取的val */ let urlParam = (name, url) => { let reg = new RegExp(".*[&?]" + name + "=([^&]*)(&|$)"); let r; if (!url) { r = window.location.search.match(reg); } else { r = url.match(reg); } if (r) return decodeURIComponent(r[1]); return ''; }; /** * 判断是否是手机号 * @param {string} val 传进来的字符串 */ let isMobile = (val) => { let reg = /^1[3|4|5|7|8][0-9]\d{8}$/; return reg.test(val); }; export default { "urlParam": urlParam, "isMobile": isMobile }
我们用下这两个方法,看看好不好使!
在 app -> component -> shop -> Index.jsx 中 引入 utils.js
import utils from '../../public/js/utils';
在渲染部分我们,使用 获取url 参数的这个方法:
获取url中参数name的值:{utils.urlParam('name')}
然后我们再浏览器里看下效果:
OK 一切正常!
在试下识别手机号的方法:
<div>15910678888:这{utils.isMobile('15910678888') ? '是' : '不是'}手机号</div> <div>11111111111:这{utils.isMobile('11111111111') ? '是' : '不是'}手机号</div>
看下浏览器效果
运行正常!
完整代码如下:
import React from 'react'; import utils from '../../public/js/utils'; import '../../public/css/shop.pcss' class Index extends React.Component { constructor(props) { super(props); this.state = { list: [ {id: 1, title: '前端人人1'}, {id: 2, title: '前端人人2'}, {id: 3, title: '前端人人3'}, {id: 4, title: '前端人人4'}, {id: 5, title: '前端人人5'}, {id: 6, title: '前端人人6'}, {id: 7, title: '前端人人7'}, {id: 8, title: '前端人人8'}, {id: 9, title: '前端人人9'} ] }; } handleItemDel(id) { let list = this.state.list; list.splice(list.findIndex(data => data.id === id), 1); this.setState({list: list}) } render() { let {list} = this.state; return ( <div className="content"> <div>获取url中参数name的值:{utils.urlParam('name')}</div> <div>15910678888:这{utils.isMobile('15910678888') ? '是':'不是'}手机号</div> <div>11111111111:这{utils.isMobile('11111111111') ? '是':'不是'}手机号</div> { list.map(data => <li key={data.id}>{data.title} <button onClick={() => this.handleItemDel(data.id)}>删除</button> </li>) } </div> ); } } export default Index;
我们回过头来看下:utils.js 的另一种写法!
export default { /** * 截取URL参数 * @param {string} name 截取的key * @param {string} [url] 被截取的url * @returns {string} 截取的val */ urlParam: (name, url) => { let reg = new RegExp(".*[&?]" + name + "=([^&]*)(&|$)"); let r; if (!url) { r = window.location.search.match(reg); } else { r = url.match(reg); } if (r) return decodeURIComponent(r[1]); return ''; }, /** * 判断是否是手机号 * @param {string} val 传进来的字符串 */ isMobile: (val) => { let reg = /^1[3|4|5|7|8][0-9]\d{8}$/; return reg.test(val); } }
这样就不用在底部,再导出了!
还有一种:
/** * 截取URL参数 * @param {string} name 截取的key * @param {string} [url] 被截取的url * @returns {string} 截取的val */ let urlParam = (name, url) => { let reg = new RegExp(".*[&?]" + name + "=([^&]*)(&|$)"); let r; if (!url) { r = window.location.search.match(reg); } else { r = url.match(reg); } if (r) return decodeURIComponent(r[1]); return ''; }; /** * 判断是否是手机号 * @param {string} val 传进来的字符串 */ let isMobile = (val) => { let reg = /^1[3|4|5|7|8][0-9]\d{8}$/; return reg.test(val); }; export {urlParam, isMobile}
这种方法在使用的时候,就可以不用点方法了!
可以直接使用:
import {urlParam,isMobile} from '../../public/js/utils';
<div>获取url中参数name的值:{utils.urlParam('name')}</div> <div>15910678888:这{utils.isMobile('15910678888') ? '是' : '不是'}手机号</div> <div>11111111111:这{utils.isMobile('11111111111') ? '是' : '不是'}手机号</div>
完整代码:
import React from 'react'; import {urlParam,isMobile} from '../../public/js/utils'; import '../../public/css/shop.pcss' class Index extends React.Component { constructor(props) { super(props); this.state = { list: [ {id: 1, title: '前端人人1'}, {id: 2, title: '前端人人2'}, {id: 3, title: '前端人人3'}, {id: 4, title: '前端人人4'}, {id: 5, title: '前端人人5'}, {id: 6, title: '前端人人6'}, {id: 7, title: '前端人人7'}, {id: 8, title: '前端人人8'}, {id: 9, title: '前端人人9'} ] }; } handleItemDel(id) { let list = this.state.list; list.splice(list.findIndex(data => data.id === id), 1); this.setState({list: list}) } render() { let {list} = this.state; return ( <div className="content"> <div>获取url中参数name的值:{urlParam('name')}</div> <div>15910678888:这{utils.isMobile('15910678888') ? '是' : '不是'}手机号</div> <div>11111111111:这{utils.isMobile('11111111111') ? '是' : '不是'}手机号</div> { list.map(data => <li key={data.id}>{data.title} <button onClick={() => this.handleItemDel(data.id)}>删除</button> </li>) } </div> ); } } export default Index;
看下浏览器:
一切正常OK!
希望大家能灵活运用,详细用法,可以去看下ES6!
本文完
禁止擅自转载,如需转载请在公众号中留言联系我们!
感谢童鞋们支持!
如果你有什么问题,可以在下方留言给我们!