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


Posted in Javascript onJune 23, 2009

可谓一劳永逸,不要重复造轮子:)
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);提交请求即可。
Javascript 相关文章推荐
javascript编程起步(第一课)
Jan 10 Javascript
js 创建快捷方式的代码(fso)
Nov 19 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
Dec 20 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 Javascript
jQuery中ajax错误调试分析
Dec 01 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
Oct 18 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
详解vuex之store源码简单解析
Jun 13 Javascript
微信小程序动态设置图片大小的方法
Nov 21 Javascript
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
JavaScript中MutationObServer监听DOM元素详情
Nov 27 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 #Javascript
一个很酷的拖动层的js类,兼容IE及Firefox
Jun 23 #Javascript
一些常用的JS功能函数代码
Jun 23 #Javascript
JQuery 无废话系列教程(二) jquery实战篇上
Jun 23 #Javascript
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 #Javascript
IE JS编程需注意的内存释放问题
Jun 23 #Javascript
js form 验证函数 当前比较流行的错误提示
Jun 23 #Javascript
You might like
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
vue+iview+less 实现换肤功能
2018/08/17 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
VueCli生产环境打包部署跨域失败的解决
2020/11/13 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
Python性能优化技巧
2015/03/09 Python
Python使用cx_Oracle调用Oracle存储过程的方法示例
2017/10/07 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
Python列表切片常用操作实例解析
2020/03/10 Python
python3中for循环踩过的坑记录
2020/12/14 Python
serialVersionUID具有什么样的特征
2014/02/20 面试题
工程师自我评价怎么写
2013/09/19 职场文书
最新的大学生找工作自我评价
2013/09/29 职场文书
销售工作岗位职责
2013/12/24 职场文书
如何写好升职自荐信
2014/01/06 职场文书
农村葬礼主持词
2014/03/31 职场文书
教师个人师德总结
2015/02/06 职场文书
在职证明格式样本
2015/06/15 职场文书
Oracle 11g数据库使用expdp每周进行数据备份并上传到备份服务器
2022/06/28 Oracle
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android