今年在渣X工作整理的常用JS函数

今年来了渣X工作,我所在这个部门分工很奇怪,CSS竟然有专门的人在搞,开发PHP的人员需要处理JS,以至于有时候开发起来不是那么得心应手,感觉把JS和CSS拆开就像是把方向盘、油门分别交给了两个人来控制,两个人都很不得劲。再说说这边的js吧,完全是那种复制粘贴的方式,更别说使用什么新的前端工具来进行各种优化了。到目前为止,我做了一件事情,将公共常用的JS拆出来,避免复制粘贴去使用,提高开发效率、提高代码鲁棒性。但还是拿出来分享给大家,顺便记录下。

基础工具Tools

/path/to/Tools.js

"use strict";
function Tools(){ };

正则批量替换

正则批量替换,支持多组规则。

/**
*
* @param string str 待处理的字符串
* @param array trans 要替换的规则列表
* @return string 替换之后的字符串
*/
Tools.prototype.regA2B = function(str, trans) {
var i, re, to;
for (i in trans) {
re = trans[i][0];
to = trans[i][1];
str = str.replace(re, to);
}
return str;
};

看看下面的例子

var str = " 你好 		;‘’“”()——,\n\n";
var formatStr = tools.regA2B(str, [
[/^\s+|\s+$/gm, ""],
[/(\r\n)|(\t)/gm, ""],
[/(/gm, "("],
[/)/gm, ")"],
[/“|”/gm, "\""],
[/‘|’/gm, "'"],
[/,/gm, ","],
[/;/gm, ";"],
[/:/gm, ":"],
[/——/gm, "-"]
]);
console.log(formatStr);

上面的例子输出你好 ;''""()-,,这里一定要注意替换的顺序,会按照参数trans中数组的顺序依次替换。

字符串格式化

格式换字符串中的制定变量

/**
*
* @param string str 带格式换变量
* @param Object formats 替换变量的映射
* @return string 替换之后的字符串
*/
Tools.prototype.formatString = function(str, formats) {
var i, re;
for (i in formats) {
re = new RegExp("\\{" + i + "\\}", "gm");
str = str.replace(re, formats[i]);
}
return str;
};

看例子:

var str = "你好{name},我今年{age}岁";
var formatStr = tools.formatString(str, {
name: "叶荣添",
age: 26
});
console.log(formatStr);

上面的例子输出你好叶荣添,我今年26岁

获取链接参数

从浏览器地址栏中的链接或制定链接中获取参数的值

/**
* 从浏览器链接参数中获取参数值
*
* @param string name 待获取的参数名
* @param undefined|string url 制定链接
* @return string|null
*/
Tools.prototype.getQueryString = function(name, url) {
url = typeof(url) != "string" ? window.location.search : url;
var reg = new RegExp("(\\?|&)" + name + "=([^&]*)(&|$)", "i");
var r = url.match(reg);
if (r != null) {
return decodeURIComponent(r[2]);
} else {
return null;
}
};

看例子

var url = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0";
var val = tools.getQueryString("ie", url);
console.log(val);

上面的例子输出utf-8

格式化URL参数

格式化URL参数,可以给URL中添加参数和修改参数

/**
* @param string url 待处理的URL
* @param object params 要设置的参数映射map
* @param bool isEncode 是否使用encodeURIComponent对参数进行编码
* @return string 处理之后的url
*/
Tools.prototype.formatUrlParams = function(url, params, isEncode) {
var splitByHash, pureUrl, hashInfo = ""
, i, reg;
if(typeof(isEncode) == "undefined") {
isEncode = true;
}
// 参数校验
if (typeof(url) != "string") {
throw "要格式化的url必须是字符串";
}
splitByHash = url.split("#");
if (splitByHash.length > 2) {
throw "要格式化的url中最多有一个#hash";
}
pureUrl = splitByHash[0];
if (splitByHash.length == 2) {
hashInfo = "#" + splitByHash[1];
} for (i in params) {
reg = new RegExp("(^|)"+ i +"=([^&]*)(|$)");
if (pureUrl.match(reg) != null) {
pureUrl = pureUrl.replace(
reg,
i+"="+ (isEncode ? encodeURIComponent(params[i]) : params[i])
);
} else {
if (pureUrl.match(/\?/g) != null) {
pureUrl = pureUrl + "&" + i + "=" + (isEncode ? encodeURIComponent(params[i]) : params[i]);
} else {
pureUrl = pureUrl + "?" + i + "=" + (isEncode ? encodeURIComponent(params[i]) : params[i]);
}
}
} pureUrl += hashInfo; return pureUrl;
};

