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 相关文章推荐
页面中body onload 和 window.onload 冲突的问题的解决
Jul 01 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
Mint UI 基于 Vue.js 移动端组件库
Nov 07 Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 Javascript
Javascript call及apply应用场景及实例
Aug 26 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 Javascript
vue引入Excel表格插件的方法
Apr 28 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
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
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
php文件包含的几种方式总结
2019/09/19 PHP
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
[01:04:14]OG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python实现端口转发器的方法
2015/03/13 Python
python使用邻接矩阵构造图代码示例
2017/11/10 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
对python多线程与global变量详解
2018/11/09 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
美国网上书店:Barnes & Noble
2018/08/15 全球购物
Beauty Expert美国/加拿大:购买奢侈美容产品
2018/12/05 全球购物
初级Java程序员面试题
2016/03/03 面试题
劳动竞赛口号
2014/06/16 职场文书
我们的节日元宵活动方案
2014/08/23 职场文书
初三毕业评语
2014/12/26 职场文书
青涩记忆观后感
2015/06/18 职场文书
如何写观后感
2015/06/19 职场文书
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android
Pandas自定义选项option设置
2021/07/25 Python
剖析后OpLog订阅MongoDB的数据变更就没那么难了
2022/02/24 MongoDB