前端javascript开发手册

1、前端JavaScript【开发参考手册】2015年1月1. 文档属性文档属性内容项目/任务名称：项目/任务编号：文档名称：文档编号：文档版本号：变更序列号文档状态：文档编写完成日期作 者：2. 文档变更历史清单文档版本号变更日期修改人描述3. 文档变更说明（仅描述本版本的变更内容）序号变更内容简述.5.目录开发参考手册第一章 脚本库参考1.1 appkit.js功能描述 Kiosk应用支持类。1.1.1 AppKit.link方法参数描述link(Object, boolean)Object:对象boolean: true|false(暂未使用，保留参数)设置页面链接。功能描述

2、用于界面跳转。应用案例与实例 /设置页面链接AppKit.link(link:/center.c,true); /设置页面链接parent.center.location.href=/ center.cAppKit.link(target:parent.center.location,link:/center.c,true);1.1.2 AppKit.postAjax方法参数描述postAjax (url, data, callback, method)连接参数，参数包括，url:设置连接URL。data: 请求参数数据，可为空()。callback: XMLHTTP请求完成后的回调事件。me

3、thod:get/post连接方式，默认为post。默认请求是异步请求。发送Ajax请求。功能描述 用于发送异步请求。应用案例与实例 /建立XMLHTTP连接，设置URL为savesession.viewaction，连接方式为post，/连接参数为qstr，请求完成后回调函数为oncheckCard。AppKit.postAjax(savesession.viewaction ,qstr, oncheckCard); /定义请求完成后的回调函数。oncheckCard = function(req)logDebug.trace(readcard.jsp 执行方法 oncheckCard);v

4、ar data=eval(req.responseText); if(data.retcode = false) onSavetrackError(); return; onForward();1.1.3 AppKit.startTimer方法参数描述startTimer (times, callback, repeat)times:时间间隔。callback:回调函数。repeat:true|false循环标志，默认为true。若循环标志为false时，调用回调函数后关闭计时器。Ajax计时器。功能描述 startTimer方法在一段时间times(以秒为单位)后执行某个函数callback

5、。应用案例与实例 /1s后调用onForward方法。 AppKit.startTimer(1,onForward,false);1.1.4 AppKit.overtime方法参数描述overtime(timer, t)timer:计时器对象。t:计时器参数。设置计时器，超时返回设置页面。功能描述 设置计时器，超时返回设置页面。应用案例与实例 /设置超时页面链接timer=AppKit._na();timerlink=?command=clearpage&fwdpage=+timerlink;AppKit.overtime(Htm.Timer,timer);1.1.5 AppKit.toHtm

