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如何处理从java后台返回的list
Apr 24 Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 Javascript
浅谈javascript中的三种弹窗
Oct 21 Javascript
微信小程序 PHP后端form表单提交实例详解
Jan 12 Javascript
BootStrap modal实现拖拽功能
Dec 01 Javascript
详解小程序设置缓存并且不覆盖原有数据
Apr 15 Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 Javascript
Node在Controller层进行数据校验的过程详解
Aug 28 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 Javascript
微信小程序绘制半圆(弧形)进度条
Nov 18 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
PHP操作xml代码
2010/06/17 PHP
php简单复制文件的方法
2016/05/09 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
vue服务端渲染缓存应用详解
2018/09/12 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
Python中turtle作图示例
2017/11/15 Python
微信跳一跳游戏python脚本
2020/04/01 Python
django用户登录验证的完整示例代码
2019/07/21 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
六一节目主持词
2014/04/01 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
酒店开业主持词
2015/07/02 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
Python基础之tkinter图形化界面学习
2021/04/29 Python
Python基础之元类详解
2021/04/29 Python