文档库 最新最全的文档下载
当前位置:文档库 › 如何在 JavaScript 对象中嵌入私有成员

如何在 JavaScript 对象中嵌入私有成员

如何在 JavaScript 对象中嵌入私有成员
如何在 JavaScript 对象中嵌入私有成员

最近,我开发一个项目Angular Cloud Data Connector, 帮助Angular开发者使用云数据,特别是 Azure移动服务, 使用WEB标准,像索引数据库(indexed DB)。我尝试建立一种方式,使得JavaScript开发者能将私有成员嵌入到一个对象中。

我解决这个问题的技术用到了我命名的闭包空间(closure space)。在这篇入门文章中,我要分享的是如何在你的项目中用它,及它对主流浏览器的性能和内存的影响。

在深入学习前,咱们先说下,你为什么需要用到私有成员(private members),还有一种替代方式来模拟私有成员。

1. 为何要用私有成员(Private Members)

当你用JavaScript 创建一个对象时,可以声明值成员(value members)。如果你打算控制对它们的读/写访问操作,可以如下声明:

这样实现,你能完全控制读和写操作。问题在于_property 成员仍然可以直接访问和修改。

这也就是为何我们需要更加稳定可靠的方式,声明私有成员,它智能通过对象的方法来访问。

2. 使用闭包空间(Closure Space)

解决方法是使用闭包空间。每当内部函数(inner fanction) 访问来自外部函数作用域的变量时,浏览器为你分配一段内存空间。有时很取巧,不过就我们的题目来讲,这算是一个完美的解决方案。

示例中,createProperty 函数有一个currentValue 变量,存在get 和set 方法。此变量会保存到get 和set 函数的闭包空间中。现在,只有这两个函数能看到和更新 currentValue 变量! 任务完成!

唯一需要警惕caveat,警告,注意)的是源值(myVar) 仍可访问。下面给出另一个更健壮的版本(保护myVar 变量):

采用该函数, 即便源值都销毁(destructed,注:意思是不能直接赋值)了。到此大功告成了!

3. 性能考虑Performance Considerations

现在咱们看看性能。

很明显,比起一个简单的变量,闭包空间,甚或(对象)属性要慢的多,且更消耗资源。这就是本文更多关注普通方式和闭包空间机制差异的原因。

为证明闭包空间机制并不比标准方式更消耗资源,我写了下面代码做个基准测试:

我创建了一百万个对象,都有属性成员。要完成下面三个测试:?执行1百万次随机访问属性。

?执行1百万次随机访问闭包空间实现版本。

?执行1百万次随机访问常规get/set实现版本。

测试结果参见下面表格和图表:

我们发现,闭包空间实现总是快于常规实现,根据浏览器的不同,还可以做进一步的性能优化。

Chrome 上的性能表现低于预期。或许存在bug,因此,为确认(存在bug),我联系了Google 项目组,描述发生的症状。还有,如果你打算测试在Microsoft Edge—微软新发布的浏览器,在windows10 中默认安装—中的性能表现,你可以点击下载。

然而,如果仔细研究,你会发现,使用闭包空间或属性比直接访问变量成员要10倍左右。因此,使用要恰当且谨慎。

4. 内存占用(Memory Footprint)

我们也得验证该技术不会消耗过多内存。为测试内存占用基准情况,我写了下面代码段:直接属性引用版本(Reference Code)

常规方式版本(Regular Way,get/set)

闭包空间版本(Closure Space Version)

之后,我(在三个主流浏览器上)运行所有的三段代码,启动(浏览器)内嵌的内存性能分析器(本示例中使用F12 工具条):

我计算机上运行的结果如下图表:

就闭包空间和常规方式,只有Chrome上,闭包空间(内存占用)表现稍好,在IE11 和Firefox上占用内存反而增多,但是浏览器的比较结果e—对于现代浏览器,用户很可能不会在意这点差别。

更多JavaScript 实践

