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

Z时代
2024-01-10
分类：综合

react

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