看例子

var url = "https://weibo.com/u/5824742984/home?wvr=5#where";
formatUrl = tools.formatUrlParams(url, {
age: 26,
name: "叶荣添",
where: "homepage",
wvr: 123
});
console.log(formatUrl);

上面的例子输出https://weibo.com/u/5824742984/home?wvr=123&age=26&name=%E7%87%95%E7%9D%BF%E6%B6%9B&where=homepage#where

正则校验参数

匹配字符串中的字符是否全是给定的选择类型

  • zh: 表示汉子,
  • en: 表示大小写字母
  • 其他的用户传入的会加入字符串匹配中
/**
*
* @param string text 待校验的参数
* @param array types 校验的规则
* @param int min 最小长度
* @param int max 最大长度
* @return bool 是否校验通过
*/
Tools.prototype.checkChar = function(text, types, min, max) {
var typeRegs, i, reg, regObj, ret, scope;
if ("undefined" == typeof(min)) {
if ("undefined" == typeof(max)) {
scope = "+";
} else {
scope = "{,"+max+"}";
}
} else {
if (parseInt(min) < 0) {
throw "字符串长度最小值应该是大于等于0的整数";
}
min = parseInt(min);
scope = "{"+min+",";
if ("undefined" == typeof(max)) {
scope += "}";
} else {
if(
parseInt(max) < 0 ||
parseInt(max) < min
) {
throw "字符串长度最小值应该是大于等于0的整数,且应该大于等于最小长度";
}
max = parseInt(max);
scope += max + "}";
}
} var typeRegs = {
"zh": "[\u4e00-\u9fa5]",
"en": "[a-zA-Z]"
},
i, reg, regObj, ret; types = types ? types : ["zh", "en"];
reg = "^("
for (i=0; i<types.length; i++) {
if (!typeRegs[types[i]]) {
reg += types[i] + "|";
} else {
reg += typeRegs[types[i]] + "|";
}
}
reg = reg.substr(0, reg.length - 1);
reg += ")"+scope+"$";
//console.log(reg);
// 打印正则
regObj = new RegExp(reg); ret = regObj.test(text); return ret ? true : false;
};

看例子:

tools.checkChar("叶荣添", false, 3);
// 输出true tools.checkChar("叶荣添", false, 5, 10);
// 输出false tools.tools.checkChar("叶荣添a-_ \\sdASS ", ["zh", "en", "[_\\- ]", "[\\\\]"]);
// 输出true

