JavaScript 开发规范：统一工具函数、多语言资源与 Ajax 请求封装

这种规范化的做法可谓一劳永逸，其核心价值在于避免重复造轮子。

1.常用的方法统一放置

常用工具函数封装

以用户注册场景为例，系统常需校验文本框内容是否为汉字、英文字母、数字或邮箱地址。建议将这些验证逻辑统一封装至一个名为 utility.js 的脚本文件中，以便复用。

具体实现代码如下：

// 待需要时另存为一个js
function isNull(obj)
{ 
if (!obj || obj.length==0 || obj=="")
{ 
parent.MyAlert("标注名不能为空!",alertImg);
return false;
} 
else
{ 
return true;
} 
} 
// 验证是否为整数
function isNumber(oNum)
{ 
if(!oNum) return false;
try{
if(parseInt(oNum)!=oNum) {
parent.MyAlert("查询距离请填写正整数!",alertImg);
return false;
} 
} 
catch(ex)
{ 
parent.MyAlert("查询距离请填写正整数!",alertImg);
return false;
} 
return true;
} 
// 验证是否为中文
function isChinese(oCn)
{ 
if (!oCn || oCn.length==0) return false;
try{
var reg = /^[\u4e00-\u9fa5]+$/i; //含中文
if ( reg.test(oCn) )
{ 
return true;
} 
else{
parent.MyAlert("关键字请填写中文!",alertImg);
return false;
} 
} 
catch(ex)
{ 
parent.MyAlert("关键字请填写中文!",alertImg);
return false;
} 
} 
// 验证是否为中文或字母
function isEnCh(oStr)
{ 
if (!oStr || oStr.length==0) return false;
try{
var reg = /^[a-zA-Z\u4E00-\u9FA5]/g; //含中文或拼音
if ( reg.test(oStr) )
{ 
return true;
} 
else{
parent.MyAlert("地名请填写中文或拼音!",alertImg);
return false;
} 
} 
catch(ex)
{ 
parent.MyAlert("地名请填写中文或拼音!",alertImg);
return false;
} 
} 
// 结果保留2位小数
function roundAmount(n){
var s = "" + Math.round(n * 100) / 100;
var i = s.indexOf('.')
if (i < 0) return s + ".00";
var t = s.substring(0, i + 1) + s.substring(i + 1, i + 3);
if (i + 2 == s.length) t += "0";
return t;
}

2.提示、报错信息统一放置

提示信息与资源管理

观察上述代码，若后续项目中提示或报错信息发生变更，仍需修改 utility.js 中的逻辑。为此，建议将提示信息统一提取至名为 resource_zh.js 的脚本文件中，实现逻辑与文案的分离。

这一思路同样适用于多语言软件开发，通过类似机制可实现界面语言的动态切换。

具体配置代码如下：

var page_res = {
"meter": "米",
"kilometer": "千米（公里）",
"mile": "英里",
"yard": "码",
"degree": "度",
"millimeter": "毫米",
"saveMap": "保存地图",
"printMap": "打印地图",
"queryResult": "查询结果",
"queryResultNull": "查询结果为空",
"experssionCanNotNull": "查询表达式不能为空",
"networkInfo": "路径信息",
"arcInfo": "弧段信息",
"addEntitySuccess": "添加地物成功! ",
"addEntityFail": "添加地物失败!",
"updateEntitySuccess": "更新地物成功!",
"updateEntityFail": "更新地物失败!",
"updatePropertySuccess": "更新属性成功!",
"updatePropertyFail": "更新属性失败!",
"deleteEntitySuccess": "删除地物成功!",
"deleteEntityFail": "删除地物失败!",
"closestFacilityFail": "最近设施分析失败，请重新选择",
"fieldCanNotNull": "字段数不能为空",
"fieldMustInteger": "字段数必须为整数",
"fieldMustMoreThanZero": "字段数必须大于0",
"numberCanNotNull": "数值不能为空"
}

可将常用单位、按钮文本及提示信息统一存放于此。在页面加载初期通过 eval 实例化该对象后，即可通过 res.networkInfo 等形式直接获取对应内容。

3.AjaxRequest请求封装

Ajax 请求封装

鉴于现代开发中 Ajax 的高频使用，若未采用 jQuery 等库，通常需自行编写每次请求及回调函数。建议将这些逻辑封装至 ajax.js 文件中，以保持代码整洁。

具体封装代码如下：

var xmlhttpObj=false;
function XHR(CallBack)
{ 
this.callback=CallBack;
} 
XHR.createXMLHttp = function ()
{ 
if(window.ActiveXObject) //IE浏览器
{ 
try
{ 
xmlhttpObj = new ActiveXObject("Microsoft.XMLHTTP");//IE4.0
} 
catch (e)
{ 
try
{ 
xmlhttpObj = new ActiveXObject("Msxml2.XMLHTTP");//IE5.0以上
} 
catch (e2)
{ 
xmlhttpObj=false;
} 
} 
} 
else if(window.XMLHttpRequest&&!xmlhttpObj) //开放浏览器
{ 
xmlhttpObj = new XMLHttpRequest();
} 
} 
XHR.prototype.Onstar = function (method,Url,bFlag,param)
{ 
if(this.callback!=null)
{ 
XHR.createXMLHttp();
xmlhttpObj.onreadystatechange=this.callback;
xmlhttpObj.open(method,Url,bFlag);
xmlhttpObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
xmlhttpObj.send(param);
} 
else
{ 
alert("没有客户端处理函数!")
} 
}

使用时，需实例化一个 XHR 对象，例如：var legendObj=new XHR(function (){...});。随后调用 legendObj.Onstar("POST","Handlers/legendHandler.ashx",false,"mapName=" + mapName) 即可提交请求。

JavaScript 开发规范性实践：工具函数、资源管理与 Ajax 封装

常用工具函数封装

提示信息与资源管理

Ajax 请求封装

实用工具推荐