React项目配置1(如何管理项目公共js方法)
时间:2022-05-08
本文章向大家介绍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!
- Android主题换肤 无缝切换
- Android RxJava/RxAndroid结合Retrofit使用
- 网络犯罪和网络间谍对经济的影响(长文,阅读需勇气)
- FireEye:2013年度APT攻击报告(多图)
- linux下利用一次性口令实现安全管理
- HTTPS对于用户隐私泄露无能为力
- 移动APP安全在渗透测试中的应用
- ASLR在Windows与Linux系统之间的差别
- 基于RDP的SSL中间人攻击
- 软件漏洞分析技巧分享
- 撞库攻击:一场需要用户参与的持久战
- Android自定义下拉刷新动画--仿百度外卖下拉刷新
- Android自定义View之高仿QQ健康
- Paypal的一个Dom型XSS漏洞分析
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Laravel框架自定义公共函数的引入操作示例
- PHP PDOStatement::setFetchMode讲解
- Python QTimer实现多线程及QSS应用过程解析
- PHP count()函数讲解
- Laravel中9个不经常用的小技巧汇总
- PHP simplexml_load_string()函数实例讲解
- php文件操作之文件写入字符串、数组的方法分析
- php xhprof使用实例详解
- PHP获取远程http或ftp文件的md5值的方法
- PHP addslashes()函数讲解
- PHP+swoole+linux实现系统监控和性能优化操作示例
- PHP中PCRE正则解析代码详解
- tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
- 使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
- python 抓取知乎指定回答下视频的方法