或许你会吃惊,微软提供了一批有关开源Javascript 主题的免费学习材料,我们正在发起一个任务,关于创建更多Microsoft Edge 来临系列。查看我的文章:

?基于 HTML5 和Babylon.JS开发WebGL 3D 基础

?构建单页面应用,基于https://www.wendangku.net/doc/cf16100661.html, 和AngularJS

?HTML 高级图像技术

或者我们团队系列:

?HTML/JavaScript性能优化使用技巧(该系列有7部分,从响应式设计到休闲游戏的性能优化)

?现代Web 平台快速起步 ( HTML, CSS, and JS基础)

?开发通用的Windows Apps,使用HTML 和JavaScript 快速起步 (使用你自己的JS构建app)

以及一些免费工具:Visual Studio 社区,Azure 试用版和跨浏览器测试工具用于Mac, Linux, 或者Windows。

Javascript前台捕获浏览器关闭事件,后台处理一些善后工作

Javascript前台捕获浏览器关闭事件,后台处理一些善后工作 1.使用onbeforeunload 事件捕获浏览器关闭事件 IE和火狐都支持onbeforeunload事件,但是opera不支持。 注意:不仅关闭浏览器时会触发onbeforeunload事件,刷新等事件也会触发onbeforeunload事件。 2.事件注册方法 3.使用Ajax技术向服务器异步发送需要做的善后工作 这里以登陆为例:当用户关闭浏览器时,需要把用户登陆的状态修改为‘已退出’。由于用户登陆的状态存放在服务器的数据库中,所有必需在客户端捕获浏览器关闭动作,在浏览器关闭之前,向服务器发送一个请求,当然这个的请求是异步发送的(Ajax技术);服务器收到请求后,把当前用户的登陆状态修改为‘已退出’。 function CloseBrowse()//用户关闭浏览器 { var n = window.event.screenX - window.screenLeft; var b = n > document.documentElement.scrollWidth - 20; //可以捕获点击小差和 Alt+F4 时浏览器关闭的情况,但是不能捕获在多窗口浏览模式下,用户点多窗口模式的小差关闭浏览器的情况 if (b && window.event.clientY < 0 || window.event.altKey) { var url = "Service.asmx/UpdateLoginState"; UpdateLoginState(url); } } //使用Ajax 向服务器发送异步请求,要求服务器修改登录状态 function UpdateLoginState() { var url = "Service.asmx/UpdateLoginState"; SendRequestToWebService(url); } function SendRequestToWebService(url){ createXmlhttp(); xmlhttp.open("POST", url, true); //xmlhttp.onreadystatechange = handleStateChange; xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;"); xmlhttp.send(); } //创建XMLHttpRequest对象 function createXmlhttp() {

Javascript鼠标触发事件大全

Javascript鼠标事件大全 一般事件 事件浏览器支持描述 onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick IE4|N4|O 鼠标双击事件onMouseDown IE4|N4|O 鼠标上的按钮被按下了onMouseUp IE4|N4|O 鼠标按下后,松开时激发的事件 onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove IE4|N4|O 鼠标移动时触发的事件 onMouseOut IE4|N3|O3 当鼠标离开某对象范围时触发的事件 onKeyPress IE4|N4|O 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象] onKeyDown IE4|N4|O 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象] onKeyUp IE4|N4|O 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象] 页面相关事件 事件浏览器支持描述 onAbort IE4|N3|O 图片在下载时被用户中断 onBeforeUnload IE4|N|O 当前页面的内容将要被改变时触发的事件 onError IE4|N3|O 捕抓当前页面因为某种原因而出现的错误,如脚本错误与外部数据引用的错误 onLoad IE3|N2|O3 页面内空完成传送到浏览器时触发的事件,包括外部文件引入完成 onMove IE|N4|O 浏览器的窗口被移动时触发的事件onResize IE4|N4|O 当浏览器的窗口大小被改变时触发

