专栏首页前端人人React项目配置1(如何管理项目公共js方法)

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!

本文分享自微信公众号 - 前端人人(frontend_everyone),作者:思铭

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-01-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)

    本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建...

    前端人人
  • React多页面应用1(​webpack开发环境搭建,包括Babel、热更新等)

    本教程总共7篇,每日更新一篇,请关注我们,敬请期待! 1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等) ----2017....

    前端人人
  • React多页面应用3(webpack性能提升,包括打包性能、提取公共包等)

    本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包...

    前端人人
  • 如何处理错误信息 Pricing procedure could not be determined

    当给一个SAP CRM Quotation文档的行项目维护一个产品时,遇到如下错误信息:Pricing procedure could not be deter...

    Jerry Wang
  • Qt之FTP上传/下载文件操作

    Qt君
  • TypeScript在react项目中的实践

    前段时间有写过一个TypeScript在node项目中的实践。 在里边有解释了为什么要使用TS,以及在Node中的一个项目结构是怎样的。 但是那仅仅是一个纯接口...

    前端博客 : alili.tech
  • 你也可以训练超大神经网络!谷歌开源GPipe库

    深度神经网络(DNN)推动了许多机器学习任务的发展,包括语音识别、视觉识别、语言处理。BigGan、Bert、GPT2.0取得的近期进展表明,DNN模型越大,其...

    IT派
  • 初识UIS超融合产品

    H3C UIS 超融合产品是H3C公司面向IaaS(基础架构即服务)推出的新一代云数据中心软硬件融合一 体机,由超融合硬件服务器、超融合内核与超融合管理软件三部...

    网络技术联盟站
  • 你也可以训练超大神经网络!谷歌开源GPipe库

    深度神经网络(DNN)推动了许多机器学习任务的发展,包括语音识别、视觉识别、语言处理。BigGan、Bert、GPT 2.0取得的近期进展表明,DNN模型越大,...

    机器之心
  • 用co玩转异步

    之前我在关于Promise的文章中提到了co这个库。在这篇文章里,我将写一写自己对它的认识。

    前端博客 : alili.tech

扫码关注云+社区

领取腾讯云代金券