6、l方法参数描述toHtml (Object)Object:数据对象。将输出数据按照Html页面格式显示。功能描述 将输出数据按照Html页面格式显示。应用案例与实例 / /将report标签数据设置为Html页面格式，并在第一个OutputBox中显示。Flash.UpdateOutBox(AppKit.toHtml($(report).value);1.1.6 AppKit.rtlvalidate方法参数描述rtlvalidate(pType,Fields,Args,Time,Message)pType:验证类型。Fields:输入数据。Args:验证参数。Time:错误提示页面超时时间。M

7、essage:错误提示信息。调用ValidateClass 中的方法验证输入数据是否正确，若不正确，则发送消息给flash 显示错误提示页面。应用案例与实例 / /将report标签数据设置为Html页面格式，并在第一个OutputBox中显示。Flash.UpdateOutBox(AppKit.toHtml($(report).value);1.1.7 AppKit.windisabled方法参数描述windisabled(Object)Object:设置页面高度和宽度的参数对象隐藏当前窗口。应用案例与实例 /显示屏蔽层。AppKit.windisabled();1.1.7 AppKit.w

8、inenabled方法参数描述winenabled ()(none)显示窗口。应用案例与实例 /显示屏蔽层。AppKit.windisabled();1.1.8 AppKit.playsound方法参数描述playsound(Object)Object:声音文件地址。播放声音。应用案例与实例 / 播放声音。AppKit.playsound(/sound/enteycard.wav);1.1.9 AppKit.countDown方法参数描述countDown(tick,timeoutCallBack,classes)tick:timeoutCallBack:classes:倒计时器。应用案例与实

9、例 / 创建倒计时器，屏幕右上角倒计时显示erval秒后执行onTimeOut/方法。AppKit.countDown(erval, onTimeOut);1.1.10 AppKit.createCell方法参数描述createCell(rownum,colnum)rownum:表格行数。colnum:表格列数。创建一个表格。应用案例与实例 / 创建表格。AppKit.createCell(Number(formParamrownum)+1,formParamcolnum)1.1.11 AppKit.clearCountDown方法参数描述clear

10、CountDown()(none)清除倒计时器。应用案例与实例 /清除倒计时。AppKit.clearCountDown();1.1.12 AppKit.isEmptyVal方法参数描述isEmptyVal (var)var:变量判断变量是否为空，若变量为空，返回true，否则返回false。应用案例与实例 /判断变量是否为空。if(AppKit.isEmptyVal(formParamforward) alert(foward配置为空);return;1.1.13 AppKit.obj方法参数描述obj(name)name:表示id。document.getElementById() 方法的

11、一个便利的简写，获取页面对象。1.1.14 AppKit.val方法参数描述val (name,value)name:表示id。value:默认值。获取页面对象的值。1.1.15 AppKit.focus方法参数描述focus(name)name:表示页面对象id。对页面对象设置焦点。1.1.16 AppKit.show方法参数描述show (name)name:表示页面对象id。显示页面对象。1.1.17 AppKit.hide方法参数描述hide (name)name:表示页面对象id。隐藏页面对象。1.1.18 AppKit.isvalue方法参数描述isvalue (var)var:变

12、量。判断变量是否是一个值，是则返回true。1.1.19 AppKit.isarray方法参数描述isarray (var)var:变量。判断变量是否为一个数组，是则返回true。1.1.20 AppKit.getarraysize方法参数描述getarraysize(var)var:数组。返回数组的长度，如果var不是数组，则返回-1。1.1.21 AppKit.getarray方法参数描述getarray (object)object:对象。将object对象转化为数组。1.1.22 AppKit.tostring方法参数描述tostring(object)object:对象。获取字符串，

13、可传入json，array等。应用案例与实例 /弹出字符串“interval:30,link:/center.c”。var timeout = AppKit.tojson(formParamtimeout);alert(AppKit.tostring(timeout);1.1.23 AppKit.tojson方法参数描述tojson (str)str:Json格式的字符串。将json字符串转化成json对象。应用案例与实例 /将json字符串 “interval:30,link:/center.c” 转化成json对象timeout。var timeout = AppKit.tojson(fo

14、rmParamtimeout);1.1.24 AppKit.isnull方法参数描述isnull (str)str:字符串。判断字符串str是否为空，为空返回true。1.1.25 AppKit.isnum方法参数描述isnum (str)str:字符串。判断字符串str是否为数字，为数字返回true。应用案例与实例 /判断是否为数字。var str = 12356a;AppKit.isnum(str);/false1.1.26 AppKit.isint方法参数描述isint (str)str:字符串。判断是否为整型，是则返回true。1.1.27 AppKit.isdec方法参数描述isde

15、c (str)str:字符串。判断是否为浮点型，是则返回true。应用案例与实例 /判断是否为数字。var str = 12356a;AppKit.isnum(str);/false1.1.28 AppKit.lpad方法参数描述lpad(str,len,pad)str:待填充字符串。len:填充长度。pad:填充字符。左填充，返回填充后的字符串。应用案例与实例 /左填充。var str = 12356a;var str1 = AppKit.lpad(str,10,0);alert(str1);/“000012356a”1.1.29 AppKit.rpad方法参数描述rpad(str,len,

16、pad)str:待填充字符串。len:填充长度。pad:填充字符。右填充，返回填充后的字符串。应用案例与实例 /右填充。var str = 12356a;var str1 = AppKit.rpad(str,10,0);alert(str1);/“12356a0000”1.1.30 AppKit.trim方法参数描述trim(text)text:字符串。消除字符串首部和尾部的空格，返回处理后的字符串。应用案例与实例 /消除空格。var str = 1235 6a ;var str1 = AppKit. trim (str);alert(str1);/“1235 6a”1.1.31 AppKit

17、.tobeanstring方法参数描述tobeanstring(bean,json)bean:对象。json:json对象。将json对象转换成带bean名称的字符串，在savesession时，经常要使用直接保存到对应bean属性应用案例与实例 /将cardinfo转换成CardInfoBean对象的字符串。var cardinfo = ; /存储处理后的磁条卡信息cardinfo.track1 = 1234;cardinfo.track2 = 6789var qstr = AppKit.tobeanstring(CardInfoBean,cardinfo);alert(qstr);/“Ca

18、rdInfoBean.track1=1234& CardInfoBean.track2=6789”1.2 ajax.js 通过参考Prototype框架重写的轻量级Ajax框架，包括建立ajax异步连接的Ajax.Request类、Dom文档操作的Ajax.Dom类以及节点对象事件管理类等等。1.2.1 常用函数 $()函数功能描述 $() 方法是在DOM中使用过于频繁的 document.getElementById() 方法的一个便利的简写，就像这个DOM方法一样，这个方法返回参数传入的id的那个元素。比起DOM中的方法，这个更胜一筹。你可以传入多个id作为参数然后 $()

19、返回一个带有所有要求的元素的一个 Array 对象。另外一个好处是，这个函数能传入用string表示的对象ID，也可以传入对象本身，这样，在建立其它能传两种类型的参数的函数时非常有用。应用案例与实例 Test Page function test1()var d = $(myDiv);alert(d.innerHTML);function test2()var divs = $(myDiv,myOtherDiv);for(i=0; idivs.length; i+)alert(divsi.innerHTML);This is a paragraphThis is another paragra

20、ph $A()函数功能描述 $A()函数能把它接收到的单个的参数转换成一个Array对象。这个方法，结合被本类库扩展了的Array类，能方便的把任何的可枚举列表转换成或拷贝到一个Array对象。一个推荐的用法就是把DOM Node Lists转换成一个普通的Array对象，从而更有效率的进行遍历，请看下面的例子。应用案例与实例 function showOptions() var someNodeList = $(lstEmployees).getElementsByTagName(option); var nodes = $A(someNodeList); nodes.each

21、(function(node) alert(node.nodeName + : + node.innerHTML); ); Buchanan, Steven Callahan, Laura Davolio, Nancy Try.these()函数功能描述 Try.these() 方法使得实现当你想调用不同的方法直到其中的一个成功正常的这种需求变得非常容易， 他把一系列的方法作为参数并且按顺序的一个一个的执行这些方法直到其中的一个成功执行，返回成功执行的那个方法的返回值。在下面的例子中， xmlNode.text在一些浏览器中好用，但是xmlNode.text Content在另

22、一些浏览器中正常工作。使用Try.these()方法我们可以得到正常工作的那个方法的返回值。应用案例与实例 function getXmlNodeValue(xmlNode)return Try.these(function() return xmlNode.text;, function() return xmlNode.textContent;); 1.2.2 对Object的扩展方法参数描述extend(destination,source)destination:任何对象source:任何对象提供一种通过拷贝所有源对象属性和函数到目标函数实现继承的方法。toJSON()(none)将对

23、象转换为JSON对象。toQueryString()(none)将对象转换为URL的查询字符串(query string)返回。1.2.3 对Function扩展方法参数描述bind(object)object:拥有方法的对象返回function的实例，这个实例和源function的结构一样，但是它已被绑定给了参数中提供的object，就是说，function中的this指针指向参数object。1.2.4 对 Array的扩展方法参数描述each(func,object)func:函数object: 调用函数的对象each是一个集合迭代函数，依次将数组中的数据传递给函数并执行。1.2.5 对

24、String的扩展方法参数描述stripTags()(none)返回一个把所有的HTML或XML标记都移除的字符串。escapeHTML()(none)返回一个把所有的HTML标记合适的转义掉的字符串。unescapeHTML()(none)escapeHTML()的反转。1.2.6 DOM扩展方法参数描述getElementsByClassName(className)className:元素的类名返回文档的元素中所有Class属性为指定值的Element数组。1.2.7 Event扩展方法参数描述element(event)event:一个事件对象返回事件源对象。observe(eleme

25、nt,name,observer,useCapture)evement:对象or :事件类型(像click，load，等等)observer:事件处理函数。useCapture:是否在获取到事件处理。ture - 在事件获取时处理false - 在排序事件后处理为对象的某一个事件增加一个处理函数。stopObserving(element,name,observer,useCapture)element:对象or idname:事件名称(象click，load，等等)observer:事件处理函数。useCapture:是否在获取到事件处理。ture - 在事件获取时处理fals

26、e - 在排序事件后处理和上面的函数相反。1.2.8 在Ajax.js中定义的对象和类 Class类功能描述 在这个程序包中Class 对象在声明其他的类时候被用到。用这个对象声明类使得新类支持initialize() 方法，他起构造方法的作用。方法列表方法参数描述create(*)(任何对象)定义新类的构造方法。应用案例与实例 /declaring the class var MySampleClass = Class.create(); /defining the rest of the class implmentation MySampleCtotype

27、= initialize: function(message) this.message = message; ,showMessage: function(ajaxResponse) alert(this.message); ;/now, lets instantiate and use one object var myTalker = new MySampleClass(hi there.); myTalker.showMessage(); /displays alert Ajax.Request类功能描述 建立Ajax连接。属性列表属性类型默认值描述_argsObject

28、undefined保存连接参数，参数包括：method - get/post连接方式parameters - 请求参数数据postBody - post请求的数据文本asynchronous - 指定此请求是否为异步方式requestHeaders - http请求头参数onSuccess - 设置XMLHTTP请求成功后的回调事件。onFailure -设置XMLHTTP请求失败后的回调事件。oncomplate -设置XMLHTTP请求完成后的回调事件。_reqObjectundefinedXMLHTTP请求对象。方法列表方法参数描述initialize(arg,url)arg:连接参数u

29、rl:URL地址保存连接参数到_args属性中，调用内部方法create创建XMLHTTP对象，再调用connect方法进行连接。respondprocess()(none)数据接收完毕后的处理函数，调用回调函数。应用案例与实例 /建立XMLHTTP连接，设置连接URL为/asynlogin.action，连接方式为get，/连接参数为空，请求完成后回调函数为onLogin，指定此请求是异步方式。request=new Ajax.Request(/asynlogin.action,method:get,parameters:,onComplete:onLogin,asynchronous:tr

30、ue); /定义请求完成后的回调函数。function onLogin(req)var ret=eval(req.responseText); if(!ret.retcode) window.disableoverfwd=target:parent.location,link:/loginerror.o; device.execute(Card,disable); Ajax.Timer类功能描述 Ajax计时器类，用于在一段时间后执行某函数。方法列表方法参数描述initialize(callback,time,loop)callback:回调函数 time:时间间隔 loop:循

31、环标志对象创建时调用，用于设置计时器参数，包括时间间隔，循环标志和回调函数，默认循环标志为ture。start()(none)启动计时器，计时结束后调用内部方法onTimer，并重新计时。onTimer()(none)调用回调函数，若循环标志为false，则关闭计时器。应用案例与实例 /3s后执行function()函数。(new Ajax.Timer(function() device.execute(Card,enable);,3,false).start(); Ajax.Dom类功能描述 DOM文档操作类。方法列表方法参数描述toggle()(none)元素显示开关。hid

32、e()(none)隐藏元素。show()(none)显示元素。append(parentElement,name,text,properties)parentElement:元素标签的父节点name:元素类型名称text:标签文本properties:标签参数对象往指定节点中添加一个子节点。remove(name)name:元素名移除指定元素。getHeight(name)name:元素名获取元素高度，以像素为单位。hasClassName(name,class)name:元素名class:类名判断元素的class属性是否为指定名称。addClassName(name,class)name:元

33、素名class:类名往元素中添加class属性，属性值为传入的类名。removeClassName(name,class)name:元素名class:类名移除元素的class属性值。getElementsByClassName(class)class:类名返回文档的Elements中所有Class属性为指定值的Element数组。setStyle (element,style,property)element:元素名style:样式属性property:属性值设置元素样式。getStyle (name,style)name：元素名style：样式属性获取元素属性。 Ajax.En

34、v类功能描述 查看浏览器类型。方法列表方法参数描述Env(type)type：浏览器类型，取值ie/ns判断浏览器是否是IE浏览器或者Netscape浏览器。 Ajax.Event类功能描述 Ajax元素事件处理类，继承Events中的所有方法。 Ajax.ElementEventManager类功能描述 元素对象事件管理类。方法列表方法参数描述createElementEvent(id, parentElement,name)id:标签id属性值。parentElement:元素标签的父节点。name:元素类型名称在指定元素节点下创建一个元素。如果没有给出pare

35、ntElemet那么将默认为document.body，没有给出name则默认为div。bindEventListener(id,property)id:事件所有者。property:产生事件的属性。为对象的指定属性的property change事件添加一个事件处理函数。notifyListeners(property)property:产生事件的属性值检测到事件，执行事件处理函数中的事件处理函数。addListener(id,listener)id:事件所有者。listener:事件处理函数。添加一个事件处理函数到事件列表中。removeListener(id)id:事件所有者。删除事件列

36、表中的指定事件所有者的事件处理函数。1.3 base64.js功能描述 BASE64编码和解码。1.3.1 方法列表方法参数描述Base64.encode(input)input:待转换成BASE64编码的字符串。将数据input编码成BASE64编码，并返回编码后的结果。Base64.decode(input)input:待解码的字符串。和上面的函数相反。应用案例与实例 /BASE64编码和解码var endata = Base64.encode(Test);alert(endata);/ VGVzdA=var dedata = Base64.decode(VGVzdA=);alert(de

37、data);/ Test1.4 common.js功能描述 获取国际化资源和设备错误处理方法。1.4.1 获取国际化资源方法参数描述Locale.getButton (btnName)Locale.getLabel (labelName)Locale.getMessage(messageName)btnName、labelName、messageName:对应perties中name值。从perties中的国际化资源中获取对应的value。Locale.getDevName(devName)devName:perties中对应的

38、设备名。从perties中的国际化资源中获取sys.dev. devName对应的value。应用案例与实例 /设置当前的语言为chinesealert(message:+Locale.getMessage(mon.confirm);/“确定”alert(labal:+Locale.getLabel(mon.confirm);/“确定”alert(button:+Locale.getButton(mon.confirm);/“确定”alert(devname:+Locale.getDevName(magcard);/“读卡器”1.4.2 获取系统参数方法参数描述Sys.E

39、rrorHandlerPage常量，页面出错js错误异常的统一处理界面配置（error.jsp）。Sys.getSysParam (paraName)paraName:系统参数名。获取系统参数。Sys.getAppHeight()获取Tpl.AppHeight配置值。Sys.getAppWidth()获取Tpl.AppWidth配置值。Sys.getTplViewBase()获取Tpl.View.Base配置值。Sys.getSoundPath()返回当前应用路径+在perties中获取到的Tpl.SoundPath配置值。Sys.getAppBgColor()获取Tpl

40、.AppBgColor配置值。Sys.getAppTimeOut()获取Tpl.AppTimeOut配置值。Sys.getServiceInfo()返回系统对象信息。Sys.getDevInfo()获取在devconfig.xml中配置的设备对象信息。Sys.getDevStatInfo()获取设备状态信息。Sys.getReceiptStatus()获取凭条打印机状态。功能描述 获取系统参数。应用案例与实例 alert(Sys.getAppHeight=+Sys.getAppHeight();/Sys.getAppHeight=1024alert(Sys.getAppWidth=+Sys.g

41、etAppWidth();/Sys.getAppWidth=1280alert(Sys.getTplViewBase=+Sys.getTplViewBase();/Sys.getTplViewBase=/rtl/ Sys.getSoundPath=http:/localhost:8080/app/local/chinese/sound/alert(Sys.getSoundPath=+Sys.getSoundPath();/ Sys.getAppBgColor=#0446a7alert(Sys.getAppBgColor=+Sys.getAppBgColor();alert(Sys.getAppTimeOut=+Sys.getAppTimeOut();/Sys.getAppTimeOut=150/ Sys.getServiceInfo=defaultLanguage:chinese,curLanguage:chinesealert(Sys.getServi