JavaScript事件

我的记录(JavaScript事件)JavaScript 事件冒泡简介及应用实例 一、什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。 打个比方说:你在地方法院要上诉一件案子,如果地方没有处理此类案件的法院,地方相关部门会帮你继续往上级法院上诉,比如从市级到省级,直至到中央法院,最终使你的案件得以处理。 二、事件冒泡有什么作用 (1)事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。 【集中处理例子】

控制台输出: keydown keypress keyup 2、浏览器的兼容性

(1)FireFox、Opera、Chrome 事件对应的函数有一个隐藏的变量e,表示发生事件。 e有一个属性e.which指示哪个键被按下,给出该键的索引值(按键码)。 静态函数String.fromCharCode()可以把索引值(按键码)转化成该键对应的的字符。eg: [html]view plaincopyprint? 1. 2. FireFox、Opera、Chrome中输入:a 输出:按键码:97 字符:a (2)IE IE不需要e变量,window.event表示发生事件。 window.event有一个属性window.event.keyCode指示哪个键被按下,给出该键的索引值(按键码)。 静态函数String.fromCharCode()可以把索引值(按键码)转化成该键对应的的字符。eg: [html]view plaincopyprint?

JavaScript试题集

.单选题 1. 我们可以在下列哪个HTML元素中放置javascript代码? A.< script > B.< javascript > C.< js > D.< scripting > ★标准答案:A 2. 预测以下代码片段的输出结果: var str ; alert(typeof str); A.. string ; B.. undefined; C.. object ; D.. String; ★标准答案:B 3. 下列哪个不是Javascript中注释的正确写法:() A.< !-- …… -- > B. *……*/ D. /* …… */ ★标准答案:A 4. 以下哪项不属于Javascript的特征? 是一种脚本语言 是事件驱动的 代码需要编译以后才能执行

是独立于平台的 ★标准答案:C 5. 关于以下两个陈述的描述中,正确的是:() 陈述1:Javascript是弱类型语言 陈述2:Javascript的常用类型包括:int、string、boolean A.陈述1正确,陈述2错误 B.陈述1错误,陈述2正确 C.两个陈述都正确 D.两个陈述都错误 ★标准答案:A 6. 阅读下面的JavaScript代码: < HTML > < BODY > < SCRIPT LANGUAGE="JavaScript" > function f(y) { var x=y*y; return x; } for(x=0;x< 5;x++) { y=f(x); (y); } < /SCRIPT > < /BODY > < /HTML > 输出结果是()。 1 2 3 4 1 4 9 16 1 4 9 16 25 D.以上答案都不对 ★标准答案:B 7. 在Javascript中,需要声明一个整数类型的变量num,以下哪个语句能实现上述要求? num;

关于javascript事件

A 事件流(event flow ) 事件模型分为两种:冒泡型事件、捕获型事件。 冒泡型(dubbed bubbling )事件:指事件按照从最精确的对象到最不精确的对象的顺序逐一触发。 捕获型(event capturing )事件:它与冒泡型事件相反,指事件按照从最不精确的对象到最精确的对象的顺序逐一触发。 捕获型事件也被称作自顶向下(DOM层次)的事件模型。 由于IE 浏览器不支持捕获型事件,因此并没有被广泛应用。 B 事件监听 i > 通用监听方法 示例一:

给浏览器添加监听方法,分为两种:IE 中的监听方法、标准DOM 的监听方法。 ii > IE 中的监听方法 在IE 浏览器中,每个元素都有两个方法来处理事件的监听。分别是:attachEvent( )和detachEvent( )。 附加事件方法:[object].atta chEvent(“事件名”,方法名); 分离事件方法:[object].detachEvent(“事件名”,方法名); 如:o_p.detachEvent(“onclick”,click_A); 示例:

