zl程序教程

您现在的位置是:首页 >  前端

当前栏目

JavaScript开发中规范性的一点感想

JavaScript开发 一点 感想 规范性
2023-06-13 09:14:10 时间
可谓一劳永逸,不要重复造轮子:)
1.常用的方法统一放置
例如:在用户注册时,时常需要判断文本框中字符是否是汉字、英文、数字或邮箱地址等等。何不把这些方法统一放在一个脚本中,取名叫做utility.js呢?
复制代码代码如下:

//待需要时另存为一个js

functionisNull(obj)
{
if(!obj||obj.length==0||obj=="")
{
parent.MyAlert("标注名不能为空!",alertImg);
returnfalse;
}
else
{
returntrue;
}
}

//验证是否为整数
functionisNumber(oNum)
{
if(!oNum)returnfalse;

try{
if(parseInt(oNum)!=oNum){
parent.MyAlert("查询距离请填写正整数!",alertImg);
returnfalse;
}
}
catch(ex)
{
parent.MyAlert("查询距离请填写正整数!",alertImg);
returnfalse;
}

returntrue;
}

//验证是否为中文
functionisChinese(oCn)
{
if(!oCn||oCn.length==0)returnfalse;

try{
varreg=/^[\u4e00-\u9fa5]+$/i;//含中文

if(reg.test(oCn))
{
returntrue;
}
else{
parent.MyAlert("关键字请填写中文!",alertImg);
returnfalse;
}
}
catch(ex)
{
parent.MyAlert("关键字请填写中文!",alertImg);
returnfalse;
}
}

//验证是否为中文或字母
functionisEnCh(oStr)
{
if(!oStr||oStr.length==0)returnfalse;

try{
varreg=/^[a-zA-Z\u4E00-\u9FA5]/g;//含中文或拼音

if(reg.test(oStr))
{
returntrue;
}
else{
parent.MyAlert("地名请填写中文或拼音!",alertImg);
returnfalse;
}
}
catch(ex)
{
parent.MyAlert("地名请填写中文或拼音!",alertImg);
returnfalse;
}
}

//结果保留2位小数
functionroundAmount(n){
vars=""+Math.round(n*100)/100;
vari=s.indexOf(".")
if(i<0)returns+".00";

vart=s.substring(0,i+1)+s.substring(i+1,i+3);
if(i+2==s.length)t+="0";

returnt;
}

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

看了上面的代码,您是否也发现一个问题:下一个项目中如果提示、报错信息不一样,还需要重新改动上述代码。何不把提示信息统一放在一个脚本中,取名叫做resource_zh.js呢?

在多语言版本的软件中,也有用类似的招数达到切换界面语言,有发现?呵呵。
复制代码代码如下:

varpage_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,如果您没用jQuery等脚本库的话,可能是自己写每次请求和回调的函数。何不把这些方法都放在一个ajax.js中呢?
复制代码代码如下:
varxmlhttpObj=false;
functionXHR(CallBack)
{
this.callback=CallBack;
}
XHR.createXMLHttp=function()
{
if(window.ActiveXObject)//IE浏览器
{
try
{
xmlhttpObj=newActiveXObject("Microsoft.XMLHTTP");//IE4.0
}
catch(e)
{
try
{
xmlhttpObj=newActiveXObject("Msxml2.XMLHTTP");//IE5.0以上
}
catch(e2)
{
xmlhttpObj=false;
}
}
}
elseif(window.XMLHttpRequest&&!xmlhttpObj)//开放浏览器
{
xmlhttpObj=newXMLHttpRequest();
}
}
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对象出来,例如:varlegendObj=newXHR(function(){...});然后用legendObj.Onstar("POST","Handlers/legendHandler.ashx",false,"mapName="+mapName);提交请求即可。