React项目配置1(如何管理项目公共js方法)

本教程总共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！

本文完 














禁止擅自转载,如需转载请在公众号中留言联系我们!

感谢童鞋们支持!

如果你有什么问题,可以在下方留言给我们!