●使用这种方式可以为同一元素添加多个监听函数; ●在IE 浏览器中,函数的执行顺序与函数的添加顺序相反; ●在IE 浏览器中,虽然函数有先后执行顺序,但都会同时调用; iii > 标准DOM 的监听方法 在使用标准DOM 的浏览器中,每个元素也有两个方法来处理事件的监听。分别是:addEventListener( )和removeEventListener( )。

添加事件监听方法:[object].addEventListener(“事件名”,方法名,事件模型); 移除事件监听方法:[object].removeEventListener(“事件名”,方法名,事件模型); 注意: 这里的“事件名”不能带on ,如:click(如果是onclick 则错误!) “事件模型”为boolean 类型,通常设置为false ,即“冒泡型”事件。(如果是true 则为“捕获型”事件) 示例:

11讲_JavaScript事件分析

Company name WEB 前端开发技术 HTML JavaScript CSS WEB 前端开发技术 第11章JavaScript 事件分析 计算机科学与技术系

Web前端开发技术主要内容 计算机科学与技术系 ?掌握事件、事件类型的概念 ?掌握事件处理的机制 ?掌握事件名称与句柄的关系 ?学会编写各类的事件响应程序

计算机科学与技术系 Web前端开发技术11.1 事件编程 事件编程:让用户不仅能够浏览页面中的内容,而且还可以和页面元素进行交互。 事件-事件是可以被JavaScript侦测到的行为(ACTION)。 事件源Window Form Mouse key 事件 单击事件 双击事件 事件句柄 Onclick ondblclick 编写事件 处理代码

Web 前端开发技术事件驱动案例导入 计算机科学与技术系 事件处理 你好!这是一个简单事件处理程序!

计算机科学与技术系 Web 前端开发技术 11.1 事件编程(续) 1.网页访问中常见的事件 鼠标单击:例如单击button 、选中checkbo x 和radio 等元素;鼠标进入、悬浮或退出页面的某个热点:例如鼠标停在一个图片上方或者进入table 的范围; 键盘按键:当按下按键或释放按键时;页面或图像载入:例如页面body 被加载时;在表单中选取输入框或改变输入框中文本的内容:例如选中或修改了文本框中的内容;确认表单:例如当准备提交表单的内容。 事件类型:1.鼠标事件2.键盘事件3.浏览器事件

Javascript事件

获取事件对象的全家 事件对象的获取很简单,很久前我们就知道IE中事件对象是作为全局对象( window.event )存在的,Firefox中则是做为句柄( handler )的第一个参数传入内的。所以一行代码就可以搞定 view sourceprint? 1var evt = window.event || arguments[0]; 下面分三种添加事件的方式讨论,你也许会看到以前没有看到过的获取方式。 1,第一种添加事件的方式,直接在html的属性中写JS代码 view sourceprint? 1

Div1 Element
大概这是上世纪90年代的写法,那时候直接把js代码写在网页中很普遍,也许那时候的js并不太重要,只是用来做做验证或一些花哨的效果而已。如何在这种添加事件方式下获取到事件对象?IE中很简单,因为event是作为全局对象的,所以直接使用event即可,如下 view sourceprint? 1
Div1 Element
点击该Div后,IE中会弹出'click'字符的信息框。说明事件对象获取到了,如果在 Opera/Safari/Chrome 中也测试了,会发现效果和IE一样,说明Opera/Safari/Chrome 中也支持IE方式( window.event )获取事件对象。 Firefox中会报错,提示:window.event is undefined,说明Firefox不支持IE方式获取事件对象而是以句柄的第一个参数传入的,文章开头意见提到了。 上面的用window.event 来获取事件对象,其实window可以省略的,就像使用alert而不是window.alert一样。如 view sourceprint? 1
Div1 Element
在IE/Opera/Safari/Chrome 中测试,和刚刚不会有什么区别。在Firefox中再测,会有个惊喜,你会发现居然弹出的是"click"信息框,而不是"undefined"。 两次测试区别仅仅一个用window.event.type,一个用event.type。这个问题下面详细讨论。

