当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript 开发中规范性的一点感想

Javascript
jquery ajax提交表单数据的两种方式
js数字输入框(包括最大值最小值限制和四舍五入)
文本框的字数限制功能jquery插件
JavaScript让IE浏览器event对象符合W3C DOM标准
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
js版扫雷实现代码 原理不错
鼠标跟随的文字变动效果
JS 判断undefined的实现代码
Ext grid 添加右击菜单
javascript或asp实现的判断身份证号码是否正确两种验证方法
javascript 获取元素位置的快速方法 getBoundingClientRect()
javascript 面向对象继承
JavaScript 地震特效
jquery.ui.progressbar 中文文档
JS 拖动效果实现代码 比较简单
JS小框架 fly javascript framework
JS在IE和FF下attachEvent,addEventListener学习笔记
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
js 动态选中下拉框

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 284 ::
收藏到网摘: n/a

在开发中通用的几个方法,我们把它们放到utility目录下或者utility.js中;所有的提示信息和报错信息统一放置在一起。看起来都是小小的几步,却能让咱们开发的代码同事读起来更顺畅,下个项目中也能用上。 可谓一劳永逸,不要重复造轮子:)
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.提示、报错信息统一放置
看了上面的代码,您是否也发现一个问题:下一个项目中如果提示、报错信息不一样,还需要重新改动上述代码。何不把提示信息统一放在一个脚本中,取名叫做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,如果您没用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);提交请求即可。 "