微信公众号首发
本教程总共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 utilsfrom '../../public/js/utils';
在渲染部分我们，使用 获取url 参数的这个方法：
获取url中参数name的值：{utils.urlParam('name')}
然后我们再浏览器里看下效果：
OK 一切正常！
在试下识别手机号的方法：
15910678888：这{utils.isMobile('15910678888') ?'是' :'不是'}手机号11111111111：这{utils.isMobile('11111111111') ?'是' :'不是'}手机号看下浏览器效果
运行正常！
完整代码如下：
import Reactfrom 'react';
import utilsfrom '../../public/js/utils';
import '../../public/css/shop.pcss'
class Indexextends 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 (
获取url中参数name的值：{utils.urlParam('name')}
15910678888：这{utils.isMobile('15910678888') ?'是':'不是'}手机号
11111111111：这{utils.isMobile('11111111111') ? '是':'不是'}手机号
{
list.map(data =>
this.handleItemDel(data.id)}>删除
)
}
);
}
}
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';
获取url中参数name的值：{utils.urlParam('name')}15910678888：这{utils.isMobile('15910678888') ?'是' :'不是'}手机号11111111111：这{utils.isMobile('11111111111') ?'是' :'不是'}手机号完整代码：
import Reactfrom 'react';
import {urlParam,isMobile}from '../../public/js/utils';
import '../../public/css/shop.pcss'
class Indexextends 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 (
获取url中参数name的值：{urlParam('name')}
15910678888：这{utils.isMobile('15910678888') ? '是' : '不是'}手机号
11111111111：这{utils.isMobile('11111111111') ? '是' : '不是'}手机号
{
list.map(data =>
this.handleItemDel(data.id)}>删除
)
}
);
}
}
export default Index;
看下浏览器：
一切正常OK！
希望大家能灵活运用，详细用法，可以去看下ES6！
本文完
禁止擅自转载,如需转载请在公众号中留言联系我们!
感谢童鞋们支持!
如果你有什么问题,可以在下方留言给我们!
网友评论