javascript试题

在HTML中,表单中的input元素的()属性用于指定表单元素的名称。 A. value B. name C. type D. caption 当表单各项填写完毕,鼠标单击提交按钮时可以触发()事件。 A. onenter B. onsubmit C. onmouseDrag D. onmouseOver 分析下面的JavaScript代码段,输出结果是()。 var a=15.59; document.write(Math.round(a)); A. 15 B. 16 C. 15.5 D. 15.4 要求用JavaScript实现下面的功能:在一个文本框中内容发生改变后,单击页面的其他部分将弹出一个消息框显示文本框中的内容。下面语句正确的是()。 A. B. C. D. 假定今天是2006年4月1日星期六,请问下列JavaScript代码在页面上的输出结果是()。var time=new Date(); document.write(time.getDate()); A. 2006 B. 4 C. 1 D. 6 下面描述正确的是()。 A. switch语句用于重复执行一个语句块的操作 B. switch语句根据表达式的值执行若干语句块之一,如果没有匹配项,则执行默认语句块中的语句 C. switch语句表达式中的值不能与后面case语句中的常量相匹配时将出现运行错误 D. switch语句又叫循环语句 分析如下JavaScript代码,b的值为()。 var a=1.5 ,b; b=parseInt(a); A. 2 B. 0.5 C. 1 D. 1.5 在HTML中,使用JavaScript中的浏览器对象实现在当前窗口打开链接"https://www.wendangku.net/doc/cf16100661.html,"的javascript语句是()。 A. window.open("https://www.wendangku.net/doc/cf16100661.html,"); B. document.write("https://www.wendangku.net/doc/cf16100661.html,"); C. location.replace("https://www.wendangku.net/doc/cf16100661.html,"); D. location.reload("https://www.wendangku.net/doc/cf16100661.html,"); 如果今天是2006年5月14日,分析下列JavaScript代码运行后,在网页上显示()。 var now = new Date(); var year = now.getYear(); var month = now.getMonth(); var date = now.getDate(); document.write(year+" "+month+" "+date); A. 2006 05 14 B. 2006 5 14 C. 2006 04 14 D. 2006 4 14 在HTML中有如下代码,运行后页面显示结果为()。

javascript的三种事件模型

事件使得客户端的 JavaScript 有机会被激活,并得以运行。在一个 Web 页面装载之后,运行脚本的唯一方式,就是响应系统或者用户的动作。虽然从第一个支持脚本编程的浏览器面世以来,简单的事件被实现为 JavaScript 的一部分;但是大多数最近出现的浏览器都实现了强壮的事件模型,使脚本可以更加智能地处理事件。现在的问题在于:为了支持各种浏览器,您必须和多个先进的事件模型做斗争,准确地说,是三个。 这三个事件模型分别和下面的文档对象模型(Document Object Model,即 DOM)三巨头结盟:Netscape Navigator 4 (NN4),Macintosh 和 Windows 系统的Internet Explorer 4 及其更新版本(IE4+),以及在 Safari 中得到实现的 W3C DOM。尽管这些模型之间有些地方存在一些本质的差别,但是在一些简易的JavaScript 的帮助下,它们都可以同时适用于同一个文档。本文主要着眼于相互冲突的事件模型中的两个关键方面: * 把一个事件和 HTML 元素绑定起来的方法。 * 在事件被触发后如何对之进行处理。 事件绑定的方法 事件绑定是指构造一个响应系统或者用户动作的 HTML 元素的过程。在不同的浏览器版本中,有不少于五种事件绑定技术。下面我们快速地介绍一下这些技术。 事件绑定方法I:绑定元素属性 最简单和向后兼容性最好的事件绑定方法是把事件绑定到元素标识的属性。事件属性名称由事件类型外加一个“on”前缀构成。尽管HTML属性并不是大小写敏感的,人们还是定义了一个规则,规定事件类型的每一个“词”的首字母大写,比如 onClick 和 onMouseOver。这些属性也被称为事件处理器,因为它们指示了元素如何“处理”特定的事件类型。