工作中常用的JS函数整理分享(欢迎大家补充)的更多相关文章

  1. 工作中常用的js、jquery自定义扩展函数代码片段

    仅记录一些我工作中常用的自定义js函数. 1.获取URL请求参数 //根据URL获取Id function GetQueryString(name) { var reg = new RegExp(&q ...

  2. (总结)工作中常用的js自定义函数——日期时间类

    //设置时间类 var Wsdatatime = function(){ this.today = (new Date()).getTime(); //当前时间 } Wsdatatime.protot ...

  3. 工作中常用的QTP操作Excel函数

    前言 本文只是对工作中常用的EOM相关函数的整理,并不是要写个大而全的操作手册,如果想对EOM有更多的了解可以参考QTP的帮助文档或查看QTP安装目录\CodeSamplesPlus\UsingExc ...

  4. 工作中常用到的Java集合类有哪些?

    前言 只有光头才能变强. 文本已收录至我的GitHub精选文章,欢迎Star:https://github.com/ZhongFuCheng3y/3y Java集合是我认为在Java基础中最最重要的知 ...

  5. 收集一些工作中常用的经典SQL语句

    作为一枚程序员来说和数据库打交道是不可避免的,现收集一下工作中常用的SQL语句,希望能给大家带来一些帮助,当然不全面,欢迎补充! 1.执行插入语句,获取自动生成的递增的ID值 INSERT INTO ...

  6. 【 PostgreSQL】工作中常用SQL语句干货

    接触gp数据库近一年的时间,语法上和其他数据库还是有些许不同,工作中常用的操作语句分享给大家! -- 建表语句 create table ods.ods_b_bill_m ( acct_month t ...

  7. 常用的WinAPI函数整理

    常用的WinAPI函数整理 一.进程  创建进程:    CreateProcess("C:\\windows\\notepad.exe",0,0,0,0,0,0,0,&s ...

  8. 工作中常用的Linux命令:mkdir命令

    本文链接:http://www.cnblogs.com/MartinChentf/p/6076075.html (转载请注明出处) 在Linux系统中,mkdir命令用来创建一个目录或一个级联目录. ...

  9. 工作中常用的Linux命令:crontab命令

    本文链接:http://www.cnblogs.com/MartinChentf/p/6060252.html (转载请注明出处) crontab是一个用来设置.删除或显示供守护进程cron执行的定时 ...

随机推荐

  1. 运行React-Native项目

    首先需要配置好环境.集体配置安装Homebrew,Node.js,React Native; 命令行开启RN项目 (如要cd 进入到当前项目的跟目录下) 1. npm install 2. react ...

  2. 用CSS指定外部链接的样式

    大部分的信息类网站,比如维基百科,都会对外部链接(<a>标签)指定特定的样式.作为用户,一眼就知道该链接是指向另一个站点的资源是很好的体验.许多网站在服务器端做外部链接检查,添加一个`re ...

  3. (NO.00001)iOS游戏SpeedBoy Lite成形记(三)

    在Xcode中建立新类Player,继承自CCSprite.因为我们之后需要方便的更换玩家的大头贴,所以需要能够以不同的大头贴参数初始化Player对象. 不过别急,想想我们还需要在Player对象初 ...

  4. Android实训案例(七)——四大组件之一Service初步了解,实现通话录音功能,抽调接口

    Service Service的神奇之处,在于他不需要界面,一切的操作都在后台操作,所以很多全局性(手机助手,语音助手)之类的应用很长需要这个,我们今天也来玩玩 我们新建一个工程--ServiceDe ...

  5. LeetCode之“树”:Sum Root to Leaf Numbers

    题目链接 题目要求: Given a binary tree containing digits from 0-9 only, each root-to-leaf path could represe ...

  6. Learning ROS forRobotics Programming Second Edition学习笔记(八)indigo rviz gazebo

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...

  7. TCP的核心系列 — ACK的处理(一)

    TCP发送数据包后,会收到对端的ACK.通过处理ACK,TCP可以进行拥塞控制和流控制,所以 ACK的处理是TCP的一个重要内容.tcp_ack()用于处理接收到的ACK. 本文主要内容:TCP接收A ...

  8. Select、Poll与Epoll比较

    (1)select select最早于1983年出现在4.2BSD中,它通过一个select()系统调用来监视多个文件描述符的数组,当select()返回后,该数组中就绪的文件描述符便会被内核修改标志 ...

  9. ruby读取源代码自身的一种方法

    我们知道ruby中如果源代码中一行开头(必须在行的开头)有__END__标示,则表示下面的都是数据行,可以用IO对象DATA来访问这些行.但是如果我们用DATA.rewind一下的话,就可以将文件流指 ...

  10. ZeroMQ 教程 001 : 基本概览

    介绍性的话我这里就不翻译了, 总结起来就是zmq很cool, 你应该尝试一下. 如何安装与使用zmq 在Linux和Mac OS上, 请通过随机附带的包管理软件, 或者home brew安装zmq. ...