JavaScript脚本库编写的方法


Posted in Javascript onDecember 09, 2015

JavaScript就是所谓的客户端脚本语言,是一种在互联网浏览器(浏览器也称为Web客户端,因为它连接到Web服务器上,以下载页面)内部运行的计算机编程语言。JavaScript的工作方式很有趣。普通网页内都会插入一些JavaScript代码。当浏览器加载该页面时,浏览器的内置解释器将读取并运行它在该页面中找到的JavaScript代码。

做Web开发已经四年,或多或少积累了一些JavaScript脚本。比如,限制input只允许输入数字的脚本;敲回车自动转到下一个控件,相当于Tab键的作用一样;因为JavaScript数值运算的结果常常不是我们想要的,还得有浮点数运算(加减乘除)函数。每次有JavaScript需求时,常常是在网上找需要的脚本,直接拷贝到aspx文件中,或者新建JavaScript文件,然后添加引用
<script src="JScript.js" type="text/javascript"></script> ,以这种方式来完成客户端脚本的制作。毕竟对JavaScript的需求不多,也就没有花很大的力气去学。

最近公司的项目不忙,空闲的时间赶忙补习一下脚本的知识。网上有很流行的JQuery脚本库,在园子里也有大量的文章讨论怎么去用。以我亲身体会,JavaScript和正则表达式一样,常学常忘。学过的知识不用,很快就会忘记。特别是和应用相关的内容,比如PageMethods怎么用,客户短回调如何实现,如何用JavaScript调用Web服务,在项目中用过多次,但是一被同事问起来,还是模模糊糊的,很难说出个所以然来。我有一个办法是制作demo,把各种效果的demo做好,分门别类的放在一起,然后用的时候去搜索,这样可以节省很多时间。另外一种办法就是今天这篇文章提到的,把做过的JavaScript整理一下,制作成比较通用的脚本库,方便复用。整理的含义是,对函数进行适当的调整,让它能不仅能满足当前项目的需求,还要能满足未来项目的需求,另一个含义是要规范命名和组织结构,写好样例代码,用起来的时候方便。有时候在网上下载了很多JavaScript实用脚本,但是忘记下载它的测试脚本,不知道怎么去用,还不如到网上重新搜索来得方便。

JavaScript被定义为一种基于对象的脚本语言,一方面它以DOM对象模型和DOM对象中的方法为基础,另一方面,它又不具备面向对象语言的继承,多态的特性。ASP.NET AJAX对JavaScript进行了扩展,使我们可以以面向对象的方式来组织JavaScript脚本。我这里的主要工作是封装,把现有的代码封装起来,方便下次复用。于是,有两种方法来组织现有的JavaScript代码库。
我以JavaScript中倍受争议的浮点运算中的加法和减法运算为例子,看看如何把它们封装起来

JavaScript风格

function Math() { } 
//加法 
Math.prototype.Add=function(arg1,arg2){ 
var r1,r2,m; 
try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0} 
try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0} 
m=Math.pow(10,Math.max(r1,r2)) 
return (arg1*m+arg2*m)/m 
} 
//减法 
Math.prototype.Subtraction=function(arg1,arg2){ 
  var r1,r2,m,n; 
  try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0} 
  try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0} 
  m=Math.pow(10,Math.max(r1,r2)); 
  n=(r1>=r2)?r1:r2; 
  return ((arg1*m-arg2*m)/m).toFixed(n); 
} 
调用方式 
var math=new Math(); 
var result=math.Add(2.0,4.0); 
AJAX风格 
Type.registerNamespace(“Utility”); 
Utility.Math=function(larg,rarg) 
{ 
 this._left=larg; 
 this._right=rarg; 
} 
Utility.Math.prototype= 
{ 
//加法函数 
Add:function () 
{ 
var r1,r2,m; 
try{r1=left.toString().split(".")[1].length}catch(e){r1=0} 
try{r2=right.toString().split(".")[1].length}catch(e){r2=0} 
m=Math.pow(10,Math.max(r1,r2)) 
return (left*m+right*m)/m 
} 
//减法函数 
Subtraction: function(){ 
  var r1,r2,m,n; 
  try{r1=left.toString().split(".")[1].length}catch(e){r1=0} 
  try{r2=right.toString().split(".")[1].length}catch(e){r2=0} 
  m=Math.pow(10,Math.max(r1,r2)); 
  n=(r1>=r2)?r1:r2; 
  return ((left*m-right*m)/m).toFixed(n); 
} 
} 
//注册类 
Utility.Math.registerClass(“Utility.Math”); 
然后,在需要的地方,就可以运用下面的方法调用 
var math=new Utility.Math(2.0,4.2); 
var result=math.Add();