javaScript,页面自动加载事件详解

javaScript,页面自动加载事件详解 篇一:javascript 动态添加事件 往往我们需要在 JS 中动态添加事件,这就涉及到浏览器兼容性问题了,以下谈及的几 种方法,我们也常常混合使用。 方法一、setAttribute var obj = document.getElementById("obj"); obj.setAttribute("onclick", "javascript:alert('测试');"); 这里利用 setAttribute 指定 onclick 属性,简单,很好理解, 但是: IE 不支持, IE 并不是不支持 setAttribute 这个函数, 而是不支持用 setAttribute 设 置某些属性, 包括对象属性、 集合属性、 事件属性, 也就是说用 setAttribute 设置 style、 onclick、 onmouseover 这些属性在 IE 中是行不通的。 LEO:在 IE6 下尝试成功 方法二、用 attachEvent 和 addEventListener IE 支持 attachEvent obj.attachEvent("onclick", Foo); function Foo() { alert("测试"); } 也可写在一起 obj.attachEvent("onclick", function(){alert("测试");}); 其它浏览器支持 addEventListener obj.addEventListener("click", Foo, false); function Foo() { alert("测试"); } 同样也可写在一起 obj.addEventListener("click", function(){alert("测试");}, false); 注意 attachEvent 的事件带 on,如 onclick,而 addEventListener 不带 on,如 click。 顺便说一下 addEventListener 的第三个参数(虽然很少用) useCapture - 如果为 true, 则 useCapture 指示用户希望启动捕获。启动捕获后,所有指定类型的事件将在被指派到树中 其下面的任何 EventTargets 之前指派给已注册的 EventListener。 正在通过树向上 bubbling 的 事件将不触发指定的使用捕获的 EventListener。 1 / 11

JavaScript事件处理

JavaScript事件处理,使用框架和Cookies 2008-01-04 20:53 事件处理 事件处理概述 事件处理是对象化编程的一个很重要的环节,没有了事件处理,程序就会变得很死,缺乏灵活性。事件处理的过程可以这样表示:发生事件 - 启动事件处理程序 - 事件处理程序作出反应。其中,要使事件处理程序能够启动,必须先告诉对象,如果发生了什么事情,要启动什么处理程序,否则这个流程就不能进行下去。事件的处理程序可以是任意 JavaScript 语句,但是我们一般用特定的自定义函数(function)来处理事情。 指定事件处理程序 指定事件处理程序有三种方法: 方法一直接在 HTML 标记中指定。这种方法是用得最普遍的。方法是: <标记 ... ... 事件="事件处理程序" [事件="事件处理程序" ...]> 让我们来看看例子: 这样的定义标记,能使文档读取完毕的时候弹出一个对话框,写着“网页读取完成,请慢慢欣赏”;在用户退出文档(或者关闭窗口,或者到另一个页面去)的时候弹出“再见”。 方法二编写特定对象特定事件的 JavaScript。这种方法用得比较少,但是在某些场合还是很好用的。方法是: 例: 方法三在 JavaScript 中说明。方法: <事件主角 - 对象>.<事件> = <事件处理程序>;

JAVASCRIPT常用对象参考

