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!
- 新浪微博爬虫最新分享
- Unity Application Block 3月12 发布的版本
- HTTPS静态服务搭建过程详解
- 基于Webkit的浏览器关键渲染路径介绍
- CodePlex 全面支持Subversion/TortoiseSVN
- 计算机程序的思维逻辑 (11) - 初识函数
- Android WebView 调试方法
- Python开发微信公众号后台(系列一)
- Consul最常用的命令和接口api
- webpack的Hot Module Replacement运行机制
- 如何使用Node.js编写命令工具——以vue-cli为例
- SpringBoot编写自定义的starter
- webpack3新特性简介
- Python机器学习算法入门之梯度下降法实现线性回归
- 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 数组属性和方法
- 哈希表:解决了两数之和,那么能解决三数之和么?
- 双指针法:一样的道理,能解决四数之和
- 【python-opencv】轨迹栏作为调色板
- springBoot 线程池异步编程
- MPU6050姿态解算2-欧拉角&旋转矩阵
- 【python-opencv】图像的基本操作
- 3 分钟生成一个单元测试报告,这个样式爱了
- 拼多多的底层逻辑
- 详解ELF重定向原理
- 干货 | 携程基于Quasar协程的NIO实践
- 【python-opencv】图像上的算术运算
- 个人珍藏的80道多线程并发面试题(11-20答案解析)
- 【python-opencv】性能衡量和提升技术
- 【python-opencv】转换颜色空间
- 七夕,当然少不了纯CSS的点缀啦