使用上面提出的两种方法,可以方便封装常用的JavaScript,减少重复。

上面的命名有个问题,因为Math是JavaScript内置的一种类型,用于处理各种数学运算,为了让上面的JavaScript风格的脚本运行起来,还得把类名换成其它的名字,如MathHelper。ASP.NET AJAX还对JavaScript的六种类型进行了扩展,分别是Array,Boolean,Date,Error,Object和string.

方法有了,估计还有朋友会说,你应该把自己做的JavaScript库公布出来才行,这样才能满足大众的口味。仅有这个方法,要实践起来还是很困难的:有项目时间紧的理由,每天都忙着做项目,哪里有时间去整理这个,也有不熟悉JavaScript的理由。

为了让我的类库不至于很菜,我到网上找了些关于写好JavaScript库的建议。

有一篇文章的名字叫《Building a JavaScript Library》,本来写这篇文章之前很想看看他是怎么写的,可是网页中一直提示正在加载文件,无法查看。很想知道老外对于同样的主题,他是怎么写的。

还有一篇文章也很精彩,名字是《Rules For JavaScript Library Authors》,地址在
http://dean.edwards.name/weblog/2007/03/rules/

我把它翻译出来,供大家参考

1 使用方法不要过于繁琐。
2 避免使用Object.prototype
3 不要做过度的扩展
4  遵守标准。
5  向优秀的JavaScript创作者看齐
6  保持灵活可变 7  管理好内存,避免内存泄露。
8  避免与浏览器相关的hack
9  保持类库简洁
10 让类库保持可预知。比如,虽然没有查看文档,也应该能猜测到Math是处理和数学运算相关的内容
11 加分的规则:文档;尽可能多的使用命名空间组织代码,使之容易被记住;

我的水平很一般的,很普通的一个程序员。所以,不要向我要代码。我给你了,你还要花时间去看;而且我的代码没有文档,你读不懂怎么办呢。与其这样,为何不把你自己手头有的JavaScript 整理一下,况且你手里头有的JavaScript ,被你实际用过,你对他肯定熟悉。也不要推荐JQuery,它不是我的目的。
我的目的是教你组织整理现有的JavaScript 脚本库,把手头已有资源用好就很不错了。

测试代码下载: http://xiazai.3water.com/201509/yuanma/Math-Test(3water.com).rar

补充一个常见的问题:如果把JavaScript 放到外部文件中,运行时可能会提示“找不到对象”
这个问题是由文件编码导致的。要让JavaScript 脚本文件的编码和HTML页面的文件编码保持一致
点击文件-->另存为选项,把两者存储为同样的编码格式

JavaScript脚本库编写的方法

推荐用VS IDE编写脚本,这样可以使用IDE提供的智能提示支持

JavaScript脚本库编写的方法

如果是用Dreamweaver编写脚本,它也提供了智能提示

JavaScript脚本库编写的方法

以上内容给大家介绍了JavaScript脚本库编写的方法,希望大家喜欢。

Javascript 相关文章推荐
JavaScript 类型的包装对象(Typed Wrappers)
Oct 27 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
Javascript节点关系实例分析
May 15 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
ashx文件获取$.ajax()方法发送的数据
May 26 Javascript
javascript中setAttribute兼容性用法分析
Dec 12 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
Oct 24 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
微信小程序绘制图片发送朋友圈
Jul 25 Javascript
js验证密码强度解析
Mar 18 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 Javascript
vue router返回到指定的路由的场景分析
Nov 10 Javascript
js省市联动效果完整实例代码
Dec 09 #Javascript
JavaScript知识点整理
Dec 09 #Javascript
js实现跨域访问的三种方法
Dec 09 #Javascript
详解js跨域原理以及2种解决方案
Dec 09 #Javascript
深入探讨前端框架react
Dec 09 #Javascript
JavaScript中rem布局在react中的应用
Dec 09 #Javascript
js获取鼠标位置实例详解
Dec 09 #Javascript
You might like
基于php验证码函数的使用示例
2013/05/03 PHP
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
2013/04/09 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
2016/06/29 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
Python使用爬虫猜密码
2016/02/19 Python
Python快速排序算法实例分析
2017/11/29 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
python爬取youtube视频的示例代码
2021/03/03 Python
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
教师个人培训总结
2015/02/11 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
PostgreSQL解析URL的方法
2021/08/02 PostgreSQL
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL
开发微信小程序之WXSS样式教程
2022/04/18 HTML / CSS