JavaScript常用对象参考 分类:WEB2008-08-2116:09160人阅读评论(0)收藏举报 JavaScript常用对象参考 Math document body selection window screen location history Date String Event Math对象 E返回欧拉常数e的值 LN1010的自然对数的值 LN22的自然对数的值 LOG2E基数为2的e的对数的值 LOG10E基数为10的e的对数的值 PI圆周率pai的值:3.14159265358979 SQRT1_2返回0.5的平方根 SQRT2返回2的平方根 abs(number)计算number的绝对值 cos(number)计算余弦值 acos(number)计算反余弦值 sin(number)计算正弦值 asin(number)计算反正弦值 tan(number)计算正切值 atan(number)计算反正切值 atan2(x,y)根据指定的坐标返回一个弧度值 ceil(number)返回大于或等于number的整数 floor(number)返回小于或等于number的整数 exp(value)计算以e为基数的value次方的值 log(value)是exp(value)的反方法 max(num1,num2,…)返回两个或多个参数中的最大值 min(num1,num2,…)返回两个或多个参数中的最小值 pow(m,n)计算m的n次方 random()生成0到1的随机数[0,1).生成n到m之间的随机数n+(m-n)*Math.random() round(number)取整(四舍五入) sqrt(number)开平方运算 document write() writeln() open()"打开文档以收集write或writeln方法的输 出:document.open([sURL][,sName][,sFeatures][bReplace]) sName:_blank,_media,_parent,_search,_self,_top sURL:可选项,字符串表达式,用于指定打开文档或窗口的URL地址sFeatures:可选项,字符串表达式,用于指定打开窗口的属性sReplace:true or false;" sFeatures:fullscreen,height,width,left,top,location,resizable,scrollbars,status,toolbar close()关闭输出流 createElement(tag)根据指定标记创建一个HTML标签getElementById(id)获得指定id的HTML元素removeChild(e)移除一个指定的子元素e replaceChild(new,e ) 用new元素替换子元素e appendChild(e)增加一个子元素e(最后) insertBefore(new,e ) 在子元素e前面插入一个new元素

javascript自定义事件模型及实现

在js世界里,事件可谓是个大课题,在此讨论的自定义事件也只是冰山一角。 试想这样的场景,页面中有A、B两个模块,B模块显示的时候,会同时隐藏A模块。按照这个流程的代码,经常会是这样的代码: 这样代码的问题在于太过于流程化,B模块内置了对A模块的依赖,耦合度高。如果要让B模块独处到另外的页面工作,就会找不到A模块而无法使用。又或者需求变化,B模块显示的时候,同时显示一个新的C模块,那又要去B模块里添加代码,最后B模块只会依赖越来越多,越陷越深,无法自拔啊。 为了让模块间解耦,通常,会把逻辑代码抽离到一个回调函数中,通过配置去指挥代码所需要的处理。

以回调的方式,实现一个原始的类似事件的订阅方式,可以把对外部依赖的代码逻辑通过配置的方式移出模块内,实现上也很简单,可以不依赖于任何机制。 但与此同时,也存在着一定的局限性,比如只能在初始化的时候配置;不能多次添加“监听”;每个需要事件回调的方法都需要添加一个回调事件。 自定义事件 如果以“写分享”这么一个事件来比喻,最开始的那种流程式的方式就好比,分享者每周写了一篇分享,并通过邮件A、B、C等N各人,分享者需要自己维护每个同学的邮件地址。要是有一天,

哪个同事离职了,还要从收件人里把他删掉,分享者跟邮件联系人耦合度很高。 而到了采用回调式的方式,就好比分享者发分享时不再需要记得有哪些人,分享者有一个收件人的群组,每次写完就往这个群组里发,不必再关心群组里有哪些人和那些人的去向。由外部去维护这么一个联系人群组。 但对于时刻想偷懒的人来说,这个还不是最方便了,于是,有了一种新的方式,写好的分享,发表到博客中,有兴趣看分享的人去加关注。于是,就有了下面的故事:

JavaScript试题集7

一. 单选题 1. 我们可以在下列哪个HTML 元素中放置javascript 代码? A.< script > B.< javascript > C.< js > D.< scripting > ★标准答案:A 2. 预测以下代码片段的输出结果: var str ; alert(typeof str); A.. string ; B.. undefined; C.. object ; D.. String; ★标准答案:B 3. 下列哪个不是Javascript 中注释的正确写法:( ) A.< !-- …… -- > B.//…… C./*……*/ D. /* …… */ ★标准答案:A 4. 以下哪项不属于Javascript 的特征? A.Javascript 是一种脚本语言 B.Javascript 是事件驱动的 C.Javascript 代码需要编译以后才能执行 D.Javascript 是独立于平台的 ★标准答案:C 5. 关于以下两个陈述的描述中,正确的是:( ) 陈述1:Javascript 是弱类型语言 陈述2:Javascript 的常用类型包括:int 、string 、boolean A.陈述1正确,陈述2错误 B.陈述1错误,陈述2正确 C.两个陈述都正确 D.两个陈述都错误 ★标准答案:A 6. 阅读下面的JavaScript 代码: < HTML > < BODY > < SCRIPT LANGUAGE="JavaScript" > function f(y) { var x=y*y; return x; } for(x=0;x< 5;x++) { y=f(x); document.writeln(y); } < /SCRIPT > < /BODY > < /HTML > 输出结果是()。 A.0 1 2 3 4 B.0 1 4 9 16 C.0 1 4 9 16 25 D.以上答案都不对 ★标准答案:B 7. 在Javascript 中,需要声明一个整数类型的变量num ,以下 哪个语句能实现上述要求? A.int num;

通过代码实例跟我学JavaScript ——JavaScript事件编程(第1部分)

1.1通过代码实例跟我学JavaScript ——JavaScript事件编程(第1部分)1.1.1JavaScript事件编程 1、HTML标签中的事件 (1)什么是事件? 事件可能是用户在页面中某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键,事件也还可能是Web 浏览器中发生的事情,比如说某个Web 页面加载完成,或者是用户滚动窗口或改变窗口大小、点击一个超链接等。 因此,用户对网页中的标签的一些特定“操作”(这些操作通常直接对应鼠标的动作)和系统的行为统称为事件。 (2)不同的标签有不同类型的事件 在Macromedia Dreamweaver 工具中可以利用动态帮助获得某个HTML标签的事件定义,如下图所示。 (3)事件编程 可以为不同的标签添加相关的事件响应的程序代码,称为事件编程从而可以监听特定事件的发生,并对相关的事件做出响应。 2、事件处理程序的引入——为某个标签绑定事件响应函数 如何使一段JavaScript程序和事件发生联系?一般采用“on事件名”的方式对事件处理

程序进行引入,同时它也是JavaScript规定的对应事件处理程序的句柄(Event Handler)的名字。例如onClick、onFocus、onSubmit等等。可以采用下面的方式来引入事件:(1)第一种引入方式 事件处理程序的句柄名以属性名的形式在HTML文本中某些适当的标记中出现,而对应的属性值是由网页编写者提供的JavaScript程序段(或事件处理函数名),从而实现将HTML 标签与JavaScript语言相对应起来。该方式适用于对事件处理程序的静态设置。 ; (2)第二种引入方式 将事件处理函数名赋给浏览器为网页创建的相应对象的对应属性,该方式适用于对事件处理程序的动态设置。 document.forms[0].userAge.onchange= isNumberInput; 注意:事件处理程序柄的名字是大小写不敏感的。这与HTML文本中对标签记的属性名的松散要求是一致的。 (3)对同一个事件追加多个不同的事件响应函数 前面的两种事件绑定关联的方式,都不支持追加多事件监听响应的功能要求。例如,原本某个标签元素对象已经有了onchange事件监听了,如果还想再追加一个onchange事件监听响应函数,则无法达到。 此时,可以用attachEvent ()(针对IE浏览器)或者addEventListener(针对DOM标准的浏览器)。下面为代码示例; if (target.addEventListener) { target.addEventListener(eventTypeString , eventHandlerFunction, useCapture); } else if (target.attachEvent) { target.attachEvent(eventTypeString , eventHandlerFunction); } else{ window.alert("不能正确地进行事件绑定!"); }

相关文档